Astro Architecture Skill

Enforces Astro site architecture with strict TypeScript, localization, and performance constraints for lead-generation pages.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow, inaccessible, non-localized Astro lead generation sites by enforcing a high-performance, translation-ready architecture with strict boundaries between concerns.

Core Features & Use Cases

  • Astro architecture guardrails: Keeps the project static/hybrid, avoids SPA routing, and bans UI component libraries, client-heavy patterns, and risky inline business logic.
  • TypeScript strict, single source of truth: Requires TypeScript strict mode (no any) and centralizes all site data in src/config/site.ts.
  • End-to-end performance and quality targets: Enforces PageSpeed (mobile/desktop), load time, LCP, CLS, and “no JS required for page render” expectations suitable for marketing/lead-gen performance.
  • Localization-first content: Requires all visible text to come from i18n dictionaries and supports multi-language page patterns with hreflang where applicable.
  • Skill-based separation of responsibilities: Routes images, SEO, and forms through dedicated companion skills (astro-images, astro-seo, astro-forms) to reduce drift and inconsistencies.

Quick Start

Use this skill to design and validate a new Astro lead-gen site architecture for mobile-first performance with strict TypeScript and i18n-compliant pages.

Frequently Asked Questions about Astro Architecture Skill

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

FAQPage Schema
How do I build a multilingual Astro lead generation site that meets strict performance budgets?

Build a high-performance Astro lead-gen site by enforcing a static or hybrid architecture without SPA routing, centralizing site data in TypeScript strict mode, and using i18n dictionaries for all visible text to meet mobile-first PageSpeed budgets.

What is the best way to manage site configuration and enforce TypeScript strict mode in an Astro marketing site?

Manage site configuration in Astro marketing sites by centralizing all data in a single source of truth file like `src/config/site.ts` and enabling TypeScript strict mode with no `any` types. This prevents configuration drift and ensures type-safe lead generation pages.

Does Astro work for static lead generation sites without client-side JavaScript or SPA routing?

Astro works for static lead generation sites by enforcing a no-JavaScript-required page rendering approach and banning SPA routing. This architecture keeps lead-gen pages lightweight and ensures fast LCP and CLS metrics without client-heavy UI libraries.

How do I structure an Astro project to support hreflang and multi-language page variants?

Structure an Astro project for multi-language variants by routing all visible text through i18n dictionaries and applying hreflang tags where applicable. This localization-first approach ensures translation-ready marketing pages across different languages.

Why should I avoid inline business logic and UI component libraries in an Astro static site architecture?

Avoid inline business logic and UI component libraries in Astro static site architecture to maintain strict performance budgets. Banning these patterns prevents client-heavy rendering and ensures pages render without requiring client-side JavaScript.