mcpField
A
astro-starlight

astro-starlight

github.com/fusengine開発3450 回インストール2 週間前に更新
リポジトリ

astro-starlight について

Astro Starlight のドキュメントサイトを構築・カスタマイズするスキルです。ナビゲーション、検索、プラグイン、多言語コンテンツ、Starlight 固有の Content Layer 連携を扱います。

主な機能

  1. 01ファイルシステムまたは手動のサイドバー設定
  2. 02Pagefind 検索と DocSearch のガイド
  3. 03ライト・ダークテーマのカスタマイズ
  4. 04ドキュメント用プラグインの設定
  5. 05hreflang 対応の多言語ドキュメント
  6. 06Starlight Content Layer 連携

活用シーン

  1. 01技術ドキュメントサイトの作成
  2. 02API リファレンスや TypeScript ドキュメントの追加
  3. 03ブログやバージョン別ドキュメントの追加
  4. 04多言語ドキュメントの公開

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/astro-starlightを入力して読み込まれたか確認します。

同梱ファイル

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

詳細

Astro 7 を基盤とするドキュメントテーマ Astro Starlight（0.42 以降、最新は 0.42.4。Astro 7.2.10 以降が必要です。0.41 で Astro 6 のサポートは終了しました）をセットアップしてカスタマイズします。ファイルシステムベースまたは手動でのサイドバー設定、組み込みの Pagefind 全文検索（またはトラフィックの多い大規模ドキュメント向けの DocSearch）、自動ダーク／ライトモード、プラグインエコシステム（AI による発見性を高める `starlight-blog`、`starlight-openapi`、`starlight-typedoc`、`starlight-versions`、`starlight-llms-txt`）を扱います。

また、Starlight のコンテンツモデルに固有の、hreflang 対応の多言語ドキュメントと Content Layer API の統合（docsLoader、スキーマ）、および CSS カスタムプロパティによるテーマ設定も扱います。Starlight 以外での一般的な Astro Content Layer の使用方法（astro-content）や、Starlight を使わない i18n ルーティング（astro-i18n）は対象外です。これらはそれぞれ専用のスキルで扱います。

Astro Starlight

検索、ダークモード、i18n、充実したプラグインエコシステムを備えた、本番環境対応の Astro 向けドキュメントテーマです。

エージェントのワークフロー（必須）

実装の前に、必ず以下の 3 つのエージェントを並行して起動してください。それぞれ name を指定して Agent を 1 回呼び出します。

  1. fuse-ai-pilot:explore-codebase - 既存の Starlight 設定、サイドバー、コンテンツ構造を分析します
  2. fuse-ai-pilot:research-expert - Context7／Exa を使って Starlight プラグインの API を確認します
  3. mcp__context7__query-docs - Content Layer と i18n のパターンについて Starlight のドキュメントを確認します

実装後、検証のために fuse-ai-pilot:sniper を実行してください。

概要

使用するケース
  • 技術ドキュメントサイトの構築
  • API リファレンスドキュメントの作成（starlight-openapi を使用）
  • TypeScript の型からドキュメントを生成（starlight-typedoc を使用）
  • ドキュメントサイトへのブログ追加（starlight-blog を使用）
  • バージョン管理されたドキュメントのセットアップ（starlight-versions を使用）
  • hreflang 対応の多言語ドキュメント
Starlight を選ぶ理由
機能利点
Pagefind を標準搭載全文検索、設定不要
ダーク／ライトモード自動対応、CSS カスタムプロパティ
サイドバー設定ファイルシステムベースまたは手動グループ
プラグインエコシステムDocSearch、ブログ、openapi、typedoc
Content Layer APIAstro 7 のコンテンツコレクションとの統合
llms.txt 対応AI による発見性を高める starlight-llms-txt
JavaScript 不要のモバイルメニュー（0.42）Popover API により、JavaScript が無効でもメニューが機能します。コンパイル済みの JS と .d.ts を同梱するため、tsc が高速化します

リファレンスガイド

概念
トピックリファレンス参照するタイミング
セットアップsetup.mdインストール、プロジェクト構成
サイドバーsidebar-config.mdナビゲーション、グループ、自動生成
検索search.mdPagefind、DocSearch、ページの除外
プラグインplugins.mdブログ、openapi、typedoc、versions
i18ni18n-multilang.mdロケール、翻訳、hreflang
Content Layercontent-layer.mddocsLoader、スキーマ、コレクション
カスタマイズcustomization.mdCSS 変数、コンポーネントのオーバーライド
テンプレート
テンプレート使用するケース
starlight-config.mdStarlight を含む完全な astro.config.mjs
sidebar-example.mdグループとバッジを含む複雑なサイドバー

ベストプラクティス

  1. まずはファイルシステムベースのサイドバーを使う - 必要になった場合にのみ手動設定を追加します
  2. 小規模なサイトでは Pagefind を使う - トラフィックの多い大規模ドキュメントには DocSearch を使用します
  3. starlight-llms-txt を使う - AI クローラーはドキュメントにとってますます重要になっています
  4. Content Layer のスキーマを使う - 型安全なフロントマターで実行時エラーを防ぎます
  5. CSS カスタムプロパティを使う - コンポーネントスロットを使わずにテーマをオーバーライドします

コメント

Markdown 対応