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.