--- name: astro-coding description: Provides Astro\/Starlight implementation patterns, best practices, and critical rules with tiered context loading --- # astro-coding Skill Smart, context-aware implementation patterns for Astro and Starlight development. Provides the knowledge needed to write high-quality, standards-compliant Astro code. ## Purpose The astro-coding skill is a **knowledge provider** that supplies Astro-specific coding patterns, critical rules, and best practices. It uses a tiered loading strategy to minimize token usage while ensuring all critical rules are always available. ## Tiered Loading Strategy ### Tier 1: Critical Rules (ALWAYS LOADED - ~100 tokens) The non-negotiable rules that prevent breaking errors. Loaded for every Astro\/Starlight task. **Source**: `${CLAUDE_PLUGIN_ROOT}\/knowledge-base\/critical-rules.md` **Contains**: 1. File extensions in imports (`.astro`, `.ts`, `.js`) 2. Correct module prefixes (`astro:content` not `astro\/content`) 3. Use `class` not `className` in .astro files 4. Async operations in frontmatter only 5. Never expose `SECRET_*` client-side 6. Type all component Props interfaces 7. Define `getStaticPaths()` for dynamic routes 8. Don't access `Astro.params` inside `getStaticPaths()` 9. Use proper collection types (`CollectionEntry<'name'>`) 10. Validate XSS risk with `set:html` ### Tier 2: Common Patterns (CONTEXT-LOADED - ~400 tokens) Pattern-specific knowledge loaded based on task type detection. **Sources**: - `${CLAUDE_PLUGIN_ROOT}\/knowledge-base\/astro-patterns.md` - Core Astro patterns - `${CLAUDE_PLUGIN_ROOT}\/knowledge-base\/error-catalog.md` - 100+ error patterns indexed by symptom - `${CLAUDE_PLUGIN_ROOT}\/knowledge-base\/starlight-guide.md` - Starlight-specific patterns **Load based on keywords**: - **"component"** → Component patterns, TypeScript patterns - **"page" or "route"** → Routing patterns, dynamic routes, `getStaticPaths` - **"collection" or "content"** → Content collections, schemas, queries - **"config" or "integration"** → Configuration patterns - **"starlight"** → Starlight patterns, sidebar, components - **"error" or "fix" or "debug"** → Error catalog for diagnostic help ### Tier 3: Deep Dive (ON-DEMAND - ~800 tokens) Comprehensive references for complex integrations and advanced features. **Source**: `${CLAUDE_PLUGIN_ROOT}\/knowledge-base\/deep-dive\/` **Files**: - `integrations.md` - External data integrations and custom loaders - `content-collections-reference.md` - Complete collections API - `content-loader-api.md` - Advanced loader patterns - `external-data-integration.md` - Multi-source content systems - `routing-pages-reference.md` - Advanced routing patterns - `starlight-specific.md` - Deep Starlight customization **Load for**: - Custom content loaders - External API integrations - Complex multi-source architectures - Advanced routing strategies - Deep Starlight customization ## Critical Rules Reference **These rules are ALWAYS enforced, loaded from Tier 1:** ### 1. File Extensions Required ✅ ```typescript \/\/ ✅ CORRECT import Header from '.\/Header.astro'; import { formatDate } from '..\/utils\/dates.ts'; \/\/ ❌ WRONG - Build error import Header from '.\/Header'; ``` ### 2. Correct Module Prefixes ✅ ```typescript \/\/ ✅ CORRECT - Use colon import { getCollection } from 'astro:content'; \/\/ ❌ WRONG - Module not found import { getCollection } from 'astro\/content'; ``` ### 3. Use `class` Not `className` ✅ ```astro

``` ### 4. Await in Frontmatter Only ✅ ```astro --- \/\/ ✅ CORRECT const posts = await getCollection('blog'); ---

{p.data.title}<\/li>)}<\/ul>