diff --git a/memory/memories.db-shm b/memory/memories.db-shm index df19ea77c..00e295922 100644 Binary files a/memory/memories.db-shm and b/memory/memories.db-shm differ diff --git a/memory/memories.db-wal b/memory/memories.db-wal index 61876fac6..bb4292f5f 100644 Binary files a/memory/memories.db-wal and b/memory/memories.db-wal differ 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 && cd +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 `