astro
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.
What this skill does
# Astro
## Overview
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.
## Instructions
- When creating pages, use file-based routing in `src/pages/` with `.astro`, `.md`, or `.mdx` files, and organize shared structure in `src/layouts/`.
- When adding interactivity, use client directives on framework components: prefer `client:visible` or `client:idle` over `client:load` since most components do not need immediate hydration.
- When managing content, define Content Collections in `src/content/` with strict Zod schemas using `defineCollection()`, and query with `getCollection()` and `getEntry()`.
- When choosing rendering modes, default to static (SSG) for marketing and content pages, use `output: "server"` for dynamic pages, or use hybrid rendering with per-page `export const prerender = false`.
- When optimizing images, use the `<Image>` component from `astro:assets` for automatic format conversion (WebP/AVIF), resizing, and lazy loading instead of raw `<img>` tags.
- When adding page transitions, enable View Transitions with `<ViewTransitions />` for SPA-like navigation without shipping a client-side router.
- When integrating UI frameworks, install the appropriate integration (`@astrojs/react`, `@astrojs/vue`, `@astrojs/svelte`) and use Astro components for static content, reaching for framework components only when interactivity is required.
## Examples
### Example 1: Build a blog with Content Collections
**User request:** "Create an Astro blog with type-safe Markdown content"
**Actions:**
1. Define a blog Content Collection with Zod schema for frontmatter (title, date, tags, author)
2. Create dynamic route `src/pages/blog/[slug].astro` with `getStaticPaths()`
3. Build blog index page querying `getCollection("blog")` with sorting
4. Add layout with SEO meta tags, navigation, and View Transitions
**Output:** A statically generated blog with validated content, clean URLs, and smooth page transitions.
### Example 2: Add interactive components to a static site
**User request:** "Add a React search component to my Astro documentation site"
**Actions:**
1. Install `@astrojs/react` integration
2. Create the React search component with state and event handling
3. Add the component to the page with `client:idle` directive
4. Pass static data as props from the Astro page frontmatter
**Output:** A documentation site that is fully static except for the interactive search island.
## Guidelines
- Use Astro components (`.astro`) for static content; only use React/Vue/Svelte when interactivity is needed.
- Default to `client:visible` or `client:idle` over `client:load` for hydration directives.
- Define Content Collections with strict Zod schemas to catch content errors at build time.
- Use `astro:assets` `<Image>` over raw `<img>` tags for automatic optimization.
- Keep layouts thin with shared `<head>`, navigation, and footer; put page-specific content in pages.
- Use hybrid rendering: static for marketing pages, SSR only for personalized or dynamic pages.
- Enable View Transitions for SPA-like navigation without shipping a router.
Related in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.