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.