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