skills.rest
rubrical-works
rubrical-worksOFFICIAL
Explore all skills by this author →
GitHub

astro-development

Guides architectural decisions for Astro hydration directives, Content Collections, rendering modes, and deployment adapters.

Updated Mar 30, 2026
Search Tags:#deployment#web development#astro#hydration#static site generation#islands architecture#content collections
One-click install
npx skills add https://github.com/rubrical-works/idpf-praxis-skills --skill astro-development-rubrical-works
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-development
Source: https://github.com/rubrical-works/idpf-praxis-skills/tree/main/Skills/astro-development
Command: npx skills add https://github.com/rubrical-works/idpf-praxis-skills --skill astro-development-rubrical-works

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Astro projects require repeated architectural decisions about hydration directives, content schema design, rendering modes, and deployment adapters, and wrong choices lead to bloated JavaScript bundles, broken type safety, or mismatched hosting setups. ## Core Features & Use Cases - Islands Architecture Guidance: Decision flowchart for choosing between client:load, client:idle, client:visible, client:media, and client:only hydration directives based on UX priority. - Content Collection Patterns: Schema-first design with Zod validation, discriminated unions, cross-collection references, and type-safe querying with getCollection and getEntry. - Rendering & Deployment Selection: Decision matrices for static, hybrid, and server rendering modes plus adapter selection for Vercel, Netlify, Cloudflare, and Node.js. - Use Case: When building a blog with an interactive comment section, use this Skill to decide that the comments should use client:idle, define a Zod schema with draft filtering, and deploy statically to Cloudflare without an adapter. ## Quick Start Ask the AI to read the astro-development skill and recommend the right hydration directive and rendering mode for your Astro page.

Frequently Asked Questions about astro-development

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

FAQPage Schema
How do I choose between client:load, client:idle, and client:visible in Astro?▼

Choose based on when the component needs interactivity: client:load for critical above-the-fold elements like buy buttons, client:idle for non-urgent widgets like comments, and client:visible for below-the-fold content like carousels. Default to no directive for static content.

How do I create type-safe Content Collections in Astro?▼

Define collections in src/content.config.ts using defineCollection with a glob loader and a Zod schema. Query entries with getCollection or getEntry for full TypeScript type inference, and use reference() for type-safe cross-collection links.

Can I use React and Svelte together in one Astro project?▼

Yes, Astro supports mixing multiple UI frameworks by adding integrations like @astrojs/react and @astrojs/svelte. Each framework renders independently as isolated islands, and you can share state via nanostores or custom events.

When should I use server rendering instead of static in Astro?▼

Use static rendering by default for blogs, docs, and marketing sites. Switch to hybrid mode with export const prerender = false on individual routes needing real-time or user-specific data, and reserve full server mode for apps with authentication or personalization.

Which Astro deployment adapter should I use?▼

Match the adapter to your hosting platform: @astrojs/vercel for Vercel, @astrojs/netlify for Netlify, @astrojs/cloudflare for Cloudflare edge rendering, and @astrojs/node for self-hosted Docker or VPS setups. Static-only sites need no adapter.

Why is my Astro page shipping too much JavaScript?▼

Overusing client:load hydrates every component immediately, defeating the Islands architecture. Audit your directives, move below-fold components to client:visible, defer non-critical widgets to client:idle, and remove directives from purely static components.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
14

astro

Create content-driven websites with Astro content collections and island architecture.

Official
Intermediate
fusenginefusengine
1

astro-deployment

Configures Astro 7 deployment adapters for Cloudflare, Vercel, Netlify, and Node.js platforms.

Community
Intermediate
zeeshan080zeeshan080

performance-optimization

Profile web app performance with Lighthouse audits and bundle analysis.

Community
Intermediate
crewrigcrewrig
20

astro

Review Astro framework code and project configuration for correctness.

Official
Advanced