astro

Enforce standardized structure and best practices for Astro projects.

Updated May 15, 2026
One-click install
npx skills add https://github.com/nachopalmeri/agents-system --skill astro-nachopalmeri
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro
Source: https://github.com/nachopalmeri/agents-system/tree/main/.agents/skills/astro
Command: npx skills add https://github.com/nachopalmeri/agents-system --skill astro-nachopalmeri

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides standardized structure and best-practice guidance for Astro projects, helping teams set up consistent layouts and conventions.

Core Features & Use Cases

  • Enforces a conventional project layout and naming for Astro sites (src/components, src/pages, src/layouts, src/lib, public, astro.config.mjs).
  • Guides safe client-side behavior with rules like environment variable usage and islands architecture to minimize JavaScript.
  • Use case: Kick off a new Astro site with a clean, maintainable architecture and predictable build results.

Quick Start

Initialize or adjust an Astro project using the defined structure and rules to ensure consistency and optimal client-side behavior.

Frequently Asked Questions about astro

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

FAQPage Schema
What is the best way to structure an Astro project for maintainable web development?▼

The best way to structure an Astro project is to enforce a conventional layout using src/components, src/pages, src/layouts, src/lib, and public directories to ensure clean architecture and predictable build results.

How do I minimize JavaScript and optimize client-side behavior in an Astro site?▼

To minimize JavaScript and optimize client-side behavior in an Astro site, apply islands architecture principles and strict client:load rules. This approach selectively hydrates components, reducing overall payload and improving frontend performance.

How do I set up environment variables when initializing a new Astro site?▼

When initializing a new Astro site, set up environment variables by following standardized rules for their usage and access within the project architecture. This ensures safe configuration management and consistent client-side behavior across your application.

Can I use this Astro project structure guidance to refactor an existing web application?▼

Yes, you can use this guidance to refactor existing Astro projects. It applies standardized rules to adjust your current architecture, enforcing a defined layout and optimal client-side behavior to maintain consistency during web development updates.

What limitations should I consider when applying islands architecture to an Astro project?▼

When applying islands architecture to an Astro project, consider limitations around strict client:load rules and environment variable usage. Carefully managing these constraints is necessary to maintain performant client-side behavior and predictable build outputs without unintended hydration overhead.