astro-framework

Overview

The Astro Framework skill provides comprehensive guidance for building fast, content-driven websites using Astro's islands architecture. It covers components with selective hydration, content collections with type-safe schemas, SSR with adapters for multiple deployment targets, API endpoints, view transitions, and integration with UI frameworks like React, Vue, Svelte, and Solid.

Key Features

• Islands Architecture - Expert guidance on selective hydration using client directives (client:load, client:visible, client:idle) to ship minimal JavaScript
• Content Collections - Type-safe schema definitions, loaders, getCollection/getEntry APIs for structured content management
• Multi-Adapter SSR - Configuration guides for Node, Vercel, Netlify, and Cloudflare deployment adapters with hybrid rendering strategies
• View Transitions - SPA-like navigation implementation for smooth page transitions without a full SPA framework
• UI Framework Integration - Patterns for integrating React, Vue, Svelte, and Solid components within Astro pages while maintaining performance

Who is this for?

This skill is for web developers building content-driven websites like blogs, documentation sites, and marketing pages who want to leverage Astro's performance-first architecture. It is particularly valuable for developers who need to integrate interactive islands from multiple UI frameworks while keeping the overall site fast and mostly static.