Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Assists with building content-driven websites using Astro's island architecture. Use when creating static sites, blogs, documentation, or marketing pages that ship zero JavaScript by default. Trigger words: astro, static site, island architecture, content collections, SSG, hybrid rendering, astro components.
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-04 | ✗→✓ | ▲ Improved | 16% | 0% |
| case-01 | ✓→✓ | ＝ Same ✓ | 24% | 0% |
| case-02 | ✓→✓ | ＝ Same ✓ | 154% | 0% |
| case-03 | ✓→✓ | ＝ Same ✓ | 133% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | -3% | 0% |
Astro is a web framework for building content-driven websites that ships zero JavaScript by default. Its island architecture hydrates only interactive components, achieving excellent Lighthouse scores while supporting React, Vue, Svelte, or any UI framework where interactivity is needed.
src/pages/ with .astro, .md, or .mdx files, and organize shared structure in src/layouts/.client:visible or client:idle over client:load since most components do not need immediate hydration.src/content/ with strict Zod schemas using defineCollection(), and query with getCollection() and getEntry().output: "server" for dynamic pages, or use hybrid rendering with per-page export const prerender = false.<Image> component from astro:assets for automatic format conversion (WebP/AVIF), resizing, and lazy loading instead of raw <img> tags.<ViewTransitions /> for SPA-like navigation without shipping a client-side router.@astrojs/react, @astrojs/vue, @astrojs/svelte) and use Astro components for static content, reaching for framework components only when interactivity is required.User request: "Create an Astro blog with type-safe Markdown content"
Actions:
src/pages/blog/[slug].astro with getStaticPaths()getCollection("blog") with sortingOutput: A statically generated blog with validated content, clean URLs, and smooth page transitions.
User request: "Add a React search component to my Astro documentation site"
Actions:
@astrojs/react integrationclient:idle directiveOutput: A documentation site that is fully static except for the interactive search island.
.astro) for static content; only use React/Vue/Svelte when interactivity is needed.client:visible or client:idle over client:load for hydration directives.astro:assets <Image> over raw <img> tags for automatic optimization.<head>, navigation, and footer; put page-specific content in pages.Other measured skills in the registry, with their headline benchmark lift.