astro-expert

Enforce Astro performance and correctness with typed content and hydration directives.

1|1|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/svssdeva/agentic-skills --skill astro-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-expert
Source: https://github.com/svssdeva/agentic-skills/tree/main/astro/astro-expert
Command: npx skills add https://github.com/svssdeva/agentic-skills --skill astro-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of building and maintaining Astro projects that are slow, inconsistent, or misusing Astro’s intended performance and content patterns.

Core Features & Use Cases

  • Build and deployment guardrails: Optimizes build workflows, handles environment variables per environment, and aligns CI/CD with static hosting platforms like Netlify and Vercel.
  • Astro component best practices: Develops reusable .astro components with correct props usage and framework components only when interactivity truly requires them.
  • Typed content and reliable data fetching: Uses content collections with Zod schemas for build-time validation and applies correct patterns for static generation and data fetching errors.
  • Performance and correctness “iron laws”: Enforces hydration directives explicitly, prevents accidental JS bloat, and mandates Astro image optimization via astro:assets.
  • Styling and TypeScript discipline: Encourages strict TypeScript settings and utility-first TailwindCSS for consistent implementation quality.

Quick Start

Use the astro-expert skill to review your Astro codebase for performance regressions, hydration misuse, untyped content, and incorrect image usage.

Frequently Asked Questions about astro-expert

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

FAQPage Schema
How do I optimize Astro build performance for static route generation?▼

Optimizing Astro build performance involves applying correct static generation patterns, enforcing explicit island hydration to prevent JavaScript bloat, and using Astro-native image optimization via astro:assets.

What is the best way to validate typed content in Astro content collections?▼

The best way to validate typed content in Astro content collections is using Zod schemas for build-time validation, ensuring reliable data fetching and strict TypeScript compliance across your project.

How do I set up CI/CD for Astro projects on Netlify or Vercel?▼

Setting up CI/CD for Astro projects requires configuring build workflows, handling environment variables per environment, and aligning deployments with static hosting platforms like Netlify and Vercel.

When should I use framework components and hydration directives in Astro?▼

You should use framework components and explicit hydration directives in Astro only when interactivity truly requires client-side JavaScript, preventing accidental JS bloat and maintaining performance.

Does this approach to Astro component refactoring work with strict TypeScript and TailwindCSS?▼

Yes, this Astro component refactoring approach works with strict TypeScript and utility-first TailwindCSS, enforcing consistent implementation quality across reusable .astro components and props.

Why are my Astro images not optimized during the build process?▼

Astro images may not be optimized if you bypass the mandated astro:assets module, which is required to enforce Astro-native image optimization and maintain high-performance builds.