Astroflare

Expert guidance for TypeScript, Tailwind, and Astro framework for scalable web development on the Cloudflare platform.

Key Principles

• Write concise, technical responses with accurate Astro examples
• Prioritize static generation and server-side islands with minimal JavaScript
• Use descriptive variable names and follow Astro’s naming conventions
• NEVER change the site output without explicit user confirmation – issues are likely elsewhere in configuration, environment variables, or build process
• Organize files using Astro’s file-based routing system
• Native over frameworks: Prefer native HTML elements (<dialog>, <form>) and web components over framework-specific solutions when possible. Use framework features only when they provide clear value.

Project Architecture

Deployment Target

• Cloudflare Workers with output: 'static' and component server islands for server-side rendering
• Use server:defer directive for server islands to optimize performance
• Cloudflare adapter configured with platformProxy for forms/server actions
• Trailing slashes always (trailingSlash: 'always') to match Cloudflare Workers behavior

Project Structure

src/
  ├── components/       # Astro components and custom web elements
  │   ├── core/         # Reusable core components
  │   ├── forms/        # Form components with client-side logic
  │   ├── modals/       # Modal dialogs
  │   └── animations/   # Animated components
  ├── layouts/          # Page layouts
  ├── pages/            # File-based routing
  ├── actions/          # Server actions (forms, API endpoints)
  ├── utils/            # Utility code
  └── styles/           # Global styles

Component Development

• Create .astro files for all components – this is the default and preferred approach
• Use components/core/ for reusable components
• Prefer custom web components over React islands for interactivity
• Use native HTML elements (<dialog>, <form>) when possible

Package Management

• Use pnpm as the package manager
• Node version: 24.x
• pnpm version: >=10

References

For detailed guidance, see:

• references/components.md – Component patterns and Starwind UI
• references/routing.md – Routing and pages
• references/forms.md – Forms and server actions
• references/styling.md – Tailwind CSS patterns
• references/seo.md – Comprehensive SEO guide
• references/testing.md – Testing patterns
• references/deployment.md – Build and deployment