Astro best practices, routing patterns, component architecture, and static site generation techniques. Use when building Astro websites, setting up routing, designing component architecture, configuring static site generation, optimizing build performance, implementing content strategies, or when user mentions Astro patterns, routing, component design, SSG, static sites, or Astro best practices.
View on GitHubvanman2024/ai-dev-marketplace
website-builder
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/vanman2024/ai-dev-marketplace/blob/main/plugins/website-builder/skills/astro-patterns/SKILL.md -a claude-code --skill astro-patternsInstallation paths:
.claude/skills/astro-patterns/# Astro Patterns Comprehensive best practices, routing patterns, component architecture, and static site generation techniques for building high-performance Astro websites. ## Overview This skill provides: - File-based routing patterns and advanced routing configurations - Component architecture following islands architecture principles - Layout systems with nested layouts and slot patterns - Content strategies for blogs, documentation, and marketing sites - Static site generation optimization techniques - Build performance tuning and bundle optimization - SEO and performance best practices ## Setup Scripts ### Core Setup Scripts 1. **scripts/setup-routing.sh** - Initialize routing structure and conventions 2. **scripts/setup-components.sh** - Scaffold component directory structure 3. **scripts/setup-layouts.sh** - Create layout hierarchy 4. **scripts/validate-structure.sh** - Validate Astro project structure 5. **scripts/optimize-build.sh** - Apply build optimization configurations ### Utility Scripts 6. **scripts/generate-route.sh** - Generate new route with layouts 7. **scripts/generate-page.sh** - Create new page with best practices 8. **scripts/analyze-performance.sh** - Analyze build and runtime performance 9. **scripts/generate-sitemap.sh** - Generate sitemap configuration ## Templates ### Routing Templates 1. **templates/routing/basic-page.astro** - Standard page with layouts 2. **templates/routing/dynamic-route.astro** - Dynamic route with getStaticPaths 3. **templates/routing/api-endpoint.ts** - API endpoint handler 4. **templates/routing/middleware.ts** - Route middleware configuration 5. **templates/routing/redirect-config.ts** - Redirect rules 6. **templates/routing/404-page.astro** - Custom 404 error page ### Component Templates 7. **templates/components/base-component.astro** - Basic Astro component 8. **templates/components/island-wrapper.astro** - Framework component wrapper 9. **templates/components/slot-component.astro** - Component w