skills.rest
BrunoAMSilva
BrunoAMSilvaCOMMUNITY
Explore all skills by this author →
GitHub

astro

Detect Astro output modes and apply client directive strategies.

Updated Apr 14, 2026
Search Tags:#typescript#react#astro#ssr#ssg#islands#client-directives
One-click install
npx skills add https://github.com/BrunoAMSilva/my-config --skill astro-brunoamsilva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro
Source: https://github.com/BrunoAMSilva/my-config/tree/main/coding/skills/astro
Command: npx skills add https://github.com/BrunoAMSilva/my-config --skill astro-brunoamsilva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many projects struggle to choose the correct rendering mode and component hydration strategy, resulting in excess client JavaScript, broken SSR expectations, or build-time/runtime errors. This Skill centralizes Astro best practices so teams can detect project output, apply island architecture correctly, and avoid common SSG↔SSR migration pitfalls.

Core Features & Use Cases

  • Rendering Guidance: Clear patterns for SSG, SSR, and hybrid outputs and how to detect them from astro.config.mjs.
  • Islands & Hydration: Advice for using .astro components by default, when to use React islands, and how to apply client:load, client:visible, and client:idle effectively.
  • Routing & Data: Required patterns for getStaticPaths, prerender control, and content collection workflows for blogs and docs.
  • Operational Playbooks: Decision tree, migration steps (SSG→hybrid), middleware and env variable considerations, and examples for blog (SSG), dashboard (SSR), and hybrid setups.

Quick Start

Use the astro skill to analyze my repository and recommend the optimal astro.config.mjs output mode, required adapter or SSG patterns, client directive strategy, and which pages should be prerendered or use prerender: false.

Frequently Asked Questions about astro

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

FAQPage Schema
How do I choose between SSG, SSR, and hybrid output modes in Astro?▼

Astro rendering output is set in astro.config.mjs. Use static SSG for blogs, SSR with an adapter for dynamic dashboards, or hybrid mode to selectively apply prerender false on specific routes.

When should I use client directives like client:load and client:visible?▼

Client directives control when Astro hydrates React islands. Use client:load for immediately needed interactivity, client:idle for lower priority components, and client:visible to defer hydration until the island scrolls into view, minimizing excess client JavaScript.

Do I need an adapter for server-side rendering in Astro?▼

Yes, Astro SSR requires configuring a deployment adapter in astro.config.mjs. Adapters handle server-side request and response lifecycles, allowing your server-rendered or hybrid application to deploy to Node.js or serverless environments.

How do I use getStaticPaths with content collections in Astro?▼

Astro uses getStaticPaths to prerender dynamic routes at build time. When paired with content collections for blogs or docs, you map collection entries to route parameters, ensuring static pages are generated efficiently.

Why does my Astro SSG to SSR migration break my build?▼

Astro SSG to SSR migration often breaks due to incorrect adapter setup or missing prerender controls. You must configure the output mode in astro.config.mjs and adjust environment variables and middleware expectations for runtime data.

Related Skills

Explore More Software Engineering Skills→
mgd34msumgd34msu
4

gatsby

Create static and hybrid websites with Gatsby, GraphQL, and file-system routing.

Community
Intermediate
rodydavisrodydavis
803

jaspr-pre-rendering-and-hydration

Enforce hydration and import rules for Jaspr SSR/SSG apps.

Community
Intermediate
walid-moswalid-mos
2

structure-astro

Generates Astro project directory layouts for component types.

Community
Intermediate
jaypatrickjaypatrick

angular-ssr

Configure server-side rendering and hydration for Angular v20+ projects.

Community
Advanced