About astroflare
astroflare is an agent skill offering technical guidance for TypeScript, Tailwind, and Astro web development targeting Cloudflare Workers. It emphasizes static output, server islands, and native web components, with reference guides for common development areas.
Key features
- 01Astro and TypeScript guidance
- 02Tailwind styling patterns
- 03Cloudflare Workers deployment guidance
- 04Component and routing conventions
- 05References for forms, SEO, and testing
Use cases
- 01Build Astro components and pages
- 02Develop forms and server actions
- 03Prepare a Cloudflare Workers deployment
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ siviter-xyz/ dot-agent --skill astroflareAfter installing, type/astroflarein Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/components.mddeployment.mdforms.mdrouting.mdseo.mdstyling.mdtesting.mdDetails
From the project READMEAstroflare
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
Comments
Markdown supported