astro-framework

Guides Astro sites with islands architecture, content collections, and hybrid rendering.

Updated Jul 15, 2025
One-click install
npx skills add https://github.com/nicolas-deyros/astro-portfolio-v2 --skill astro-framework
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: astro-framework
Source: https://github.com/nicolas-deyros/astro-portfolio-v2/tree/main/.agents/skills/astro-framework
Command: npx skills add https://github.com/nicolas-deyros/astro-portfolio-v2 --skill astro-framework

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a comprehensive, best-practices guide for building fast, content-driven sites with Astro by leveraging islands architecture, content collections, and hybrid rendering.

Core Features & Use Cases

  • Islands-based hydration strategy to ship zero JavaScript by default and hydrate only interactive components
  • Type-safe content modeling with Zod and astro:content for robust content schemas
  • SSR and hybrid rendering guidance with adapters for common deployment targets
  • View transitions and multi-framework integrations (React, Vue, Svelte, Solid) for smooth navigations
  • End-to-end guidance for routing, API endpoints, and asset/image optimization in Astro

Quick Start

Activate this skill to start building an Astro project with islands, content collections, and hybrid rendering by following its workflow and references.

Frequently Asked Questions about astro-framework

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

FAQPage Schema
How do I implement islands architecture in Astro to ship zero JavaScript by default?

Astro islands architecture lets you ship zero JavaScript by default, hydrating only interactive components. You can selectively apply client directives to hydrate specific components while keeping the rest of your site static and fast.

How do I define type-safe content schemas in Astro using content collections?

Type-safe content schemas in Astro are defined using content collections and Zod. This combination enables robust content modeling by validating frontmatter at build time, ensuring your content structure remains strictly typed across your project.

Can I use React, Vue, Svelte, and Solid components together in a single Astro project?

Yes, Astro supports multi-framework integrations, allowing you to use React, Vue, Svelte, and Solid components together. You can mix these frameworks in the same project and control their hydration individually using client directives.

How do I configure SSR adapters for hybrid rendering in Astro?

Configuring SSR adapters for hybrid rendering in Astro involves setting up the appropriate deployment adapter. This enables hybrid rendering, allowing you to choose between static generation and server-side rendering on a per-page basis.

What is the best way to add view transitions for smooth navigations in Astro?

Astro provides built-in view transitions to enable smooth navigations between pages. By implementing the view transitions API, you can create seamless page updates without full page reloads, improving user experience without heavy JavaScript.

Does Astro support type-safe content modeling for large content-driven sites?

Yes, Astro supports type-safe content modeling for large content-driven sites through its content collections feature. By enforcing type-safe schemas with Zod, it ensures content integrity and scalability for robust, fast websites.