.md

CLAUDE.md

CRITICAL: Follow ALL instructions. Be concise. Don't edit unnecessarily.

Tech Stack

• Astro 5.8.0, TailwindCSS 4.1.7, GSAP 3.13.0, TypeScript
• Static generation, Content Collections

Project Structure

src/
├── components/     # Follow ArticleCard.astro patterns
├── content/posts/   # Markdown posts (kebab-case)
├── layouts/        # Follow BaseLayout.astro
├── scripts/        # GSAP animations
└── styles/         # global.css for custom CSS

Key Rules

Components

• Location: src/components/
• Preserve TypeScript interfaces/props
• TailwindCSS first, custom CSS in global.css
• GSAP animations: 60fps + prefers-reduced-motion
• Fonts: rucksack (headings), Lato (body)

Content

• Blog: src/content/blog/*.md
• Frontmatter: title, date, description, tags, heroImage
• Schema: src/content/config.ts (Zod validated)

Performance

• Lighthouse: 90+ all metrics
• Optimize images + alt text
• Test animations cross-device
• Build before deploy: npm run build

Commands

npm run dev      # Development
npm run build    # Production build
npm run preview  # Preview build
npm test         # Run Playwright tests
npm run test:ui  # Test UI mode

DO NOT

• Rewrite/restructure working code
• Skip accessibility checks
• Use inline styles (except GSAP)
• Deploy without build test
• Modify schema without updating posts
• Commit without tests passing

Quick Reference

• New post: Add .md to content/blog/
• New component: Copy ArticleCard pattern
• Animations: Check scripts/ for examples
• Breakpoints: 640px, 960px, 1200px, 1400px
• Tests: See tests/*.spec.ts for patterns