Best Astro Skills for Claude Code: Content-First Sites + Islands Architecture (2026)

Astro ships zero JavaScript by default and hydrates only the components that need interactivity-the islands architecture. For content-heavy sites (blogs, docs, marketing, portfolios), this is a decisive performance advantage. Claude Code needs the right skills to generate correct .astro files, content collections, and hybrid rendering configs. Browse frontend-design skills.

Key takeaways

• The astro skill tops Astro coverage with 8,772 installs (skills.sh registry)-it teaches Claude Code .astro component syntax, content collections, and the zero-JS rendering default.
• clerk-astro-patterns (4,417 installs, 46 stars) adds Clerk auth: middleware-gated routes, session-aware layouts, and user-specific content rendering.
• astro-framework (1,565 installs) covers islands hydration directives: client:load, client:idle, client:visible, client:only-the four strategies that control when JavaScript loads.
• Astro integrates with any UI framework-React, Vue, Svelte, Lit-letting Claude Code mix skills from the 83,206-listing catalog without lock-in.
• Content Collections with typed frontmatter schemas eliminate a whole class of undefined bugs that plague Markdown-driven sites.

What are the best Astro skills for Claude Code?

The astro skill (8,772 installs, skills.sh registry) is the entry point-it teaches Claude Code the .astro component contract (frontmatter JS block + HTML template), Astro.props access, getStaticPaths for dynamic routes, and the Content Collections API with Zod schema validation.

claude skill install astro

For auth-gated pages, clerk-astro-patterns (4,417 installs, 46 stars) covers Clerk middleware in Astro's middleware.ts and server-side Astro.locals.auth() checks. For island hydration, add astro-framework (1,565 installs).

How does Astro content collections work with Claude Code?

With the astro skill installed, Claude Code generates Content Collections that are fully type-safe: src/content/config.ts with defineCollection + z.object() schemas, and getCollection('blog') calls that return typed entry objects. This removes runtime undefined errors from Markdown frontmatter-Claude Code knows at generation time which fields are required vs optional.

What are Astro islands and how do you use them?

astro-framework (1,565 installs) teaches the four client directives: client:load (hydrate immediately), client:idle (hydrate when browser is idle), client:visible (hydrate on scroll into viewport), and client:only (skip SSR entirely). With this skill, Claude Code picks the right directive for each component-interactive widgets get client:load, lazy analytics get client:idle, below-the-fold carousels get client:visible.

How do you design Astro components with Claude Code?

Astro's scoped <style> blocks are CSS Modules-equivalent-no class conflicts without a naming convention. Pair the astro skill with a design system skill to get Claude Code generating components that consume CSS custom properties from a design token file. For Tailwind integration, the Tailwind v4 guide applies directly-Astro's official Tailwind integration is first-class. React island components can use shadcn/ui with client:load.

How does Astro handle accessibility in Claude Code?

Astro renders static HTML with zero JS by default-this is structurally better for accessibility than hydrated SPAs because screen readers receive complete DOM on first load. The astro skill's component templates follow semantic HTML patterns; pair it with the accessibility guide for ARIA attributes on interactive islands.

A complete starter stack

• astro - .astro syntax, content collections, getStaticPaths
• astro-framework - hydration directives, island strategy selection
• clerk-astro-patterns - auth middleware, protected routes, session layouts
• Tailwind v4 (via astro add tailwind) paired with design system skills

Common pitfalls

• Adding client:load to every component-this defeats Astro's zero-JS default and ships React or Vue runtimes to pages that don't need interactivity.
• Using getStaticPaths without prerender = true in hybrid mode-Astro's hybrid rendering requires explicit opt-in for SSG pages.
• Nesting .astro components inside React islands-Astro components are SSR-only and can't run in the browser; islands must use framework components (React, Vue, Svelte) for client-side rendering.

Explore the complete Astro skills collection and see how it compares to Next.js 15 for full-stack vs content-first decisions.

Common questions