From ef6b36855ee3a8a60a0cd5c717cff9904fc277f9 Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Tue, 24 Feb 2026 19:06:19 -0700
Subject: [PATCH] 2026-02-25T02-06-19_auto_memory/memories.db-wal

---
 memory/memories.db-shm                        | Bin 32768 -> 32768 bytes
 memory/memories.db-wal                        | Bin 4972872 -> 4972872 bytes
 skills/astro-portfolio-site/SKILL.md          | 200 +++++++++++++
 .../assets/example_asset.txt                  |  24 ++
 .../references/api_reference.md               |  34 +++
 .../references/design-system.md               | 273 ++++++++++++++++++
 .../references/stack-config.md                | 190 ++++++++++++
 .../astro-portfolio-site/scripts/example.py   |  19 ++
 8 files changed, 740 insertions(+)
 create mode 100644 skills/astro-portfolio-site/SKILL.md
 create mode 100644 skills/astro-portfolio-site/assets/example_asset.txt
 create mode 100644 skills/astro-portfolio-site/references/api_reference.md
 create mode 100644 skills/astro-portfolio-site/references/design-system.md
 create mode 100644 skills/astro-portfolio-site/references/stack-config.md
 create mode 100755 skills/astro-portfolio-site/scripts/example.py

diff --git a/memory/memories.db-shm b/memory/memories.db-shm
index df19ea77c59298a10ad85ac3ecd9eaf1259a292c..00e295922905cee4429442a1e37071c68c2a86db 100644
GIT binary patch
delta 599
zcmb7<Pe{{Y7{{OI`Hi7vG4rxuYVoVcQX$AOiAtv|f}E6DdWjl_X%s=I2-bd;*sX%+
zB2kA*R<qisuQko3m6aa46m{%U;PMnmbm>sv%?@3A;q&l${=EMjM;u3@-Y->@Tah(H
zOypS*q9vQ?%5rs8JW~_s%dQ=6INiVhS9&^iXZ<nrzw`OS5pw7L{%8HIk40~<+FXDH
z*Hgknlm?&5h}`8w17ObvqD8zXtMA<<hi;+cL$wra1p%-R<R+8gI|yJ$8+Js&RWJ<h
zff)D<zJe_H29|8IakaBkx75w>OT84_tDEXW)~L*A@yS`O4E`)k$z{AeOb5}mHQaE3
z<LF&C+Zu}sIfG)m-e_9K)39cKf!Ja~VK2*TF~^%nT>MaX1WVL=_y>=nS);+$oBRY;
zuVqJic?wohY~zNNHIcX7sP<{-=sPPW<M8cT*LIhm!fK7L-Cw|Opu6<iiAsJ2YhfQ^
ztLccuT-JRtNGjCdc~+i_iFLY|ALPduPmS^<%+`snAx^-$bfnwEbFfnLp*td0Qr;qI
yGJ|Il!t>AzCUx$j@B+R(XO_?V*?J_;ki_+4Pc_fNl4iWuZMhyxT1=+D(ftQin!&69

delta 414
zcmZo@U}|V!s+V}A%K!oiybKJC3=9HGnHU&eC^InJTJvCu^23?t<<I$MIA>RSh6gmy
z51wExNve9V;Xndp?tdfz72jAtmuvH8?qZY42e_wCR&&@lxyi|4vWlbIWTDhUlXaZF
zaWXJ80k!%u1Ws;rQl9MR>;sgUuvyE6hZCqYYVrhMp~?HWmuz<PlVAj@+nnIPgas%e
zGFc+z3y?OO>=Zf+NIOlI3o8TCT7t?zRmi{=Xm0srx9~GSS-r^)5sQGd)n=JUGY%lb
zhB0%pU}`<13{X+%=9HvmAhUHQo2BPXHgXc0ye%DMht1??8LNQqSDCyevkl14n!F@S
z0LYiyd?_o52`CV-xg~cU6VTmtn>Q5HF#)BHZ2nYi#t0NyGx<uX9#CMz=1pa6%q$>>
KZQfJq!Uh0;%#()z

diff --git a/memory/memories.db-wal b/memory/memories.db-wal
index 61876fac6f1693139418beca04390da58cdb7ad2..bb4292f5f759a32d385e10526a4d59cf3a2f4b30 100644
GIT binary patch
delta 5337
zcmeHLeRNdinZNJ*-0$z1%p{Yq$s{3x8A5U=KnMXOkt+CwP!w6J9*1NgQ<9mGObDSA
z2)U)4g;rY@U)xgAt<9`mU9oa{-CfWXts+tuyK6m1+iKmOLRouSwQJW8>OOZM8a(}H
z_w1kEncunhz3+3MulK#r$31cU5qbi#(<Lr-!R1}S6<x`dUBy*h&DCAQHC@ZK-GCc(
zOWcqfc1ztdH{zDN6>g<l<yN~<x5kaRwQikT?@n_Y+(vi0JHw5;i6b-jI$^@$F>=<t
zXUWFVYyNuGFaLYN+uvBp&QvQk%5OQY{w&TCuXCAj&I;vLEPL%Y1?iBWKFMXJV>na)
zTefhG@GAM>M;pqIDdcf>`k3B9qAbuYRLS+{{(UDN<gxylnqXX)et-Ig=i4|{ZRAGS
z4ZXteZ0l#%$*Di@+V#+<klOvf@2K{UeAu=?utbs9cv4EjPQEui#Iq-^FX^aQ`p#qD
zmOgsobB1x46ZA%~-qjn;lg4X$)_dhpBBTedR(WpB_6-v)cW*hT-o3UYDsUuBC?hU}
zX~#bA`zw=+Nu_x&*K$XZP;&PMI7$dX6e;(Q-4KGYd3)H|&nJ&Ytdm^R+9ILo?zK6j
zn@Y9CWfQBC7s5yozo|$ixO*+U@J0HJ*sG~pt2BDhpPO{HL4R=m`k(HZ?#VNpj9|2O
zIBgxt+0FCkx37(O+h;jnQ`wguFbsKk8)Gjo-SVDyCO~XEI-(qw_w}|cH+=TOE>76R
z$DxwmM+2mfJIa<ju`Ae-e~8}@9lPR8(f>R*?u&g$a#BM>>HJV30%J3du;0AxJPc#i
zhuNlu&I9BjR=UX9NArKj)>S#9uuFWvyW+;ALCAgH^(&IAiTBglp)oZ)!{;<<K>Ih3
zJ$lz`6~Fe{mpNPb%M1v3$F6sFYesQb>EAhc?t`)K{iC;Hjq^ux8J+H}T<cJC>C&lu
z|8(rWx}Sfy{b#;~l6os=7L0EhQT<Nsyw;)KDlVD)aonNR7q=MCJ?U_q`3$@2$@mon
znEPbBxmvI^5LAtj_5uebgrp|Ypx1(A3W6=LGXsg**#w|fD6i%rlig5g1d)==#Ac)g
zxdqB7?d!vvVSpPcj!3o;0$pG?x}9O>Y)V8MMSyzHfQ%wzB>*x3y#+KX4-BMJgFZ(Q
z1YTfo9TaO-I+&i=fLw$jw)acP3U+W)VtNILpyUTL>xT20Ty|o!py~vaW+*2Ddj$m`
zL!sH%hF#c{NLEu&+dzV%t|Ej@utCU=q|;fHqq5{+qLw|jEm_X)cq$&y2#D1X3_u8<
z-uzU&RfTl-MkK5hfj#t8ye{h7g$&ZE?C?Ng1|blqU<fdn?m?<jHa3SuP(I%bK>~Ll
zk6&#OC}{?pK!AeJo&Dg;$!hlez2X99pVflwqpx&o%voy+DDdR*_-wXqds1f?j>n_r
zAPo+tyYqdc$hn3JC?b<bH`|0|4~Y@B@ag!H04~9X?8F8E3?Q2e4WO{vU`Hvx0Bp*}
z{?t^$4nG}V#9rKyMEacA!tR{eVp-Cb%upU3eNY0rw+2|}aAKM+tk3kNhtSyy5A2R-
z;vESBDv&`GE}Ee7AQHjW0T&KL9>)~vB%bt7jDW%3x>638haiNs_y?Nn$G63xU~3RX
z!+tfKXuxSxfT)7EY0(Z`v|uyT;B?@}@lGCMcy-(6#J{qpo7)rsxrdGKN;a_-&&F59
zL?NV_z>CE{4+2mDq|KS3%(}ibDp<}Qc{UzHze~+ffoy(0lDI+V#hz3?H#mwWMc5z4
zlOdMAO19YI=i+q~r2XH%vX<@Kk_fSrqqqY9xdy$y+D*<W?*d9OnB{O^nc@rx0Li0-
zYM!#dIy-i42q@Z31R9h9@IAQnmwdPRha!;y-0+%!u?40{xUb22bdfn7L>WRp=j_3i
zz>lqdoXKxHzaanHfD+-jnr&0x`o!4ww#3%JBJZx#aj?UWOr2ZwQrDShUtV10?cCzL
zb9n^Oyq#MeFxd-xY(wVv%v*Wg7rtNSy}rl(GrcU*$leQY#RWsY>(Joltt)<c-aEWA
z)&*?)@`U8YXriFUrv_j#o6Dv#zpa_7MSe-|kK$){b$crs%-i8I?%@6N4D;Q~H3M(?
zM2zwmMeLZ7*e8Z}Ol4PbDD>uY_Y_Who$oo$<;sHh<qsU|)Azo0!TF(9TMVgf+`^9g
zS6;Z&50N6bkJB%x5%C0X&@OHt>-r<vVvZ*ZR^82EZfr#1>ND*Amz;>FtI6%8WU8Ii
zw{v_MJE-A{_3%rM?){6FJaD-k)Jqx3_cgZnebI=0<CgC}*Ye?s)4pJt>*CDq>NM$j
z;qUclxh~qq8@}*39p7~Ke6x%lO*n>k>z~EP2rGYA(}Pnb7X`0kUGpaC((}v%q^i|v
zZJXt^&T5@|lk;hE@BX>wy~Nu;Cs8SRPaKQYkc+<67bVJQ!}q58Hge(N&2OCiu+C7n
zaw0j;nK$c?s~5<5?+-t0dWF#O2)nIv(&B4Yx2HdC@ju<tKBhNLOl5hhqy2BqC9_W%
zW*;X|tQ7*<Iq7BL3s6Y@UZVVXpkOn*JsD<)zb+cy7o(k@C#-#~qyGheC)uW^N$Cfg
za7`}TOVq1rPVS`MBW0ZjL>`m;-(2Kd^ybHWBUP8S=r5)!`Ckt{x}t67U5mZLY16jl
zH#)y5{qE&m5%0drYOvYHT*8?4As=w|=}xKt*u|s%oVn1Dv;*qX%ENL_+A1FLSFzbU
znM-_81S})i#7)T`lT)nk=Hxp&+D=@mD%=6oEkd0+7_Q3*X)82f#w9eB$MMv}hQo3y
z4d;7vesXERghtnm;yFab?!MG;Pa3bo7^v_R1fjn_gC$A><|ZkdPi3;jM@#}e>0(+S
zJNWg37?m6Rc)TIw%c>z#FXjP^kT{4Dp${MOIbZ<o&-w%sk#apf-6+1$;Kw%#1H(Q+
zDUk-#{khGlJ{(koJdhj8Tw)`DxM?_ZQQs=U=X;A*RRT#*Lt09tk@Pww_8Ia%!%V&x
z?_+Ar4Q|8>w*A-hD`A)UjF(!S3={VBo2@<Um0OZoa@4zKO)^Jz?3(rXq#JKXH`-X7
z_4IsFg<#$Bas5GQb`-}NRr4Pg3x!6(Fg|f=BNiXNQyW1cv^$4qY0{I85Fm2;Qli9(
zQsO&sM?YScU-V!jX5x=M*a(%A9&7}Y$k|MHZ>}$uL2``wx%GI);6I2bm52kmzD&0-
zm8bGxt~ayJU%EyRKJjZKluYq!BUFIo`!!Qttha)M`1C*_-RE=G3C;V;v#$S`UqMqx
z*o&L2^<GoU%-cy_{W*WLPL`fZ!|>WS0&kWVi(syf<Lc_q`kS`Y{;VYYtR(!bB>caW
zge(4^N<vo$eRmvUC9HNn!D_h_FffuqtoS7YngwMsV5!kWg#Fc5l2&7(3Y#dp!LNQb
z0mDHR#AHyYnjT!A8|+VIyZyc?%pSd3ZrXp{Rk|Wf#vGO!k;~Zf=q#JPF`B4g;_jry
zzB3{lSU11*fLOxj?oP(oysZffn~UDGU;i7FPp7)`g(^0%JK4Z?E|q0g*p1zoyhWbQ
zLp45m|MT${Ed+`H<vIp3V6SgYMC+kSCVopHB(W~O)GP);9vZ;5=3=8~F>*3KAL$pI
zjK@m(?p)UIqZFWh>(Ow9fYkzQY?+)eWy#M~Dc@qh4^2&ox3O5-u4TvfU_-SmZ9B3E
z6=Bc}!d@JeOV~#b&aTph(V=|0A64KbnQeR_9%ZXuof~8)(spH)-vF9CmiG<dXQ+v_
z0u?b_ivo=VS!zpL*$&>8EZeXoOP4AQOEFA!x^0`9V#<Ml9;w&LOi8nK&9qcqmC9{7
zs3>ZwtprLfQ?pBz63Yl_x}?go5zzIZZkRGsT3S$*>P%HF(Im}KHPyBPx+!axuIgq?
zQo@ynV$>+6r0l4SDTXZt6|Kfn6;m;7<Wz!+)ESahquHje=>bXAg0dm&s$xsVEKQQl
zS+*4nXts^tKvdgM6hqS#-7Yb8JzxcFMO7m~Sy4l_u9y*Bk&rX~kuxe_sx_vl)zz80
zX((E&tr>=1Vrc=K)=fq7zg+p4OeeFN-yUzDd-TC#Ix&GW!CRRKyl0e*4;Mc$P@em0
zmJ`UoS%n(*s|6&Kz~+jI#IFSC0!;g|So}bhF2n_435c2OM%)&-S{6@O>{>b0jD52L
zb_J$5|1F4OuPuT^!2+oYn=6{@D@>=@hz)o5;!^?k=vH|)8@~s8y=|xBEB$`4l$|~m
zuO=aueQ0($ie=;{@h%hFI?yMp4w<cdZEigq_(@!d&eU~zrmUcUEg4r@Hgq#Ax5%<$
zg%w-*>g&gw5VH`?h!%u{NFrJhvk`L;a}jNbd5Ctzd_)Ig0b(Iy5#kEOVnipR3vnf4
b3F32zs}NTsmLirRu0dSuy?*?<-st}T5bS25

delta 1053
zcmX}p4@{J090%}w-<P}hfxGv;3qd>dfTQC=xjT+K!9()yRKSGAC|4aDO{}vfw=ttR
z+1Lu}7qwAcO8IEa{5PbTa=0PC7MO;WZWbP!ieWkhla-eq)@+be&v~5h_Sv5A^FI4M
zzu%s-Lm~bw(+V8$AV3l*K?NcZNQM+pg9ap!K?^!~3{qhpq(M5&hXwFB=ph3Z!Xhw0
zCS*Z27$FCq02Abb8J>hZSPV=0^4sl3Nx{CYlQP|ybm~~ppKG}L_e*cbHhFD_puMl{
zz+cu`Kh=sBg?2v23G|yZ`x1KK6|0+Ue{Hb&LQC3i+&rPVCeXXXmK0uP!m&(;Sws5k
zR<D{V$lr$~-=WiyFN@Tsk9G{UVRmUOs>6SE)dufNX#d2@;>gsQO#`kQJ$ULX<yvm8
zQU>nnvJS}P_KPitrhj~J5$pS6XZxmo&zv&{j$rh%vX!4Zn~s_{9Uu|8u-UMNzgO8`
zCWR9Ja%lC+951$yTGJ(BuF)SlIGXhi_IAels2gj1)$`l}4ch%uh&;NuW!Cz<NSZp0
z=9DYaeyq`}oQe4|FzcjaL_;Fuvyp+%Odnu9NF|A@^tfW!aZVz6#c!BKuSOPPYl&)o
zVjex6<&wNOaMiI<Cfx`BP5t7)&EGLE66?d=wCM$|oBIyE4`Oj=$Ce|*-+z7`eHv$h
zKx^*U3u&*<mO;bg>Ju2$Ie%7@KTd~#9T<PP2%|Tpy<)s|#To33NP~|O4c?Q2v|)=)
zCYEsd`B6i;0qr4Ag_cH#Ey=v%C>;UYNitoV?ruNPaE<PpB{}%@yS6)8@|$vT)$yaZ
znlW1`yXS^iwBpPz+YcJ@Q_swm$*tDwSbyHrnEbF9SB2h?ZI_DduHI8-TsF~0!*$L~
zUg+7`Z>yxYE~eG<fy>l*Tx#Nz3uvJy^(~(C(ANWtHYX_*WI5g7ch<3$I7YwqI|H#*
zfZiy!9Tv7#T%aFMsB?vFd13nOpG!mN+u(d(O{OL<spob5M=`t1bz1dseonwfPISay
zgG-^Zz<KeuAUYE}IOUaV=YoJA5^+cTaX6VCUgv5f>x;T2$Fac%)LpVwE8{gy$SJ*1
zK0c%g{}H{tA}#g1r1zpj7RJihm;%Pm6fzFR$t-1xm||ub<6=sf<xDB_6tjYHGakmv
ctYlU(tC=#UoT*^eFi$gUnM#ZfRrxai2lQvO8~^|S

diff --git a/skills/astro-portfolio-site/SKILL.md b/skills/astro-portfolio-site/SKILL.md
new file mode 100644
index 000000000..a58f8b8e3
--- /dev/null
+++ b/skills/astro-portfolio-site/SKILL.md
@@ -0,0 +1,200 @@
+---
+name: astro-portfolio-site
+description: "Build a complete indie studio, small business, or creative portfolio website from a client brief and brand assets. Produces a production-ready Astro 5 + React 19 + Tailwind CSS 4 + GSAP site deployed to Cloudflare Pages. Use when the user wants to build a new website, portfolio, studio site, or marketing site for a client — or when they provide a company name, brand assets, and general idea for a new site. Also use when asked to scaffold, set up, or create a new Astro website project."
+---
+
+# Astro Portfolio Site Builder
+
+Build production-ready portfolio websites from a client brief. Stack: Astro 5, React 19, Tailwind CSS 4, GSAP, TypeScript, Cloudflare Pages, Bun.
+
+## Intake Checklist
+
+Before starting, gather from the client brief:
+
+**Required:**
+- Company/studio name and tagline
+- Site description (1-2 sentences for SEO)
+- Contact email
+- Primary brand color (hex) + 1-2 accent colors
+- Logo file(s) (SVG preferred + PNG fallback)
+
+**Recommended:**
+- Social links (Discord, Twitter/X, Steam, Instagram, GitHub, etc.)
+- Font preferences (display/heading + body). Default: pixel font + clean sans-serif
+- Hero background (video mp4 or image)
+- OG/social share image (1200x630)
+- Favicon set (SVG + ICO + PNG 32/192 + apple-touch)
+
+**Optional:**
+- Product/game details (for product page + structured data)
+- Team member info
+- Press kit assets
+- Existing blog content or content plan
+- Custom domain (for astro.config site URL)
+- Resend API key (for contact form emails)
+
+## Phase 1: Project Scaffold
+
+1. Create project directory and initialize:
+```bash
+mkdir <project-name> && cd <project-name>
+bun create astro@latest . -- --template minimal --no-install
+bun install
+```
+
+2. Install dependencies:
+```bash
+bun add @astrojs/cloudflare @astrojs/mdx @astrojs/react @astrojs/rss @astrojs/sitemap \
+  @react-email/components @tailwindcss/typography @tailwindcss/vite \
+  clsx fuse.js gsap react react-dom react-icons resend sharp tailwind-merge tailwindcss
+bun add -d @types/react @types/react-dom @types/node wrangler
+```
+
+3. Create directory structure — see `assets/scaffold-dirs.txt`
+
+4. Write config files — see `references/stack-config.md` for exact patterns:
+   - `astro.config.mjs` (site URL, integrations, cloudflare adapter, vite tailwindcss plugin)
+   - `tsconfig.json` (strict, path aliases, react-jsx)
+   - `wrangler.jsonc` (project name, compatibility date, nodejs_compat, vars)
+   - `src/consts.ts` (SITE_TITLE, SITE_DESCRIPTION, HTML_MARKER, SOCIAL_LINKS)
+   - `src/env.d.ts` (Cloudflare Runtime type + Env interface)
+   - `src/lib/utils.ts` (cn function: clsx + tailwind-merge)
+
+## Phase 2: Design System
+
+Read `references/design-system.md` for complete CSS structure.
+
+1. Place custom fonts in `public/assets/fonts/` (woff2 + ttf fallback)
+2. Create `src/styles/global.css` with:
+   - `@import "tailwindcss"` (must be first line)
+   - `@font-face` declarations with `font-display: swap`
+   - `@custom-variant dark` and `@plugin "@tailwindcss/typography"`
+   - `@theme {}` block mapping client colors to token names
+   - Font stacks: `--font-display`, `--font-body`, `--font-mono`
+   - Pixel shadow tokens and glow tokens
+3. Add global element styles (body, headings, code)
+4. Add custom cursor styles (optional — skip for non-gaming sites)
+5. Add scrollbar theming with brand colors
+6. Add utility classes: `.text-glow-*`, `.box-pixel*`, `.pixel-art`, `.scrollbar-none`, `.scanlines`, `.crt-screen`
+7. Add keyframe animations + `prefers-reduced-motion` resets
+8. Add safe viewport height utilities (`.h-screen-safe`, `.min-h-screen-safe`)
+
+## Phase 3: Layouts & Base Components
+
+Read `references/seo-structured-data.md` for JSON-LD and meta patterns.
+
+1. **StructuredData.astro** — generic JSON-LD `<script>` renderer
+2. **FormattedDate.astro** — `<time>` element with locale formatting
+3. **BaseHead.astro** — meta tags, favicons, font preloads, Google Fonts, canonical URL, RSS link, OG/Twitter cards, robots meta
+4. **BaseLayout.astro** — wraps BaseHead + Organization JSON-LD + CustomCursor (optional) + `<slot />`
+5. **BlogPost.astro** — Article + Breadcrumb JSON-LD, TOC sidebar (desktop sticky, mobile `<details>`), hero image, prose typography
+
+## Phase 4: Core Components
+
+Read `references/component-patterns.md` for GSAP patterns and hydration rules.
+
+Build these React components:
+
+1. **Navigation.tsx** (`client:load`) — fixed header, scroll detection, fullscreen overlay menu, GSAP animations, ESC to close, body overflow lock
+2. **Hero.tsx** (`client:load`) — full viewport, video/image background, entrance animations (sessionStorage skip on repeat), parallax, CTAs
+3. **Footer.tsx** (`client:visible`) — multi-column grid (brand, nav, legal, social), copyright
+4. **Contact.tsx** (`client:visible`) — two-column (info + form), honeypot, status states, GSAP ScrollTrigger entrance
+5. **Loader.tsx** (`client:load`, optional) — one-time splash, sessionStorage, progress bar, safety timeout, click-to-skip
+6. **CustomCursor.tsx** (`client:load`, optional) — GSAP smooth follow, mix-blend-mode, hidden on touch
+7. **Marquee.tsx** (`client:visible`, optional) — scrolling text ticker
+
+### GSAP Rules (apply to all animated components)
+
+- Wrap in `gsap.context()` with `return () => ctx.revert()` cleanup in useEffect
+- Check `prefers-reduced-motion` and bail early if reduced
+- Transform-only properties (x, y, scale, rotation, opacity) for GPU acceleration
+- SessionStorage for one-time entrance animations
+- ScrollTrigger for below-fold entrance reveals
+- Stagger timelines with negative relative positioning (`'-=0.6'`)
+
+## Phase 5: Pages
+
+1. **index.astro** — compose: Loader + Nav + Hero + sections + Contact + Footer + Marquee
+2. **about.astro** — static info page
+3. **contact.astro** — dedicated contact page
+4. Product page (if applicable) — with Product/VideoGame schema
+5. **press.astro** (optional) — press kit
+6. **privacy.astro**, **terms.astro** — legal pages (`robots="noindex, follow"`)
+7. **404.astro** — custom not-found (`robots="noindex, follow"`)
+
+## Phase 6: Blog Infrastructure
+
+Read `references/blog-infrastructure.md` for all patterns.
+
+1. `src/content.config.ts` — blog collection (Content Layer API, glob loader, Zod schema with `image()`)
+2. `src/pages/blog/index.astro` — featured post, category filter, post grid, sidebar
+3. `src/pages/blog/[...slug].astro` — dynamic post route with `getStaticPaths()`
+4. `src/pages/blog/tag/[tag].astro` — tag archive pages
+5. `src/pages/blog/category/[category].astro` — category archive pages
+6. Blog components: BlogCard.astro, FeaturedPosts.astro, BlogSearch.tsx (`client:idle`)
+7. `src/pages/search.json.ts` (prerender: true) — Fuse.js search index
+8. `src/utils/reading-time.ts` — word count calculator
+9. Sample blog post with correct frontmatter
+
+## Phase 7: Contact Form Backend
+
+Read `references/contact-form-system.md` for exact patterns.
+
+1. `src/pages/api/contact.ts` — POST endpoint: rate limiting, honeypot, validation, Resend dual email
+2. Email templates in `src/emails/`: notification + confirmation (React Email, dark theme, inline styles)
+3. Wrangler vars: `CONTACT_EMAIL`. Secret: `RESEND_API_KEY` via `wrangler secret put`
+4. Rate limiting: Cloudflare dashboard only (not wrangler config)
+
+## Phase 8: SEO & Data Endpoints
+
+Read `references/seo-structured-data.md` for code patterns.
+
+1. `public/robots.txt` — allow all, LLM-Policy, sitemap URL
+2. `src/pages/rss.xml.ts` (prerender: true) — @astrojs/rss feed
+3. `src/pages/llms.txt.ts` (prerender: true) — page/post index for LLMs
+4. `src/pages/llms-full.txt.ts` (prerender: true) — full blog content for LLMs
+5. Verify sitemap filters out 404, privacy, terms, shop
+
+## Phase 9: Assets & Images
+
+1. Favicon set in `public/`: favicon.svg, .ico, -32.png, -192.png, apple-touch-icon.png
+2. OG fallback at `public/og-default.jpg` (1200x630)
+3. Logos in `public/assets/images/logos/`
+4. Fonts in `public/assets/fonts/`
+5. Copy AVIF conversion script to `src/utils/convert-to-avif.js`
+6. Copy AI commit helper to `src/utils/git-commit.js` + `.env.example`
+7. Use `.pixel-art` class on pixel art images
+
+## Phase 10: External API Integration (if applicable)
+
+If the client has an external data source (Steam, Shopify, etc.):
+1. Create `src/lib/<service>.ts` with typed interfaces
+2. `fetchJson<T>()` wrapper returning `T | null` on failure
+3. Parallel fetch with `Promise.all`, null fields on partial failure
+4. Wire into pages via frontmatter `await`, pass as component props
+5. Never break builds on API failure
+
+See `references/component-patterns.md` for the Steam API pattern example.
+
+## Phase 11: Deployment
+
+Read `references/deployment-cloudflare.md` for gotchas.
+
+1. Clean build: `bun run build` (never `bun build`)
+2. Local test: `bun preview` (port 8788)
+3. Set secrets: `wrangler secret put RESEND_API_KEY`
+4. Set env: `CLOUDFLARE_ACCOUNT_ID=<id>`
+5. Deploy: `bun run deploy`
+6. Custom domain + rate limiting in Cloudflare dashboard
+
+## Phase 12: Generate CLAUDE.md
+
+Generate a comprehensive CLAUDE.md documenting the entire project:
+- Description, stack, commands
+- Architecture (rendering, routing, hydration, content collections)
+- Component inventory with hydration strategy
+- Design system tokens
+- SEO setup (structured data, meta, sitemap, RSS, LLM files)
+- Contact form system
+- Deployment notes and gotchas
+- Key files list and URL patterns
diff --git a/skills/astro-portfolio-site/assets/example_asset.txt b/skills/astro-portfolio-site/assets/example_asset.txt
new file mode 100644
index 000000000..d0ac20404
--- /dev/null
+++ b/skills/astro-portfolio-site/assets/example_asset.txt
@@ -0,0 +1,24 @@
+# Example Asset File
+
+This placeholder represents where asset files would be stored.
+Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed.
+
+Asset files are NOT intended to be loaded into context, but rather used within
+the output Claude produces.
+
+Example asset files from other skills:
+- Brand guidelines: logo.png, slides_template.pptx
+- Frontend builder: hello-world/ directory with HTML/React boilerplate
+- Typography: custom-font.ttf, font-family.woff2
+- Data: sample_data.csv, test_dataset.json
+
+## Common Asset Types
+
+- Templates: .pptx, .docx, boilerplate directories
+- Images: .png, .jpg, .svg, .gif
+- Fonts: .ttf, .otf, .woff, .woff2
+- Boilerplate code: Project directories, starter files
+- Icons: .ico, .svg
+- Data files: .csv, .json, .xml, .yaml
+
+Note: This is a text placeholder. Actual assets can be any file type.
diff --git a/skills/astro-portfolio-site/references/api_reference.md b/skills/astro-portfolio-site/references/api_reference.md
new file mode 100644
index 000000000..af17757f1
--- /dev/null
+++ b/skills/astro-portfolio-site/references/api_reference.md
@@ -0,0 +1,34 @@
+# Reference Documentation for Astro Portfolio Site
+
+This is a placeholder for detailed reference documentation.
+Replace with actual reference content or delete if not needed.
+
+Example real reference docs from other skills:
+- product-management/references/communication.md - Comprehensive guide for status updates
+- product-management/references/context_building.md - Deep-dive on gathering context
+- bigquery/references/ - API references and query examples
+
+## When Reference Docs Are Useful
+
+Reference docs are ideal for:
+- Comprehensive API documentation
+- Detailed workflow guides
+- Complex multi-step processes
+- Information too lengthy for main SKILL.md
+- Content that's only needed for specific use cases
+
+## Structure Suggestions
+
+### API Reference Example
+- Overview
+- Authentication
+- Endpoints with examples
+- Error codes
+- Rate limits
+
+### Workflow Guide Example
+- Prerequisites
+- Step-by-step instructions
+- Common patterns
+- Troubleshooting
+- Best practices
diff --git a/skills/astro-portfolio-site/references/design-system.md b/skills/astro-portfolio-site/references/design-system.md
new file mode 100644
index 000000000..c7a48c8f0
--- /dev/null
+++ b/skills/astro-portfolio-site/references/design-system.md
@@ -0,0 +1,273 @@
+# Design System
+
+Complete `global.css` structure for the design system. Adapt colors, fonts, and effects to match the client's brand.
+
+## File Structure
+
+The CSS file follows this exact order:
+
+1. Tailwind import
+2. Font-face declarations
+3. Tailwind variants and plugins
+4. @theme block (design tokens)
+5. :root variables (shadcn compatibility, optional)
+6. Global element styles
+7. Custom cursor (optional)
+8. Scrollbar theming
+9. Utility classes
+10. Keyframe animations
+11. Reduced motion resets
+12. Safe viewport utilities
+13. @theme inline block (shadcn, optional)
+14. Dark mode overrides (optional)
+
+## Complete Template
+
+```css
+@import "tailwindcss";
+
+/* ── Custom Font ── */
+@font-face {
+  font-family: "{{DISPLAY_FONT_NAME}}";
+  src: url("/assets/fonts/{{FONT_FILE}}.woff2") format("woff2"),
+       url("/assets/fonts/{{FONT_FILE}}.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@custom-variant dark (&:is(.dark *));
+@plugin "@tailwindcss/typography";
+
+/* ── Design Tokens ── */
+@theme {
+  /* Brand colors — substitute from client brief */
+  --color-primary: {{PRIMARY_COLOR}};        /* e.g. #FF006E */
+  --color-primary-light: {{PRIMARY_LIGHT}};  /* lighter variant */
+  --color-primary-dark: {{PRIMARY_DARK}};    /* darker variant */
+  --color-accent: {{ACCENT_COLOR}};          /* e.g. #7B61FF */
+  --color-secondary: {{SECONDARY_COLOR}};    /* e.g. #00F0FF */
+  --color-highlight: {{HIGHLIGHT_COLOR}};    /* e.g. #FFE600 */
+  --color-dark: #0A0A0A;
+  --color-darker: #050505;
+  --color-gray: #1A1A1A;
+
+  /* Font stacks */
+  --font-display: "{{DISPLAY_FONT}}", {{DISPLAY_FALLBACK}};
+  --font-body: "{{BODY_FONT}}", sans-serif;
+  --font-mono: "{{MONO_FONT}}", monospace;
+
+  /* Pixel shadows (4px offset = retro pixel aesthetic) */
+  --shadow-pixel-primary: 4px 4px 0 0 {{PRIMARY_DARK}};
+  --shadow-pixel-primary-lg: 8px 8px 0 0 {{PRIMARY_DARK}};
+  --shadow-pixel-accent: 4px 4px 0 0 {{ACCENT_DARK}};
+
+  /* Glow effects */
+  --shadow-glow-primary: 0 0 20px {{PRIMARY_COLOR}}, 0 0 40px {{PRIMARY_COLOR}};
+  --shadow-glow-accent: 0 0 20px {{ACCENT_COLOR}}, 0 0 40px {{ACCENT_COLOR}};
+  --shadow-glow-secondary: 0 0 20px {{SECONDARY_COLOR}}, 0 0 40px {{SECONDARY_COLOR}};
+}
+
+/* ── Global Styles ── */
+:root {
+  --cursor-size: 20px;
+  --radius: 0px;  /* sharp pixel aesthetic — set to 0.5rem for rounded */
+}
+
+html {
+  cursor: none;  /* hide for custom cursor — remove if not using custom cursor */
+}
+
+@media (pointer: coarse) {
+  html { cursor: auto; }
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--color-dark);
+  color: #ffffff;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  text-transform: uppercase;  /* remove if display font is not pixel/block style */
+}
+
+code, pre {
+  font-family: var(--font-mono);
+}
+
+/* ── Custom Cursor (optional — remove block if not using) ── */
+#custom-cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--cursor-size);
+  height: var(--cursor-size);
+  border: 2px solid var(--color-primary);
+  pointer-events: none;
+  z-index: 9999;
+  transform: translate(-50%, -50%);
+  mix-blend-mode: difference;
+  transition: width 0.2s, height 0.2s, background-color 0.2s;
+}
+
+#custom-cursor::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 4px;
+  background-color: var(--color-secondary);
+  transform: translate(-50%, -50%);
+}
+
+@media (pointer: coarse) {
+  #custom-cursor { display: none; }
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 10px; }
+::-webkit-scrollbar-track { background: var(--color-darker); }
+::-webkit-scrollbar-thumb {
+  background: var(--color-primary-dark);
+  border: 2px solid var(--color-darker);
+}
+::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }
+
+/* ── Utility Classes ── */
+.text-glow-primary { text-shadow: 0 0 10px var(--color-primary); }
+.text-glow-primary-hover {
+  transition: text-shadow 0.3s ease, color 0.3s ease;
+}
+.text-glow-primary-hover:hover {
+  color: var(--color-primary);
+  text-shadow: 0 0 10px var(--color-primary);
+}
+.text-glow-accent { text-shadow: 0 0 10px var(--color-accent); }
+.text-glow-secondary { text-shadow: 0 0 10px var(--color-secondary); }
+
+.box-pixel { box-shadow: 4px 4px 0 0 var(--color-primary-dark); }
+.box-pixel-accent { box-shadow: 4px 4px 0 0 {{ACCENT_DARK}}; }
+.box-pixel-secondary { box-shadow: 4px 4px 0 0 {{SECONDARY_DARK}}; }
+
+.pixel-art {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar { display: none; }
+
+/* ── Atmospheric Overlays ── */
+.scanlines { position: relative; }
+.scanlines::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.15) 2px,
+    rgba(0, 0, 0, 0.15) 4px
+  );
+  pointer-events: none;
+  z-index: 10;
+}
+
+.crt-screen { position: relative; overflow: hidden; }
+.crt-screen::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
+  background-size: 100% 4px;
+  pointer-events: none;
+  z-index: 10;
+}
+.crt-screen::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
+  pointer-events: none;
+  z-index: 11;
+}
+
+/* ── Keyframe Animations ── */
+@keyframes vhs-flicker {
+  0%, 100% { opacity: 1; }
+  92% { opacity: 1; }
+  93% { opacity: 0.8; }
+  94% { opacity: 1; }
+  96% { opacity: 0.9; }
+  97% { opacity: 1; }
+}
+.vhs-flicker { animation: vhs-flicker 4s infinite; }
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+.animate-blink { animation: blink 1s infinite; }
+
+@keyframes glitch {
+  0% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(-2px, -2px); }
+  60% { transform: translate(2px, 2px); }
+  80% { transform: translate(2px, -2px); }
+  100% { transform: translate(0); }
+}
+.animate-glitch { animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite; }
+
+@keyframes marquee-scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+.marquee-track { animation: marquee-scroll 20s linear infinite; }
+
+/* ── Reduced Motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .marquee-track { animation: none; }
+  .vhs-flicker { animation: none; }
+  .animate-blink { animation: none; }
+  .animate-glitch { animation: none; }
+}
+
+/* ── Safe Viewport Height ── */
+.h-screen-safe { height: 100vh; height: 100dvh; }
+.min-h-screen-safe { min-height: 100vh; min-height: 100dvh; }
+```
+
+## Color Token Mapping Guide
+
+Map any brand palette to the token system:
+
+| Token | Purpose | Example |
+|-------|---------|---------|
+| `--color-primary` | Main brand color, CTAs, links, highlights | #FF006E |
+| `--color-primary-light` | Hover states, lighter accents | Lighten primary 20% |
+| `--color-primary-dark` | Shadows, pressed states, dark accents | Darken primary 20% |
+| `--color-accent` | Secondary brand color, headings, tags | #7B61FF |
+| `--color-secondary` | Tertiary color, links, code text | #00F0FF |
+| `--color-highlight` | Warnings, special callouts | #FFE600 |
+| `--color-dark` | Page backgrounds | #0A0A0A |
+| `--color-darker` | Footer, deeper sections | #050505 |
+| `--color-gray` | Card backgrounds, borders | #1A1A1A |
+
+## Font Strategy
+
+- **Self-host** pixel/display fonts as woff2 + ttf — preload the woff2 in BaseHead
+- **Google Fonts** for body + mono fonts — preconnect in BaseHead
+- Always use `font-display: swap` to prevent FOUT blocking
+- Preload pattern in BaseHead: `<link rel="preload" href="/assets/fonts/Font.woff2" as="font" type="font/woff2" crossorigin />`
diff --git a/skills/astro-portfolio-site/references/stack-config.md b/skills/astro-portfolio-site/references/stack-config.md
new file mode 100644
index 000000000..5ecc73b29
--- /dev/null
+++ b/skills/astro-portfolio-site/references/stack-config.md
@@ -0,0 +1,190 @@
+# Stack Configuration
+
+## astro.config.mjs
+
+```javascript
+// @ts-check
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+import { defineConfig } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@astrojs/react';
+
+export default defineConfig({
+  site: '{{SITE_URL}}',  // e.g. 'https://example.com'
+  integrations: [
+    mdx(),
+    sitemap({
+      filter: (page) =>
+        !['/404', '/privacy', '/terms', '/shop'].some((p) => page.includes(p)),
+    }),
+    react(),
+  ],
+  adapter: cloudflare({
+    platformProxy: { enabled: true },
+    imageService: "compile"
+  }),
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});
+```
+
+Key notes:
+- `site` is used for canonical URLs, OG tags, sitemap, RSS
+- Sitemap filter excludes legal, 404, and shop pages
+- `platformProxy: { enabled: true }` gives access to Cloudflare bindings in dev
+- `imageService: "compile"` uses Astro's built-in image optimization
+- No separate tailwind.config or postcss.config — Tailwind 4 uses Vite plugin
+
+## tsconfig.json
+
+```json
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "types": ["./worker-configuration.d.ts", "node"],
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
+```
+
+## wrangler.jsonc
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "{{PROJECT_NAME}}",
+  "compatibility_date": "2025-12-05",
+  "compatibility_flags": ["nodejs_compat"],
+  "pages_build_output_dir": "./dist",
+  "observability": { "enabled": true },
+  "vars": {
+    "CONTACT_EMAIL": "{{CONTACT_EMAIL}}"
+  }
+}
+```
+
+**Critical**: Pages does NOT support `account_id` or `ratelimits` in config. Wrangler will reject the deploy. Set account ID via env var, configure rate limiting in dashboard.
+
+## package.json scripts
+
+```json
+{
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro build && wrangler pages dev",
+    "astro": "astro",
+    "deploy": "astro build && wrangler pages deploy",
+    "cf-typegen": "wrangler types",
+    "convert:avif": "node src/utils/convert-to-avif.js",
+    "convert:avif:all": "node src/utils/convert-to-avif.js --all",
+    "convert:avif:jpeg": "node src/utils/convert-to-avif.js --jpeg",
+    "convert:avif:png": "node src/utils/convert-to-avif.js --png",
+    "commit": "node src/utils/git-commit.js"
+  }
+}
+```
+
+**Critical**: `bun build` invokes bun's bundler, not astro's. Always use `bun run build`.
+
+## Dependencies
+
+```json
+{
+  "dependencies": {
+    "@astrojs/cloudflare": "^12.6.12",
+    "@astrojs/mdx": "^4.3.12",
+    "@astrojs/react": "^4.4.2",
+    "@astrojs/rss": "^4.0.14",
+    "@astrojs/sitemap": "^3.6.0",
+    "@react-email/components": "^1.0.8",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "astro": "^5.16.4",
+    "clsx": "^2.1.1",
+    "fuse.js": "^7.1.0",
+    "gsap": "^3.14.2",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-icons": "^5.5.0",
+    "resend": "^6.9.2",
+    "sharp": "^0.34.3",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "wrangler": "^4.53.0"
+  }
+}
+```
+
+## src/env.d.ts
+
+```typescript
+type Runtime = import("@astrojs/cloudflare").Runtime<Env>;
+
+declare namespace App {
+  interface Locals extends Runtime {}
+}
+
+interface Env {
+  RESEND_API_KEY: string;
+  CONTACT_RATE_LIMITER: RateLimit;
+}
+```
+
+## src/consts.ts
+
+```typescript
+export const SITE_TITLE = '{{COMPANY_NAME}} — {{TAGLINE}}';
+export const SITE_DESCRIPTION = '{{SEO_DESCRIPTION}}';
+export const HTML_MARKER = "Built by {{COMPANY_NAME}}";
+
+export const SOCIAL_LINKS = {
+  email: '{{CONTACT_EMAIL}}',
+  website: '{{SITE_URL}}',
+  // Include only the ones the client has:
+  // steam: 'https://store.steampowered.com/...',
+  // twitter: 'https://twitter.com/...',
+  // discord: 'https://discord.gg/...',
+  // instagram: 'https://instagram.com/...',
+  // github: 'https://github.com/...',
+};
+```
+
+## src/lib/utils.ts
+
+```typescript
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+
+## src/utils/reading-time.ts
+
+```typescript
+export function calculateReadingTime(content: string | undefined, wordsPerMinute: number = 200): string {
+  const wordCount = content?.split(/\s+/).length || 0;
+  const readingTime = Math.max(1, Math.ceil(wordCount / wordsPerMinute));
+  return `${readingTime} min read`;
+}
+```
+
+## worker-configuration.d.ts
+
+Generated by `bun cf-typegen`. Run this after initial setup to generate Cloudflare Worker runtime types.
diff --git a/skills/astro-portfolio-site/scripts/example.py b/skills/astro-portfolio-site/scripts/example.py
new file mode 100755
index 000000000..a8b7b010f
--- /dev/null
+++ b/skills/astro-portfolio-site/scripts/example.py
@@ -0,0 +1,19 @@
+#!/usr/bin/env python3
+"""
+Example helper script for astro-portfolio-site
+
+This is a placeholder script that can be executed directly.
+Replace with actual implementation or delete if not needed.
+
+Example real scripts from other skills:
+- pdf/scripts/fill_fillable_fields.py - Fills PDF form fields
+- pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images
+"""
+
+def main():
+    print("This is an example script for astro-portfolio-site")
+    # TODO: Add actual script logic here
+    # This could be data processing, file conversion, API calls, etc.
+
+if __name__ == "__main__":
+    main()