astro-starlight

Name: astro-starlight
Author: fusengine

github.com/fusengineDevelopment3450 installsUpdated 2w ago

About astro-starlight

A skill for setting up and customizing Astro Starlight documentation sites. It covers navigation, search, plugins, multilingual content, and Starlight-specific Content Layer integration.

Key features

01Filesystem or manual sidebar setup
02Pagefind search and DocSearch guidance
03Dark and light theme customization
04Documentation plugin configuration
05Multilingual docs with hreflang
06Starlight Content Layer integration

Use cases

01Creating a technical documentation site
02Adding API reference or TypeScript docs
03Adding a blog or versioned docs
04Publishing documentation in multiple languages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/agents --skill astro-starlight

After installing, type/astro-starlightin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

content-layer.md

customization.md

i18n-multilang.md

plugins.md

search.md

setup.md

sidebar-config.md

references/templates/

sidebar-example.md

starlight-config.md

Details

From the project README

Sets up and customizes Astro Starlight (0.42+, latest 0.42.4; requires Astro 7.2.10+ — 0.41 dropped Astro 6), the documentation theme built on Astro 7: filesystem-based or manual sidebar configuration, built-in Pagefind full-text search (or DocSearch for high-traffic/large docs), automatic dark/light mode, and the plugin ecosystem — `starlight-blog`, `starlight-openapi`, `starlight-typedoc`, `starlight-versions`, `starlight-llms-txt` for AI discoverability.

Also covers multi-language documentation with hreflang support and Content Layer API integration (docsLoader, schema) specific to Starlight's content model, plus CSS custom property theming. Does not cover generic Astro Content Layer usage outside Starlight (astro-content) or non-Starlight i18n routing (astro-i18n) — those are handled by their own skills.

Astro Starlight

Production-ready documentation theme for Astro with built-in search, dark mode, i18n, and rich plugin ecosystem.

Agent Workflow (MANDATORY)

Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:

fuse-ai-pilot:explore-codebase - Analyze existing Starlight config, sidebar, and content structure
fuse-ai-pilot:research-expert - Verify Starlight plugin APIs via Context7/Exa
mcp__context7__query-docs - Check Starlight docs for Content Layer and i18n patterns

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

Building technical documentation sites
Creating API reference docs (with starlight-openapi)
Generating docs from TypeScript types (with starlight-typedoc)
Adding a blog to a documentation site (with starlight-blog)
Setting up versioned documentation (with starlight-versions)
Multi-language documentation with hreflang support

Why Starlight

Feature	Benefit
Pagefind built-in	Full-text search, zero config
Dark/light mode	Automatic, CSS custom properties
Sidebar config	Filesystem-based or manual groups
Plugin ecosystem	DocSearch, blog, openapi, typedoc
Content Layer API	Astro 7 content collections integration
llms.txt support	`starlight-llms-txt` for AI discoverability
No-JS mobile menu (0.42)	Popover API — menu works with JS disabled; ships compiled JS + `.d.ts` (faster `tsc`)

Reference Guide

Concepts

Topic	Reference	When to Consult
Setup	setup.md	Installation, project structure
Sidebar	sidebar-config.md	Navigation, groups, auto-gen
Search	search.md	Pagefind, DocSearch, exclude pages
Plugins	plugins.md	Blog, openapi, typedoc, versions
i18n	i18n-multilang.md	Locales, translations, hreflang
Content Layer	content-layer.md	docsLoader, schema, collections
Customization	customization.md	CSS variables, components override

Templates

Template	When to Use
starlight-config.md	Full astro.config.mjs with Starlight
sidebar-example.md	Complex sidebar with groups and badges

Best Practices

Start with filesystem sidebar - Add manual config only when needed
Keep Pagefind for small sites - DocSearch for high-traffic or large docs
Use starlight-llms-txt - AI crawlers increasingly important for docs
Content Layer schema - Type-safe frontmatter prevents runtime errors
CSS custom properties - Override theme without component slots

Comments

Markdown supported

Details

Author: fusengine
Repository: fusengine/agents
Category: Development
Installs: 50
GitHub stars: 34

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.