ln-114-frontend-docs-creator

パス： ファイルパス（references/、../ln-*）は、このスキルディレクトリを基準とした相対パスです。

フロントエンドドキュメント作成ツール

タイプ： L3 ワーカー

design_guidelines.md を作成する L3 ワーカーです。条件付きで、プロジェクトにフロントエンドがある場合にのみ呼び出されます。

目的と対象範囲

• design_guidelines.md を作成します（hasFrontend の場合）
• ln-110-project-docs-coordinator から Context Store を受け取ります
• WCAG 2.1 レベル AA のアクセシビリティ基準に準拠します
• デザインシステムのドキュメントを作成します
• 後続の利用者： design_guidelines.md は ln-401（Frontend Guard）と ln-402（Frontend Review Checks）によって読み込まれ、実装に対する実行時のデザイン検証に使用されます
• コンテキストを自身で収集せず、コーディネーターからの入力を使用します

呼び出し（誰が／いつ）

• ln-110-project-docs-coordinator： 次の場合に条件付きで呼び出されます：
  • hasFrontend=true（react、vue、angular、svelte が検出された場合）
• ユーザーから直接呼び出されることはありません

入力

コーディネーターから：

• contextStore：フロントエンド固有のデータを含む Context Store
  • DESIGN_SYSTEM（Material-UI、Ant Design、カスタム）
  • COLOR_PALETTE（プライマリ、セカンダリ、アクセント）
  • TYPOGRAPHY（フォントファミリー、サイズ、ウェイト）
  • COMPONENT_LIBRARY（検出されたコンポーネント）
• targetDir：プロジェクトのルートディレクトリ
• flags：{ hasFrontend }

必須の読み込み： references/docs_quality_contract.md と references/markdown_read_protocol.md を読み込みます。 任意のルールカタログ：正確なルール ID、パスマトリクス、または許可リストに登録されたプレースホルダーの例外が必要な場合に限り、references/docs_quality_rules.json を読み込みます。

作成するドキュメント（1 件、条件付き）

ファイル	条件	質問	自動検出
docs/project/design_guidelines.md	hasFrontend	Q43-Q45	低

ワークフロー

フェーズ 1：条件の確認

1. コーディネーターからフラグを解析します
2. !hasFrontend の場合：空の結果を返して早期終了します

フェーズ 2：ドキュメントの作成

1. ファイルが存在するか確認します（冪等性）
2. 存在する場合：ログを記録してスキップします
3. 存在しない場合：
   • テンプレートをコピーします
   • プレースホルダーを Context Store の値に置き換えます
   • テンプレートの共通の冒頭契約と標準的な上部セクションを維持します
   • デザインシステムのセクションを記入します
   • 公開するフロントエンドドキュメントにテンプレートマーカーを残しません
   • データが不足している場合：主張を省略するか、簡潔で中立的な代替表現を使います。ただし、[TBD: ...] は出力しないでください

フェーズ 3：自己検証

1. SCOPE タグとメタデータマーカーを確認します
2. 必須の上部セクション（Quick Navigation、Agent Entry、Maintenance）を確認します
3. 次のセクションを検証します：
   • デザインシステム（コンポーネントライブラリ）
   • タイポグラフィ（フォントファミリー、サイズ）
   • 色（16 進数コード、セマンティックカラー）
4. WCAG 2.1 への言及を確認します
5. ドキュメント品質契約への準拠を確認します（禁止されたプレースホルダーがないこと、テンプレートのメタデータが漏れていないこと、有効なドキュメント種別／役割であること）

フェーズ 4：ステータスの返却

{
  "created_files": ["docs/project/design_guidelines.md"],
  "skipped_files": [],
  "quality_inputs": {
    "doc_paths": ["docs/project/design_guidelines.md"],
    "owners": {
      "docs/project/design_guidelines.md": "ln-114-frontend-docs-creator"
    }
  },
  "validation_status": "passed"
}

重要事項

基本ルール

• 条件付き： フロントエンドが検出されなかった場合は完全にスキップします
• WCAG 準拠： ドキュメントでアクセシビリティ基準に言及する必要があります
• デザイントークン： CSS 変数、tailwind の設定、またはテーマファイルから抽出します
• 冪等性： 既存のファイルを上書きしません
• 公開可能な出力： フロントエンドドキュメントに [TBD: ...]、TODO、テンプレートのメタデータを残しません

NO_CODE_EXAMPLES ルール（必須）

デザインガイドラインドキュメントでは、コードではなく視覚的な基準を定めます：

• 禁止： CSS コードブロック、コンポーネントの実装
• 許可： 表（色、タイポグラフィ）、デザイントークン、Figma リンク
• コードの代わりに： 「コンポーネントライブラリ を参照」または「src/components/Button.tsx を参照」

スタック適応ルール（必須）

• 正しいコンポーネントライブラリのドキュメントにリンクします（React なら MUI、Vue なら Vuetify）
• フレームワーク固有のパターンを参照します（React のフック、Vue の Composition API）
• 異なるスタックの参照を混在させません（Vue プロジェクトで React の例を使わないでください）

形式の優先順位（必須）

表（色、タイポグラフィ、間隔）＞リスト（コンポーネントの一覧）＞文章

実行時サマリー成果物

必読： references/docs_generation_summary_contract.md を読み込みます。

summaryArtifactPath は任意で指定できます。

サマリーの種類：

• docs-generation

必須ペイロードの内容：

• worker = "ln-114"
• status
• created_files
• skipped_files
• quality_inputs
• validation_status
• warnings

サマリーは指定された成果物パスに書き込むか、同じエンベロープを構造化出力で返します。

完了の定義

• 条件を確認済み（hasFrontend）
• 該当する場合、ドキュメントを作成済み
• デザインシステム、タイポグラフィ、色を文書化済み
• WCAG の参照を記載済み
• 最新性を検証済み： ドキュメント内のすべての事実が現在のコードと一致している（パス、関数、API、設定が存在し、正確である）
• ステータスを返却済み

参照ファイル

• テンプレート：references/templates/design_guidelines_template.md
• 質問：references/questions_frontend.md（Q43-Q45）

---

バージョン： 1.1.0 最終更新日： 2025-01-12