Astroflare

---
name: astroflare
description: Astro x Tailwind v4 projects on Cloudflare Workers. Use when working with Astro projects deployed to Cloudflare.
---

# 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