# Astroflare

> Astro x Tailwind v4 projects on Cloudflare Workers. Use when working with Astro projects deployed to Cloudflare.

- Skill: `majiayu000/astroflare` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/astroflare`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/astroflare/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/astroflare

---


# 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