skills.rest
dallay
dallayOFFICIAL
Explore all skills by this author →
WebsiteGitHub

astro

Configures Astro island architecture, hydration directives, content schemas, and routing for content-driven sites.

Updated Aug 23, 2026
Search Tags:#framework#astro#hydration#static-site#content-collections#island-architecture
One-click install
npx skills add https://github.com/dallay/cvix --skill astro-dallay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro
Source: https://github.com/dallay/cvix/tree/main/.agents/skills/astro
Command: npx skills add https://github.com/dallay/cvix --skill astro-dallay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Astro projects often struggle to establish repeatable patterns for content-driven sites. This Skill codifies conventions and best practices to simplify building fast, maintainable Astro-powered websites.

Core Features & Use Cases

  • Island architecture guidance to ship zero JS by default
  • Hydration directives and component patterns for reliable interactivity
  • Content collections, schemas, and routing guidance for scalable sites
  • Performance optimizations and Vue islands integration
  • Use case: rapidly spin up a content-focused site with consistent architecture

Quick Start

Create a minimal Astro project configured with island architecture and a sample content collection to observe the recommended patterns.

Frequently Asked Questions about astro

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is island architecture in Astro and how does it ship zero JavaScript by default?▼

Astro island architecture renders pages as static HTML by default, sending zero client-side JavaScript. Interactive components are isolated as islands, loading minimal JavaScript only when hydration directives are explicitly added to those specific components.

How do I configure hydration directives for Vue islands in an Astro project?▼

Configure Vue islands by applying Astro hydration directives such as client:load, client:visible, or client:idle directly to Vue components. This controls JavaScript execution timing to ensure reliable interactivity while maintaining server-first delivery performance.

How do I use content collections and schemas for routing in static Astro sites?▼

Content collections in Astro use defined schemas to validate frontmatter and structure content entries. Query these typed collections to generate routing configurations and render scalable static site pages, ensuring consistent content schemas across the project.

What is the best way to structure a content-focused Astro site for performance?▼

Structure a content-focused Astro site by standardizing island architecture, content schemas, and routing configurations. Enforce server-first delivery, minimal client-side JavaScript, and proper image optimization to reduce inconsistencies and maximize static site performance.

Why should I use Astro instead of other static site generators for content-driven sites?▼

Astro differentiates itself from other static site generators through island architecture, shipping zero JavaScript by default. It supports Vue islands and typed content collections while enforcing server-first delivery, making it ideal for fast, content-focused websites.

When should I not use hydration directives on Astro components?▼

Avoid using hydration directives on Astro components when no client-side interactivity is required. Adding hydration unnecessarily loads client-side JavaScript, negating the server-first delivery and zero JavaScript benefits of the static site island architecture.

Related Skills

Explore More Software Engineering Skills→
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate
messebmesseb

astro

Provides guidance on Astro best practices for Islands Architecture and Content Collections.

Community
Intermediate
dotBeepsdotBeeps

astro

Architect Astro islands projects to minimize client-side JavaScript.

Community
Intermediate
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate