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