Astro
> The web framework for content-driven websites — islands architecture, zero JS by default.
Best use case
Astro is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
> The web framework for content-driven websites — islands architecture, zero JS by default.
Teams using Astro should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/astro/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How Astro Compares
| Feature / Agent | Astro | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
> The web framework for content-driven websites — islands architecture, zero JS by default.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Astro
> The web framework for content-driven websites — islands architecture, zero JS by default.
## When to Use
- Content-heavy sites (blogs, docs, marketing, portfolios)
- Static-first with selective interactivity (islands)
- Multi-framework pages (React + Svelte + Vue on same page)
- Maximum performance with minimal client JS
## Core Patterns
### Project Structure
```
src/
pages/ # File-based routing (.astro, .md, .mdx)
layouts/ # Reusable page layouts
components/ # .astro, .tsx, .svelte, .vue components
content/ # Content collections (type-safe markdown)
styles/ # Global styles
public/ # Static assets (copied as-is)
astro.config.mjs
```
### Astro Components
```astro
---
// Server-side (runs at build time, not in browser)
const { title, items } = Astro.props;
const response = await fetch("https://api.example.com/data");
const data = await response.json();
---
<section>
<h2>{title}</h2>
{items.map((item) => <p>{item.name}</p>)}
<!-- Island: only this component ships JS to the browser -->
<ReactCounter client:load />
<HeavyWidget client:visible /> <!-- Lazy hydrate on scroll -->
</section>
<style>
/* Scoped by default */
section { padding: 2rem; }
</style>
```
### Content Collections
```typescript
// src/content/config.ts
import { defineCollection, z } from "astro:content";
const blog = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(false),
}),
});
export const collections = { blog };
```
### Key Features
- **Islands**: `client:load`, `client:idle`, `client:visible`, `client:media`, `client:only`
- **View Transitions**: `<ViewTransitions />` for SPA-like page transitions
- **Server endpoints**: `src/pages/api/*.ts` for API routes
- **SSR adapters**: `@astrojs/node`, `@astrojs/vercel`, `@astrojs/cloudflare`
- **Integrations**: `@astrojs/tailwind`, `@astrojs/mdx`, `@astrojs/sitemap`, `@astrojs/image`
- **Type-safe**: Full TypeScript, typed content collections, typed API routesRelated Skills
ultrathink
UltraThink Workflow OS — 4-layer skill mesh with persistent memory and privacy hooks for complex engineering tasks. Routes prompts through intent detection to activate the right domain skills automatically.
ultrathink_review
Multi-pass code review powered by UltraThink's quality gate — checks correctness, security (OWASP), performance, readability, and project conventions in a single structured pass.
ultrathink_memory
Persistent memory system for UltraThink — search, save, and recall project context, decisions, and patterns across sessions using Postgres-backed fuzzy search with synonym expansion.
ui-design
Comprehensive UI design system: 230+ font pairings, 48 themes, 65 design systems, 23 design languages, 30 UX laws, 14 color systems, Swiss grid, Gestalt principles, Pencil.dev workflow. Inherits ui-ux-pro-max (99 UX rules) + impeccable-frontend-design (anti-AI-slop). Triggers on any design, UI, layout, typography, color, theme, or styling task.
Zod
> TypeScript-first schema validation with static type inference.
webinar-registration-page
Build a webinar or live event registration page as a self-contained HTML file with countdown timer, speaker bio, agenda, and registration form. Triggers on: "build a webinar registration page", "create a webinar sign-up page", "event registration landing page", "live training registration page", "workshop sign-up page", "create a webinar page", "build an event page", "free webinar landing page", "live demo registration page", "online event page", "create a registration page for my webinar", "build a training event page".
webhooks
Webhook design patterns — delivery, retry with exponential backoff, HMAC signature verification, payload validation, idempotency keys
web-workers
Offload heavy computation from the main thread using Web Workers, SharedWorkers, and Comlink — structured messaging, transferable objects, and off-main-thread architecture patterns
web-vitals
Core Web Vitals monitoring (LCP, FID, CLS, INP, TTFB), measurement with web-vitals library, reporting to analytics, and optimization strategies for Next.js
web-components
Native Web Components, custom elements API, Shadow DOM, HTML templates, slots, lifecycle callbacks, and framework-agnostic design patterns
wasm
WebAssembly integration — Rust to WASM with wasm-pack/wasm-bindgen, WASI, browser usage, server-side WASM, and performance considerations
vue
Vue 3 Composition API, Nuxt patterns, reactivity system, component architecture, and production development practices