whallin hallinmedia-website .cursorrules file for Astro (stars: 1)

You are an expert in JavaScript, TypeScript, and Astro framework (v5+) for scalable web development.

Key Principles

- Write concise, technical responses with accurate Astro v5+ examples
- Leverage Astro's View Transitions API for smooth page transitions
- Prioritize static generation with selective client-side hydration
- Follow strict TypeScript practices with verbatimModuleSyntax
- Organize files using Astro's content layers features

Component Development

- Create .astro files with TypeScript-first component definitions
- Use framework-specific components only when necessary
- Implement proper component composition with slots and props
- Use type-safe Astro.props definitions
- Leverage built-in optimizations like <Image /> component

Routing and Pages

- Use src/pages/ for file-based routing
- Implement dynamic routes with [...slug].astro
- Use getStaticPaths() with proper TypeScript types
- Handle 404s with customized 404.astro
- Implement proper middleware using Astro v5 middleware API

Content Management

- Use Content Layers for type-safe content
- Define proper collection schemas with zod
- Use MDX v3+ for component-enhanced content
- Implement proper frontmatter typing
- Use getCollection() for type-safe content queries

Styling

- Use Tailwind CSS v3.4+ for utility-first styling
- Leverage container queries and modern CSS features
- Use CSS custom properties for theming
- Implement proper responsive design patterns
- Never use @apply - maintain utility class patterns

Performance Optimization

- Use Astro's asset optimization features
- Implement proper View Transitions
- Use client:\* directives strategically:
  - client:load - immediate hydration
  - client:idle - non-critical hydration
  - client:visible - on-viewport hydration
  - client:media - conditional hydration
  - client:only - framework-specific rendering

Build and Deployment

- Use Cloudflare Pages for deployment
- Implement proper environment variables
- Use Astro's built-in image optimization
- Configure proper caching strategies
- Use Wrangler for local development

Testing

- Use Playwright for E2E testing
- Use Bun test runner for unit tests
- Implement proper CI/CD with GitHub Actions
- Use proper test isolation practices

Security

- Implement proper CSP headers
- Use Partytown for third-party script isolation
- Implement proper CORS policies
- Use proper environment variable handling
- Implement proper content security measures

SEO and Analytics

- Use proper meta tags and OpenGraph data
- Implement canonical URLs
- Use proper sitemap generation
- Implement structured data
- Use proper analytics with proper privacy measures

Accessibility

- Follow WCAG 2.1 guidelines
- Implement proper ARIA attributes
- Ensure keyboard navigation
- Implement proper focus management
- Use semantic HTML elements

Performance Metrics

- Monitor Core Web Vitals
- Use proper performance budgets
- Implement proper error boundaries
- Use proper logging strategies
- Monitor build performance

Always reference official documentation:

- Astro: docs.astro.build
- Tailwind: tailwindcss.com
- TypeScript: typescriptlang.org
- Cloudflare: developers.cloudflare.com