Complete Astro/Starlight development toolkit with skills, agents, and automated workflows

Installation

npx claude-plugins install @superbenefit/sb-marketplace/astro-dev

Contents

Folders: commands, hooks, knowledge-base, skills

Files: CHANGELOG.md, LICENSE, README.md

Documentation

Astro Dev Plugin

Simplified Astro and Starlight development toolkit for Claude Code with intelligent tiered knowledge loading.

Overview

The astro-dev plugin provides expert assistance for Astro and Starlight development through two primary commands and a smart knowledge system that loads context efficiently based on your task.

Version: 0.4.0 (Simplified Architecture)

Quick Start

# Main development command - handles everything
/dev Create a blog with categories and pagination

# Quick API reference lookup
/lookup getCollection

# Architecture planning for complex systems
/design Multi-tenant docs system with GitBook integration

That’s it! The /dev command is your primary tool for all Astro/Starlight development.

Commands

/dev [description]

Your main command for all development tasks - from simple components to complex features.

# Simple component
/dev Add a Footer component with social links

# Feature with collections
/dev Create a blog with categories, tags, and pagination

# Bug fixes
/dev Fix all TypeScript errors in the components folder

# Complex integration
/dev Integrate external API with custom content loader

# With validation control
/dev Add authentication --audit=comprehensive
/dev Create test component --audit=off

Auto-validation: Automatically validates code based on task size (can override with --audit flag).

/lookup [query]

Quick API reference for Astro/Starlight APIs and syntax.

/lookup getCollection
/lookup client directives
/lookup starlight config
/lookup getStaticPaths

Returns current syntax, examples, and documentation links.

/design [system]

Architecture planning for complex systems (optional, use before complex builds).

/design Multi-language content system with versioning
/design Integration strategy for Supabase + Astro
/design Refactor 200 pages to content collections

Provides design documents, schemas, and implementation roadmaps. Then use /dev to implement.

Skills

The plugin provides two skills with intelligent loading:

astro-coding

Implementation knowledge loaded in three tiers:

• Tier 1 (Always, ~100 tokens): Critical rules that prevent breaking errors
• Tier 2 (Context-based, ~400 tokens): Relevant patterns for your task
• Tier 3 (On-demand, ~800 tokens): Deep-dive references for complex work

astro-knowledge

API reference for quick documentation lookups via /lookup command.

Critical Rules (Always Applied)

These 10 rules are enforced on every task to prevent build failures:

1. ✅ File extensions required: import Layout from './Layout.astro' (not './Layout')
2. ✅ Correct module prefix: 'astro:content' (not 'astro/content')
3. ✅ Use class not className in .astro files
4. ✅ Await in frontmatter only, never in templates
5. ✅ Never expose SECRET_* environment variables client-side
6. ✅ Type all Props interfaces with TypeScript
7. ✅ Define getStaticPaths() for dynamic routes
8. ✅ Don’t access Astro.params inside getStaticPaths()
9. ✅ Use CollectionEntry<'name'> types for collections
10. ✅ Validate XSS risk with set:html (only use with trusted sources)

Knowledge Base Structure

knowledge-base/
├── critical-rules.md          # Tier 1: Always loaded (~100 tokens)
├── astro-patterns.md          # Tier 2: Core patterns (~400 tokens)
├── error-catalog.md           # Tier 2: 100+ errors indexed by symptom
├── starlight-guide.md         # Tier 2: Starlight-specific patterns
└── deep-dive/                 # Tier 3: On-demand (~800 tokens)
    ├── integrations.md        # External data & custom loaders
    ├── content-collections-reference.md
    ├── content-loader-api.md
    ├── external-data-integration.md
    ├── routing-pages-reference.md
    └── starlight-specific.md

Usage Examples

Simple Component

/dev Create a Card component with title, description, and image props

Result: Component created with proper TypeScript types, accessibility, and validation.

Feature Implementation

/dev Add a blog with categories, pagination, and RSS feed

Result: Complete blog system with content collections, dynamic routes, and all features.

Bug Fixing

/dev Fix the import errors in the components folder

Result: All imports fixed with proper extensions and module paths.

Complex Architecture

# Step 1: Design the system
/design Multi-tenant docs with role-based access control

# Step 2: Review the architecture document

# Step 3: Implement it
/dev Implement the multi-tenant docs architecture

Result: Full implementation following the design plan.

API Lookup

/lookup getStaticPaths

Result: Current syntax, usage examples, TypeSc

…(truncated)

Included Skills

This plugin includes 2 skill definitions:

astro-coding

Provides Astro/Starlight implementation patterns, best practices, and critical rules with tiered context loading

astro-knowledge

API documentation and reference provider for Astro/Starlight. Provides on-demand documentation lookup, API verification, and feature availability checks.

Source

View on GitHub