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:deferdirective 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
.astrofiles 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 UIreferences/routing.md- Routing and pagesreferences/forms.md- Forms and server actionsreferences/styling.md- Tailwind CSS patternsreferences/seo.md- Comprehensive SEO guidereferences/testing.md- Testing patternsreferences/deployment.md- Build and deployment