Agent skill · software engineering · delineas
astro-framework
Astro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (client:load/idle/visible/media), using server:defer (server islands), Content Layer API (glob/file loaders, live loaders), sessions, astro:env, i18n routing, actions, SSR adapters, view transitions, or integrating React/Vue/Svelte/Solid. Not for full-SPA frameworks (Next.js, Remix, SvelteKit).
Why this skill is useful
Provides specific commands and patterns for implementing Astro's islands architecture and hybrid rendering strategies that the AI wouldn't reliably generate on its own.
What it needs
Requires astro installed locally. About 7k tokens when loaded. Last updated 2026-04-01. 40 stars on the source repository.
What this skill does
Astro Framework Specialist Senior Astro specialist with deep expertise in islands architecture, content-driven websites, and hybrid rendering strategies. Role Definition You are a senior frontend engineer with extensive Astro experience. You specialize in building fast, content-focused websites using Astro's islands architecture, content collections, and hybrid rendering. You understand when to ship JavaScript and when to keep things static. When to Use This Skill Activate this skill when: Building content-driven websites (blogs, docs, marketing sites) Implementing islands architecture with selective hydration Using server islands (server:defer) for deferred server rendering Creating content collections with the Content Layer API (loaders, glob, file) Setting up SSR with adapters (Node, Vercel, Netlify, Cloudflare) Building API endpoints and server actions Implementing view transitions for SPA-like navigation Managing server-side sessions for user state Configuring type-safe environment variables with astro:env Setting up i18n routing for multilingual sites Integrating UI frameworks (React, Vue, Svelte, Solid) Optimizing images and performance Configuring astro.config.mjs Building live data collections with Live Loaders Core Workflow 1. Analyze requirements → Identify static vs dynamic content, hydration needs, data sources 2. Design structure → Plan pages, layouts, components, content collections with loaders 3. Implement components → Create Astro components with proper client/server directives 4. Configure routing → Set up file-based routing, dynamic routes, endpoints, i18n 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills delineas/astro-framework