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.