@monoharada/wcf-mcp 0.1.2 → 0.2.0

package/data/guidelines-index.json

@@ -1,6 +1,6 @@
 {
   "version": "0.1.0",
-  "indexedAt": "2026-03-02T00:15:58.984Z",
+  "indexedAt": "2026-03-02T05:22:54.736Z",
   "documents": [
     {
       "id": ".claude/skills/css-writing-rules/references/core-principles.md",
@@ -32,6 +32,7 @@
             "三角形"
           ],
           "snippet": "### CSS優先順位\n画像・アセットの代替としてCSSを優先：\n\n1. **CSS only** - 最優先\n2. **SVG files** - ベクター図形\n3. **Image formats** - WebP, AVIF, PNG\n4. **Web fonts** - 最後の手段\n\nチェブロン、三角形、矢印などはCSSで実装。\n\n### 論理プロパティ優先\n\n方向に依存しない論理プロパティを使用：\n\n```css\n/* OK: 論理プロパティ */\nmargin-inline: 1rem;\npadding-block-start: 2rem;\ninset: 0;\n\n/* NG: 物理プロパティ */\nmargin-left: 1rem;\nmargin-right: 1rem;\npadding-top: 2rem;\n```\n\n### 省略プロパティの制限\n\n以下のみ省略形を許可：\n- `border`, `outline`\n- `padding`, `margin`（対称値の場合のみ）\n\n```css\n/* OK */\npadding-inline: 1rem;\npadding",
+          "body": "### CSS優先順位 画像・アセットの代替としてCSSを優先： 1. **CSS only** - 最優先 2. **SVG files** - ベクター図形 3. **Image formats** - WebP, AVIF, PNG 4. **Web fonts** - 最後の手段 チェブロン、三角形、矢印などはCSSで実装。 ### 論理プロパティ優先 方向に依存しない論理プロパティを使用： ### 省略プロパティの制限 以下のみ省略形を許可： - `border`, `outline` - `padding`, `margin`（対称値の場合のみ）",
           "startLine": 3
         },
         {
@@ -59,6 +60,7 @@
             "カラーキーワード"
           ],
           "snippet": "### 1. !important\n\n```css\n/* 絶対禁止 - 例外なし */\ncolor: red !important;\n```\n\n**完全禁止** - 代替手法を使用すること:\n- `@layer` で詳細度を管理\n- flexbox/grid の `gap` で余白制御（marginの詳細度問題を回避）\n- CSS変数の再代入でスタイル上書き\n\n### 2. カラーキーワード・ハードコード色値\n\n```css\n/* NG: カラーキーワード */\ncolor: black;\nbackground: white;\n\n/* NG: ハードコード値（コンポーネント内） */\ncolor: #000000;\n--dads-button-color: #000000;\n\n/* OK: グローバルトークン参照 */\ncolor: var(--color-neutral-black);\n--dads-button-color: var(--color-neutral-black);\n```\n\n**Note**: プリミティブトークン定義内（`:root`）では HEX/RGB/HSL",
+          "body": "### 1. !important **完全禁止** - 代替手法を使用すること: - `@layer` で詳細度を管理 - flexbox/grid の `gap` で余白制御（marginの詳細度問題を回避） - CSS変数の再代入でスタイル上書き ### 2. カラーキーワード・ハードコード色値 **Note**: プリミティブトークン定義内（`:root`）では HEX/RGB/HSL を使用する。 ### 2.5. ハードコード数値（スペーシング・サイズ） 数値（`1em`, `16px`, `0.5rem` 等）は直接記述せず、必ずCSS変数（トークン）経由で指定すること。 **例外**: `calc()` 内でのベース値（例: `calc(17 / 16 * 1rem)`）はトークン定義として許容。 ### 3. html font-size: 62.5% ユーザーエージェントのデフォルトを尊重すること。 ### 4. 無秩序なショートハンド",
           "startLine": 46
         },
         {
@@ -86,6 +88,7 @@
             "biome推奨"
           ],
           "snippet": "### Stylelint\n\nプロパティ順序と構文を強制：\n\n```bash\n# 設定ファイル\nmonosus/lint-tools/.stylelintrc.json\n```\n\n例外が必要な場合：\n```css\n/* stylelint-disable-next-line declaration-no-important */\n#legacy-id { color: pink !important; }\n```\n\n### Formatter\n\n**Biome推奨**（速度優先）、Prettierも可",
+          "body": "### Stylelint プロパティ順序と構文を強制： 例外が必要な場合： ### Formatter **Biome推奨**（速度優先）、Prettierも可",
           "startLine": 115
         },
         {
@@ -108,6 +111,7 @@
             "stylelint準拠"
           ],
           "snippet": "- [ ] `!important`未使用（`prefers-reduced-motion`例外のみ）\n- [ ] 論理プロパティを使用\n- [ ] カラーキーワード未使用\n- [ ] ハードコード色値未使用（グローバルトークン参照）\n- [ ] `html { font-size: 62.5% }`未使用\n- [ ] 省略プロパティは制限された用途のみ\n- [ ] Stylelint準拠",
+          "body": "- [ ] `!important`未使用（`prefers-reduced-motion`例外のみ） - [ ] 論理プロパティを使用 - [ ] カラーキーワード未使用 - [ ] ハードコード色値未使用（グローバルトークン参照） - [ ] `html { font-size: 62.5% }`未使用 - [ ] 省略プロパティは制限された用途のみ - [ ] Stylelint準拠",
           "startLine": 136
         }
       ]
@@ -142,6 +146,7 @@
             "token-definition-in-typescript"
           ],
           "snippet": "- [Token Architecture](#token-architecture)\n- [Critical: Always Use Global Tokens](#critical-always-use-global-tokens)\n- [Critical Pattern: Property-Variable Mapping](#critical-pattern-property-variable-mapping)\n- [Scope Chain](#scope-chain)\n- [Token Definition in TypeScript](#token-definition-in-typescript)\n- [Global Variables (:root)](#global-variables-root)\n- [Fallback Values](#fallback-values)\n- [Component Token File Structure](#component-token-file-structure)\n- [DevTools Debugging](#devtool",
+          "body": "- [Token Architecture](#token-architecture) - [Critical: Always Use Global Tokens](#critical-always-use-global-tokens) - [Critical Pattern: Property-Variable Mapping](#critical-pattern-property-variable-mapping) - [Scope Chain](#scope-chain) - [Token Definition in TypeScript](#token-definition-in-typescript) - [Global Variables (:root)](#global-variables-root) - [Fallback Values](#fallback-values) - [Component Token File Structure](#component-token-file-structure) - [DevTools Debugging](#devtool",
           "startLine": 3
         },
         {
@@ -169,6 +174,7 @@
             "00118f"
           ],
           "snippet": "3層のトークン構造：\n\n```\nPrimitive Tokens    →   Semantic Tokens       →   Local Tokens         →   Properties\n--color-blue-900        --button-primary-bg       --dads-button-bg         background-color\n```\n\n### 1. Primitive Tokens（プリミティブ）\n\nデザインシステムの基本値：\n\n```css\n:root {\n  --color-primitive-blue-900: #0017c1;\n  --color-primitive-blue-1000: #00118f;\n  --space-4: 1rem;\n}\n```\n\n### 2. Semantic Tokens（セマンティック）\n\n意味を持つ値：\n\n```css\n:host {\n  --button-primary-bg: var(--color-primitive-blue-900);\n  --button-primary-b",
+          "body": "3層のトークン構造： ### 1. Primitive Tokens（プリミティブ） デザインシステムの基本値： ### 2. Semantic Tokens（セマンティック） 意味を持つ値： ### 3. Local Tokens（ローカル） コンポーネントのカスタマイズ用：",
           "startLine": 15
         },
         {
@@ -196,6 +202,7 @@
             "デザインシステム全体で色を統一管理"
           ],
           "snippet": "**ハードコードされた色値は絶対禁止。常にグローバルトークンを参照する。**\n\n```css\n/* NG: ハードコード */\n@media print {\n  [part=\"base\"] {\n    --dads-button-color: #000000;\n  }\n}\n\n/* OK: グローバルトークン参照 */\n@media print {\n  [part=\"base\"] {\n    --dads-button-color: var(--color-neutral-black);\n  }\n}\n```\n\n### 理由\n\n1. **一貫性**: デザインシステム全体で色を統一管理\n2. **保守性**: 色の変更が1箇所で済む\n3. **テーマ対応**: ダークモード等への切り替えが容易\n4. **トレーサビリティ**: どの色がどこで使われているか追跡可能\n\n### 許容される例外\n\n- `transparent`（透明）\n- `currentColor`（継承色）\n- `inherit`（継承値）",
+          "body": "**ハードコードされた色値は絶対禁止。常にグローバルトークンを参照する。** ### 理由 1. **一貫性**: デザインシステム全体で色を統一管理 2. **保守性**: 色の変更が1箇所で済む 3. **テーマ対応**: ダークモード等への切り替えが容易 4. **トレーサビリティ**: どの色がどこで使われているか追跡可能 ### 許容される例外 - `transparent`（透明） - `currentColor`（継承色） - `inherit`（継承値）",
           "startLine": 60
         },
         {
@@ -223,6 +230,7 @@
             "border"
           ],
           "snippet": "### 基本原則\n\n1. **プロパティと変数のマッピングは一度だけ定義**\n2. **状態変化は変数の再代入で実現**\n3. **重複定義の徹底排除**\n\n### OK: 正しいパターン\n\n```css\n/* ベース要素で全プロパティを変数マッピング（一度だけ） */\n[part=\"base\"] {\n  background-color: var(--dads-button-background);\n  color: var(--dads-button-color);\n  border: var(--dads-button-border-width) solid var(--dads-button-border-color);\n}\n\n/* 状態変化は変数の再代入のみ */\n:host([variant=\"solid\"]:not([disabled])) [part=\"base\"]:hover {\n  --dads-button-background: var(--button-primary-bg-hover);\n  /* プロパティの再定義はしない */\n}\n\n:host([var",
+          "body": "### 基本原則 1. **プロパティと変数のマッピングは一度だけ定義** 2. **状態変化は変数の再代入で実現** 3. **重複定義の徹底排除** ### OK: 正しいパターン ### NG: 避けるべきパターン",
           "startLine": 93
         },
         {
@@ -250,6 +258,7 @@
             "レベル"
           ],
           "snippet": "変数の継承順序：\n\n```\n:host → [part=\"base\"] → :hover/:focus → ::before/::after\n```\n\n各レベルで変数を再定義可能：\n\n```css\n/* :hostレベル - バリアント初期値 */\n:host([variant=\"solid\"]) {\n  --dads-button-background: var(--button-primary-bg);\n}\n\n/* [part]レベル - ベース定義 */\n[part=\"base\"] {\n  background-color: var(--dads-button-background);\n}\n\n/* 状態レベル - 状態変化 */\n:host([variant=\"solid\"]:hover) {\n  --dads-button-background: var(--button-primary-bg-hover);\n}\n```",
+          "body": "変数の継承順序： 各レベルで変数を再定義可能：",
           "startLine": 137
         },
         {
@@ -277,6 +286,7 @@
             "最後にcss関数で変換"
           ],
           "snippet": "### OK: 文字列として定義 → css関数で変換\n\n```typescript\n// セマンティックトークンを文字列として定義\nconst buttonSemanticTokensText = `\n  :host {\n    --button-primary-bg: var(--color-primitive-blue-900);\n    --button-primary-bg-hover: var(--color-primitive-blue-1000);\n  }\n`;\n\n// ローカルトークンを文字列として定義\nconst buttonLocalTokensText = `\n  :host {\n    --dads-button-background: var(--button-primary-bg);\n    --dads-button-color: var(--button-primary-text);\n  }\n`;\n\n// 最後にcss関数で変換\nexport const buttonTokens = css`\n  ${buttonSemanticTokensText}",
+          "body": "### OK: 文字列として定義 → css関数で変換 ### NG: CSSStyleSheetを文字列内で展開",
           "startLine": 164
         },
         {
@@ -304,6 +314,7 @@
             "25rem"
           ],
           "snippet": "`tokens`レイヤーで一元管理：\n\n```css\n@layer tokens {\n  :root {\n    /* Colors */\n    --system-base-color: #fff;\n    --system-text-color: #333;\n\n    /* Font sizes */\n    --text-size-sm: 0.875rem;\n    --text-size-md: 1rem;\n    --text-size-lg: 1.25rem;\n\n    /* Spacing */\n    --space-xs: 0.25rem;\n    --space-sm: 0.5rem;\n    --space-md: 1rem;\n\n    /* Others */\n    --rounded-sm: 0.25rem;\n    --speed-md: 0.4s;\n    --z-modal: 1000;\n  }\n}\n```",
+          "body": "`tokens`レイヤーで一元管理：",
           "startLine": 206
         },
         {
@@ -322,6 +333,7 @@
             "フォールバックを削除"
           ],
           "snippet": "### 開発中\n\nフォールバック値を設定してデバッグを容易に：\n\n```css\nbackground-color: var(--dads-button-background, hotpink);\n```\n\n### 本番\n\nトークンシステムを信頼し、フォールバックを削除：\n\n```css\nbackground-color: var(--dads-button-background);\n```",
+          "body": "### 開発中 フォールバック値を設定してデバッグを容易に： ### 本番 トークンシステムを信頼し、フォールバックを削除：",
           "startLine": 235
         },
         {
@@ -349,6 +361,7 @@
             "css"
           ],
           "snippet": "### File Location\n\n```\npackages/styles/design-tokens/\n├── button-tokens.ts\n├── accordion-tokens.ts\n├── typography-tokens.ts\n└── {component}-tokens.ts\n```\n\n### File Naming\n\n`{component}-tokens.ts` 形式で命名。\n\n### Complete Token File Template\n\n```typescript\n/**\n * {Component}コンポーネント用デザイントークン\n */\nimport { css } from '../../core/web-components.js';\n\n/**\n * セマンティックトークン（意味的な値）\n */\nconst componentSemanticTokensText = `\n  :host {\n    /* Primary */\n    --component-primary-bg: var(--color-primitive-blue-900);",
+          "body": "### File Location ### File Naming `{component}-tokens.ts` 形式で命名。 ### Complete Token File Template ### Variant Token Override Pattern バリアントごとにローカルトークンを上書き： ### State + Variant Combination バリアントと状態を組み合わせる： ### External Customization コンポーネント利用者はローカルトークンを上書き：",
           "startLine": 253
         },
         {
@@ -370,6 +383,7 @@
             "はdevtoolsで警告表示"
           ],
           "snippet": "1. **継承チェーン確認**: Elements > Computed > Show all\n2. **変数の上書き確認**: Elements > Styles で各セレクタの変数値を確認\n3. **無効な変数**: `var(--undefined)` はDevToolsで警告表示",
+          "body": "1. **継承チェーン確認**: Elements > Computed > Show all 2. **変数の上書き確認**: Elements > Styles で各セレクタの変数値を確認 3. **無効な変数**: `var(--undefined)` はDevToolsで警告表示",
           "startLine": 425
         }
       ]
@@ -404,6 +418,7 @@
             "body"
           ],
           "snippet": "低い → 高い の順（後のレイヤーが優先）：\n\n| Layer | Purpose | Example |\n|-------|---------|---------|\n| `reset` | CSSリセット | normalize, kiso.css |\n| `tokens` | グローバル変数 | `:root`の変数定義 |\n| `base` | サイト全体の基本 | html, body, a, img |\n| `layout` | ランドマーク | header, footer, nav |\n| `components` | 再利用UIパーツ | buttons, cards, forms |\n| `contents` | コンテンツ内余白 | 要素間のmargin |\n| `page` | ページ固有 | about.css |\n| `operational` | **一時的**上書き | ホットフィックス |",
+          "body": "低い → 高い の順（後のレイヤーが優先）： | Layer | Purpose | Example | |-------|---------|---------| | `reset` | CSSリセット | normalize, kiso.css | | `tokens` | グローバル変数 | `:root`の変数定義 | | `base` | サイト全体の基本 | html, body, a, img | | `layout` | ランドマーク | header, footer, nav | | `components` | 再利用UIパーツ | buttons, cards, forms | | `contents` | コンテンツ内余白 | 要素間のmargin | | `page` | ページ固有 | about.css | | `operational` | **一時的**上書き | ホットフィックス |",
           "startLine": 3
         },
         {
@@ -425,6 +440,7 @@
             "外のスタイルは禁止"
           ],
           "snippet": "HTMLで必ずレイヤー順序を宣言：\n\n```css\n@layer reset, tokens, base, layout, components, contents, page;\n```\n\n**重要**: すべてのスタイルは`@layer`内に記述。`@layer`外のスタイルは禁止。",
+          "body": "HTMLで必ずレイヤー順序を宣言： **重要**: すべてのスタイルは`@layer`内に記述。`@layer`外のスタイルは禁止。",
           "startLine": 18
         },
         {
@@ -452,6 +468,7 @@
             "componentstyles"
           ],
           "snippet": "**このプロジェクトはWeb Components中心のため、以下が重要。**\n\nShadow DOM内では`@layer`が使用できないため、スタイル配列の順序で詳細度を管理：\n\n```typescript\nstyles: withReset([\n  applyDADSTokens(),    // ≈ tokens layer\n  componentTokens,       // ≈ component-specific tokens\n  componentStyles,       // ≈ components layer\n  applyDADSFocusStyles() // ≈ focus styles\n], 'minimal')            // ≈ reset layer\n```\n\n順序が重要：後のスタイルが前のスタイルを上書き。",
+          "body": "**このプロジェクトはWeb Components中心のため、以下が重要。** Shadow DOM内では`@layer`が使用できないため、スタイル配列の順序で詳細度を管理： 順序が重要：後のスタイルが前のスタイルを上書き。",
           "startLine": 28
         },
         {
@@ -479,6 +496,7 @@
             "import"
           ],
           "snippet": "### 単一ファイル層\n\n`src/assets/css/common/`に配置：\n- `reset.css`\n- `tokens.css`\n- `base.css`\n- `contents.css`\n\n### 分割ファイル層\n\n`src/assets/css/_import/`に個別ファイル：\n\n```css\n/* src/assets/css/_import/button.css */\n@layer components {\n  .button { /* ... */ }\n}\n```\n\nPostCSSでインポート：\n```css\n/* src/assets/css/common/components.css */\n@import '../_import/button.css';\n@import '../_import/card.css';\n```\n\n### ページ固有・運用層\n\n`src/assets/css/{page-name}/`に配置：\n- `about.css`\n- `about-operational.css`",
+          "body": "### 単一ファイル層 `src/assets/css/common/`に配置： - `reset.css` - `tokens.css` - `base.css` - `contents.css` ### 分割ファイル層 `src/assets/css/_import/`に個別ファイル： PostCSSでインポート： ### ページ固有・運用層 `src/assets/css/{page-name}/`に配置： - `about.css` - `about-operational.css`",
           "startLine": 45
         },
         {
@@ -505,6 +523,7 @@
             "red"
           ],
           "snippet": "### Components Layer\n\n```css\n@layer components {\n  .card-group {\n    display: grid;\n    gap: var(--space-md);\n  }\n}\n```\n\n### Operational Layer\n\n```css\n@layer operational {\n  /* 開発中の一時修正 - 本番前に削除必須 */\n  .debug-outline { outline: 2px solid red; }\n}\n```",
+          "body": "### Components Layer ### Operational Layer",
           "startLine": 79
         },
         {
@@ -531,6 +550,7 @@
             "デプロイ前に削除確認"
           ],
           "snippet": "1. **すべてのCSSは`@layer`内**\n   ```css\n   /* NG: @layer外 */\n   .button { color: blue; }\n\n   /* OK */\n   @layer components {\n     .button { color: blue; }\n   }\n   ```\n\n2. **1ファイル = 1コンポーネント**\n   ```css\n   /* NG: 複数コンポーネントを混在 */\n   @layer components {\n     .card { }\n     .button { }  /* 別ファイルへ */\n   }\n   ```\n\n3. **operational層は本番に含めない**\n   - 一時的な修正のみ\n   - PR前に適切なレイヤーへ移行\n   - デプロイ前に削除確認",
+          "body": "1. **すべてのCSSは`@layer`内** 2. **1ファイル = 1コンポーネント** 3. **operational層は本番に含めない** - 一時的な修正のみ - PR前に適切なレイヤーへ移行 - デプロイ前に削除確認",
           "startLine": 101
         }
       ]
@@ -564,6 +584,7 @@
             "transition-property-specification"
           ],
           "snippet": "- [Responsive Design Approaches](#responsive-design-approaches)\n- [Media Query Patterns](#media-query-patterns)\n- [Accessibility Requirements](#accessibility-requirements)\n- [Unit Guidelines](#unit-guidelines)\n- [Transition Property Specification](#transition-property-specification)",
+          "body": "- [Responsive Design Approaches](#responsive-design-approaches) - [Media Query Patterns](#media-query-patterns) - [Accessibility Requirements](#accessibility-requirements) - [Unit Guidelines](#unit-guidelines) - [Transition Property Specification](#transition-property-specification)",
           "startLine": 3
         },
         {
@@ -591,6 +612,7 @@
             "ルートトグル変数"
           ],
           "snippet": "### 1. トークン層（推奨）\n\n`:root`でデバイス別の値を定義：\n\n```css\n@layer tokens {\n  :root {\n    --text-size-lg: 1.25rem;\n\n    @media (width < 900px) {\n      --text-size-lg: 1.125rem;\n    }\n  }\n}\n\n/* コンポーネントでは変数を参照するだけ */\n.heading { font-size: var(--text-size-lg); }\n```\n\n### 2. ルートトグル変数\n\n表示/非表示の切り替え：\n\n```css\n:root {\n  --sp-hide: none;\n  --pc-hide: ;\n\n  @media (width < 900px) {\n    --sp-hide: ;\n    --pc-hide: none;\n  }\n}\n\n/* 使用 */\n.sp-only { display: var(--sp-hide, block); }\n.pc-only { display: var(--pc-hide, block);",
+          "body": "### 1. トークン層（推奨） `:root`でデバイス別の値を定義： ### 2. ルートトグル変数 表示/非表示の切り替え： ### 3. コンポーネント層（レガシー互換） 最小限に抑える：",
           "startLine": 11
         },
         {
@@ -618,6 +640,7 @@
             "card"
           ],
           "snippet": "### プロパティ追加優先\n\nプロパティを削除するのではなく追加：\n\n```css\n/* NG: プロパティ削除 */\n.component {\n  border: 2px solid blue;\n}\n@media (width < 900px) {\n  .component {\n    border: none;  /* 削除 */\n  }\n}\n\n/* OK: プロパティ追加 */\n.component {\n  padding: 10px;\n\n  @media (width >= 900px) {\n    border: 2px solid blue;  /* 追加 */\n  }\n}\n```\n\n### セレクタ内にネスト\n\n```css\n/* OK */\n.card {\n  @media (width >= 768px) {\n    --card-gap: 2rem;\n  }\n}\n\n/* NG: 外に出す */\n@media (width >= 768px) {\n  .card { --card-gap: 2rem; }\n}\n```",
+          "body": "### プロパティ追加優先 プロパティを削除するのではなく追加： ### セレクタ内にネスト",
           "startLine": 68
         },
         {
@@ -645,6 +668,7 @@
             "transition-duration"
           ],
           "snippet": "### Reduced Motion（必須）\n\n前庭障害を持つユーザーへの配慮：\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  html:focus-within {\n    scroll-behavior: auto;\n  }\n\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n**Note**: この`!important`は唯一許可される例外。\n\n### Hover Capability（必須）\n\nポインターデバイスでのみホバーを適用：\n\n```css\n/* OK: any-hoverでチェック */\n@media (any-hover: hover) {\n  .button:hover,\n  .button[data-state",
+          "body": "### Reduced Motion（必須） 前庭障害を持つユーザーへの配慮： **Note**: この`!important`は唯一許可される例外。 ### Hover Capability（必須） ポインターデバイスでのみホバーを適用： `[data-state=\"hover\"]`はスタイルガイドでの状態表示用。",
           "startLine": 111
         },
         {
@@ -672,6 +696,7 @@
             "font-size"
           ],
           "snippet": "| 用途 | 単位 | 理由 |\n|------|------|------|\n| フォントサイズ | `rem`, `em` | ユーザースケーリング |\n| 垂直方向の余白 | `rem` | 比例スケーリング |\n| 装飾的ボーダー | `px` | 固定の視覚効果 |\n| ボタン幅 | `rem`, `em` | テキストに比例 |\n| 水平方向の余白 | `px`, `%`, `dvw` | コンテキスト依存 |\n\n### Critical: font-size単位\n\n```css\n/* OK */\n.text { font-size: 1.25rem; }\n.small { font-size: 0.875em; }\n\n/* NG: px固定 */\n.text { font-size: 20px; }\n```\n\n### アクセシビリティ検証\n\nルートfont-sizeを拡大しても読みやすいか確認：\n- ブラウザズームではなく、`:root { font-size: 150%; }`で検証\n- テキストの折り返し、レイアウト崩れをチェック",
+          "body": "| 用途 | 単位 | 理由 | |------|------|------| | フォントサイズ | `rem`, `em` | ユーザースケーリング | | 垂直方向の余白 | `rem` | 比例スケーリング | | 装飾的ボーダー | `px` | 固定の視覚効果 | | ボタン幅 | `rem`, `em` | テキストに比例 | | 水平方向の余白 | `px`, `%`, `dvw` | コンテキスト依存 | ### Critical: font-size単位 ### アクセシビリティ検証 ルートfont-sizeを拡大しても読みやすいか確認： - ブラウザズームではなく、`:root { font-size: 150%; }`で検証 - テキストの折り返し、レイアウト崩れをチェック",
           "startLine": 156
         },
         {
@@ -692,6 +717,7 @@
             "color"
           ],
           "snippet": "アニメーション対象を明示：\n\n```css\n/* NG: 全プロパティ */\n.link {\n  transition: var(--speed-md);\n}\n\n/* OK: プロパティ指定 */\n.link {\n  transition: var(--speed-md);\n  transition-property: background-color, color;\n}\n```",
+          "body": "アニメーション対象を明示：",
           "startLine": 183
         }
       ]
@@ -721,6 +747,7 @@
             "file-naming"
           ],
           "snippet": "- [General Principles](#general-principles)\n- [CSS Class Names](#css-class-names)\n- [CSS Variables](#css-variables)\n- [HTML Naming](#html-naming)\n- [File Naming](#file-naming)",
+          "body": "- [General Principles](#general-principles) - [CSS Class Names](#css-class-names) - [CSS Variables](#css-variables) - [HTML Naming](#html-naming) - [File Naming](#file-naming)",
           "startLine": 3
         },
         {
@@ -748,6 +775,7 @@
             "arg"
           ],
           "snippet": "### 正確なスペル\n\nCSpellなどのツールで検証。スペルミスはコードの明確さを損なう。\n\n### 省略禁止\n\n省略しないことでコードの明確さが向上：\n\n```css\n/* NG: 省略 */\n.btn { }\n.nav-ctnr { }\n.usr-info { }\n\n/* OK: 完全形 */\n.button { }\n.navigation-container { }\n.user-info { }\n```\n\n**例外**（一般的な英語略語のみ許可）：\n- `attr`, `nav`, `res`, `arg`, `err`, `auth`, `opt`, `init`\n\n### ローマ字禁止\n\n日本語の発音をローマ字にしない：\n\n```css\n/* NG: ローマ字 */\n.oshirase { }\n.shouhin-card { }\n\n/* OK: 英語 */\n.notice { }\n.product-card { }\n```\n\n### 意味のある名前\n\n数字の連番、ハッシュ値、文脈のない略語は禁止：\n\n```css\n/* NG: 無意味 */\n.item1 { }\n.a7x3",
+          "body": "### 正確なスペル CSpellなどのツールで検証。スペルミスはコードの明確さを損なう。 ### 省略禁止 省略しないことでコードの明確さが向上： **例外**（一般的な英語略語のみ許可）： - `attr`, `nav`, `res`, `arg`, `err`, `auth`, `opt`, `init` ### ローマ字禁止 日本語の発音をローマ字にしない： ### 意味のある名前 数字の連番、ハッシュ値、文脈のない略語は禁止：",
           "startLine": 11
         },
         {
@@ -775,6 +803,7 @@
             "margin-large"
           ],
           "snippet": "### Format: kebab-case\n\n```css\n.image-card { }\n.warning-box { }\n.search-form { }\n.primary-button { }\n```\n\n### Naming Pattern: 役割/特徴 + UI名\n\n```css\n/* OK: 役割ベース */\n.primary-button { }\n.error-message { }\n.featured-product { }\n.navigation-header { }\n\n/* NG: 見た目ベース */\n.border-orange { }\n.text-pink-500 { }\n.margin-large { }\n```\n\n### Avoid\n\n1. **サイズ指示子**\n   ```css\n   /* NG */\n   .card-xs { }\n   .large-text { }\n   ```\n\n2. **ラッパー/コンテナ接尾辞**\n   ```css\n   /* NG */\n   .card-wrapper { }\n   .content-container ",
+          "body": "### Format: kebab-case ### Naming Pattern: 役割/特徴 + UI名 ### Avoid 1. **サイズ指示子** 2. **ラッパー/コンテナ接尾辞** 3. **マルチクラスパターン**",
           "startLine": 66
         },
         {
@@ -802,6 +831,7 @@
             "--component-property"
           ],
           "snippet": "### Global Pattern\n\n```\n--category-unit/value\n```\n\nExamples:\n```css\n--color-white: #ffffff;\n--space-xxs: 0.25rem;\n--rounded-xs: 0.125rem;\n--system-border-base: 1px solid #ccc;\n```\n\n### Scoped Pattern (Component)\n\n```\n--component-property\n```\n\nExamples:\n```css\n--button-primary-bg: #0017c1;\n--card-border-radius: 0.5rem;\n--modal-backdrop-opacity: 0.5;\n```\n\n### Local Token Pattern (Customization)\n\n```\n--prefix-component-property\n```\n\nExamples:\n```css\n--dads-button-background: var(--button-primary-bg",
+          "body": "### Global Pattern Examples: ### Scoped Pattern (Component) Examples: ### Local Token Pattern (Customization) Examples: ### Never Reference Primitives Directly",
           "startLine": 118
         },
         {
@@ -829,6 +859,7 @@
             "faq"
           ],
           "snippet": "### id Attributes\n\nkebab-case または PascalCase（プロジェクト内で統一）：\n\n```html\n<header id=\"site-header\">\n<nav id=\"table-of-contents\">\n```\n\n### data Attributes\n\nkebab-case：\n\n```html\n<!-- 構造化データ用 -->\n<main data-scheme=\"article\">\n\n<!-- JS選択用 -->\n<details data-accordion=\"faq\">\n\n<!-- バリアント用 -->\n<article data-card-variant=\"featured\">\n\n<!-- 状態表示用（スタイルガイド） -->\n<a data-state=\"hover\">\n```",
+          "body": "### id Attributes kebab-case または PascalCase（プロジェクト内で統一）： ### data Attributes kebab-case：",
           "startLine": 176
         },
         {
@@ -855,6 +886,7 @@
             "about"
           ],
           "snippet": "### CSS Files\n\nkebab-case：\n- `button.css`\n- `card-group.css`\n- `navigation-header.css`\n\n### Directory Structure\n\n```\nsrc/assets/css/\n├── common/\n│   ├── reset.css\n│   ├── tokens.css\n│   └── components.css\n├── _import/\n│   ├── button.css\n│   └── card.css\n└── about/\n    └── about.css\n```",
+          "body": "### CSS Files kebab-case： - `button.css` - `card-group.css` - `navigation-header.css` ### Directory Structure",
           "startLine": 205
         }
       ]
@@ -889,6 +921,7 @@
             "article"
           ],
           "snippet": "### 最大1階層\n\n`@layer`、疑似クラス、メディアクエリを除き、ネストは1階層まで。\n\n```css\n/* OK: フラットなネスト */\n.card {\n  padding: var(--space-md);\n\n  &:hover { /* 疑似クラスはOK */ }\n\n  @media (width >= 768px) { /* メディアクエリはOK */ }\n\n  > article { /* 直接子孫は1階層 */ }\n}\n```\n\n```css\n/* NG: 深いネスト */\n.card {\n  > article {\n    header {\n      span { /* 深すぎる */ }\n    }\n  }\n}\n```\n\n### 代替: コンビネータ使用\n\n```css\n/* OK: フラットに記述 */\n.card-group > article header { }\n.card-group > article header span { }\n```\n\n### メディアクエリの位置\n\nセレクタ内にネスト（外に出さない）：\n\n```css\n/* OK */\n",
+          "body": "### 最大1階層 `@layer`、疑似クラス、メディアクエリを除き、ネストは1階層まで。 ### 代替: コンビネータ使用 ### メディアクエリの位置 セレクタ内にネスト（外に出さない）：",
           "startLine": 3
         },
         {
@@ -916,6 +949,7 @@
             "component"
           ],
           "snippet": "### スコープベース（BEM脱却）\n\nコンポーネントルートにクラス、子要素は直接子孫セレクタ：\n\n```css\n/* OK: スコープベース */\n.card-group {\n  > article { }\n  > article > header { }\n  > article > h3 { }\n}\n\n/* NG: BEMスタイル */\n.card { }\n.card__header { }\n.card__title { }\n.card-header__icon { }\n```\n\n### :where()のスコープ制限\n\n`:where()`は直接子孫に限定：\n\n```css\n/* NG: 広すぎる */\n.component {\n  :where(div) { /* すべてのdivに適用 */ }\n}\n\n/* OK: スコープ制限 */\n.component {\n  :where(> div) { /* 直接子孫のみ */ }\n}\n```",
+          "body": "### スコープベース（BEM脱却） コンポーネントルートにクラス、子要素は直接子孫セレクタ： ### :where()のスコープ制限 `:where()`は直接子孫に限定：",
           "startLine": 62
         },
         {
@@ -943,6 +977,7 @@
             "aria-hidden"
           ],
           "snippet": "### HTML属性を使用\n\n`.is-open`、`.active`などの状態クラスは禁止。\n\n```css\n/* OK: ネイティブ属性 */\ndetails[open] { }\ndialog:modal { }\ninput:checked { }\nbutton:disabled { }\n\n/* OK: ARIA属性 */\n[aria-expanded=\"true\"] { }\n[aria-hidden=\"true\"] { }\n[aria-selected=\"true\"] { }\n\n/* OK: data属性（スタイルガイド用） */\n[data-state=\"hover\"] { }\n\n/* NG: 状態クラス */\n.is-open { }\n.is-active { }\n.is-disabled { }\n```\n\n### 状態の組み合わせ\n\n```css\n/* アコーディオン */\ndetails[open] > summary::marker { }\n\n/* ボタンの展開状態 */\n.accordion > button[aria-expanded=\"true\"] + div {",
+          "body": "### HTML属性を使用 `.is-open`、`.active`などの状態クラスは禁止。 ### 状態の組み合わせ ### CSS変数での状態管理 スクロール位置などの動的状態：",
           "startLine": 99
         },
         {
@@ -966,6 +1001,7 @@
             "not"
           ],
           "snippet": "Shadow DOM内では`:host()`でホスト要素の状態を参照：\n\n```css\n/* ホストの属性で内部スタイルを変更 */\n:host([variant=\"solid\"]) [part=\"base\"] { }\n:host([disabled]) [part=\"base\"] { }\n:host(:hover) [part=\"base\"] { }\n\n/* ネイティブ状態との組み合わせ */\n:host([variant=\"solid\"]:not([disabled])) [part=\"base\"]:hover { }\n```",
+          "body": "Shadow DOM内では`:host()`でホスト要素の状態を参照：",
           "startLine": 159
         }
       ]
@@ -1000,6 +1036,7 @@
             "token"
           ],
           "snippet": "- [Critical: No Div Soup (Markup Rules)](#critical-no-div-soup-markup-rules)\n- [Critical: Use ::part() Instead of Classes](#critical-use-part-instead-of-classes)\n- [Style Application Order](#style-application-order)\n- [:host() Selector](#host-selector)\n- [Token Resolution in Shadow DOM](#token-resolution-in-shadow-dom)\n- [Reset CSS Integration](#reset-css-integration)\n- [Native HTML Elements Priority](#native-html-elements-priority)\n- [State Management](#state-management)\n- [Slot Styling](#slot-",
+          "body": "- [Critical: No Div Soup (Markup Rules)](#critical-no-div-soup-markup-rules) - [Critical: Use ::part() Instead of Classes](#critical-use-part-instead-of-classes) - [Style Application Order](#style-application-order) - [:host() Selector](#host-selector) - [Token Resolution in Shadow DOM](#token-resolution-in-shadow-dom) - [Reset CSS Integration](#reset-css-integration) - [Native HTML Elements Priority](#native-html-elements-priority) - [State Management](#state-management) - [Slot Styling](#slot-",
           "startLine": 3
         },
         {
@@ -1027,6 +1064,7 @@
             "可能な限り"
           ],
           "snippet": "**Div Soup禁止**: 不要なラッパー要素を作成しない。最小限のDOM構造を維持する。\n\n### 原則\n\n1. **フラット構造優先**: ネストは必要最小限に抑える\n2. **セマンティック要素活用**: `<div>`より意味のある要素を使用\n3. **display: contents活用**: レイアウト目的のwrapper divは`display: contents`で透明化\n4. **直接スロット配置**: 可能な限り`<slot>`要素に直接`part`属性を付与\n\n### NG: Div Soup\n\n```html\n<!-- 避ける: 無意味に深いネスト -->\n<div part=\"outer\">\n  <div part=\"wrapper\">\n    <div part=\"container\">\n      <div part=\"content\">\n        <slot></slot>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### OK: フラット構造\n\n```html\n<!-- 推奨: 最小限のネス",
+          "body": "**Div Soup禁止**: 不要なラッパー要素を作成しない。最小限のDOM構造を維持する。 ### 原則 1. **フラット構造優先**: ネストは必要最小限に抑える 2. **セマンティック要素活用**: `<div>`より意味のある要素を使用 3. **display: contents活用**: レイアウト目的のwrapper divは`display: contents`で透明化 4. **直接スロット配置**: 可能な限り`<slot>`要素に直接`part`属性を付与 ### NG: Div Soup ### OK: フラット構造 ### Wrapper Divが許容されるケース 1. **複数スロットのグループ化が必要な場合** 2. **CSSでは実現できないレイアウト要件がある場合** 3. **アクセシビリティ目的（role属性が必要など）** ### Slot要素への直接属性付与 `<slot>`要素に`part`と`hidden`属性を直接付与可能： ### スロット要素のデフォルト動作 slot要素はデフォルトで `display: contents` 相",
           "startLine": 15
         },
         {
@@ -1054,6 +1092,7 @@
             "header"
           ],
           "snippet": "Shadow DOM内のスタイリングにはクラスではなく`part`属性を使用。\n\n### OK: part属性\n\n```html\n<!-- Shadow DOM内 -->\n<summary part=\"summary\">\n  <span part=\"icon\">\n    <svg part=\"icon-svg\">...</svg>\n  </span>\n  <span part=\"header-text\">\n    <slot name=\"header\"></slot>\n  </span>\n</summary>\n<div part=\"content\">\n  <slot name=\"content\"></slot>\n</div>\n```\n\n```css\n/* 外部からのスタイリング */\nmy-accordion::part(summary) { padding: 1rem; }\nmy-accordion::part(icon) { color: var(--icon-color); }\nmy-accordion::part(content) { padding: 1rem; }\n```\n",
+          "body": "Shadow DOM内のスタイリングにはクラスではなく`part`属性を使用。 ### OK: part属性 ### NG: クラスベース ### Why ::part() 1. **カプセル化維持**: Shadow DOM境界を保ちながら特定部分を公開 2. **明示的API**: カスタマイズ可能な箇所を作者が定義 3. **セマンティック**: part属性で要素の役割を表現 4. **スコープ明確化**: グローバルクラス名の衝突回避 5. **テーマ対応**: 親要素のクラスで子コンポーネントを一括変更可能",
           "startLine": 127
         },
         {
@@ -1078,6 +1117,7 @@
             "後のスタイルが前のスタイルを上書き"
           ],
           "snippet": "```typescript\nstyles: withReset([\n  applyDADSTokens(),    // 1. グローバルトークン\n  buttonTokens,          // 2. コンポーネントトークン\n  buttonStyles,          // 3. スタイル定義\n  applyDADSFocusStyles() // 4. フォーカススタイル\n], 'minimal')\n```\n\n順序は重要：後のスタイルが前のスタイルを上書き。",
+          "body": "順序は重要：後のスタイルが前のスタイルを上書き。",
           "startLine": 172
         },
         {
@@ -1105,6 +1145,7 @@
             "hover"
           ],
           "snippet": "ホスト要素（カスタム要素自体）の状態でスタイルを変更：\n\n```css\n/* バリアント */\n:host([variant=\"solid\"]) {\n  --dads-button-background: var(--button-primary-bg);\n}\n\n:host([variant=\"outlined\"]) {\n  --dads-button-background: transparent;\n}\n\n/* 状態 */\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* 疑似クラス */\n:host(:hover) { }\n:host(:focus-within) { }\n```\n\n### 組み合わせパターン\n\n```css\n/* バリアント + 状態 */\n:host([variant=\"solid\"]:not([disabled])) [part=\"base\"]:hover {\n  --dads-button-background: var(--button-primary-bg-hover);\n",
+          "body": "ホスト要素（カスタム要素自体）の状態でスタイルを変更： ### 組み合わせパターン",
           "startLine": 185
         },
         {
@@ -1132,6 +1173,7 @@
             "var"
           ],
           "snippet": "Shadow DOM内でCSS変数が正しく解決されるための構造：\n\n### 1. グローバルトークン（applyDADSTokens）\n\nプリミティブ値を提供：\n\n```css\n:host {\n  --color-primitive-blue-900: #0017c1;\n  --space-md: 1rem;\n}\n```\n\n### 2. コンポーネントトークン（buttonTokens）\n\nセマンティック値とローカル値を定義：\n\n```css\n:host {\n  /* Semantic */\n  --button-primary-bg: var(--color-primitive-blue-900);\n\n  /* Local */\n  --dads-button-background: var(--button-primary-bg);\n}\n\n:host([variant=\"solid\"]) {\n  --dads-button-background: var(--button-primary-bg);\n}\n```\n\n### 3. コンポーネントスタイル（buttonStyles）\n\nプ",
+          "body": "Shadow DOM内でCSS変数が正しく解決されるための構造： ### 1. グローバルトークン（applyDADSTokens） プリミティブ値を提供： ### 2. コンポーネントトークン（buttonTokens） セマンティック値とローカル値を定義： ### 3. コンポーネントスタイル（buttonStyles） プロパティ-変数マッピング：",
           "startLine": 224
         },
         {
@@ -1159,6 +1201,7 @@
             "styles"
           ],
           "snippet": "### withReset() Helper\n\n```typescript\nimport { withReset } from './reset-css';\n\nclass MyComponent extends WebComponent {\n  static definition = {\n    name: 'my-component',\n    template: html`...`,\n    styles: withReset(css`\n      :host { display: block; }\n    `, 'full')\n  };\n}\n```\n\n### Reset Levels\n\n- `'full'` - kiso.css完全版\n- `'minimal'` - 最小限のリセット\n\n### Architecture Decision\n\n- **Shadow DOMのみ**: Light DOMには適用しない\n- **opt-in方式**: 必要なコンポーネントのみ適用\n- **パフォーマンス**: CSSStyleSheetキャッシング活用",
+          "body": "### withReset() Helper ### Reset Levels - `'full'` - kiso.css完全版 - `'minimal'` - 最小限のリセット ### Architecture Decision - **Shadow DOMのみ**: Light DOMには適用しない - **opt-in方式**: 必要なコンポーネントのみ適用 - **パフォーマンス**: CSSStyleSheetキャッシング活用",
           "startLine": 268
         },
         {
@@ -1186,6 +1229,7 @@
             "チェックボックス"
           ],
           "snippet": "可能な限りネイティブHTML要素を活用：\n\n| Use Case | Native Element |\n|----------|----------------|\n| アコーディオン | `<details>/<summary>` |\n| モーダル | `<dialog>` |\n| 日付選択 | `<input type=\"date\">` |\n| チェックボックス | `<input type=\"checkbox\">` |\n\n理由：\n- ネイティブアクセシビリティ\n- ブラウザ標準キーボード操作\n- スクリーンリーダー対応\n- プログレッシブエンハンスメント",
+          "body": "可能な限りネイティブHTML要素を活用： | Use Case | Native Element | |----------|----------------| | アコーディオン | `<details>/<summary>` | | モーダル | `<dialog>` | | 日付選択 | `<input type=\"date\">` | | チェックボックス | `<input type=\"checkbox\">` | 理由： - ネイティブアクセシビリティ - ブラウザ標準キーボード操作 - スクリーンリーダー対応 - プログレッシブエンハンスメント",
           "startLine": 297
         },
         {
@@ -1213,6 +1257,7 @@
             "invalid"
           ],
           "snippet": "### Native States\n\n```css\n/* details/summary */\n:host([open]) [part=\"content\"] { display: block; }\n\n/* form elements */\n[part=\"base\"]:disabled { opacity: 0.5; }\n[part=\"base\"]:checked { }\n[part=\"base\"]:invalid { }\n```\n\n### ARIA States\n\n```css\n[part=\"trigger\"][aria-expanded=\"true\"] { }\n[part=\"option\"][aria-selected=\"true\"] { }\n[part=\"tab\"][aria-current=\"page\"] { }\n```\n\n### Custom States（data属性）\n\n```css\n/* スタイルガイド用 */\n[part=\"base\"][data-state=\"hover\"] { }\n[part=\"base\"][data-state=\"focus\"] { }\n```",
+          "body": "### Native States ### ARIA States ### Custom States（data属性）",
           "startLine": 314
         },
         {
@@ -1236,6 +1281,7 @@
             "は直接の子要素のみ選択可能"
           ],
           "snippet": "スロットコンテンツのスタイリング：\n\n```css\n/* スロット要素自体 */\nslot[name=\"header\"] {\n  display: block;\n  font-weight: bold;\n}\n\n/* スロットに割り当てられた要素 */\n::slotted(h2) {\n  margin: 0;\n}\n\n::slotted(*) {\n  /* すべてのスロットコンテンツ */\n}\n```\n\n**注意**: `::slotted()`は直接の子要素のみ選択可能",
+          "body": "スロットコンテンツのスタイリング： **注意**: `::slotted()`は直接の子要素のみ選択可能",
           "startLine": 344
         }
       ]
@@ -1270,6 +1316,7 @@
             "both"
           ],
           "snippet": "```html\n<a11y-annotate>\n  <dads-accordion-details>...</dads-accordion-details>\n</a11y-annotate>\n```\n\n### devオンデマンド\n\n注釈は **dev専用** で表示します。以下のどちらかで有効化してください。\n\n- URL: `?a11y=1` を付与\n- `localStorage.setItem('dads:a11y', '1')`\n\n### オプション\n\n- `mode=\"both\" | \"panel\" | \"callouts\"`（デフォルト: `both`）\n  - `both`: パネル + コールアウト\n  - `panel`: パネルのみ\n  - `callouts`: コールアウトのみ\n- `target-selector=\"...\"`（任意）\n  - ラップ内で注釈対象を切り替えたい場合の CSS セレクタ\n- `no-live`（任意）\n  - 付与するとライブ追従（属性変化の監視）を無効化",
+          "body": "### devオンデマンド 注釈は **dev専用** で表示します。以下のどちらかで有効化してください。 - URL: `?a11y=1` を付与 - `localStorage.setItem('dads:a11y', '1')` ### オプション - `mode=\"both\" | \"panel\" | \"callouts\"`（デフォルト: `both`） - `both`: パネル + コールアウト - `panel`: パネルのみ - `callouts`: コールアウトのみ - `target-selector=\"...\"`（任意） - ラップ内で注釈対象を切り替えたい場合の CSS セレクタ - `no-live`（任意） - 付与するとライブ追従（属性変化の監視）を無効化",
           "startLine": 10
         },
         {
@@ -1295,6 +1342,7 @@
             "タイミング"
           ],
           "snippet": "`a11y-annotate` は以下のカテゴリを表示します（未記載の場合は `（未記載）` を表示）。\n\n1. セマンティクス / 関係性 / 構造\n2. キーボード操作\n3. ズーム / レスポンシブ\n4. 状態 / フィードバック\n5. ラベル / インストラクション\n6. モーション / アニメーション / タイミング",
+          "body": "`a11y-annotate` は以下のカテゴリを表示します（未記載の場合は `（未記載）` を表示）。 1. セマンティクス / 関係性 / 構造 2. キーボード操作 3. ズーム / レスポンシブ 4. 状態 / フィードバック 5. ラベル / インストラクション 6. モーション / アニメーション / タイミング",
           "startLine": 36
         },
         {
@@ -1322,6 +1370,7 @@
             "cem"
           ],
           "snippet": "注釈メタデータは **CEMに集約**します。\n\n- 定義ファイル: `docs/knowledge/a11y-annotations.json`\n- CEM出力: `custom-elements.json` の `custom.a11yAnnotations`\n- 型: `A11yAnnotations`（`packages/utils/a11y-annotations.ts`）\n\n更新手順:\n1. `docs/knowledge/a11y-annotations.json` を更新\n2. `npm run cem:analyze` を実行して `custom-elements.json` に反映",
+          "body": "注釈メタデータは **CEMに集約**します。 - 定義ファイル: `docs/knowledge/a11y-annotations.json` - CEM出力: `custom-elements.json` の `custom.a11yAnnotations` - 型: `A11yAnnotations`（`packages/utils/a11y-annotations.ts`） 更新手順: 1. `docs/knowledge/a11y-annotations.json` を更新 2. `npm run cem:analyze` を実行して `custom-elements.json` に反映",
           "startLine": 47
         },
         {
@@ -1349,6 +1398,7 @@
             "が無い場合はフォールバックとして"
           ],
           "snippet": "`a11y-annotate` は注釈が有効なとき、ランタイムで CEM（`custom-elements.json`）を読み込みます。\n\n- 取得URLは **`document.baseURI` 基準の相対**（`./custom-elements.json`）で解決します（Project Pages の `/<repo>/` 配下でも動くため）\n- 非ブラウザ環境などで `document` が無い場合はフォールバックとして `/custom-elements.json` を参照します\n\n### トラブルシューティング（症状: 404 → 重くなる/固まる）\n\nDevTools Console/Network で `custom-elements.json` が 404 の場合、注釈のロードに失敗して表示できません。\n\n確認ポイント:\n1. `npm run pages:build` 後に `dist-pages/custom-elements.json` が存在する\n2. `node scripts/check-pages-output.cjs` が `OK: custom-e",
+          "body": "`a11y-annotate` は注釈が有効なとき、ランタイムで CEM（`custom-elements.json`）を読み込みます。 - 取得URLは **`document.baseURI` 基準の相対**（`./custom-elements.json`）で解決します（Project Pages の `/<repo>/` 配下でも動くため） - 非ブラウザ環境などで `document` が無い場合はフォールバックとして `/custom-elements.json` を参照します ### トラブルシューティング（症状: 404 → 重くなる/固まる） DevTools Console/Network で `custom-elements.json` が 404 の場合、注釈のロードに失敗して表示できません。 確認ポイント: 1. `npm run pages:build` 後に `dist-pages/custom-elements.json` が存在する 2. `node scripts/check-pages-output.cjs` が `OK: custom-eleme",
           "startLine": 59
         },
         {
@@ -1376,6 +1426,7 @@
             "で位置合わせ"
           ],
           "snippet": "- `a11y-annotate` は **Anchor Positioning を使えるように Light DOM で描画**します（Shadow DOM を使うと、アンカー参照が成立しないケースがあるため）\n- `callouts[].target.scope: \"shadow\"` のように **Shadow DOM 内を参照するコールアウトは、JS（getBoundingClientRect）で位置合わせ**します",
+          "body": "- `a11y-annotate` は **Anchor Positioning を使えるように Light DOM で描画**します（Shadow DOM を使うと、アンカー参照が成立しないケースがあるため） - `callouts[].target.scope: \"shadow\"` のように **Shadow DOM 内を参照するコールアウトは、JS（getBoundingClientRect）で位置合わせ**します",
           "startLine": 100
         }
       ]
@@ -1397,6 +1448,7 @@
             "8201-29177"
           ],
           "snippet": "### Figmaデザインスペック参照\n- **デフォルト状態**: [node-id=8201-29160](https://www.figma.com/design/MlgRomC0DHXGlB0t79w4wL/Digital-Agency-Design-Data-2.7.0?node-id=8201-29160&m=dev)\n- **ホバー状態**: [node-id=8201-29177](https://www.figma.com/design/MlgRomC0DHXGlB0t79w4wL/Digital-Agency-Design-Data-2.7.0?node-id=8201-29177&m=dev)",
+          "body": "### Figmaデザインスペック参照 - **デフォルト状態**: [node-id=8201-29160](https://www.figma.com/design/MlgRomC0DHXGlB0t79w4wL/Digital-Agency-Design-Data-2.7.0?node-id=8201-29160&m=dev) - **ホバー状態**: [node-id=8201-29177](https://www.figma.com/design/MlgRomC0DHXGlB0t79w4wL/Digital-Agency-Design-Data-2.7.0?node-id=8201-29177&m=dev)",
           "startLine": 3
         },
         {
@@ -1424,6 +1476,7 @@
             "--color-neutral-solid-gray-50"
           ],
           "snippet": "### 1. デフォルト状態\n```css\n[part=\"summary\"] {\n  background-color: transparent;\n  border-bottom: 1px solid var(--color-neutral-solid-gray-420);\n}\n\n[part=\"icon\"] {\n  border: 1px solid var(--color-primitive-blue-1000);\n  background-color: var(--color-neutral-white);\n}\n```\n\n### 2. ホバー状態（:hover）\n```css\n[part=\"summary\"]:hover {\n  /* 背景色が薄いグレーに変化 */\n  background-color: var(--color-neutral-solid-gray-50); /* #f2f2f2 */\n}\n\n[part=\"summary\"]:hover [part=\"icon\"] {\n  /* アイコンのボーダーが太くなる */\n  border-width: 3px;\n  pa",
+          "body": "### 1. デフォルト状態 ### 2. ホバー状態（:hover） ### 3. フォーカス状態（:focus-visible） ### 4. アクティブ状態（:active） ### 5. 展開状態（[open]） ### 6. 無効状態（[disabled]）",
           "startLine": 9
         },
         {
@@ -1451,6 +1504,7 @@
             "アコーディオンの開閉トグル"
           ],
           "snippet": "### マウス操作\n1. **ホバー時**\n   - summaryの背景色が薄いグレーに変化\n   - アイコンのボーダーが1px→3pxに太くなる\n   - トランジション: 0.2秒でスムーズに変化\n\n2. **クリック時（アクティブ）**\n   - summaryの背景色がより濃いグレーに\n   - 即座に反応（トランジションなし）\n\n### キーボード操作\n1. **Tab キー**\n   - フォーカスインジケータ表示（黄色背景 + 黒枠）\n   \n2. **Enter/Space キー**\n   - アコーディオンの開閉トグル\n   - アクティブ状態の視覚フィードバック\n\n### タッチ操作（モバイル）\n1. **タップ**\n   - アクティブ状態の視覚フィードバック\n   - ホバー効果は適用されない",
+          "body": "### マウス操作 1. **ホバー時** - summaryの背景色が薄いグレーに変化 - アイコンのボーダーが1px→3pxに太くなる - トランジション: 0.2秒でスムーズに変化 2. **クリック時（アクティブ）** - summaryの背景色がより濃いグレーに - 即座に反応（トランジションなし） ### キーボード操作 1. **Tab キー** - フォーカスインジケータ表示（黄色背景 + 黒枠） 2. **Enter/Space キー** - アコーディオンの開閉トグル - アクティブ状態の視覚フィードバック ### タッチ操作（モバイル） 1. **タップ** - アクティブ状態の視覚フィードバック - ホバー効果は適用されない",
           "startLine": 79
         },
         {
@@ -1474,6 +1528,7 @@
             "summary"
           ],
           "snippet": "### WCAG 2.2 AA準拠\n- **2.1.1 キーボード**: すべての機能がキーボードで操作可能\n- **2.4.7 フォーカスの可視化**: 明確なフォーカスインジケータ\n- **1.4.3 コントラスト（最小）**: テキストと背景のコントラスト比4.5:1以上\n\n### 支援技術対応\n- スクリーンリーダーで正しく読み上げ\n- ARIAステートの適切な更新\n- セマンティックHTML（details/summary）使用",
+          "body": "### WCAG 2.2 AA準拠 - **2.1.1 キーボード**: すべての機能がキーボードで操作可能 - **2.4.7 フォーカスの可視化**: 明確なフォーカスインジケータ - **1.4.3 コントラスト（最小）**: テキストと背景のコントラスト比4.5:1以上 ### 支援技術対応 - スクリーンリーダーで正しく読み上げ - ARIAステートの適切な更新 - セマンティックHTML（details/summary）使用",
           "startLine": 104
         },
         {
@@ -1500,6 +1555,7 @@
             "--line-height-150"
           ],
           "snippet": "### カラートークン\n- `--color-neutral-solid-gray-50`: ホバー背景色\n- `--color-neutral-solid-gray-100`: アクティブ背景色\n- `--color-neutral-solid-gray-420`: ボーダー色\n- `--color-primitive-blue-1000`: アイコンボーダー色\n- `--color-primitive-yellow-300`: フォーカス背景色\n- `--color-neutral-black`: フォーカスアウトライン色\n\n### その他のトークン\n- `--border-radius-8`: 角丸\n- `--font-size-16`: テキストサイズ\n- `--line-height-150`: 行高",
+          "body": "### カラートークン - `--color-neutral-solid-gray-50`: ホバー背景色 - `--color-neutral-solid-gray-100`: アクティブ背景色 - `--color-neutral-solid-gray-420`: ボーダー色 - `--color-primitive-blue-1000`: アイコンボーダー色 - `--color-primitive-yellow-300`: フォーカス背景色 - `--color-neutral-black`: フォーカスアウトライン色 ### その他のトークン - `--border-radius-8`: 角丸 - `--font-size-16`: テキストサイズ - `--line-height-150`: 行高",
           "startLine": 116
         },
         {
@@ -1524,6 +1580,7 @@
             "メモリリークがない"
           ],
           "snippet": "### 視覚的確認\n- [ ] デフォルト状態が正しく表示される\n- [ ] ホバー時に背景色が変化する\n- [ ] アイコンのボーダーが太くなる\n- [ ] フォーカス時に黄色背景と黒枠が表示される\n- [ ] アクティブ時に濃いグレー背景になる\n\n### 機能確認\n- [ ] クリックで開閉が動作する\n- [ ] キーボードで操作できる\n- [ ] スクリーンリーダーで正しく読み上げられる\n- [ ] モバイルでタップ操作が正常に動作する\n\n### パフォーマンス確認\n- [ ] トランジションがスムーズ（60fps）\n- [ ] 大量のアイテムでも問題なく動作\n- [ ] メモリリークがない",
+          "body": "### 視覚的確認 - [ ] デフォルト状態が正しく表示される - [ ] ホバー時に背景色が変化する - [ ] アイコンのボーダーが太くなる - [ ] フォーカス時に黄色背景と黒枠が表示される - [ ] アクティブ時に濃いグレー背景になる ### 機能確認 - [ ] クリックで開閉が動作する - [ ] キーボードで操作できる - [ ] スクリーンリーダーで正しく読み上げられる - [ ] モバイルでタップ操作が正常に動作する ### パフォーマンス確認 - [ ] トランジションがスムーズ（60fps） - [ ] 大量のアイテムでも問題なく動作 - [ ] メモリリークがない",
           "startLine": 131
         },
         {
@@ -1544,6 +1601,7 @@
             "dadsトークン"
           ],
           "snippet": "- `/packages/components/accordion.ts` - コンポーネント本体\n- `/packages/styles/accordion-styles.ts` - スタイル定義\n- `/packages/styles/design-tokens/accordion-tokens.ts` - トークン定義\n- `/packages/styles/design-tokens/index.ts` - DADSトークン",
+          "body": "- `/packages/components/accordion.ts` - コンポーネント本体 - `/packages/styles/accordion-styles.ts` - スタイル定義 - `/packages/styles/design-tokens/accordion-tokens.ts` - トークン定義 - `/packages/styles/design-tokens/index.ts` - DADSトークン",
           "startLine": 151
         },
         {
@@ -1556,6 +1614,7 @@
             "wcag"
           ],
           "snippet": "- [デジタル庁デザインシステム](https://design.digital.go.jp/)\n- [Figma Community - v2.7.0](https://www.figma.com/community/file/1377880368787735577/v2-7-0)\n- [WCAG 2.2](https://www.w3.org/WAI/WCAG22/quickref/)",
+          "body": "- [デジタル庁デザインシステム](https://design.digital.go.jp/) - [Figma Community - v2.7.0](https://www.figma.com/community/file/1377880368787735577/v2-7-0) - [WCAG 2.2](https://www.w3.org/WAI/WCAG22/quickref/)",
           "startLine": 158
         }
       ]
@@ -1573,6 +1632,7 @@
             "2025-01-07"
           ],
           "snippet": "**承認済み** (2025-01-07)",
+          "body": "**承認済み** (2025-01-07)",
           "startLine": 3
         },
         {
@@ -1600,6 +1660,7 @@
             "スクリーンリーダー対応"
           ],
           "snippet": "### 背景\n\nデジタル庁デザインシステム（DADS）に準拠したWebComponentsライブラリを開発している。フォーム入力要素（Textarea、Input等）において、`placeholder`属性の使用がアクセシビリティ上の問題を引き起こすことが判明した。\n\n### DADS公式仕様\n\n**参照**: https://design.digital.go.jp/dads/components/input-text/accessibility/\n\nDADS公式アクセシビリティガイドラインでは、プレースホルダーの使用を非推奨としている。\n\n**理由**:\n\n1. **視認性の問題**: プレースホルダーテキストはコントラスト比が低く、視覚障害者や高齢者にとって視認性が良くない\n2. **入力中の消失**: ユーザーが入力を開始すると非表示になり、入力条件を確認するために入力内容を削除する必要がある\n3. **スクリーンリーダー対応**: 一部のスクリーンリーダーでは読み上げられない場合や、入力済みテキストとプレースホルダーの判別が困難\n\n### 検討した選択肢\n\n#### 選択肢1",
+          "body": "### 背景 デジタル庁デザインシステム（DADS）に準拠したWebComponentsライブラリを開発している。フォーム入力要素（Textarea、Input等）において、`placeholder`属性の使用がアクセシビリティ上の問題を引き起こすことが判明した。 ### DADS公式仕様 **参照**: https://design.digital.go.jp/dads/components/input-text/accessibility/ DADS公式アクセシビリティガイドラインでは、プレースホルダーの使用を非推奨としている。 **理由**: 1. **視認性の問題**: プレースホルダーテキストはコントラスト比が低く、視覚障害者や高齢者にとって視認性が良くない 2. **入力中の消失**: ユーザーが入力を開始すると非表示になり、入力条件を確認するために入力内容を削除する必要がある 3. **スクリーンリーダー対応**: 一部のスクリーンリーダーでは読み上げられない場合や、入力済みテキストとプレースホルダーの判別が困難 ### 検討した選択肢 #### 選択肢1: placeh",
           "startLine": 7
         },
         {
@@ -1627,6 +1688,7 @@
             "属性を推奨"
           ],
           "snippet": "**選択肢3「警告を出力し、内部要素には転送しない（ソフトな禁止）」を採用する。**\n\n### 実装方針\n\n1. `placeholder`属性を`observedAttributes`から除外\n2. `connectedCallback`でplaceholder属性の存在をチェックし、開発モードで警告を出力\n3. 内部のネイティブ要素（`<textarea>`、`<input>`）にはplaceholder値を転送しない\n4. 代替として`support-text`属性を推奨\n\n### 技術的実装\n\n#### 非推奨属性ユーティリティ\n\n```typescript\n// packages/utils/deprecated-attrs.ts\nexport interface DeprecatedAttrConfig {\n  name: string;\n  reason: string;\n  alternative: string;\n  docsUrl?: string;\n}\n\nexport const DEPRECATED_FORM_ATTRS: DeprecatedAttrConfi",
+          "body": "**選択肢3「警告を出力し、内部要素には転送しない（ソフトな禁止）」を採用する。** ### 実装方針 1. `placeholder`属性を`observedAttributes`から除外 2. `connectedCallback`でplaceholder属性の存在をチェックし、開発モードで警告を出力 3. 内部のネイティブ要素（`<textarea>`、`<input>`）にはplaceholder値を転送しない 4. 代替として`support-text`属性を推奨 ### 技術的実装 #### 非推奨属性ユーティリティ #### コンポーネント側の実装 ### 使用例 ### support-textの優位性 | 項目 | placeholder | support-text | |------|-------------|--------------| | 入力中の表示 | 消失する | 常に表示 | | コントラスト比 | 低い（グレー） | 高い（標準テキスト色） | | スクリーンリーダー | 不安定 | `aria-describedby`で確実に関連付け | | ",
           "startLine": 59
         },
         {
@@ -1654,6 +1716,7 @@
             "claude"
           ],
           "snippet": "### 変更対象ファイル\n\n| ファイル | 変更種別 | 説明 |\n|---------|---------|------|\n| `packages/utils/deprecated-attrs.ts` | 新規作成 | 非推奨属性ユーティリティ |\n| `packages/components/textarea/textarea.ts` | 修正 | placeholder禁止実装 |\n| `packages/components/textarea/textarea.test.ts` | 修正 | 非推奨属性テスト追加（4件） |\n| `docs/architecture/design-philosophy.md` | 修正 | アクセシビリティセクション追加 |\n| `.claude/skills/headless-component-design/SKILL.md` | 修正 | Decision Treeに追加 |\n| `.claude/skills/headless-component-design/references/accessibility.md` | 新規作成 |",
+          "body": "### 変更対象ファイル | ファイル | 変更種別 | 説明 | |---------|---------|------| | `packages/utils/deprecated-attrs.ts` | 新規作成 | 非推奨属性ユーティリティ | | `packages/components/textarea/textarea.ts` | 修正 | placeholder禁止実装 | | `packages/components/textarea/textarea.test.ts` | 修正 | 非推奨属性テスト追加（4件） | | `docs/architecture/design-philosophy.md` | 修正 | アクセシビリティセクション追加 | | `.claude/skills/headless-component-design/SKILL.md` | 修正 | Decision Treeに追加 | | `.claude/skills/headless-component-design/references/accessibility.md` | 新規作成 | ",
           "startLine": 167
         },
         {
@@ -1674,6 +1737,7 @@
             "新規追加テスト4件すべてパス"
           ],
           "snippet": "### 追加されたテストケース\n\n```typescript\ndescribe('DadsTextarea - 非推奨属性', () => {\n  it('placeholder属性を設定すると警告が出力される');\n  it('placeholder属性は内部textareaに転送されない');\n  it('support-text属性が代替として機能する');\n  it('support-text属性がaria-describedbyで関連付けられる');\n});\n```\n\n### テスト結果\n\n- 全33件のtextareaテストがパス\n- 新規追加テスト4件すべてパス",
+          "body": "### 追加されたテストケース ### テスト結果 - 全33件のtextareaテストがパス - 新規追加テスト4件すべてパス",
           "startLine": 213
         },
         {
@@ -1701,6 +1765,7 @@
             "name"
           ],
           "snippet": "### フェーズ2: 完全禁止（検討中）\n\n将来的に、十分な移行期間の後、以下の強化を検討:\n\n1. 警告ではなくエラーをスロー\n2. ESLintルールの追加\n3. TypeScript型定義からplaceholderを除外\n\n### 他の非推奨候補\n\n`deprecated-attrs.ts`の設計により、将来的に他の非推奨属性も同様のパターンで追加可能:\n\n```typescript\nexport const DEPRECATED_FORM_ATTRS: DeprecatedAttrConfig[] = [\n  { name: 'placeholder', /* ... */ },\n  // 将来追加可能\n  // { name: 'autofocus', reason: '...', alternative: '...' },\n];\n```",
+          "body": "### フェーズ2: 完全禁止（検討中） 将来的に、十分な移行期間の後、以下の強化を検討: 1. 警告ではなくエラーをスロー 2. ESLintルールの追加 3. TypeScript型定義からplaceholderを除外 ### 他の非推奨候補 `deprecated-attrs.ts`の設計により、将来的に他の非推奨属性も同様のパターンで追加可能:",
           "startLine": 231
         },
         {
@@ -1720,6 +1785,7 @@
             "placeholder"
           ],
           "snippet": "- [DADS アクセシビリティガイドライン](https://design.digital.go.jp/dads/components/input-text/accessibility/)\n- [WCAG 2.2 AA ガイドライン](https://www.w3.org/TR/WCAG22/)\n- [W3C Forms Best Practices](https://www.w3.org/WAI/tutorials/forms/)\n- [MDN: placeholder属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#placeholder)",
+          "body": "- [DADS アクセシビリティガイドライン](https://design.digital.go.jp/dads/components/input-text/accessibility/) - [WCAG 2.2 AA ガイドライン](https://www.w3.org/TR/WCAG22/) - [W3C Forms Best Practices](https://www.w3.org/WAI/tutorials/forms/) - [MDN: placeholder属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#placeholder)",
           "startLine": 253
         },
         {
@@ -1747,6 +1813,7 @@
             "作成者"
           ],
           "snippet": "- [設計思想 - アクセシビリティガイドライン](../architecture/design-philosophy.md#アクセシビリティガイドライン)\n- [Skills - アクセシビリティ参照](../../.claude/skills/headless-component-design/references/accessibility.md)\n- [学習記録](../knowledge/learnings.md#2025-01-07-placeholder属性非推奨の実装とアクセシビリティガイドライン)\n\n---\n\n*作成日: 2025-01-07*\n*最終更新: 2025-01-07*\n*作成者: Claude Code*",
+          "body": "- [設計思想 - アクセシビリティガイドライン](../architecture/design-philosophy.md#アクセシビリティガイドライン) - [Skills - アクセシビリティ参照](../../.claude/skills/headless-component-design/references/accessibility.md) - [学習記録](../knowledge/learnings.md#2025-01-07-placeholder属性非推奨の実装とアクセシビリティガイドライン) --- *作成日: 2025-01-07* *最終更新: 2025-01-07* *作成者: Claude Code*",
           "startLine": 260
         }
       ]
@@ -1764,6 +1831,7 @@
             "2026-01-08"
           ],
           "snippet": "**承認済み** (2026-01-08)",
+          "body": "**承認済み** (2026-01-08)",
           "startLine": 3
         },
         {
@@ -1791,6 +1859,7 @@
             "test"
           ],
           "snippet": "### 背景\n\nデジタル庁デザインシステム（DADS）に準拠したForm-Associated Custom Elements（`<dads-input-text>`、`<dads-button>`等）を開発している。フォームバリデーションにおいて、ネイティブHTML要素のバリデーションとカスタムバリデーションの干渉により、予期しない動作が発生することが判明した。\n\n### 発生したバグ\n\n**シナリオ**: `required` + `type=\"email\"` + `auto-validate` 属性を持つ入力フィールド\n\n1. \"test\" と入力 → Email形式エラー表示（正常）\n2. 入力を全削除 → エラークリア（正常）\n3. 再送信 → **期待**: 必須エラー表示、**実際**: エラー表示されない\n\n### 根本原因\n\n2つの独立した問題が絡み合っていた：\n\n#### 問題1: ElementInternals.setValidity()の状態管理\n\n`#clearValidationError()` でエラー状態をクリアする際、属性の削除だけでなく `_int",
+          "body": "### 背景 デジタル庁デザインシステム（DADS）に準拠したForm-Associated Custom Elements（`<dads-input-text>`、`<dads-button>`等）を開発している。フォームバリデーションにおいて、ネイティブHTML要素のバリデーションとカスタムバリデーションの干渉により、予期しない動作が発生することが判明した。 ### 発生したバグ **シナリオ**: `required` + `type=\"email\"` + `auto-validate` 属性を持つ入力フィールド 1. \"test\" と入力 → Email形式エラー表示（正常） 2. 入力を全削除 → エラークリア（正常） 3. 再送信 → **期待**: 必須エラー表示、**実際**: エラー表示されない ### 根本原因 2つの独立した問題が絡み合っていた： #### 問題1: ElementInternals.setValidity()の状態管理 `#clearValidationError()` でエラー状態をクリアする際、属性の削除だけでなく `_internals.s",
           "startLine": 7
         },
         {
@@ -1818,6 +1887,7 @@
             "を直接呼ぶ"
           ],
           "snippet": "**選択肢2「ネイティブバリデーションを完全に無効化」を採用する。**\n\n### 設計原則\n\n```\n┌─────────────────────────────────────────────────────────────────┐\n│  Form-Associated Web Components バリデーション設計原則           │\n├─────────────────────────────────────────────────────────────────┤\n│                                                                 │\n│  1. ネイティブバリデーションを回避                                │\n│     - required属性を内部inputに転送しない                        │\n│     - 代わりにaria-requiredでアクセシビリティを維持               │\n│                   ",
+          "body": "**選択肢2「ネイティブバリデーションを完全に無効化」を採用する。** ### 設計原則",
           "startLine": 82
         },
         {
@@ -1845,6 +1915,7 @@
             "true"
           ],
           "snippet": "### 1. 入力コンポーネント（dads-input-text）\n\n#### required属性の処理\n\n```typescript\n// packages/components/input-text/input-text.ts\n\n#syncInputAttributes() {\n  if (!this.#input) return;\n\n  // ❌ required を内部inputに転送しない（ネイティブバリデーションを回避）\n  // ✅ aria-required でアクセシビリティを維持\n  if (this.hasAttribute('required')) {\n    this.#input.setAttribute('aria-required', 'true');\n  } else {\n    this.#input.removeAttribute('aria-required');\n  }\n}\n```\n\n#### バリデーション実行（submitイベント）\n\n```typescript\n#handleFormSubmit = (e: Event): void =",
+          "body": "### 1. 入力コンポーネント（dads-input-text） #### required属性の処理 #### バリデーション実行（submitイベント） #### エラー表示 #### エラークリア（重要） ### 2. ボタンコンポーネント（dads-button） #### フォームアクション処理 ### 3. バリデーションユーティリティ",
           "startLine": 116
         },
         {
@@ -1872,6 +1943,7 @@
             "customerror"
           ],
           "snippet": "### 正常なバリデーションフロー\n\n```\nUser          dads-button      Form         dads-input-text\n  │                │             │                │\n  │  click         │             │                │\n  ├───────────────►│             │                │\n  │                │             │                │\n  │                │ requestSubmit()              │\n  │                ├────────────►│                │\n  │                │             │                │\n  │                │             │ submit event   │\n ",
+          "body": "### 正常なバリデーションフロー ### エラークリア→再送信フロー",
           "startLine": 249
         },
         {
@@ -1899,6 +1971,7 @@
             "クリティカルコンポーネントのプリロード"
           ],
           "snippet": "### 変更対象ファイル\n\n| ファイル | 変更種別 | 説明 |\n|---------|---------|------|\n| `packages/components/input-text/input-text.ts` | 修正 | バリデーション実装、setValidity({})追加 |\n| `packages/components/button/button.ts` | 修正 | reportValidity()削除、requestSubmit()直接呼び出し |\n| `packages/utils/validation.ts` | 新規/修正 | バリデーションルール定義 |\n| `viewer.html` | 修正 | クリティカルコンポーネントのプリロード |\n\n### 今後のコンポーネント実装への適用\n\n以下のコンポーネントは同様のパターンを適用すべき：\n\n- [ ] `<dads-textarea>` - 同様のバリデーション実装\n- [ ] `<dads-select>` - 同様のバリデーション実装\n- [ ] `<dads-checkbox>` / `<da",
+          "body": "### 変更対象ファイル | ファイル | 変更種別 | 説明 | |---------|---------|------| | `packages/components/input-text/input-text.ts` | 修正 | バリデーション実装、setValidity({})追加 | | `packages/components/button/button.ts` | 修正 | reportValidity()削除、requestSubmit()直接呼び出し | | `packages/utils/validation.ts` | 新規/修正 | バリデーションルール定義 | | `viewer.html` | 修正 | クリティカルコンポーネントのプリロード | ### 今後のコンポーネント実装への適用 以下のコンポーネントは同様のパターンを適用すべき： - [ ] `<dads-textarea>` - 同様のバリデーション実装 - [ ] `<dads-select>` - 同様のバリデーション実装 - [ ] `<dads-checkbox>` / `<dads-r",
           "startLine": 312
         },
         {
@@ -1926,6 +1999,7 @@
             "step"
           ],
           "snippet": "### 追加されたテストケース\n\n```typescript\ndescribe('DadsInputText - Emailバリデーション', () => {\n  it('Email形式エラー後にテキスト削除して再送信すると必須エラー表示', async () => {\n    // バグ再現シナリオ:\n    // 1. required + type=\"email\" + auto-validate\n    // 2. \"test\" 入力 → Email形式エラー\n    // 3. テキスト削除（空に）→ エラークリア\n    // 4. 再送信 → 必須エラーが出るべき\n\n    // Step 1: Email形式エラー確認\n    input.value = 'test';\n    form.dispatchEvent(new Event('submit', { cancelable: true }));\n    expect(element.getAttribute('error-text')).toBe('メールアドレスの形式が正しくありません');\n\n    // St",
+          "body": "### 追加されたテストケース ### E2Eエビデンス `e2e-evidence/final-validation-test/` に以下を保存： - スクリーンショット（各ステップ） - 動画録画（全操作） - テスト結果レポート",
           "startLine": 335
         },
         {
@@ -1953,6 +2027,7 @@
             "submitイベントを発火"
           ],
           "snippet": "### 1. ElementInternals.setValidity()は状態管理ツール\n\n単にエラーメッセージを設定するためだけでなく、フォームのバリデーション状態全体を管理する。`setValidity({})` を呼ぶことで「このフィールドは現在有効」とマークし、次回のフォーム送信処理で再評価されることを保証する。\n\n### 2. reportValidity()とrequestSubmit()の違い\n\n| メソッド | 動作 |\n|---------|------|\n| `reportValidity()` | 全フォーム要素のネイティブバリデーションを実行し、UIを更新 |\n| `requestSubmit()` | submitイベントを発火（バリデーションはイベントハンドラに委ねる）|\n\nカスタムWeb Componentsでは `requestSubmit()` を使用し、バリデーションロジックを一元管理すべき。\n\n### 3. Shadow DOM内のネイティブ要素の影響\n\nShadow DOM内に配置された `<input type=\"email\">` も、`fo",
+          "body": "### 1. ElementInternals.setValidity()は状態管理ツール 単にエラーメッセージを設定するためだけでなく、フォームのバリデーション状態全体を管理する。`setValidity({})` を呼ぶことで「このフィールドは現在有効」とマークし、次回のフォーム送信処理で再評価されることを保証する。 ### 2. reportValidity()とrequestSubmit()の違い | メソッド | 動作 | |---------|------| | `reportValidity()` | 全フォーム要素のネイティブバリデーションを実行し、UIを更新 | | `requestSubmit()` | submitイベントを発火（バリデーションはイベントハンドラに委ねる）| カスタムWeb Componentsでは `requestSubmit()` を使用し、バリデーションロジックを一元管理すべき。 ### 3. Shadow DOM内のネイティブ要素の影響 Shadow DOM内に配置された `<input type=\"email\">` も、`form.rep",
           "startLine": 372
         },
         {
@@ -1980,6 +2055,7 @@
             "string"
           ],
           "snippet": "### 1. バリデーションフレームワークの抽象化\n\n複数コンポーネントで同じバリデーションパターンを使用するため、共通のミックスインまたはベースクラスの導入を検討。\n\n```typescript\n// 将来の実装案\nclass ValidatableFormComponent extends FormComponent {\n  protected validationRules: ValidationRule[];\n  protected handleFormSubmit(e: Event): void { /* 共通処理 */ }\n  protected showValidationError(type: string): void { /* 共通処理 */ }\n  protected clearValidationError(): void { /* 共通処理 */ }\n}\n```\n\n### 2. 非同期バリデーション対応\n\nサーバーサイドバリデーション（ユニーク性チェック等）への対応を検討。\n\n### 3. バリデーショングループ\n\n複数フィールドの相関バリデーション（パスワー",
+          "body": "### 1. バリデーションフレームワークの抽象化 複数コンポーネントで同じバリデーションパターンを使用するため、共通のミックスインまたはベースクラスの導入を検討。 ### 2. 非同期バリデーション対応 サーバーサイドバリデーション（ユニーク性チェック等）への対応を検討。 ### 3. バリデーショングループ 複数フィールドの相関バリデーション（パスワード確認等）への対応を検討。",
           "startLine": 395
         },
         {
@@ -2003,6 +2079,7 @@
             "accessibility"
           ],
           "snippet": "- [MDN: ElementInternals.setValidity()](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity)\n- [MDN: HTMLFormElement.requestSubmit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit)\n- [MDN: HTMLFormElement.reportValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity)\n- [WHATWG: Form-Associated Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements)\n",
+          "body": "- [MDN: ElementInternals.setValidity()](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity) - [MDN: HTMLFormElement.requestSubmit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit) - [MDN: HTMLFormElement.reportValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity) - [WHATWG: Form-Associated Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements) ",
           "startLine": 419
         },
         {
@@ -2026,6 +2103,7 @@
             "code"
           ],
           "snippet": "- [ADR-001: placeholder属性非推奨化](./ADR-001-placeholder-deprecation.md)\n- [アクセシビリティガイドライン](../knowledge/accessibility-guidelines.md)\n- [E2Eエビデンス取得ガイド](../knowledge/e2e-evidence-guide.md)\n\n---\n\n*作成日: 2026-01-08*\n*最終更新: 2026-01-08*\n*作成者: Claude Code*",
+          "body": "- [ADR-001: placeholder属性非推奨化](./ADR-001-placeholder-deprecation.md) - [アクセシビリティガイドライン](../knowledge/accessibility-guidelines.md) - [E2Eエビデンス取得ガイド](../knowledge/e2e-evidence-guide.md) --- *作成日: 2026-01-08* *最終更新: 2026-01-08* *作成者: Claude Code*",
           "startLine": 427
         }
       ]
@@ -2043,6 +2121,7 @@
             "2026-01-17"
           ],
           "snippet": "**承認済み** (2026-01-17)",
+          "body": "**承認済み** (2026-01-17)",
           "startLine": 3
         },
         {
@@ -2070,6 +2149,7 @@
             "実装前の調査とリソース取得を標準化し"
           ],
           "snippet": "### 背景\n\nデジタル庁デザインシステム（DADS）準拠のコンポーネントを実装するにあたり、開発中に都度Web参照（ドキュメント/Storybook/上流ソース）を行う運用では以下の問題が発生しやすい。\n\n- 参照元の揺れ・抜け漏れ（特にアクセシビリティ要件）\n- 実装根拠（画像/HTML/ソース）のレビュー共有が難しい\n- AIエージェントが「ローカルで完結して確認→計画/実装」を行えない\n\nそのため、実装前の調査とリソース取得を標準化し、ローカルに集約してgit管理する必要がある。\n\n### 検討した選択肢\n\n#### 選択肢1: 都度Web参照（現状維持）\n\n**メリット**:\n- 追加実装が不要\n- リポジトリが肥大化しない\n\n**デメリット**:\n- 参照元の揺れ/抜け漏れが起こりやすい\n- スクリーンショット等のエビデンスが残りにくい\n- AIエージェントの作業が毎回ネットワーク依存になる\n\n#### 選択肢2: URLリンク集のみをgit管理\n\n**メリット**:\n- 追加実装が最小\n- リポジトリ肥大化を抑えられる\n\n**デメリット**:\n- 見た目/HTML/ソース",
+          "body": "### 背景 デジタル庁デザインシステム（DADS）準拠のコンポーネントを実装するにあたり、開発中に都度Web参照（ドキュメント/Storybook/上流ソース）を行う運用では以下の問題が発生しやすい。 - 参照元の揺れ・抜け漏れ（特にアクセシビリティ要件） - 実装根拠（画像/HTML/ソース）のレビュー共有が難しい - AIエージェントが「ローカルで完結して確認→計画/実装」を行えない そのため、実装前の調査とリソース取得を標準化し、ローカルに集約してgit管理する必要がある。 ### 検討した選択肢 #### 選択肢1: 都度Web参照（現状維持） **メリット**: - 追加実装が不要 - リポジトリが肥大化しない **デメリット**: - 参照元の揺れ/抜け漏れが起こりやすい - スクリーンショット等のエビデンスが残りにくい - AIエージェントの作業が毎回ネットワーク依存になる #### 選択肢2: URLリンク集のみをgit管理 **メリット**: - 追加実装が最小 - リポジトリ肥大化を抑えられる **デメリット**: - 見た目/HTML/ソースの「スナップショット",
           "startLine": 7
         },
         {
@@ -2081,6 +2161,7 @@
             "を採用する"
           ],
           "snippet": "選択肢3「外部資料をローカルにスナップショットし、git管理する」を採用する。",
+          "body": "選択肢3「外部資料をローカルにスナップショットし、git管理する」を採用する。",
           "startLine": 54
         },
         {
@@ -2108,6 +2189,7 @@
             "--force"
           ],
           "snippet": "### 1. 保存先（git管理）\n\n- `resources/dads/` を DADS資材のルートとする\n- コンポーネント単位で `resources/dads/components/<slug>/` を作り、`manifest.json` で取得状況を記録する\n\n### 2. 同期コマンド（資材生成）\n\n- `npm run dads:sync -- --component <slug> [--force]`\n  - DADS公式ページ（`/dads/components/<slug>/`）のHTML/テキスト/画像/ページキャプチャを保存\n  - DADS HTML版 Storybook（`/dads/html/`）は `index.json` を解析し、対象コンポーネントの docs/story を列挙して以下を保存\n    - UI（`?path=/docs|story/<id>`）全体のキャプチャ\n    - Canvas（`iframe.html?id=<id>`）全体のキャプチャ\n    - `iframe` 内 `#storybook-root` のHTML（スニ",
+          "body": "### 1. 保存先（git管理） - `resources/dads/` を DADS資材のルートとする - コンポーネント単位で `resources/dads/components/<slug>/` を作り、`manifest.json` で取得状況を記録する ### 2. 同期コマンド（資材生成） - `npm run dads:sync -- --component <slug> [--force]` - DADS公式ページ（`/dads/components/<slug>/`）のHTML/テキスト/画像/ページキャプチャを保存 - DADS HTML版 Storybook（`/dads/html/`）は `index.json` を解析し、対象コンポーネントの docs/story を列挙して以下を保存 - UI（`?path=/docs|story/<id>`）全体のキャプチャ - Canvas（`iframe.html?id=<id>`）全体のキャプチャ - `iframe` 内 `#storybook-root` のHTML（スニペット補助） - 上流 `digita",
           "startLine": 58
         },
         {
@@ -2135,6 +2217,7 @@
             "を実行する"
           ],
           "snippet": "### 変更対象ファイル\n\n- `resources/dads/**`（生成物・索引・manifest）\n- `scripts/dads/sync.cjs`\n- `scripts/dads/validate.cjs`\n- `package.json`\n\n### 破壊的変更\n\n- なし（ただし `resources/dads/**` の追加によりリポジトリサイズは増える）\n\n### 移行ガイド\n\n- 新規コンポーネント開始前に `npm run dads:sync -- --component <slug>` を実行する\n- 取得結果を `resources/dads/components/<slug>/manifest.json` と画像で確認し、必要なら `--force` で再取得する",
+          "body": "### 変更対象ファイル - `resources/dads/**`（生成物・索引・manifest） - `scripts/dads/sync.cjs` - `scripts/dads/validate.cjs` - `package.json` ### 破壊的変更 - なし（ただし `resources/dads/**` の追加によりリポジトリサイズは増える） ### 移行ガイド - 新規コンポーネント開始前に `npm run dads:sync -- --component <slug>` を実行する - 取得結果を `resources/dads/components/<slug>/manifest.json` と画像で確認し、必要なら `--force` で再取得する",
           "startLine": 96
         },
         {
@@ -2151,6 +2234,7 @@
             "validate"
           ],
           "snippet": "- `npm run dads:sync -- --component file-upload --force`\n- `npm run dads:validate -- --component file-upload`",
+          "body": "- `npm run dads:sync -- --component file-upload --force` - `npm run dads:validate -- --component file-upload`",
           "startLine": 114
         },
         {
@@ -2169,6 +2253,7 @@
             "複数コンポーネントを一括同期するケース"
           ],
           "snippet": "- 画像を大量に同梱する場合の運用（Git LFS、解像度、取得範囲）\n- Storybook UIの読み込み待機条件の強化（安定したキャプチャ取得）\n- 取得対象の定義ファイル化（複数コンポーネントを一括同期するケース）",
+          "body": "- 画像を大量に同梱する場合の運用（Git LFS、解像度、取得範囲） - Storybook UIの読み込み待機条件の強化（安定したキャプチャ取得） - 取得対象の定義ファイル化（複数コンポーネントを一括同期するケース）",
           "startLine": 119
         },
         {
@@ -2196,6 +2281,7 @@
             "最終更新"
           ],
           "snippet": "- DADS公式: https://design.digital.go.jp/dads/\n- DADS HTML版 Storybook: https://design.digital.go.jp/dads/html/\n- `agent-browser`（vercel-labs/agent-browser）\n- 上流（HTML版実装例）: https://github.com/digital-go-jp/design-system-example-components-html\n- ローカル運用: `resources/dads/README.md`\n- 取得例: `resources/dads/components/file-upload/manifest.json`\n\n---\n\n*作成日: 2026-01-17*\n*最終更新: 2026-01-18*",
+          "body": "- DADS公式: https://design.digital.go.jp/dads/ - DADS HTML版 Storybook: https://design.digital.go.jp/dads/html/ - `agent-browser`（vercel-labs/agent-browser） - 上流（HTML版実装例）: https://github.com/digital-go-jp/design-system-example-components-html - ローカル運用: `resources/dads/README.md` - 取得例: `resources/dads/components/file-upload/manifest.json` --- *作成日: 2026-01-17* *最終更新: 2026-01-18*",
           "startLine": 125
         }
       ]
@@ -2212,6 +2298,7 @@
             "承認済み"
           ],
           "snippet": "承認済み",
+          "body": "承認済み",
           "startLine": 3
         },
         {
@@ -2231,6 +2318,7 @@
             "外部拡張パッケージを追加できる機構が必要"
           ],
           "snippet": "現行の `wcf` CLI/runtime は `registry/install-registry.json` と `registry/pattern-registry.json` にのみ依存しており、他チーム・第三者配布の拡張コンポーネントを標準導線で導入できない。外部拡張パッケージを追加できる機構が必要。",
+          "body": "現行の `wcf` CLI/runtime は `registry/install-registry.json` と `registry/pattern-registry.json` にのみ依存しており、他チーム・第三者配布の拡張コンポーネントを標準導線で導入できない。外部拡張パッケージを追加できる機構が必要。",
           "startLine": 7
         },
         {
@@ -2258,6 +2346,7 @@
             "explicit"
           ],
           "snippet": "### 1. 外部レジストリスキーマ\n\n外部レジストリは `install-registry.json` と同等のスキーマに `meta` セクションを追加した形式とする。\n\n```json\n{\n  \"schemaVersion\": 1,\n  \"meta\": { \"name\": \"...\", \"version\": \"...\", \"description\": \"...\" },\n  \"canonicalPrefix\": \"ext\",\n  \"components\": { ... },\n  \"tags\": { ... },\n  \"patterns\": { ... }\n}\n```\n\n### 2. マージ優先順位\n\n`local > explicit --registry > .wcf/extensions.json > core`\n\n### 3. タグ名衝突は2段階検出\n\n- **Phase 1（マージ時）**: 生タグ名の重複 → ハードエラー\n- **Phase 2（install時）**: `--prefix` 適用後の suffix 重複 → ハードエラー\n\n### 4. namespa",
+          "body": "### 1. 外部レジストリスキーマ 外部レジストリは `install-registry.json` と同等のスキーマに `meta` セクションを追加した形式とする。 ### 2. マージ優先順位 `local > explicit --registry > .wcf/extensions.json > core` ### 3. タグ名衝突は2段階検出 - **Phase 1（マージ時）**: 生タグ名の重複 → ハードエラー - **Phase 2（install時）**: `--prefix` 適用後の suffix 重複 → ハードエラー ### 4. namespace:id 形式 - 内部マップキー・CLI引数のみで使用 - ファイルパスには使用禁止（Windows の `:` 制限） ### 5. `.wcf/extensions.json` - Git 追跡対象とする - プロジェクト単位の拡張設定を管理 ### 6. MVP スコープ - ローカルパスのみサポート - URL/npm/git フェッチは将来フェーズ - **拡張コンポーネントの vendor ins",
           "startLine": 11
         },
         {
@@ -2276,6 +2365,7 @@
             "後方互換保証"
           ],
           "snippet": "- `scripts/wcf/extension.js` 新規作成\n- `scripts/wcf/core.js` 改修（loadMergedRegistry、vendorInstall 拡張）\n- `scripts/wcf/cli.js` 改修（extension コマンド群追加）\n- 拡張未設定時は全関数が現在と完全同一動作（後方互換保証）",
+          "body": "- `scripts/wcf/extension.js` 新規作成 - `scripts/wcf/core.js` 改修（loadMergedRegistry、vendorInstall 拡張） - `scripts/wcf/cli.js` 改修（extension コマンド群追加） - 拡張未設定時は全関数が現在と完全同一動作（後方互換保証）",
           "startLine": 61
         }
       ]
@@ -2310,6 +2400,7 @@
             "adr-003"
           ],
           "snippet": "| ADR | タイトル | ステータス | 日付 |\n|-----|---------|----------|------|\n| [ADR-001](./ADR-001-placeholder-deprecation.md) | フォーム入力要素のplaceholder属性非推奨化 | 承認済み | 2025-01-07 |\n| [ADR-002](./ADR-002-form-validation-architecture.md) | Form-Associated Web Componentsのバリデーションアーキテクチャ | 承認済み | 2026-01-08 |\n| [ADR-003](./ADR-003-dads-resource-sync-flow.md) | DADS外部資料のローカル資材化フロー | 承認済み | 2026-01-17 |",
+          "body": "| ADR | タイトル | ステータス | 日付 | |-----|---------|----------|------| | [ADR-001](./ADR-001-placeholder-deprecation.md) | フォーム入力要素のplaceholder属性非推奨化 | 承認済み | 2025-01-07 | | [ADR-002](./ADR-002-form-validation-architecture.md) | Form-Associated Web Componentsのバリデーションアーキテクチャ | 承認済み | 2026-01-08 | | [ADR-003](./ADR-003-dads-resource-sync-flow.md) | DADS外部資料のローカル資材化フロー | 承認済み | 2026-01-17 |",
           "startLine": 5
         },
         {
@@ -2337,6 +2428,7 @@
             "採用・実装済み"
           ],
           "snippet": "Architecture Decision Record（ADR）は、重要なアーキテクチャ決定を記録するための軽量なドキュメントです。\n\n### 記録すべき決定\n\n- 技術選定\n- API設計の変更\n- 破壊的変更\n- セキュリティ・アクセシビリティに関する決定\n- パフォーマンスに影響する設計変更\n\n### ADRのステータス\n\n| ステータス | 説明 |\n|-----------|------|\n| 提案中 | レビュー待ち |\n| 承認済み | 採用・実装済み |\n| 非推奨 | 別の決定に置き換え |\n| 却下 | 採用されなかった |",
+          "body": "Architecture Decision Record（ADR）は、重要なアーキテクチャ決定を記録するための軽量なドキュメントです。 ### 記録すべき決定 - 技術選定 - API設計の変更 - 破壊的変更 - セキュリティ・アクセシビリティに関する決定 - パフォーマンスに影響する設計変更 ### ADRのステータス | ステータス | 説明 | |-----------|------| | 提案中 | レビュー待ち | | 承認済み | 採用・実装済み | | 非推奨 | 別の決定に置き換え | | 却下 | 採用されなかった |",
           "startLine": 13
         },
         {
@@ -2350,6 +2442,7 @@
             "タイトル"
           ],
           "snippet": "新しいADRを作成する際は、以下のテンプレートを使用してください：\n\n```markdown\n# ADR-XXX: タイトル",
+          "body": "新しいADRを作成する際は、以下のテンプレートを使用してください： ```markdown # ADR-XXX: タイトル",
           "startLine": 34
         },
         {
@@ -2362,6 +2455,7 @@
             "yyyy-mm-dd"
           ],
           "snippet": "**提案中** / **承認済み** / **非推奨** / **却下** (YYYY-MM-DD)",
+          "body": "**提案中** / **承認済み** / **非推奨** / **却下** (YYYY-MM-DD)",
           "startLine": 41
         },
         {
@@ -2376,6 +2470,7 @@
             "選択肢2"
           ],
           "snippet": "### 背景\n[この決定が必要になった背景を説明]\n\n### 検討した選択肢\n\n#### 選択肢1: [名前]\n**メリット**:\n- ...\n\n**デメリット**:\n- ...\n\n#### 選択肢2: [名前]【採用】\n...",
+          "body": "### 背景 [この決定が必要になった背景を説明] ### 検討した選択肢 #### 選択肢1: [名前] **メリット**: - ... **デメリット**: - ... #### 選択肢2: [名前]【採用】 ...",
           "startLine": 45
         },
         {
@@ -2387,6 +2482,7 @@
             "コード例"
           ],
           "snippet": "[採用した選択肢とその理由]\n\n### 技術的実装\n\n[実装の詳細、コード例]",
+          "body": "[採用した選択肢とその理由] ### 技術的実装 [実装の詳細、コード例]",
           "startLine": 62
         },
         {
@@ -2400,6 +2496,7 @@
             "移行手順"
           ],
           "snippet": "### 変更対象ファイル\n[影響を受けるファイル一覧]\n\n### 破壊的変更\n[既存コードへの影響]\n\n### 移行ガイド\n[移行手順]",
+          "body": "### 変更対象ファイル [影響を受けるファイル一覧] ### 破壊的変更 [既存コードへの影響] ### 移行ガイド [移行手順]",
           "startLine": 70
         },
         {
@@ -2409,6 +2506,7 @@
             "追加・変更されたテスト"
           ],
           "snippet": "[追加・変更されたテスト]",
+          "body": "[追加・変更されたテスト]",
           "startLine": 81
         },
         {
@@ -2418,6 +2516,7 @@
             "今後の拡張可能性"
           ],
           "snippet": "[今後の拡張可能性]",
+          "body": "[今後の拡張可能性]",
           "startLine": 85
         },
         {
@@ -2432,6 +2531,7 @@
             "最終更新"
           ],
           "snippet": "[参照したドキュメント、URL]\n\n---\n\n*作成日: YYYY-MM-DD*\n*最終更新: YYYY-MM-DD*\n```",
+          "body": "[参照したドキュメント、URL] --- *作成日: YYYY-MM-DD* *最終更新: YYYY-MM-DD* ```",
           "startLine": 89
         },
         {
@@ -2446,6 +2546,7 @@
             "タイトルはkebab-caseで簡潔に"
           ],
           "snippet": "- ファイル名: `ADR-XXX-kebab-case-title.md`\n- 番号は3桁ゼロ埋め（001, 002, ...）\n- タイトルはkebab-caseで簡潔に",
+          "body": "- ファイル名: `ADR-XXX-kebab-case-title.md` - 番号は3桁ゼロ埋め（001, 002, ...） - タイトルはkebab-caseで簡潔に",
           "startLine": 99
         },
         {
@@ -2462,6 +2563,7 @@
             "patterns"
           ],
           "snippet": "- [設計思想](../architecture/design-philosophy.md)\n- [学習記録](../knowledge/learnings.md)\n- [パターン集](../knowledge/patterns.md)",
+          "body": "- [設計思想](../architecture/design-philosophy.md) - [学習記録](../knowledge/learnings.md) - [パターン集](../knowledge/patterns.md)",
           "startLine": 105
         }
       ]
@@ -2482,6 +2584,7 @@
             "を採用します"
           ],
           "snippet": "このプロジェクトでは、Claude Codeとの協働を最適化した**インクリメンタル・レビュー駆動開発**を採用します。",
+          "body": "このプロジェクトでは、Claude Codeとの協働を最適化した**インクリメンタル・レビュー駆動開発**を採用します。",
           "startLine": 3
         },
         {
@@ -2501,6 +2604,7 @@
             "学習内容とパターンを文書化"
           ],
           "snippet": "1. **使い方の型を決める**: 明確な作業パターンを確立\n2. **インクリメンタルに進める**: 小さく、可逆的な変更を積み重ねる\n3. **頻繁にコミット**: 各論理的変更後にコミット\n4. **継続的レビュー**: 各段階でのレビューと検証\n5. **ナレッジの蓄積**: 学習内容とパターンを文書化",
+          "body": "1. **使い方の型を決める**: 明確な作業パターンを確立 2. **インクリメンタルに進める**: 小さく、可逆的な変更を積み重ねる 3. **頻繁にコミット**: 各論理的変更後にコミット 4. **継続的レビュー**: 各段階でのレビューと検証 5. **ナレッジの蓄積**: 学習内容とパターンを文書化",
           "startLine": 7
         },
         {
@@ -2528,6 +2632,7 @@
             "npm"
           ],
           "snippet": "### 1. 計画フェーズ (Planning)\n\n**スラッシュコマンド**:\n```\n/design\n```\n実装計画を作成し、タスクを分解します。\n\n**Claude Codeへの指示例**:\n- \"この機能の実装計画を作成してください\"\n- \"タスクを最小単位に分解してください\"\n- \"技術的な設計判断を文書化してください\"\n\n### 2. 実装フェーズ (Implementation)\n\n**スラッシュコマンド**:\n```\n/implement\n```\n計画に基づいて実装を進めます。\n\n```\n/revise\n```\n実装計画を修正・更新します。\n\n**サポートコマンド** (npm scripts):\n```bash\n# TDDモードで開発開始\nnpm run tdd\n\n# 型チェックを継続的に実行\nnpm run type-check -- --watch\n```\n\n**インクリメンタル開発のステップ**:\n1. 最小限のテストを書く\n2. テストを通す最小限のコードを書く\n3. リファクタリング\n4. コミット\n5. 次の機能へ\n\n### 3. レビューフェーズ (R",
+          "body": "### 1. 計画フェーズ (Planning) **スラッシュコマンド**: 実装計画を作成し、タスクを分解します。 **Claude Codeへの指示例**: - \"この機能の実装計画を作成してください\" - \"タスクを最小単位に分解してください\" - \"技術的な設計判断を文書化してください\" ### 2. 実装フェーズ (Implementation) **スラッシュコマンド**: 計画に基づいて実装を進めます。 実装計画を修正・更新します。 **サポートコマンド** (npm scripts): **インクリメンタル開発のステップ**: 1. 最小限のテストを書く 2. テストを通す最小限のコードを書く 3. リファクタリング 4. コミット 5. 次の機能へ ### 3. レビューフェーズ (Review) **スラッシュコマンド**: コードレビューを実行し、改善点を特定します。 **サポートコマンド** (npm scripts): **レビューの観点**: - コード品質 - 型安全性 - テストカバレッジ - アクセシビリティ - パフォーマンス - averageC",
           "startLine": 15
         },
         {
@@ -2555,6 +2660,7 @@
             "小さな変更後"
           ],
           "snippet": "### 基本コマンド\n| コマンド | 説明 | 使用タイミング |\n|---------|------|--------------|\n| `npm run claude:plan` | 実装計画の準備 | 新機能開発前 |\n| `npm run claude:check` | コード品質チェック | 実装中 |\n| `npm run claude:quick` | 型チェック＋テスト | 小さな変更後 |\n| `npm run claude:review` | 完全レビュー | 機能完成時 |\n| `npm run claude:verify` | CI相当の検証 | プルリクエスト前 |\n| `npm run claude:all` | フルパイプライン | リリース前 |\n| `npm run claude:clean` | ビルド成果物削除 | 環境リセット時 |\n| `npm run claude:status` | 現状確認 | 作業再開時 |\n| `npm run claude:docs` | ドキュメント確認 | ナレッジ確認時 |\n\n### ワークフロー例\n\n###",
+          "body": "### 基本コマンド | コマンド | 説明 | 使用タイミング | |---------|------|--------------| | `npm run claude:plan` | 実装計画の準備 | 新機能開発前 | | `npm run claude:check` | コード品質チェック | 実装中 | | `npm run claude:quick` | 型チェック＋テスト | 小さな変更後 | | `npm run claude:review` | 完全レビュー | 機能完成時 | | `npm run claude:verify` | CI相当の検証 | プルリクエスト前 | | `npm run claude:all` | フルパイプライン | リリース前 | | `npm run claude:clean` | ビルド成果物削除 | 環境リセット時 | | `npm run claude:status` | 現状確認 | 作業再開時 | | `npm run claude:docs` | ドキュメント確認 | ナレッジ確認時 | ### ワークフロー例 #### ",
           "startLine": 99
         },
         {
@@ -2582,6 +2688,7 @@
             "バグ修正"
           ],
           "snippet": "### タスクの粒度\n- **最小タスク**: 30分以内で完了\n- **可逆性**: 簡単にロールバック可能\n- **独立性**: 他のタスクに依存しない\n- **検証可能**: テストで確認できる\n\n### コミットメッセージ規約\n```\ntype(scope): subject\n\nbody\n\nfooter\n```\n\n**type**:\n- feat: 新機能\n- fix: バグ修正\n- docs: ドキュメント\n- style: フォーマット\n- refactor: リファクタリング\n- test: テスト\n- chore: ビルド、補助ツール",
+          "body": "### タスクの粒度 - **最小タスク**: 30分以内で完了 - **可逆性**: 簡単にロールバック可能 - **独立性**: 他のタスクに依存しない - **検証可能**: テストで確認できる ### コミットメッセージ規約 **type**: - feat: 新機能 - fix: バグ修正 - docs: ドキュメント - style: フォーマット - refactor: リファクタリング - test: テスト - chore: ビルド、補助ツール",
           "startLine": 154
         },
         {
@@ -2609,6 +2716,7 @@
             "の実践"
           ],
           "snippet": "### Claude Codeとの対話\n1. **明確な指示**: 具体的で測定可能な目標を設定\n2. **段階的な作業**: 大きなタスクは分解して依頼\n3. **検証の要求**: 各ステップで動作確認を依頼\n4. **ナレッジの共有**: 学習内容をCLAUDE.mdに反映\n\n### 効率的な開発\n1. **早期の型チェック**: `npm run claude:check`を頻繁に実行\n2. **TDD の実践**: テストファーストで品質を保証\n3. **小さなPR**: レビューしやすい単位で分割\n4. **継続的な文書化**: コードと同時にドキュメント更新\n\n### トラブルシューティング\n1. **環境リセット**: `npm run claude:clean`\n2. **依存関係の確認**: `npm ci`\n3. **型エラーの解決**: `npm run type-check`\n4. **テスト失敗の調査**: `npm run test:ui`",
+          "body": "### Claude Codeとの対話 1. **明確な指示**: 具体的で測定可能な目標を設定 2. **段階的な作業**: 大きなタスクは分解して依頼 3. **検証の要求**: 各ステップで動作確認を依頼 4. **ナレッジの共有**: 学習内容をCLAUDE.mdに反映 ### 効率的な開発 1. **早期の型チェック**: `npm run claude:check`を頻繁に実行 2. **TDD の実践**: テストファーストで品質を保証 3. **小さなPR**: レビューしやすい単位で分割 4. **継続的な文書化**: コードと同時にドキュメント更新 ### トラブルシューティング 1. **環境リセット**: `npm run claude:clean` 2. **依存関係の確認**: `npm ci` 3. **型エラーの解決**: `npm run type-check` 4. **テスト失敗の調査**: `npm run test:ui`",
           "startLine": 180
         },
         {
@@ -2628,6 +2736,7 @@
             "ナレッジベース"
           ],
           "snippet": "- [CLAUDE.md](../CLAUDE.md) - プロジェクト固有の指示\n- [TDD-WORKFLOW.md](../TDD-WORKFLOW.md) - TDD実践ガイド\n- [WEB_COMPONENTS_GUIDELINES.md](../WEB_COMPONENTS_GUIDELINES.md) - コンポーネント開発指針\n- [docs/plans/](./plans/) - 実装計画\n- [docs/knowledge/](./knowledge/) - ナレッジベース",
+          "body": "- [CLAUDE.md](../CLAUDE.md) - プロジェクト固有の指示 - [TDD-WORKFLOW.md](../TDD-WORKFLOW.md) - TDD実践ガイド - [WEB_COMPONENTS_GUIDELINES.md](../WEB_COMPONENTS_GUIDELINES.md) - コンポーネント開発指針 - [docs/plans/](./plans/) - 実装計画 - [docs/knowledge/](./knowledge/) - ナレッジベース",
           "startLine": 200
         },
         {
@@ -2655,6 +2764,7 @@
             "usage"
           ],
           "snippet": "このワークフローは継続的に改善されます。フィードバックや改善提案は以下の方法で管理:\n\n1. `docs/knowledge/improvements.md`に記録\n2. 定期的なレビューと更新\n3. CLAUDE.mdへの反映\n\n---\n\n*Last Updated: 2025-09-02*\n*Based on: [Zenn Article - My Favorite Claude Code Usage](https://zenn.dev/frontendflat/articles/acc1095edc0d6d)*",
+          "body": "このワークフローは継続的に改善されます。フィードバックや改善提案は以下の方法で管理: 1. `docs/knowledge/improvements.md`に記録 2. 定期的なレビューと更新 3. CLAUDE.mdへの反映 --- *Last Updated: 2025-09-02* *Based on: [Zenn Article - My Favorite Claude Code Usage](https://zenn.dev/frontendflat/articles/acc1095edc0d6d)*",
           "startLine": 208
         }
       ]
@@ -2689,6 +2799,7 @@
             "status"
           ],
           "snippet": "```bash\nnpm run codex:install-skills\n```\n\nレジストリ整合チェック:\n\n```bash\nnpm run skills:check\n```\n\nSkill 一覧は `registry/skills-registry.json` を機械可読の入口として扱います。\n\n### 何が起きるか\n\n`registry/skills-registry.json` のうち、`clients` に `codex` を含み、`status: \"active\"` の Skill を `~/.codex/skills/` にコピーします（現状は次の 8 Skill）。\n\n- `<repo>/.claude/skills/css-writing-rules`\n- `<repo>/.claude/skills/component-design-study`\n- `<repo>/.claude/skills/headless-component-design`\n- `<repo>/.claude/skills/wcf-ui-builder`\n- `<repo>/.claude/s",
+          "body": "レジストリ整合チェック: Skill 一覧は `registry/skills-registry.json` を機械可読の入口として扱います。 ### 何が起きるか `registry/skills-registry.json` のうち、`clients` に `codex` を含み、`status: \"active\"` の Skill を `~/.codex/skills/` にコピーします（現状は次の 8 Skill）。 - `<repo>/.claude/skills/css-writing-rules` - `<repo>/.claude/skills/component-design-study` - `<repo>/.claude/skills/headless-component-design` - `<repo>/.claude/skills/wcf-ui-builder` - `<repo>/.claude/skills/wcf-discovery` - `<repo>/.claude/skills/wcf-install` - `<repo>/.claude/ski",
           "startLine": 7
         },
         {
@@ -2709,6 +2820,7 @@
             "wcf-validate"
           ],
           "snippet": "```bash\nls -la ~/.codex/skills/css-writing-rules\nls -la ~/.codex/skills/component-design-study\nls -la ~/.codex/skills/headless-component-design\nls -la ~/.codex/skills/wcf-ui-builder\nls -la ~/.codex/skills/wcf-discovery\nls -la ~/.codex/skills/wcf-install\nls -la ~/.codex/skills/wcf-compose\nls -la ~/.codex/skills/wcf-validate\n```",
+          "body": "",
           "startLine": 34
         },
         {
@@ -2730,6 +2842,7 @@
             "wcf-skills-pack"
           ],
           "snippet": "- 入口: `wcf-ui-builder`\n- 段階実行: `wcf-discovery` → `wcf-install` → `wcf-compose` → `wcf-validate`\n- 詳細ガイド: `docs/knowledge/wcf-skills-pack.md`",
+          "body": "- 入口: `wcf-ui-builder` - 段階実行: `wcf-discovery` → `wcf-install` → `wcf-compose` → `wcf-validate` - 詳細ガイド: `docs/knowledge/wcf-skills-pack.md`",
           "startLine": 47
         },
         {
@@ -2753,6 +2866,7 @@
             "--include-deprecated"
           ],
           "snippet": "```bash\n# 計画のみ表示（変更なし）\nnpm run codex:install-skills -- --dry-run\n\n# managed marker を持つ未登録Skillを削除\nnpm run codex:install-skills -- --prune-managed\n\n# deprecated を含める\nnpm run codex:install-skills -- --include-deprecated\n```",
+          "body": "",
           "startLine": 53
         },
         {
@@ -2780,6 +2894,7 @@
             "deprecated"
           ],
           "snippet": "- **workspace が変わった**\n  - コピー方式のため壊れません（ただし `.claude/skills` を更新したら再インストールしてください）\n- **同名ディレクトリが既に存在して失敗する**\n  - `scripts/codex/install-skills.sh --force` を実行してください（既存を置換）\n- **管理下ディレクトリの掃除もしたい**\n  - `scripts/codex/install-skills.sh --prune-managed` を実行してください（`.codex-installed-from` がある管理対象だけ削除）\n- **deprecated Skill も含めて検証したい**\n  - `scripts/codex/install-skills.sh --include-deprecated` を実行してください（既定は除外）",
+          "body": "- **workspace が変わった** - コピー方式のため壊れません（ただし `.claude/skills` を更新したら再インストールしてください） - **同名ディレクトリが既に存在して失敗する** - `scripts/codex/install-skills.sh --force` を実行してください（既存を置換） - **管理下ディレクトリの掃除もしたい** - `scripts/codex/install-skills.sh --prune-managed` を実行してください（`.codex-installed-from` がある管理対象だけ削除） - **deprecated Skill も含めて検証したい** - `scripts/codex/install-skills.sh --include-deprecated` を実行してください（既定は除外）",
           "startLine": 66
         },
         {
@@ -2795,6 +2910,7 @@
             "verify"
           ],
           "snippet": "```bash\nnpm run validate:wc\nnpm run agents:pre-pr\nnpm run agents:verify\n```",
+          "body": "",
           "startLine": 77
         },
         {
@@ -2815,6 +2931,7 @@
             "wcf-validate"
           ],
           "snippet": "```bash\nrm ~/.codex/skills/css-writing-rules\nrm ~/.codex/skills/component-design-study\nrm ~/.codex/skills/headless-component-design\nrm ~/.codex/skills/wcf-ui-builder\nrm ~/.codex/skills/wcf-discovery\nrm ~/.codex/skills/wcf-install\nrm ~/.codex/skills/wcf-compose\nrm ~/.codex/skills/wcf-validate\n```",
+          "body": "",
           "startLine": 85
         }
       ]
@@ -2837,6 +2954,7 @@
             "重複定義の徹底排除"
           ],
           "snippet": "Web Componentsにおける CSS変数の管理は、以下の原則に従います：\n\n1. **プロパティと変数のマッピングは一度だけ定義**\n2. **状態変化は変数の再代入で実現**\n3. **重複定義の徹底排除**",
+          "body": "Web Componentsにおける CSS変数の管理は、以下の原則に従います： 1. **プロパティと変数のマッピングは一度だけ定義** 2. **状態変化は変数の再代入で実現** 3. **重複定義の徹底排除**",
           "startLine": 3
         },
         {
@@ -2864,6 +2982,7 @@
             "disabled"
           ],
           "snippet": "### ✅ 正しい実装\n\n```css\n/* ベース要素で全プロパティを変数マッピング */\n[part=\"base\"] {\n  /* 一度だけ定義 */\n  background-color: var(--dads-button-background);\n  color: var(--dads-button-color);\n  border-color: var(--dads-button-border-color);\n}\n\n/* 状態変化は変数の再代入のみ */\n:host([variant=\"solid\"]:not([disabled])) [part=\"base\"]:hover {\n  --dads-button-background: var(--button-primary-bg-hover);\n  /* プロパティの再定義はしない */\n}\n```\n\n### ❌ 避けるべき実装\n\n```css\n/* 悪い例: プロパティを何度も定義 */\n:host([variant=\"solid\"]) [part=\"base\"] {\n  background-color: var(--",
+          "body": "### ✅ 正しい実装 ### ❌ 避けるべき実装",
           "startLine": 11
         },
         {
@@ -2891,6 +3010,7 @@
             "変数が失われます"
           ],
           "snippet": "### 1. トークン定義層（design-tokens/）\n\n```typescript\n// セマンティックトークンとローカルトークンは文字列として定義\nconst buttonSemanticTokensText = `\n  :host {\n    --button-primary-bg: var(--color-primitive-blue-900);\n    --button-primary-bg-hover: var(--color-primitive-blue-1000);\n  }\n`;\n\n// 最終的にcssテンプレートリテラルで変換\nexport const buttonTokens = css`\n  ${buttonSemanticTokensText}\n  ${buttonLocalTokensText}\n`;\n```\n\n**重要**: CSSStyleSheetオブジェクトを文字列テンプレート内で展開しないこと。変数が失われます。\n\n### 2. コンポーネントスタイル層\n\n```css\n/* ========== 共通プロパティ定義 ========== */",
+          "body": "### 1. トークン定義層（design-tokens/） **重要**: CSSStyleSheetオブジェクトを文字列テンプレート内で展開しないこと。変数が失われます。 ### 2. コンポーネントスタイル層 ### 3. トークンスコープ",
           "startLine": 44
         },
         {
@@ -2918,6 +3038,7 @@
             "minimal"
           ],
           "snippet": "Shadow DOM内でCSS変数が正しく解決されるために：\n\n1. **applyDADSTokens()** - グローバルトークンを提供\n2. **componentTokens** - コンポーネント固有トークン\n3. **componentStyles** - 実際のスタイル定義\n\n```typescript\nstyles: withReset([\n  applyDADSTokens(),    // 1. グローバルトークン\n  buttonTokens,          // 2. コンポーネントトークン\n  buttonStyles,          // 3. スタイル定義\n  applyDADSFocusStyles() // 4. フォーカススタイル\n], 'minimal')\n```",
+          "body": "Shadow DOM内でCSS変数が正しく解決されるために： 1. **applyDADSTokens()** - グローバルトークンを提供 2. **componentTokens** - コンポーネント固有トークン 3. **componentStyles** - 実際のスタイル定義",
           "startLine": 111
         },
         {
@@ -2935,6 +3056,7 @@
             "devtoolsで変数の継承と上書きが追跡可能"
           ],
           "snippet": "1. **保守性**: 変更箇所が明確で追跡しやすい\n2. **パフォーマンス**: CSSパーサーの処理が効率的\n3. **可読性**: カスケーディングルールが明確\n4. **再利用性**: 変数の組み合わせで新しい状態を簡単に作成\n5. **デバッグ**: DevToolsで変数の継承と上書きが追跡可能",
+          "body": "1. **保守性**: 変更箇所が明確で追跡しやすい 2. **パフォーマンス**: CSSパーサーの処理が効率的 3. **可読性**: カスケーディングルールが明確 4. **再利用性**: 変数の組み合わせで新しい状態を簡単に作成 5. **デバッグ**: DevToolsで変数の継承と上書きが追跡可能",
           "startLine": 128
         },
         {
@@ -2962,6 +3084,7 @@
             "開発中はフォールバック値を設定"
           ],
           "snippet": "### CSS変数が未定義にならないために\n\n1. **文字列結合に注意**\n   ```typescript\n   // ❌ 悪い: CSSStyleSheetを文字列内で展開\n   export const styles = css`\n     ${someStyleSheet}\n   `;\n   \n   // ✅ 良い: 文字列を結合してからcss関数に渡す\n   const stylesText = `...`;\n   export const styles = css`${stylesText}`;\n   ```\n\n2. **スコープチェーン**\n   - `:host` → `[part=\"base\"]` → 疑似クラスの順で継承\n   - 各レベルで変数を再定義可能\n\n3. **フォールバック値**\n   - 開発中はフォールバック値を設定\n   - 本番環境では削除（トークンシステムを信頼）",
+          "body": "### CSS変数が未定義にならないために 1. **文字列結合に注意** 2. **スコープチェーン** - `:host` → `[part=\"base\"]` → 疑似クラスの順で継承 - 各レベルで変数を再定義可能 3. **フォールバック値** - 開発中はフォールバック値を設定 - 本番環境では削除（トークンシステムを信頼）",
           "startLine": 136
         },
         {
@@ -2977,6 +3100,7 @@
             "正しいトークン結合の例"
           ],
           "snippet": "- `/packages/components/button/button-styles.ts` - 完全に合理化された実装\n- `/packages/components/accordion/accordion.ts` - 正しいトークン結合の例",
+          "body": "- `/packages/components/button/button-styles.ts` - 完全に合理化された実装 - `/packages/components/accordion/accordion.ts` - 正しいトークン結合の例",
           "startLine": 160
         },
         {
@@ -2993,6 +3117,7 @@
             "一貫した実装を維持するためのガイドラインです"
           ],
           "snippet": "このパターンをすべてのコンポーネントで採用し、一貫性のある実装を維持します。\n\n---\n\n*このドキュメントは Claude Code が参照し、一貫した実装を維持するためのガイドラインです。*",
+          "body": "このパターンをすべてのコンポーネントで採用し、一貫性のある実装を維持します。 --- *このドキュメントは Claude Code が参照し、一貫した実装を維持するためのガイドラインです。*",
           "startLine": 165
         }
       ]
@@ -3026,6 +3151,7 @@
             "domによるスタイル汚染の防止"
           ],
           "snippet": "### プロジェクト概要\nデジタル庁のデザインシステムに準拠したアコーディオンコンポーネントをWeb Components技術で実装する。本コンポーネントは、情報の階層的な表示と効率的な画面スペースの活用を目的とし、アクセシビリティとユーザビリティを最優先に設計される。\n\n### 背景と動機\n現在のデジタル庁デザインシステムのアコーディオン実装は、HTML標準のdetails/summary要素とBEMクラスベースのスタイリングに依存している。これをWeb Componentsベースの実装に移行することで、以下の利点を実現する：\n\n- コンポーネントの完全なカプセル化\n- 再利用性の向上\n- メンテナンス性の改善\n- 一貫したAPIの提供\n- Shadow DOMによるスタイル汚染の防止",
+          "body": "### プロジェクト概要 デジタル庁のデザインシステムに準拠したアコーディオンコンポーネントをWeb Components技術で実装する。本コンポーネントは、情報の階層的な表示と効率的な画面スペースの活用を目的とし、アクセシビリティとユーザビリティを最優先に設計される。 ### 背景と動機 現在のデジタル庁デザインシステムのアコーディオン実装は、HTML標準のdetails/summary要素とBEMクラスベースのスタイリングに依存している。これをWeb Componentsベースの実装に移行することで、以下の利点を実現する： - コンポーネントの完全なカプセル化 - 再利用性の向上 - メンテナンス性の改善 - 一貫したAPIの提供 - Shadow DOMによるスタイル汚染の防止",
           "startLine": 3
         },
         {
@@ -3053,6 +3179,7 @@
             "summary実装との100"
           ],
           "snippet": "### 目標\n- デジタル庁デザインシステムのビジュアル仕様を完全に準拠\n- WCAG 2.1 AAレベルのアクセシビリティ要件を満たす\n- Shadow DOMを活用した堅牢なカプセル化\n- TypeScriptによる型安全な実装\n- レスポンシブデザインの実現（モバイル・デスクトップ対応）\n- スムーズなアニメーションとインタラクション\n\n### 非目標\n- レガシーブラウザ（IE11等）のサポート\n- 外部ライブラリへの依存\n- サーバーサイドレンダリング（SSR）の完全サポート\n- 既存のdetails/summary実装との100%の後方互換性",
+          "body": "### 目標 - デジタル庁デザインシステムのビジュアル仕様を完全に準拠 - WCAG 2.1 AAレベルのアクセシビリティ要件を満たす - Shadow DOMを活用した堅牢なカプセル化 - TypeScriptによる型安全な実装 - レスポンシブデザインの実現（モバイル・デスクトップ対応） - スムーズなアニメーションとインタラクション ### 非目標 - レガシーブラウザ（IE11等）のサポート - 外部ライブラリへの依存 - サーバーサイドレンダリング（SSR）の完全サポート - 既存のdetails/summary実装との100%の後方互換性",
           "startLine": 17
         },
         {
@@ -3080,6 +3207,7 @@
             "typescript"
           ],
           "snippet": "### システムアーキテクチャ\n\n#### コンポーネント構成\n```\ndads-accordion (親コンテナ)\n├── dads-accordion-item (個別アイテム)\n│   ├── [slot=\"header\"] (質問/タイトル部分)\n│   └── [slot=\"content\"] (回答/コンテンツ部分)\n└── dads-accordion-item\n    ├── [slot=\"header\"]\n    └── [slot=\"content\"]\n```\n\n#### 技術スタック\n- **フレームワーク**: Vanilla Web Components (Custom Elements v1)\n- **型システム**: TypeScript (strict mode)\n- **スタイリング**: Shadow DOM + CSS Custom Properties\n- **ビルドツール**: TypeScript Compiler\n- **テスティング**: Vitest + Playwright\n\n### API仕様\n\n#### 使用例\n```html\n<",
+          "body": "### システムアーキテクチャ #### コンポーネント構成 #### 技術スタック - **フレームワーク**: Vanilla Web Components (Custom Elements v1) - **型システム**: TypeScript (strict mode) - **スタイリング**: Shadow DOM + CSS Custom Properties - **ビルドツール**: TypeScript Compiler - **テスティング**: Vitest + Playwright ### API仕様 #### 使用例 #### dads-accordion コンポーネント ##### 属性（Attributes） web-components.tsライブラリに準拠した定義: ##### メソッド ##### イベント #### dads-accordion-item コンポーネント ##### 属性（Attributes） web-components.tsライブラリに準拠した定義: ##### メソッド ##### イベント ### データモデルとスキーマ",
           "startLine": 33
         },
         {
@@ -3107,6 +3235,7 @@
             "ブラウザ間の挙動の差異"
           ],
           "snippet": "### 検討した代替アプローチ\n\n#### 1. React/Vue コンポーネントとしての実装\n**メリット**:\n- 豊富なエコシステム\n- 既存のコンポーネントライブラリとの統合が容易\n\n**デメリット**:\n- フレームワーク依存\n- バンドルサイズの増加\n- 技術的ロックイン\n\n**却下理由**: フレームワーク非依存の要件を満たせない\n\n#### 2. details/summary要素の拡張\n**メリット**:\n- ネイティブHTML要素の活用\n- プログレッシブエンハンスメント\n\n**デメリット**:\n- スタイリングの制限\n- ブラウザ間の挙動の差異\n- カスタマイズ性の低さ\n\n**却下理由**: デザインシステムの要件を完全に満たせない\n\n#### 3. Lit/Stencilなどのライブラリ使用\n**メリット**:\n- 開発効率の向上\n- テンプレート機能の充実\n\n**デメリット**:\n- 外部依存の追加\n- 学習コスト\n- バンドルサイズ\n\n**却下理由**: ゼロ依存の方針に反する",
+          "body": "### 検討した代替アプローチ #### 1. React/Vue コンポーネントとしての実装 **メリット**: - 豊富なエコシステム - 既存のコンポーネントライブラリとの統合が容易 **デメリット**: - フレームワーク依存 - バンドルサイズの増加 - 技術的ロックイン **却下理由**: フレームワーク非依存の要件を満たせない #### 2. details/summary要素の拡張 **メリット**: - ネイティブHTML要素の活用 - プログレッシブエンハンスメント **デメリット**: - スタイリングの制限 - ブラウザ間の挙動の差異 - カスタマイズ性の低さ **却下理由**: デザインシステムの要件を完全に満たせない #### 3. Lit/Stencilなどのライブラリ使用 **メリット**: - 開発効率の向上 - テンプレート機能の充実 **デメリット**: - 外部依存の追加 - 学習コスト - バンドルサイズ **却下理由**: ゼロ依存の方針に反する",
           "startLine": 491
         },
         {
@@ -3134,6 +3263,7 @@
             "フェーズ4"
           ],
           "snippet": "### フェーズ1: 基本構造（2日）\n- [ ] WebComponentクラスの実装\n- [ ] 基本的なHTML構造とShadow DOM設定\n- [ ] TypeScript型定義\n\n### フェーズ2: スタイリング（2日）\n- [ ] デザイントークンの統合\n- [ ] レスポンシブスタイル実装\n- [ ] フォーカス/ホバー状態の視覚化\n\n### フェーズ3: インタラクション（3日）\n- [ ] クリック/タップによる開閉\n- [ ] キーボードナビゲーション\n- [ ] ARIA属性の動的更新\n\n### フェーズ4: アニメーション（2日）\n- [ ] 高さアニメーション実装\n- [ ] アイコン回転アニメーション\n- [ ] パフォーマンス最適化\n\n### フェーズ5: アクセシビリティ（2日）\n- [ ] WAI-ARIAパターン実装\n- [ ] スクリーンリーダーテスト\n- [ ] キーボード操作の改善\n\n### フェーズ6: テスト（3日）\n- [ ] ユニットテスト作成\n- [ ] E2Eテスト実装\n- [ ] アクセシビリティテスト\n\n### フェーズ7:",
+          "body": "### フェーズ1: 基本構造（2日） - [ ] WebComponentクラスの実装 - [ ] 基本的なHTML構造とShadow DOM設定 - [ ] TypeScript型定義 ### フェーズ2: スタイリング（2日） - [ ] デザイントークンの統合 - [ ] レスポンシブスタイル実装 - [ ] フォーカス/ホバー状態の視覚化 ### フェーズ3: インタラクション（3日） - [ ] クリック/タップによる開閉 - [ ] キーボードナビゲーション - [ ] ARIA属性の動的更新 ### フェーズ4: アニメーション（2日） - [ ] 高さアニメーション実装 - [ ] アイコン回転アニメーション - [ ] パフォーマンス最適化 ### フェーズ5: アクセシビリティ（2日） - [ ] WAI-ARIAパターン実装 - [ ] スクリーンリーダーテスト - [ ] キーボード操作の改善 ### フェーズ6: テスト（3日） - [ ] ユニットテスト作成 - [ ] E2Eテスト実装 - [ ] アクセシビリティテスト ### フェーズ7: ドキュメン",
           "startLine": 531
         },
         {
@@ -3161,6 +3291,7 @@
             "provider"
           ],
           "snippet": "### テストカバレッジ目標\n- **ステートメントカバレッジ**: 90%以上\n- **ブランチカバレッジ**: 85%以上\n- **関数カバレッジ**: 95%以上\n- **行カバレッジ**: 90%以上\n\n### カバレッジ測定方法\n```bash\n# Vitestでカバレッジ測定\nnpm run test:coverage\n\n# 閾値設定（vitest.config.ts）\nexport default defineConfig({\n  test: {\n    coverage: {\n      provider: 'v8',\n      reporter: ['text', 'json', 'html'],\n      thresholds: {\n        statements: 90,\n        branches: 85,\n        functions: 95,\n        lines: 90\n      }\n    }\n  }\n});\n```\n\n### ユニットテスト\n```typescript\ndescribe('DadsAccordion', (",
+          "body": "### テストカバレッジ目標 - **ステートメントカバレッジ**: 90%以上 - **ブランチカバレッジ**: 85%以上 - **関数カバレッジ**: 95%以上 - **行カバレッジ**: 90%以上 ### カバレッジ測定方法 ### ユニットテスト ### E2Eテスト（Playwright） ### アクセシビリティテスト - axe-coreによる自動テスト - NVDAでの手動テスト - VoiceOverでの手動テスト ### パフォーマンステスト #### Core Web Vitals計測 #### パフォーマンス基準 - Lighthouse CI スコア: 90以上 - アニメーションFPS: 60fps維持 - 初期レンダリング: 100ms以内 - メモリリーク: なし",
           "startLine": 568
         },
         {
@@ -3188,6 +3319,7 @@
             "boolean"
           ],
           "snippet": "### 基本設計\n```typescript\ninterface I18nConfig {\n  locale: string;\n  messages: {\n    expand: string;\n    collapse: string;\n    expandAll: string;\n    collapseAll: string;\n    loading: string;\n    error: string;\n    itemCount: (count: number) => string;\n  };\n  rtl?: boolean; // Right-to-Left言語サポート\n}\n\nclass DadsAccordion extends WebComponent {\n  static #i18n = new Map<string, I18nConfig>();\n  \n  // 言語設定の登録\n  static registerLocale(locale: string, config: I18nConfig) {\n    this.#i18n.set(locale, config",
+          "body": "### 基本設計 ### RTL（Right-to-Left）対応",
           "startLine": 674
         },
         {
@@ -3215,6 +3347,7 @@
             "問題検出時の即時通知システム"
           ],
           "snippet": "### 段階的リリース\n\n#### Phase 1: アルファリリース（内部テスト）\n- 社内開発環境でのテスト\n- フィードバック収集\n- バグ修正\n\n#### Phase 2: ベータリリース（限定公開）\n- 選定プロジェクトでの試験導入\n- パフォーマンス検証\n- アクセシビリティ監査\n\n#### Phase 3: 正式リリース\n- npm パッケージ公開\n- CDN配信\n- ドキュメントサイト公開\n\n### ロールバック手順\n1. 問題検出時の即時通知システム\n2. 以前のバージョンへの切り替え手順\n3. データ移行スクリプトの準備",
+          "body": "### 段階的リリース #### Phase 1: アルファリリース（内部テスト） - 社内開発環境でのテスト - フィードバック収集 - バグ修正 #### Phase 2: ベータリリース（限定公開） - 選定プロジェクトでの試験導入 - パフォーマンス検証 - アクセシビリティ監査 #### Phase 3: 正式リリース - npm パッケージ公開 - CDN配信 - ドキュメントサイト公開 ### ロールバック手順 1. 問題検出時の即時通知システム 2. 以前のバージョンへの切り替え手順 3. データ移行スクリプトの準備",
           "startLine": 765
         },
         {
@@ -3242,6 +3375,7 @@
             "class"
           ],
           "snippet": "### バージョン2.0での機能追加候補\n- ネスト可能なアコーディオン\n- 検索/フィルタリング機能\n- ドラッグ&ドロップによる並び替え\n- 遅延ローディング対応\n- SSR/SSG完全サポート\n\n### 長期的な改善項目\n- Web Animaitons API活用\n- Constructable Stylesheetsの最適化\n- Custom State Pseudo Class の活用\n- Declarative Shadow DOM対応",
+          "body": "### バージョン2.0での機能追加候補 - ネスト可能なアコーディオン - 検索/フィルタリング機能 - ドラッグ&ドロップによる並び替え - 遅延ローディング対応 - SSR/SSG完全サポート ### 長期的な改善項目 - Web Animaitons API活用 - Constructable Stylesheetsの最適化 - Custom State Pseudo Class の活用 - Declarative Shadow DOM対応",
           "startLine": 789
         },
         {
@@ -3269,6 +3403,7 @@
             "ffd43d"
           ],
           "snippet": "### デザイントークン一覧\n```css\n/* 必須使用トークン */\n--color-primitive-blue-1000: #00118f;      /* ボーダー、リンク */\n--color-neutral-white: #ffffff;            /* ボタン背景 */\n--color-neutral-solid-gray-800: #333333;   /* テキスト */\n--color-neutral-solid-gray-420: #949494;   /* ボーダー */\n--color-neutral-solid-gray-50: #f2f2f2;    /* ホバー背景 */\n--color-primitive-yellow-300: #ffd43d;     /* フォーカス背景 */\n--color-neutral-black: #000000;            /* フォーカス枠 */\n--border-radius-full: 9999px;              /* ボタン */\n--border-radius-8: 8p",
+          "body": "### デザイントークン一覧 ### 参考リンク - [WAI-ARIA Authoring Practices - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - [MDN Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) - [デジタル庁デザインシステム](https://design.digital.go.jp/) ### 用語集 - **Shadow DOM**: Web Componentsの機能の一つで、DOMとスタイルのカプセル化を提供 - **Custom Elements**: 独自のHTML要素を定義するためのWeb標準API - **Slot**: Shadow DOM内でライトDOMのコンテンツを挿入する場所を指定する要素 - **デザイントークン**: デザインシステムで統一的に使用される変数値 --- **文書バージョン**: 1.0.0 **作成日",
           "startLine": 804
         }
       ]
@@ -3288,6 +3423,7 @@
             "を使用しています"
           ],
           "snippet": "このプロジェクトでは、デジタル庁の公式デザインシステムトークン（[@digital-go-jp/design-tokens](https://www.npmjs.com/package/@digital-go-jp/design-tokens)）を使用しています。",
+          "body": "このプロジェクトでは、デジタル庁の公式デザインシステムトークン（[@digital-go-jp/design-tokens](https://www.npmjs.com/package/@digital-go-jp/design-tokens)）を使用しています。",
           "startLine": 3
         },
         {
@@ -3315,6 +3451,7 @@
             "jsonも同時に更新"
           ],
           "snippet": "### 1. 自動更新の仕組み\n\nデザイントークンは以下の3つの方法で自動更新されます：\n\n1. **GitHub Actions（推奨）**\n   - 毎週月曜日の朝に自動実行\n   - 新バージョンを検出すると自動でPull Request作成\n   - 型チェックも自動実行\n\n2. **手動実行**\n   ```bash\n   # 最新バージョンをチェック\n   npm run check-tokens\n   \n   # デザイントークンを更新\n   npm run update-tokens\n   ```\n\n3. **依存関係更新時**\n   ```bash\n   # package.jsonも同時に更新\n   npm install @digital-go-jp/design-tokens@latest\n   npm run update-tokens\n   ```\n\n### 2. 更新プロセス\n\n1. **検出**: 新しいバージョンのチェック\n2. **ダウンロード**: 公式パッケージから最新のtokens.cssを取得\n3. **解析**: CSSカスタムプロパティを",
+          "body": "### 1. 自動更新の仕組み デザイントークンは以下の3つの方法で自動更新されます： 1. **GitHub Actions（推奨）** - 毎週月曜日の朝に自動実行 - 新バージョンを検出すると自動でPull Request作成 - 型チェックも自動実行 2. **手動実行** 3. **依存関係更新時** ### 2. 更新プロセス 1. **検出**: 新しいバージョンのチェック 2. **ダウンロード**: 公式パッケージから最新のtokens.cssを取得 3. **解析**: CSSカスタムプロパティを抽出 4. **生成**: TypeScriptファイル（`packages/styles/design-tokens/index.ts`）を自動生成 5. **検証**: 型チェックを実行 6. **コミット**: 変更を自動コミット&PR作成",
           "startLine": 7
         },
         {
@@ -3341,6 +3478,7 @@
             "このファイル"
           ],
           "snippet": "```\n├── packages/styles/design-tokens/\n│   ├── index.ts                     # メイン: applyDADSTokens()関数\n│   └── accordion-tokens.ts          # コンポーネント固有トークン\n├── scripts/\n│   └── update-design-tokens.js      # 更新スクリプト\n├── .github/workflows/\n│   └── update-design-tokens.yml     # GitHub Actions設定\n└── docs/\n    └── design-tokens-management.md  # このファイル\n```",
+          "body": "",
           "startLine": 43
         },
         {
@@ -3368,6 +3506,7 @@
             "template"
           ],
           "snippet": "### 基本的な使い方\n\n```typescript\nimport { applyDADSTokens } from '../styles/design-tokens/index.js';\nimport { withReset } from '../styles/reset-css.js';\n\nclass MyComponent extends WebComponent {\n  static definition = {\n    name: 'my-component',\n    template: html`<div part=\"content\">コンテンツ</div>`,\n    styles: withReset([\n      applyDADSTokens(),  // デジタル庁トークンを適用\n      css`\n        :host {\n          color: var(--color-text-primary);\n          background: var(--color-background);\n          border-radius:",
+          "body": "### 基本的な使い方 ### 利用可能なトークン #### カラートークン - **プリミティブカラー**: `--color-primitive-{color}-{weight}` - Blue, Light Blue, Cyan, Green, Lime, Yellow, Orange, Red, Magenta, Purple - 重み: 50, 100, 200, ..., 1200 - **ニュートラルカラー**: `--color-neutral-{type}-{weight}` - **セマンティックカラー**: `--color-semantic-{type}-{number}` #### コンポーネントエイリアス - `--color-primary`, `--color-text-primary`, `--color-border` - `--component-font-family`, `--component-border-radius` #### タイポグラフィ - `--font-size-{size}`: 14, 16, 18, 20, 22, 24,",
           "startLine": 57
         },
         {
@@ -3395,6 +3534,7 @@
             "scripts"
           ],
           "snippet": "### コンポーネント固有トークンの追加\n\n`packages/styles/design-tokens/accordion-tokens.ts` のようにコンポーネント固有のトークンファイルを作成：\n\n```typescript\nexport const myComponentTokens = css`\n  :host {\n    --my-component-spacing: var(--spacing-16);\n    --my-component-color: var(--color-primary);\n  }\n`;\n```\n\n### エイリアストークンのカスタマイズ\n\n`scripts/update-design-tokens.js` の `generateTypeScriptContent` 関数内でエイリアストークンを編集できます。",
+          "body": "### コンポーネント固有トークンの追加 `packages/styles/design-tokens/accordion-tokens.ts` のようにコンポーネント固有のトークンファイルを作成： ### エイリアストークンのカスタマイズ `scripts/update-design-tokens.js` の `generateTypeScriptContent` 関数内でエイリアストークンを編集できます。",
           "startLine": 135
         },
         {
@@ -3422,6 +3562,7 @@
             "でバージョン確認"
           ],
           "snippet": "### よくある問題\n\n1. **トークンが未定義**\n   ```\n   --color-primitive-yellow-300 is not defined\n   ```\n   **解決**: `npm run update-tokens` を実行\n\n2. **型エラー**\n   ```\n   Property 'applyDADSTokens' does not exist\n   ```\n   **解決**: インポートパスを確認、`npm run type-check` を実行\n\n3. **古いトークンの使用**\n   **解決**: `npm run check-tokens` でバージョン確認、更新が必要な場合は手動実行\n\n### 手動修復\n\n```bash\n# 1. 依存関係を最新に更新\nnpm install @digital-go-jp/design-tokens@latest\n\n# 2. トークンファイルを再生成\nnpm run update-tokens\n\n# 3. 型チェック\nnpm run type-check\n\n# 4. 動作確認\nbun server.t",
+          "body": "### よくある問題 1. **トークンが未定義** **解決**: `npm run update-tokens` を実行 2. **型エラー** **解決**: インポートパスを確認、`npm run type-check` を実行 3. **古いトークンの使用** **解決**: `npm run check-tokens` でバージョン確認、更新が必要な場合は手動実行 ### 手動修復",
           "startLine": 154
         },
         {
@@ -3443,6 +3584,7 @@
             "新しいトークンの変更点をreadmeに反映"
           ],
           "snippet": "新バージョン適用時の確認項目：\n\n- [ ] `npm run update-tokens` が正常に実行される\n- [ ] `npm run type-check` がエラーなく完了\n- [ ] フォーカススタイル（黄色背景+黒枠線）が表示される\n- [ ] 既存コンポーネントのスタイルに問題がない\n- [ ] 新しいトークンの変更点をREADMEに反映",
+          "body": "新バージョン適用時の確認項目： - [ ] `npm run update-tokens` が正常に実行される - [ ] `npm run type-check` がエラーなく完了 - [ ] フォーカススタイル（黄色背景+黒枠線）が表示される - [ ] 既存コンポーネントのスタイルに問題がない - [ ] 新しいトークンの変更点をREADMEに反映",
           "startLine": 190
         },
         {
@@ -3458,6 +3600,7 @@
             "デザインシステム活用ガイド"
           ],
           "snippet": "- [デジタル庁デザインシステム（Figma）](https://www.figma.com/community/file/1255349027535859598)\n- [@digital-go-jp/design-tokens（npm）](https://www.npmjs.com/package/@digital-go-jp/design-tokens)\n- [デジタル庁デザイントークンリポジトリ](https://github.com/digital-go-jp/design-tokens)\n- [デザインシステム活用ガイド](https://www.digital.go.jp/policies/servicedesign/designsystem/)",
+          "body": "- [デジタル庁デザインシステム（Figma）](https://www.figma.com/community/file/1255349027535859598) - [@digital-go-jp/design-tokens（npm）](https://www.npmjs.com/package/@digital-go-jp/design-tokens) - [デジタル庁デザイントークンリポジトリ](https://github.com/digital-go-jp/design-tokens) - [デザインシステム活用ガイド](https://www.digital.go.jp/policies/servicedesign/designsystem/)",
           "startLine": 200
         },
         {
@@ -3472,6 +3615,7 @@
             "完全なプリミティブカラー実装"
           ],
           "snippet": "- **2025-08-29**: 自動更新システム導入（v1.1.1対応）\n- **2025-08-29**: GitHub Actions追加\n- **2025-08-29**: 完全なプリミティブカラー実装",
+          "body": "- **2025-08-29**: 自動更新システム導入（v1.1.1対応） - **2025-08-29**: GitHub Actions追加 - **2025-08-29**: 完全なプリミティブカラー実装",
           "startLine": 207
         }
       ]
@@ -3506,6 +3650,7 @@
             "100"
           ],
           "snippet": "**プロジェクト名**: デジタル庁デザインシステム アコーディオンWeb Component開発  \n**期間**: 2週間（10営業日）  \n**チーム規模**: 1-2名（Frontend Engineer + QA Engineer）  \n**予算**: 開発工数 26時間  \n\n### 成功基準\n- WCAG 2.1 AA完全準拠\n- 60fps アニメーション性能\n- TypeScript 100%型安全実装\n- デザイントークン完全統合\n- 自動テストカバレッジ 90%以上",
+          "body": "**プロジェクト名**: デジタル庁デザインシステム アコーディオンWeb Component開発 **期間**: 2週間（10営業日） **チーム規模**: 1-2名（Frontend Engineer + QA Engineer） **予算**: 開発工数 26時間 ### 成功基準 - WCAG 2.1 AA完全準拠 - 60fps アニメーション性能 - TypeScript 100%型安全実装 - デザイントークン完全統合 - 自動テストカバレッジ 90%以上",
           "startLine": 3
         },
         {
@@ -3533,6 +3678,7 @@
             "ie11"
           ],
           "snippet": "### 1.1 目的\nデジタル庁デザインシステムに準拠したアコーディオンコンポーネントをWeb Components技術で実装し、再利用性・保守性・アクセシビリティを向上させる。\n\n### 1.2 スコープ\n**対象範囲**:\n- dgov-accordion（親コンテナ）コンポーネント\n- dgov-accordion-item（個別アイテム）コンポーネント\n- デザイントークン統合\n- アクセシビリティ完全対応\n- レスポンシブデザイン実装\n- パフォーマンス最適化\n- 自動テストスイート\n- APIドキュメンテーション\n\n**対象外**:\n- レガシーブラウザ（IE11）対応\n- SSR/SSG対応\n- 既存実装との完全互換性\n\n### 1.3 非機能要件\n\n| 項目 | 要件 | 測定方法 |\n|------|------|----------|\n| パフォーマンス | FCP < 1.8s, FID < 100ms, CLS < 0.1 | Lighthouse CI |\n| アクセシビリティ | WCAG 2.1 AA準拠 | axe-core |\n| 国際化 | RTL対",
+          "body": "### 1.1 目的 デジタル庁デザインシステムに準拠したアコーディオンコンポーネントをWeb Components技術で実装し、再利用性・保守性・アクセシビリティを向上させる。 ### 1.2 スコープ **対象範囲**: - dgov-accordion（親コンテナ）コンポーネント - dgov-accordion-item（個別アイテム）コンポーネント - デザイントークン統合 - アクセシビリティ完全対応 - レスポンシブデザイン実装 - パフォーマンス最適化 - 自動テストスイート - APIドキュメンテーション **対象外**: - レガシーブラウザ（IE11）対応 - SSR/SSG対応 - 既存実装との完全互換性 ### 1.3 非機能要件 | 項目 | 要件 | 測定方法 | |------|------|----------| | パフォーマンス | FCP < 1.8s, FID < 100ms, CLS < 0.1 | Lighthouse CI | | アクセシビリティ | WCAG 2.1 AA準拠 | axe-core | | 国際化 | RTL対応、多言",
           "startLine": 17
         },
         {
@@ -3560,6 +3706,7 @@
             "t-002"
           ],
           "snippet": "### Phase 1: Foundation（基盤構築）\n**期間**: Day 1（4.5時間）  \n**目的**: プロジェクト基盤とデザインシステム統合  \n\n#### タスク一覧\n| ID | タスク | 工数 | 担当 | 完了条件 |\n|----|--------|------|------|----------|\n| T-001 | プロジェクト構造準備とTypeScript設定 | 1h | Frontend | tsc --noEmit成功 |\n| T-002 | 基本WebComponentクラス実装 | 2h | Frontend | customElements登録成功 |\n| T-003 | デザイントークンCSS変数定義 | 1.5h | Frontend | コントラスト検証合格 |\n\n#### 成果物\n- src/accordion/ディレクトリ構造\n- TypeScript設定ファイル\n- WebComponentベースクラス\n- デザイントークン定義ファイル\n\n#### 受け入れ基準\n- [ ] TypeScript strict modeでエラー",
+          "body": "### Phase 1: Foundation（基盤構築） **期間**: Day 1（4.5時間） **目的**: プロジェクト基盤とデザインシステム統合 #### タスク一覧 | ID | タスク | 工数 | 担当 | 完了条件 | |----|--------|------|------|----------| | T-001 | プロジェクト構造準備とTypeScript設定 | 1h | Frontend | tsc --noEmit成功 | | T-002 | 基本WebComponentクラス実装 | 2h | Frontend | customElements登録成功 | | T-003 | デザイントークンCSS変数定義 | 1.5h | Frontend | コントラスト検証合格 | #### 成果物 - src/accordion/ディレクトリ構造 - TypeScript設定ファイル - WebComponentベースクラス - デザイントークン定義ファイル #### 受け入れ基準 - [ ] TypeScript strict modeでエラーなし - [ ",
           "startLine": 48
         },
         {
@@ -3587,6 +3734,7 @@
             "前提条件"
           ],
           "snippet": "### 技術的依存関係\n```mermaid\ngraph TD\n    A[web-components.ts] --> B[TypeScript 5.0+]\n    A --> C[Shadow DOM API]\n    A --> D[Custom Elements v1]\n    E[Testing] --> F[Vitest]\n    E --> G[Playwright]\n    E --> H[axe-core]\n    I[Build] --> J[TypeScript Compiler]\n    I --> K[CSS Bundler]\n```\n\n### 前提条件\n1. **開発環境**\n   - Node.js 18.0+\n   - TypeScript 5.0+\n   - 最新版Chrome/Firefox/Safari\n\n2. **ライブラリ**\n   - web-components.tsライブラリ利用可能\n   - デザイントークン定義ファイル提供\n\n3. **アクセス権限**\n   - GitHubリポジトリへの書き込み権限\n   - npm レジストリへの",
+          "body": "### 技術的依存関係 ### 前提条件 1. **開発環境** - Node.js 18.0+ - TypeScript 5.0+ - 最新版Chrome/Firefox/Safari 2. **ライブラリ** - web-components.tsライブラリ利用可能 - デザイントークン定義ファイル提供 3. **アクセス権限** - GitHubリポジトリへの書き込み権限 - npm レジストリへの公開権限 - デモサイトホスティング環境",
           "startLine": 250
         },
         {
@@ -3614,6 +3762,7 @@
             "代替実装"
           ],
           "snippet": "### リスクマトリクス\n\n| リスク | 影響度 | 発生確率 | 対策 | オーナー |\n|--------|--------|----------|------|----------|\n| アクセシビリティ要件未達 | 高 | 中 | 早期テスト、専門家レビュー | QA |\n| パフォーマンス目標未達 | 中 | 低 | 継続的計測、最適化 | Frontend |\n| Shadow DOM互換性問題 | 中 | 低 | Polyfill準備、代替実装 | Frontend |\n| スケジュール遅延 | 中 | 中 | バッファ時間確保、優先順位付け | PM |\n| デザイントークン変更 | 低 | 中 | 変更通知プロセス、自動同期 | Design |\n\n### ロールバック計画\n\n#### Phase 1-2 ロールバック\n```bash\n# 完全削除による初期状態復帰\ngit revert --no-commit HEAD~n\nrm -rf src/accordion/\ngit commit -m \"rollback: Phase 1-2 implementation",
+          "body": "### リスクマトリクス | リスク | 影響度 | 発生確率 | 対策 | オーナー | |--------|--------|----------|------|----------| | アクセシビリティ要件未達 | 高 | 中 | 早期テスト、専門家レビュー | QA | | パフォーマンス目標未達 | 中 | 低 | 継続的計測、最適化 | Frontend | | Shadow DOM互換性問題 | 中 | 低 | Polyfill準備、代替実装 | Frontend | | スケジュール遅延 | 中 | 中 | バッファ時間確保、優先順位付け | PM | | デザイントークン変更 | 低 | 中 | 変更通知プロセス、自動同期 | Design | ### ロールバック計画 #### Phase 1-2 ロールバック #### Phase 3-4 ロールバック #### Phase 5 ロールバック",
           "startLine": 280
         },
         {
@@ -3641,6 +3790,7 @@
             "アニメーションfps"
           ],
           "snippet": "### 各フェーズの品質基準\n\n| フェーズ | メトリクス | 基準値 | 測定方法 |\n|----------|------------|--------|----------|\n| Phase 1 | TypeScriptエラー | 0 | tsc --noEmit |\n| Phase 2 | Shadow DOMレンダリング | 100%成功 | 統合テスト |\n| Phase 3 | WCAG違反 | 0 | axe-core |\n| Phase 4 | アニメーションFPS | ≥60 | Performance API |\n| Phase 5 | テストカバレッジ | ≥90% | c8/nyc |\n\n### レビュープロセス\n\n1. **コードレビュー**\n   - 各タスク完了時にPull Request作成\n   - 最低1名のレビュアー承認必須\n   - CI/CDパイプライン全項目合格\n\n2. **デザインレビュー**\n   - Phase 2, 4完了時に実施\n   - デザイナー承認必須\n   - ビジュアル回帰テスト合格\n\n3. **アクセシビリティレビュ",
+          "body": "### 各フェーズの品質基準 | フェーズ | メトリクス | 基準値 | 測定方法 | |----------|------------|--------|----------| | Phase 1 | TypeScriptエラー | 0 | tsc --noEmit | | Phase 2 | Shadow DOMレンダリング | 100%成功 | 統合テスト | | Phase 3 | WCAG違反 | 0 | axe-core | | Phase 4 | アニメーションFPS | ≥60 | Performance API | | Phase 5 | テストカバレッジ | ≥90% | c8/nyc | ### レビュープロセス 1. **コードレビュー** - 各タスク完了時にPull Request作成 - 最低1名のレビュアー承認必須 - CI/CDパイプライン全項目合格 2. **デザインレビュー** - Phase 2, 4完了時に実施 - デザイナー承認必須 - ビジュアル回帰テスト合格 3. **アクセシビリティレビュー** - Phase 3, 5完了時に実施 ",
           "startLine": 317
         },
         {
@@ -3668,6 +3818,7 @@
             "review"
           ],
           "snippet": "### チーム構成\n\n| 役割 | 責任範囲 | 必要スキル | 工数配分 |\n|------|----------|------------|----------|\n| Frontend Engineer | 実装全般、ドキュメント | TypeScript, Web Components | 20.5h (79%) |\n| QA Engineer | テスト設計・実装 | Playwright, axe-core | 4h (15%) |\n| Design Review | デザイン確認 | デザインシステム知識 | 1.5h (6%) |\n\n### RACI マトリクス\n\n| タスク | Frontend | QA | Design | PM |\n|--------|----------|-----|--------|-----|\n| 実装 | R/A | C | I | I |\n| テスト | C | R/A | I | I |\n| ドキュメント | R/A | C | C | I |\n| レビュー | R | R | C/A | I |\n| リリース | C | C | I ",
+          "body": "### チーム構成 | 役割 | 責任範囲 | 必要スキル | 工数配分 | |------|----------|------------|----------| | Frontend Engineer | 実装全般、ドキュメント | TypeScript, Web Components | 20.5h (79%) | | QA Engineer | テスト設計・実装 | Playwright, axe-core | 4h (15%) | | Design Review | デザイン確認 | デザインシステム知識 | 1.5h (6%) | ### RACI マトリクス | タスク | Frontend | QA | Design | PM | |--------|----------|-----|--------|-----| | 実装 | R/A | C | I | I | | テスト | C | R/A | I | I | | ドキュメント | R/A | C | C | I | | レビュー | R | R | C/A | I | | リリース | C | C | I | R",
           "startLine": 346
         },
         {
@@ -3695,6 +3846,7 @@
             "リスクの更新"
           ],
           "snippet": "### KPIダッシュボード\n\n```yaml\nmetrics:\n  velocity:\n    - tasks_completed_per_day\n    - story_points_delivered\n  quality:\n    - defect_density\n    - test_coverage_percentage\n    - wcag_violations_count\n  performance:\n    - fps_average\n    - render_time_p95\n    - interaction_delay_p95\n```\n\n### 日次スタンドアップ項目\n1. 昨日の完了タスク\n2. 今日の予定タスク\n3. ブロッカーの有無\n4. リスクの更新\n\n### 週次レポート内容\n- 完了タスク一覧\n- 残タスク・進捗率\n- 品質メトリクス\n- リスク状況\n- 次週の計画",
+          "body": "### KPIダッシュボード ### 日次スタンドアップ項目 1. 昨日の完了タスク 2. 今日の予定タスク 3. ブロッカーの有無 4. リスクの更新 ### 週次レポート内容 - 完了タスク一覧 - 残タスク・進捗率 - 品質メトリクス - リスク状況 - 次週の計画",
           "startLine": 368
         },
         {
@@ -3722,6 +3874,7 @@
             "lead"
           ],
           "snippet": "### 定例会議\n\n| 会議 | 頻度 | 参加者 | 目的 |\n|------|------|--------|------|\n| デイリースタンドアップ | 毎日 15分 | 開発チーム | 進捗共有・ブロッカー解決 |\n| フェーズレビュー | フェーズ完了時 | 全ステークホルダー | 成果物確認・承認 |\n| レトロスペクティブ | 週次 30分 | 開発チーム | 改善点の識別 |\n\n### エスカレーションパス\n1. **技術的問題**: Frontend Lead → Tech Lead → CTO\n2. **デザイン問題**: Frontend → Design Lead → Head of Design\n3. **スケジュール問題**: PM → Project Director\n4. **品質問題**: QA Lead → Quality Manager",
+          "body": "### 定例会議 | 会議 | 頻度 | 参加者 | 目的 | |------|------|--------|------| | デイリースタンドアップ | 毎日 15分 | 開発チーム | 進捗共有・ブロッカー解決 | | フェーズレビュー | フェーズ完了時 | 全ステークホルダー | 成果物確認・承認 | | レトロスペクティブ | 週次 30分 | 開発チーム | 改善点の識別 | ### エスカレーションパス 1. **技術的問題**: Frontend Lead → Tech Lead → CTO 2. **デザイン問題**: Frontend → Design Lead → Head of Design 3. **スケジュール問題**: PM → Project Director 4. **品質問題**: QA Lead → Quality Manager",
           "startLine": 400
         },
         {
@@ -3749,6 +3902,7 @@
             "デザイントークン"
           ],
           "snippet": "```mermaid\ngantt\n    title アコーディオンコンポーネント開発スケジュール\n    dateFormat  YYYY-MM-DD\n    section Phase 1: Foundation\n    T-001 プロジェクト構造     :t001, 2025-01-06, 1d\n    T-002 基本WebComponent     :t002, after t001, 2d\n    T-003 デザイントークン     :t003, after t001, 1.5d\n    \n    section Phase 2: Core\n    T-004 Shadow DOM          :t004, after t002, 2d\n    T-005 アイテム実装        :t005, after t004, 2d\n    T-006 親コンテナ          :t006, after t005, 2d\n    \n    section Phase 3: Interaction\n    T-007 クリック開閉        :t007, aft",
+          "body": "",
           "startLine": 416
         },
         {
@@ -3776,6 +3930,7 @@
             "本番環境デプロイ完了"
           ],
           "snippet": "### 技術的成功基準\n- [ ] 全15タスクの完了\n- [ ] TypeScript 100%型安全\n- [ ] Shadow DOM完全カプセル化\n- [ ] デザイントークン100%使用\n\n### 品質成功基準\n- [ ] WCAG 2.2 AA完全準拠\n- [ ] テストカバレッジ90%以上\n- [ ] 0クリティカルバグ\n- [ ] パフォーマンス目標達成\n\n### プロジェクト成功基準\n- [ ] 予定期間内完了\n- [ ] 予算内完了\n- [ ] ステークホルダー承認獲得\n- [ ] 本番環境デプロイ完了",
+          "body": "### 技術的成功基準 - [ ] 全15タスクの完了 - [ ] TypeScript 100%型安全 - [ ] Shadow DOM完全カプセル化 - [ ] デザイントークン100%使用 ### 品質成功基準 - [ ] WCAG 2.2 AA完全準拠 - [ ] テストカバレッジ90%以上 - [ ] 0クリティカルバグ - [ ] パフォーマンス目標達成 ### プロジェクト成功基準 - [ ] 予定期間内完了 - [ ] 予算内完了 - [ ] ステークホルダー承認獲得 - [ ] 本番環境デプロイ完了",
           "startLine": 448
         },
         {
@@ -3803,6 +3958,7 @@
             "actions"
           ],
           "snippet": "### A. 参照ドキュメント\n- [設計書](./design-doc-accordion-component.md)\n- [タスク分解書](./tasks/accordion-component-tasks.md)\n- [デジタル庁デザインシステム](https://design.digital.go.jp/)\n- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)\n\n### B. ツール・環境\n- **開発**: VS Code, TypeScript, web-components.ts\n- **テスト**: Vitest, Playwright, axe-core\n- **CI/CD**: GitHub Actions, Lighthouse CI\n- **監視**: Performance Observer API, Custom Telemetry\n\n### C. 連絡先\n- **プロジェクトマネージャー**: pm@example.com\n- **テクニカ",
+          "body": "### A. 参照ドキュメント - [設計書](./design-doc-accordion-component.md) - [タスク分解書](./tasks/accordion-component-tasks.md) - [デジタル庁デザインシステム](https://design.digital.go.jp/) - [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) ### B. ツール・環境 - **開発**: VS Code, TypeScript, web-components.ts - **テスト**: Vitest, Playwright, axe-core - **CI/CD**: GitHub Actions, Lighthouse CI - **監視**: Performance Observer API, Custom Telemetry ### C. 連絡先 - **プロジェクトマネージャー**: pm@example.com - **テクニカルリ",
           "startLine": 468
         }
       ]
@@ -3823,6 +3979,7 @@
             "---"
           ],
           "snippet": "このドキュメントは、DADSガイドライン（デジタル庁デザインシステム）に準拠したWeb Componentsのアクセシビリティ実装における重要な知見をまとめたものです。\n\n---",
+          "body": "このドキュメントは、DADSガイドライン（デジタル庁デザインシステム）に準拠したWeb Componentsのアクセシビリティ実装における重要な知見をまとめたものです。 ---",
           "startLine": 9
         },
         {
@@ -3850,6 +4007,7 @@
             "即座に読み上げを中断して通知"
           ],
           "snippet": "### 背景\nDADSガイドラインでは、**エラーテキストの読み上げにaria-liveを使わない**ことを明確に規定しています。\n\n### 理由\n> 「エラーテキストの読み上げが割り込んでくることになり、スクリーンリーダーユーザーの閲覧や操作の妨げとなります」\n> — DADS input-text accessibility\n\n### 技術的背景\n\n| 属性/ロール | 動作 | 問題点 |\n|------------|------|--------|\n| `aria-live=\"assertive\"` | 即座に読み上げを中断して通知 | ユーザーの操作を妨げる |\n| `aria-live=\"polite\"` | 現在の読み上げ後に通知 | 入力のたびに通知が発生 |\n| `role=\"alert\"` | `aria-live=\"assertive\"`と同等 | 上記と同じ |\n\n### 正しい実装\n\n```html\n<!-- NG: aria-live/role=\"alert\"を使用 -->\n<span id=\"error\" aria-live=\"polite\">エラーメッセ",
+          "body": "### 背景 DADSガイドラインでは、**エラーテキストの読み上げにaria-liveを使わない**ことを明確に規定しています。 ### 理由 > 「エラーテキストの読み上げが割り込んでくることになり、スクリーンリーダーユーザーの閲覧や操作の妨げとなります」 > — DADS input-text accessibility ### 技術的背景 | 属性/ロール | 動作 | 問題点 | |------------|------|--------| | `aria-live=\"assertive\"` | 即座に読み上げを中断して通知 | ユーザーの操作を妨げる | | `aria-live=\"polite\"` | 現在の読み上げ後に通知 | 入力のたびに通知が発生 | | `role=\"alert\"` | `aria-live=\"assertive\"`と同等 | 上記と同じ | ### 正しい実装 ### エラー通知の代替手法 1. **aria-describedby**: エラーテキストをフォームコントロールに関連付け 2. **aria-invalid**: エラー状態を明示（",
           "startLine": 15
         },
         {
@@ -3877,6 +4035,7 @@
             "support-text"
           ],
           "snippet": "### 原則\n複数の説明要素（サポートテキスト、カウンター、エラーメッセージ）を状態に応じて動的に管理します。\n\n### 実装パターン\n\n```typescript\n#updateAriaDescribedBy(): void {\n  const ids: string[] = [];\n\n  // サポートテキストがある場合\n  const supportText = this.shadowRoot?.querySelector('#support-text');\n  if (supportText?.textContent?.trim()) {\n    ids.push('support-text');\n  }\n\n  // カウンターが表示されている場合\n  if (this.hasAttribute('show-counter')) {\n    ids.push('counter');\n  }\n\n  // エラーがある場合\n  if (this.hasAttribute('error')) {\n    ids.push('error-text');\n  }\n\n  // 関連付けを設",
+          "body": "### 原則 複数の説明要素（サポートテキスト、カウンター、エラーメッセージ）を状態に応じて動的に管理します。 ### 実装パターン ### 呼び出しタイミング - `connectedCallback` で初期化時 - 関連する属性が変更された時（`support-text`, `show-counter`, `error`） - バリデーション状態が変化した時 ---",
           "startLine": 67
         },
         {
@@ -3904,6 +4063,7 @@
             "aria-disabled"
           ],
           "snippet": "### 必須要件\n\n| 要件 | 実装方法 |\n|------|----------|\n| ラベル関連付け | `<label for=\"id\">` と `<input id=\"id\">` |\n| エラー状態 | `aria-invalid=\"true/false\"` |\n| 説明テキスト | `aria-describedby` |\n| 必須表示 | `aria-required=\"true\"` + 視覚的表示 |\n| 無効状態 | `aria-disabled=\"true\"` + `disabled` 属性 |\n\n### NG パターン\n\n```html\n<!-- NG: maxlength属性（文字変換時にデータロス） -->\n<textarea maxlength=\"100\"></textarea>\n\n<!-- NG: disabledでキーボードアクセス不可 -->\n<button disabled>送信</button>\n\n<!-- NG: placeholderをラベル代わりに -->\n<input placeholder=\"お名前\">\n```\n\n### OK パターン\n",
+          "body": "### 必須要件 | 要件 | 実装方法 | |------|----------| | ラベル関連付け | `<label for=\"id\">` と `<input id=\"id\">` | | エラー状態 | `aria-invalid=\"true/false\"` | | 説明テキスト | `aria-describedby` | | 必須表示 | `aria-required=\"true\"` + 視覚的表示 | | 無効状態 | `aria-disabled=\"true\"` + `disabled` 属性 | ### NG パターン ### OK パターン ---",
           "startLine": 111
         },
         {
@@ -3931,6 +4091,7 @@
             "void"
           ],
           "snippet": "### DADSガイドライン\n\n- カウンターは常時表示（動的通知ではなく静的表示）\n- `aria-describedby` でフォームコントロールに関連付け\n- 超過時は視覚的にエラー状態を表示\n\n### 実装例\n\n```typescript\n// テンプレート（aria-live なし）\ntemplate: html`\n  <textarea part=\"textarea\" id=\"textarea\"></textarea>\n  <span part=\"counter\" id=\"counter\"></span>\n`\n\n// カウンター更新\n#updateCounter(): void {\n  const currentLength = this.#textarea.value.length;\n  const maxLength = this.getAttribute('maxlength');\n\n  if (maxLength) {\n    this.#counter.textContent = `${currentLength}/${maxLength}`;\n\n    // 超",
+          "body": "### DADSガイドライン - カウンターは常時表示（動的通知ではなく静的表示） - `aria-describedby` でフォームコントロールに関連付け - 超過時は視覚的にエラー状態を表示 ### 実装例 ---",
           "startLine": 154
         },
         {
@@ -3958,6 +4119,7 @@
             "---"
           ],
           "snippet": "### DADS推奨文言\n\n| エラー種別 | 推奨メッセージ |\n|-----------|---------------|\n| 必須未入力 | この項目は入力が必須です |\n| 文字数超過 | 入力できる文字数を超えています |\n| 形式不正 | 正しい形式で入力してください |\n\n### 実装例\n\n```typescript\nconst ERROR_MESSAGES = {\n  required: 'この項目は入力が必須です',\n  overflow: '入力できる文字数を超えています',\n  pattern: '正しい形式で入力してください',\n} as const;\n```\n\n---",
+          "body": "### DADS推奨文言 | エラー種別 | 推奨メッセージ | |-----------|---------------| | 必須未入力 | この項目は入力が必須です | | 文字数超過 | 入力できる文字数を超えています | | 形式不正 | 正しい形式で入力してください | ### 実装例 ---",
           "startLine": 199
         },
         {
@@ -3985,6 +4147,7 @@
             "バリデーションで制御"
           ],
           "snippet": "### コンポーネント実装時\n\n- [ ] `aria-live` / `role=\"alert\"` を**使わない**\n- [ ] エラーテキストを `aria-describedby` で関連付け\n- [ ] `aria-invalid=\"true/false\"` を適切に設定\n- [ ] ラベルとフォームコントロールを `for/id` で関連付け\n- [ ] サポートテキストを `aria-describedby` で関連付け\n- [ ] カウンターを `aria-describedby` で関連付け\n- [ ] `maxlength` 属性は使わない（バリデーションで制御）\n- [ ] エラーメッセージはDADS推奨文言を使用\n\n### テスト時\n\n- [ ] スクリーンリーダーでフォーカス時にラベルが読み上げられる\n- [ ] スクリーンリーダーでサポートテキストが読み上げられる\n- [ ] エラー時に `aria-invalid=\"true\"` が設定される\n- [ ] エラー時にエラーメッセージが `aria-describedby` に含まれる\n- [ ] **割り込",
+          "body": "### コンポーネント実装時 - [ ] `aria-live` / `role=\"alert\"` を**使わない** - [ ] エラーテキストを `aria-describedby` で関連付け - [ ] `aria-invalid=\"true/false\"` を適切に設定 - [ ] ラベルとフォームコントロールを `for/id` で関連付け - [ ] サポートテキストを `aria-describedby` で関連付け - [ ] カウンターを `aria-describedby` で関連付け - [ ] `maxlength` 属性は使わない（バリデーションで制御） - [ ] エラーメッセージはDADS推奨文言を使用 ### テスト時 - [ ] スクリーンリーダーでフォーカス時にラベルが読み上げられる - [ ] スクリーンリーダーでサポートテキストが読み上げられる - [ ] エラー時に `aria-invalid=\"true\"` が設定される - [ ] エラー時にエラーメッセージが `aria-describedby` に含まれる - [ ] **割り込み読み",
           "startLine": 221
         },
         {
@@ -4012,6 +4175,7 @@
             "labels"
           ],
           "snippet": "### DADS（デジタル庁デザインシステム）\n\n- [Input Text Accessibility](https://design.digital.go.jp/dads/components/input-text/accessibility/)\n  - aria-liveを使わない理由\n  - エラーテキストの実装方法\n  - フォーム要素のアクセシビリティ要件\n\n- [Textarea Component](https://design.digital.go.jp/dads/components/textarea/)\n  - 文字数制限がある場合の実装\n  - エラーメッセージの文言\n\n### WCAG 2.2\n\n- [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)\n- [3.3.1 Error Identification](https://www.w3.org/WAI/WCAG22/Understanding/erro",
+          "body": "### DADS（デジタル庁デザインシステム） - [Input Text Accessibility](https://design.digital.go.jp/dads/components/input-text/accessibility/) - aria-liveを使わない理由 - エラーテキストの実装方法 - フォーム要素のアクセシビリティ要件 - [Textarea Component](https://design.digital.go.jp/dads/components/textarea/) - 文字数制限がある場合の実装 - エラーメッセージの文言 ### WCAG 2.2 - [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) - [3.3.1 Error Identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identificati",
           "startLine": 244
         },
         {
@@ -4039,6 +4203,7 @@
             "maxlength属性の使用"
           ],
           "snippet": "### Case 1: カウンターにaria-live\n\n```diff\n- <span id=\"counter\" aria-live=\"polite\">0/100</span>\n+ <span id=\"counter\">0/100</span>\n```\n\n**理由**: 入力のたびに読み上げが発生し、ユーザーの操作を妨げる\n\n### Case 2: エラーにrole=\"alert\"\n\n```diff\n- <div id=\"error\" role=\"alert\">エラーメッセージ</div>\n+ <div id=\"error\">エラーメッセージ</div>\n```\n\n**理由**: エラー表示時に読み上げが割り込み、操作を妨げる\n\n### Case 3: maxlength属性の使用\n\n```diff\n- <textarea maxlength=\"100\"></textarea>\n+ <textarea></textarea>\n+ <!-- JavaScript でバリデーション制御 -->\n```\n\n**理由**: IME入力時に文字変換でデータが失われる可能性\n\n### Case ",
+          "body": "### Case 1: カウンターにaria-live **理由**: 入力のたびに読み上げが発生し、ユーザーの操作を妨げる ### Case 2: エラーにrole=\"alert\" **理由**: エラー表示時に読み上げが割り込み、操作を妨げる ### Case 3: maxlength属性の使用 **理由**: IME入力時に文字変換でデータが失われる可能性 ### Case 4: エラーメッセージの文言 **理由**: DADS公式文言に準拠 ---",
           "startLine": 266
         },
         {
@@ -4066,10 +4231,217 @@
             "span"
           ],
           "snippet": "### 完全なフォーム要素の実装\n\n```typescript\nclass AccessibleTextarea extends FormComponent {\n  static definition = {\n    template: html`\n      <div part=\"container\">\n        <label part=\"label\" for=\"textarea\">\n          <slot name=\"label\"></slot>\n          <span part=\"label-fallback\"></span>\n        </label>\n\n        <div part=\"support-text\" id=\"support-text\">\n          <slot name=\"support-text\"></slot>\n          <span id=\"support-fallback\"></span>\n        </div>\n\n        <textarea\n          part=\"textarea\"",
+          "body": "### 完全なフォーム要素の実装 --- *このドキュメントは継続的に更新されます*",
           "startLine": 307
         }
       ]
     },
+    {
+      "id": "docs/plugin-contract-v1.md",
+      "title": "Plugin Contract v1",
+      "topic": "all",
+      "sections": [
+        {
+          "heading": "概要",
+          "keywords": [
+            "プラグインは",
+            "wcf-mcp",
+            "サーバーにカスタムツールとデータソース差し替えを追加する仕組みです"
+          ],
+          "snippet": "プラグインは wcf-mcp サーバーにカスタムツールとデータソース差し替えを追加する仕組みです。",
+          "body": "プラグインは wcf-mcp サーバーにカスタムツールとデータソース差し替えを追加する仕組みです。",
+          "startLine": 5
+        },
+        {
+          "heading": "Plugin オブジェクト",
+          "keywords": [
+            "plugin",
+            "オブジェクト",
+            "typescript",
+            "プラグイン定義",
+            "interface",
+            "wcfmcpplugin",
+            "プラグイン名",
+            "組み込みツール名と重複不可",
+            "name",
+            "string",
+            "プラグインバージョン",
+            "semver",
+            "version",
+            "カスタムツール定義の配列",
+            "tools",
+            "wcfmcpplugintool",
+            "データソース差し替え定義の配列",
+            "datasources",
+            "wcfmcpdatasourceconfig"
+          ],
+          "snippet": "```typescript\n/** プラグイン定義 */\ninterface WcfMcpPlugin {\n  /** プラグイン名（必須。組み込みツール名と重複不可） */\n  name: string;\n  /** プラグインバージョン（必須。semver 推奨） */\n  version: string;\n  /** カスタムツール定義の配列 */\n  tools?: WcfMcpPluginTool[];\n  /** データソース差し替え定義の配列 */\n  dataSources?: WcfMcpDataSourceConfig[];\n}\n```",
+          "body": "",
+          "startLine": 9
+        },
+        {
+          "heading": "Tool オブジェクト",
+          "keywords": [
+            "tool",
+            "オブジェクト",
+            "typescript",
+            "カスタムツール定義",
+            "interface",
+            "wcfmcpplugintool",
+            "ツール名",
+            "組み込みツール名と重複不可",
+            "name",
+            "string",
+            "ツールの説明",
+            "description",
+            "入力スキーマ",
+            "json",
+            "schema",
+            "inputschema",
+            "record",
+            "unknown",
+            "動的ハンドラ関数",
+            "両方指定時は"
+          ],
+          "snippet": "```typescript\n/** カスタムツール定義 */\ninterface WcfMcpPluginTool {\n  /** ツール名（必須。組み込みツール名と重複不可） */\n  name: string;\n  /** ツールの説明 */\n  description?: string;\n  /** 入力スキーマ（JSON Schema 形式） */\n  inputSchema?: Record<string, unknown>;\n  /** 動的ハンドラ関数。両方指定時は handler が優先される */\n  handler?: (args: Record<string, unknown>, context: WcfMcpHandlerContext) => unknown | Promise<unknown>;\n  /** 静的レスポンスペイロード。handler がある場合は無視される */\n  staticPayload?: unknown;\n}\n```\n\n### handler vs staticPayload\n\n- `handler`: リクエストごとに実行される関",
+          "body": "### handler vs staticPayload - `handler`: リクエストごとに実行される関数。動的な結果を返す場合に使用 - `staticPayload`: 固定のレスポンスを返す場合に使用 - **両方指定した場合**: `handler` が優先され、`staticPayload` は無視される - **どちらも未指定**: バリデーションエラー（少なくとも一方が必須）",
+          "startLine": 25
+        },
+        {
+          "heading": "Handler Context",
+          "keywords": [
+            "handler",
+            "context",
+            "typescript",
+            "関数に渡されるコンテキスト",
+            "interface",
+            "wcfmcphandlercontext",
+            "プラグイン自身の情報",
+            "plugin",
+            "name",
+            "string",
+            "version",
+            "共通ヘルパー",
+            "helpers",
+            "json",
+            "データファイルを読み込む",
+            "loadjsondata",
+            "filename",
+            "promise",
+            "unknown",
+            "ツール応答を"
+          ],
+          "snippet": "```typescript\n/** handler 関数に渡されるコンテキスト */\ninterface WcfMcpHandlerContext {\n  /** プラグイン自身の情報 */\n  plugin: { name: string; version: string };\n  /** 共通ヘルパー */\n  helpers: {\n    /** JSON データファイルを読み込む */\n    loadJsonData: (fileName: string) => Promise<unknown>;\n    /** ツール応答を MCP 形式の JSON テキストに変換する */\n    buildJsonToolResponse: (payload: unknown) => { content: Array<{ type: string; text: string }> };\n    /** prefix を正規化する（デフォルト: \"dads\"） */\n    normalizePrefix: (prefix?: string) => string;\n    /** タグ名",
+          "body": "",
+          "startLine": 50
+        },
+        {
+          "heading": "DataSource オブジェクト",
+          "keywords": [
+            "datasource",
+            "オブジェクト",
+            "typescript",
+            "データソース差し替え定義",
+            "interface",
+            "wcfmcpdatasourceconfig",
+            "差し替え対象のファイル名",
+            "filename",
+            "string",
+            "差し替えファイルのパス",
+            "path",
+            "差し替え可能なファイル",
+            "----------",
+            "------",
+            "custom-elements",
+            "json",
+            "custom",
+            "elements",
+            "manifest",
+            "install-registry"
+          ],
+          "snippet": "```typescript\n/** データソース差し替え定義 */\ninterface WcfMcpDataSourceConfig {\n  /** 差し替え対象のファイル名 */\n  fileName: string;\n  /** 差し替えファイルのパス */\n  path: string;\n}\n```\n\n### 差し替え可能なファイル\n\n| fileName | 説明 |\n|----------|------|\n| `custom-elements.json` | Custom Elements Manifest |\n| `install-registry.json` | インストールレジストリ |\n| `pattern-registry.json` | パターンレジストリ |\n| `design-tokens.json` | デザイントークン |\n| `guidelines-index.json` | ガイドラインインデックス |",
+          "body": "### 差し替え可能なファイル | fileName | 説明 | |----------|------| | `custom-elements.json` | Custom Elements Manifest | | `install-registry.json` | インストールレジストリ | | `pattern-registry.json` | パターンレジストリ | | `design-tokens.json` | デザイントークン | | `guidelines-index.json` | ガイドラインインデックス |",
+          "startLine": 73
+        },
+        {
+          "heading": "バリデーションルール",
+          "keywords": [
+            "バリデーションルール",
+            "name",
+            "version",
+            "は必須",
+            "ツール名は組み込みツール名と重複不可",
+            "複数プラグイン間でツール名の重複不可",
+            "datasources",
+            "のファイル名は上記5種のみ",
+            "複数プラグイン間で同一ファイルの重複差し替え不可"
+          ],
+          "snippet": "1. `name` と `version` は必須\n2. ツール名は組み込みツール名と重複不可\n3. 複数プラグイン間でツール名の重複不可\n4. `dataSources` のファイル名は上記5種のみ\n5. 複数プラグイン間で同一ファイルの重複差し替え不可",
+          "body": "1. `name` と `version` は必須 2. ツール名は組み込みツール名と重複不可 3. 複数プラグイン間でツール名の重複不可 4. `dataSources` のファイル名は上記5種のみ 5. 複数プラグイン間で同一ファイルの重複差し替え不可",
+          "startLine": 95
+        },
+        {
+          "heading": "互換性ポリシー",
+          "keywords": [
+            "互換性ポリシー",
+            "契約バージョン",
+            "plugin_contract_version",
+            "定数で公開",
+            "破壊的変更なし",
+            "新フィールドは追加のみ",
+            "既存フィールドの削除・型変更なし",
+            "破壊的変更を含む可能性あり",
+            "メジャーバージョンアップで通知"
+          ],
+          "snippet": "- **契約バージョン**: `1.0.0`（`PLUGIN_CONTRACT_VERSION` 定数で公開）\n- **v1.x 内**: 破壊的変更なし。新フィールドは追加のみ（既存フィールドの削除・型変更なし）\n- **v2.0**: 破壊的変更を含む可能性あり。メジャーバージョンアップで通知",
+          "body": "- **契約バージョン**: `1.0.0`（`PLUGIN_CONTRACT_VERSION` 定数で公開） - **v1.x 内**: 破壊的変更なし。新フィールドは追加のみ（既存フィールドの削除・型変更なし） - **v2.0**: 破壊的変更を含む可能性あり。メジャーバージョンアップで通知",
+          "startLine": 103
+        },
+        {
+          "heading": "@experimental 機能",
+          "keywords": [
+            "experimental",
+            "以下は将来追加される可能性がありますが",
+            "まだ安定していません",
+            "ライフサイクルフック",
+            "oninit",
+            "ondestroy",
+            "プラグイン間依存の宣言"
+          ],
+          "snippet": "以下は将来追加される可能性がありますが、まだ安定していません:\n\n- ライフサイクルフック（`onInit`, `onDestroy`）\n- プラグイン間依存の宣言",
+          "body": "以下は将来追加される可能性がありますが、まだ安定していません: - ライフサイクルフック（`onInit`, `onDestroy`） - プラグイン間依存の宣言",
+          "startLine": 109
+        },
+        {
+          "heading": "設定ファイルからの利用",
+          "keywords": [
+            "設定ファイルからの利用",
+            "json",
+            "plugins",
+            "module",
+            "my-plugin",
+            "mjs",
+            "name",
+            "static-tools",
+            "version",
+            "statictools",
+            "my_tool",
+            "payload",
+            "true",
+            "プラグイン",
+            "esm",
+            "ファイルが",
+            "default",
+            "export",
+            "でプラグインオブジェクトを返す",
+            "javascript"
+          ],
+          "snippet": "```json\n{\n  \"plugins\": [\n    {\n      \"module\": \"./plugins/my-plugin.mjs\"\n    },\n    {\n      \"name\": \"static-tools\",\n      \"version\": \"1.0.0\",\n      \"staticTools\": [\n        { \"name\": \"my_tool\", \"payload\": { \"ok\": true } }\n      ]\n    }\n  ]\n}\n```\n\n### module プラグイン\n\nESM ファイルが `default export` でプラグインオブジェクトを返す:\n\n```javascript\n// plugins/my-plugin.mjs\nexport default {\n  name: 'my-plugin',\n  version: '1.0.0',\n  tools: [\n    {\n      name: 'my_custom_tool',\n      description: 'Custom tool from plugin',\n",
+          "body": "### module プラグイン ESM ファイルが `default export` でプラグインオブジェクトを返す:",
+          "startLine": 116
+        }
+      ]
+    },
     {
       "id": "docs/rules/content-typeset-rules.md",
       "title": "Content Typeset Rules",
@@ -4085,6 +4457,7 @@
             "テンプレート生成時に同じ見た目品質を再現できるようにする"
           ],
           "snippet": "- ページごとの手作業マージン調整を減らす\n- Web Components とプリミティブ要素を混在させても一定の縦リズムを保つ\n- テンプレート生成時に同じ見た目品質を再現できるようにする",
+          "body": "- ページごとの手作業マージン調整を減らす - Web Components とプリミティブ要素を混在させても一定の縦リズムを保つ - テンプレート生成時に同じ見た目品質を再現できるようにする",
           "startLine": 5
         },
         {
@@ -4111,6 +4484,7 @@
             "main"
           ],
           "snippet": "- コンテナに `data-dads-typeset` を付与する\n- 密度を詰める場合だけ `data-dads-density=\"compact\"` を付与する\n- `compact` は固定値 (`gap: 1em`, `dads-heading[margin=\"top\"]`: `1em`) を使う\n- 実際の見た目の圧縮率はフォント/line-height により変動する\n\n```html\n<main data-dads-typeset>\n  ...\n</main>\n\n<main data-dads-typeset data-dads-density=\"compact\">\n  ...\n</main>\n```",
+          "body": "- コンテナに `data-dads-typeset` を付与する - 密度を詰める場合だけ `data-dads-density=\"compact\"` を付与する - `compact` は固定値 (`gap: 1em`, `dads-heading[margin=\"top\"]`: `1em`) を使う - 実際の見た目の圧縮率はフォント/line-height により変動する",
           "startLine": 11
         },
         {
@@ -4132,6 +4506,7 @@
             "は使わない"
           ],
           "snippet": "- レイヤー宣言: `@layer reset, tokens, base, layout, components, contents, page;`\n- 組版ルールは `@layer contents` に限定する\n- `!important` は使わない",
+          "body": "- レイヤー宣言: `@layer reset, tokens, base, layout, components, contents, page;` - 組版ルールは `@layer contents` に限定する - `!important` は使わない",
           "startLine": 28
         },
         {
@@ -4159,6 +4534,7 @@
             "追加分"
           ],
           "snippet": "- 基本ギャップ: `--dads-typeset-gap-normal: 1lh;`\n- compact: `--dads-typeset-gap-compact: 1em;`\n- 実適用: `row-gap: var(--dads-typeset-gap-current);`\n- `dads-heading[margin=\"top\"]` の上余白（default）: `--dads-typeset-heading-margin-top-normal: 1lh;`\n- `dads-heading[margin=\"top\"]` の上余白（compact）: `--dads-typeset-heading-margin-top-compact: 1em;`\n- 見出し前余白（追加分）: `--dads-typeset-heading-before-extra-normal: 0.5lh;`\n- compact時見出し前余白（追加分）: `--dads-typeset-heading-before-extra-compact: calc(var(--dads-typeset-heading",
+          "body": "- 基本ギャップ: `--dads-typeset-gap-normal: 1lh;` - compact: `--dads-typeset-gap-compact: 1em;` - 実適用: `row-gap: var(--dads-typeset-gap-current);` - `dads-heading[margin=\"top\"]` の上余白（default）: `--dads-typeset-heading-margin-top-normal: 1lh;` - `dads-heading[margin=\"top\"]` の上余白（compact）: `--dads-typeset-heading-margin-top-compact: 1em;` - 見出し前余白（追加分）: `--dads-typeset-heading-before-extra-normal: 0.5lh;` - compact時見出し前余白（追加分）: `--dads-typeset-heading-before-extra-compact: calc(var(--dads-typeset-heading",
           "startLine": 34
         },
         {
@@ -4186,6 +4562,7 @@
             "data-dads-typeset"
           ],
           "snippet": "- `dads-heading` の大きい余白は `margin=\"top\"` を第一選択にする\n- 組版CSSは `dads-heading` の大余白を上書き/再定義しない\n- 組版側で加算するのは native 見出し (`h1`〜`h6`) のフォールバックのみ\n- `dads-heading[margin=\"top\"]` の最終値は `calc(base * scale)` で計算される\n\n```css\n[data-dads-typeset] {\n  --dads-heading-margin-block-start-base: 1lh;\n  --dads-heading-margin-scale: 1;\n}\n\n[data-dads-typeset][data-dads-density=\"compact\"] {\n  --dads-heading-margin-block-start-base: 1em;\n}\n```",
+          "body": "- `dads-heading` の大きい余白は `margin=\"top\"` を第一選択にする - 組版CSSは `dads-heading` の大余白を上書き/再定義しない - 組版側で加算するのは native 見出し (`h1`〜`h6`) のフォールバックのみ - `dads-heading[margin=\"top\"]` の最終値は `calc(base * scale)` で計算される",
           "startLine": 58
         },
         {
@@ -4203,6 +4580,7 @@
             "サンプル追加時も同じ契約を守る"
           ],
           "snippet": "- `wcf page create` 生成ページは組版CSSを標準同梱する\n- パターンHTMLのルートには原則 `data-dads-typeset` を付与する\n- 新規テンプレート/サンプル追加時も同じ契約を守る",
+          "body": "- `wcf page create` 生成ページは組版CSSを標準同梱する - パターンHTMLのルートには原則 `data-dads-typeset` を付与する - 新規テンプレート/サンプル追加時も同じ契約を守る",
           "startLine": 76
         }
       ]
@@ -4229,6 +4607,7 @@
             "差し替え"
           ],
           "snippet": "### componentId\n- 原則：`packages/components/<dir>` の `<dir>` を componentId とする\n  - 例：`packages/components/button/` → `button`\n\n### canonical tagName\n- canonical は `dads-*` とする（prefix カスタマイズは後段で変換/差し替え）",
+          "body": "### componentId - 原則：`packages/components/<dir>` の `<dir>` を componentId とする - 例：`packages/components/button/` → `button` ### canonical tagName - canonical は `dads-*` とする（prefix カスタマイズは後段で変換/差し替え）",
           "startLine": 5
         },
         {
@@ -4256,6 +4635,7 @@
             "registry"
           ],
           "snippet": "この repo における install recipe の単一の真実は **CEM（`custom-elements.json`）**です。\n\nvendor install / AI recipe に必要なメタデータは、CEM 生成時に各 declaration の `decl.custom.install` に注入されます。\n\n補助（軽量レジストリ）：\n- `registry/install-registry.json` を CEM から生成してコミットします（AI/CLI が高速に取得する入口）",
+          "body": "この repo における install recipe の単一の真実は **CEM（`custom-elements.json`）**です。 vendor install / AI recipe に必要なメタデータは、CEM 生成時に各 declaration の `decl.custom.install` に注入されます。 補助（軽量レジストリ）： - `registry/install-registry.json` を CEM から生成してコミットします（AI/CLI が高速に取得する入口）",
           "startLine": 14
         },
         {
@@ -4283,6 +4663,7 @@
             "define"
           ],
           "snippet": "対象：\n- `tagName` が `dads-*` の custom element declarations\n\n必須フィールド：\n- `decl.custom.componentId`（string）\n- `decl.custom.install`（object）\n  - `id`（string）: componentId\n  - `tags`（string[]）: 同一 componentId が提供する canonical tagName 群\n    - 例：`[\"dads-accordion-details\",\"dads-accordion-item-details\"]`\n  - `define`（string）: 推奨 define 関数名\n    - 例：`\"defineButton\"`\n  - `call`（string）: define 呼び出しスタイル（`\"none\" | \"registry\" | \"prefix-registry\"`）\n  - `deps`（string[]）: 依存 componentId（存在する `packages/components/<d",
+          "body": "対象： - `tagName` が `dads-*` の custom element declarations 必須フィールド： - `decl.custom.componentId`（string） - `decl.custom.install`（object） - `id`（string）: componentId - `tags`（string[]）: 同一 componentId が提供する canonical tagName 群 - 例：`[\"dads-accordion-details\",\"dads-accordion-item-details\"]` - `define`（string）: 推奨 define 関数名 - 例：`\"defineButton\"` - `call`（string）: define 呼び出しスタイル（`\"none\" | \"registry\" | \"prefix-registry\"`） - `deps`（string[]）: 依存 componentId（存在する `packages/components/<dep>` を指す） - `source",
           "startLine": 23
         },
         {
@@ -4308,6 +4689,7 @@
             "を呼び出して宣言する"
           ],
           "snippet": "新規コンポーネントは次を推奨します：\n- `packages/components/<componentId>/<componentId>-define.ts` を用意\n- `export function define*()`（`defineDefault*` 以外）を少なくとも 1 つ含める\n- 依存コンポーネントは define 内で `// dependencies` の下に `defineX(...)` を呼び出して宣言する",
+          "body": "新規コンポーネントは次を推奨します： - `packages/components/<componentId>/<componentId>-define.ts` を用意 - `export function define*()`（`defineDefault*` 以外）を少なくとも 1 つ含める - 依存コンポーネントは define 内で `// dependencies` の下に `defineX(...)` を呼び出して宣言する",
           "startLine": 42
         },
         {
@@ -4329,6 +4711,7 @@
             "componentdir"
           ],
           "snippet": "規約から外れる事情（既存互換・特殊構成等）がある場合は、`registry/overrides.json` に **理由つきで**明示します。\n\n- define 名/define 抽出の補正\n- deps の補正\n- source（componentDir）の補正",
+          "body": "規約から外れる事情（既存互換・特殊構成等）がある場合は、`registry/overrides.json` に **理由つきで**明示します。 - define 名/define 抽出の補正 - deps の補正 - source（componentDir）の補正",
           "startLine": 49
         },
         {
@@ -4356,6 +4739,7 @@
             "run"
           ],
           "snippet": "CI は次を満たさない場合に失敗します：\n- すべての `dads-*` タグに `packages/autoload/dads/<tag-suffix>.ts` が存在する\n- すべての `dads-*` タグの declaration に `decl.custom.install` が注入されている\n\n実行：\n```bash\nnpm run contracts:check\n```",
+          "body": "CI は次を満たさない場合に失敗します： - すべての `dads-*` タグに `packages/autoload/dads/<tag-suffix>.ts` が存在する - すべての `dads-*` タグの declaration に `decl.custom.install` が注入されている 実行：",
           "startLine": 57
         },
         {
@@ -4383,6 +4767,7 @@
             "skills-registry"
           ],
           "snippet": "CEM を単一の真実として運用するため、Codex / Claude Code を含む AI エージェントは PR作成・更新前に次を実行します。\n\n```bash\nnpm run skills:check\nnpm run agents:pre-pr\nnpm run agents:verify\n```\n\n- `skills:check` は `registry/skills-registry.json` と `.claude/skills/*` の整合性を検証\n- `agents:pre-pr` は CEM生成・contracts・registry・markup検証・生成物クリーンチェックを一括実行\n- `agents:verify` は `agents:pre-pr` + `npm run ci` を実行\n- `custom-elements.json` / `registry/install-registry.json` に差分がある場合、同一PRに含めるまで更新禁止",
+          "body": "CEM を単一の真実として運用するため、Codex / Claude Code を含む AI エージェントは PR作成・更新前に次を実行します。 - `skills:check` は `registry/skills-registry.json` と `.claude/skills/*` の整合性を検証 - `agents:pre-pr` は CEM生成・contracts・registry・markup検証・生成物クリーンチェックを一括実行 - `agents:verify` は `agents:pre-pr` + `npm run ci` を実行 - `custom-elements.json` / `registry/install-registry.json` に差分がある場合、同一PRに含めるまで更新禁止",
           "startLine": 68
         }
       ]
@@ -4415,6 +4800,7 @@
             "生成物"
           ],
           "snippet": "- `packages/components/language-selector/**`\n- `src/demos/showcase-navigation.ts` の language selector セクション\n- `docs/knowledge/a11y-annotations.json`\n- `custom-elements.json`（`cem:analyze` 生成物）",
+          "body": "- `packages/components/language-selector/**` - `src/demos/showcase-navigation.ts` の language selector セクション - `docs/knowledge/a11y-annotations.json` - `custom-elements.json`（`cem:analyze` 生成物）",
           "startLine": 6
         },
         {
@@ -4442,6 +4828,7 @@
             "単一選択を保証する"
           ],
           "snippet": "1. **イベント互換性を維持する**\n- `menuitemselect` は継続発火させる\n- `dads-change` の detail 形状（`value`, `selectedValue`, `selectedIndex`, `selectedItem`）を壊さない\n\n2. **選択取得APIの整合を維持する**\n- `getSelectedLanguage()` は `current` / `aria-current` の正規化結果と一致すること\n- 選択なしは `null` を返すこと\n\n3. **単一選択を保証する**\n- 複数 `current` がある場合は先頭1件のみ採用し、残りを解除する\n- `aria-current` は選択中のみ `true` を維持する\n\n4. **自動補完は「明示指定優先」にする**\n- `slot=\"label\"` がある場合は `label` 自動補完を行わない\n- `slot=\"icon\"` がある場合は opener 自動アイコンを挿入しない\n- `slot=\"start-icon\"` が明示されている項目には自動チェックアイ",
+          "body": "1. **イベント互換性を維持する** - `menuitemselect` は継続発火させる - `dads-change` の detail 形状（`value`, `selectedValue`, `selectedIndex`, `selectedItem`）を壊さない 2. **選択取得APIの整合を維持する** - `getSelectedLanguage()` は `current` / `aria-current` の正規化結果と一致すること - 選択なしは `null` を返すこと 3. **単一選択を保証する** - 複数 `current` がある場合は先頭1件のみ採用し、残りを解除する - `aria-current` は選択中のみ `true` を維持する 4. **自動補完は「明示指定優先」にする** - `slot=\"label\"` がある場合は `label` 自動補完を行わない - `slot=\"icon\"` がある場合は opener 自動アイコンを挿入しない - `slot=\"start-icon\"` が明示されている項目には自動チェックアイコンを",
           "startLine": 13
         },
         {
@@ -4469,6 +4856,7 @@
             "escape"
           ],
           "snippet": "- 初期値:\n  - `opener=text` / `label=Language`\n  - `opener=icon` / `label=LANG`\n- 選択:\n  - `current` / `aria-current` 単一正規化\n  - `dads-change` detail 検証\n  - `getSelectedLanguage()` との整合検証\n- キーボード:\n  - Arrow/Home/End/Escape の開閉・移動（継承動作）\n  - `aria-expanded` 同期\n- 補完優先順位:\n  - `slot=\"label\"` / `slot=\"icon\"` / `slot=\"start-icon\"` 明示時の自動補完抑止",
+          "body": "- 初期値: - `opener=text` / `label=Language` - `opener=icon` / `label=LANG` - 選択: - `current` / `aria-current` 単一正規化 - `dads-change` detail 検証 - `getSelectedLanguage()` との整合検証 - キーボード: - Arrow/Home/End/Escape の開閉・移動（継承動作） - `aria-expanded` 同期 - 補完優先順位: - `slot=\"label\"` / `slot=\"icon\"` / `slot=\"start-icon\"` 明示時の自動補完抑止",
           "startLine": 37
         },
         {
@@ -4496,6 +4884,7 @@
             "同一prに含めること"
           ],
           "snippet": "```bash\nnpm run test:run -- packages/components/language-selector/language-selector.test.ts\nnpm run type-check\nnpm run cem:analyze\nnpm run validate:wc\nnpm run agents:verify\n```\n\n`agents:verify` で `custom-elements.json` / `registry/install-registry.json` 差分警告が出る場合は、同一PRに含めること。",
+          "body": "`agents:verify` で `custom-elements.json` / `registry/install-registry.json` 差分警告が出る場合は、同一PRに含めること。",
           "startLine": 52
         }
       ]
@@ -4529,6 +4918,7 @@
             "---"
           ],
           "snippet": "新規コンポーネントは以下を満たすことでマージ可能となります：\n\n1. **CEM（Custom Elements Manifest）** に正しく登録される\n2. **JSDoc** でメタデータが完備している\n3. **Demos** が viewer.html / src/demos.ts に追加されている\n4. **テスト** が存在し、CI がパスする\n5. **検証コマンド** が全てパスする\n\n---",
+          "body": "新規コンポーネントは以下を満たすことでマージ可能となります： 1. **CEM（Custom Elements Manifest）** に正しく登録される 2. **JSDoc** でメタデータが完備している 3. **Demos** が viewer.html / src/demos.ts に追加されている 4. **テスト** が存在し、CI がパスする 5. **検証コマンド** が全てパスする ---",
           "startLine": 5
         },
         {
@@ -4556,6 +4946,7 @@
             "analyze"
           ],
           "snippet": "### (A) CEM (Single Source of Truth)\n\nCustom Elements Manifest (`custom-elements.json`) はこのリポジトリにおけるコンポーネントAPIの「単一の真実」です。\n\n- [ ] JSDoc で `@customElement` + `@tagname` を記載（CEM抽出保証）\n- [ ] `npm run cem:analyze` 実行後、`custom-elements.json` に差分があればコミット\n- [ ] sanity テストがパス（tagName存在、bogus event無し）\n- [ ] `custom-elements.json` の当該 `dads-*` declaration に `decl.custom.install` が注入されている（vendor install / AI recipe 用）\n\n**参照**: [Custom Elements Manifest 運用](../knowledge/custom-elements-manifest.md)\n\n### (B) J",
+          "body": "### (A) CEM (Single Source of Truth) Custom Elements Manifest (`custom-elements.json`) はこのリポジトリにおけるコンポーネントAPIの「単一の真実」です。 - [ ] JSDoc で `@customElement` + `@tagname` を記載（CEM抽出保証） - [ ] `npm run cem:analyze` 実行後、`custom-elements.json` に差分があればコミット - [ ] sanity テストがパス（tagName存在、bogus event無し） - [ ] `custom-elements.json` の当該 `dads-*` declaration に `decl.custom.install` が注入されている（vendor install / AI recipe 用） **参照**: [Custom Elements Manifest 運用](../knowledge/custom-elements-manifest.md) ### (B) JSDoc",
           "startLine": 17
         },
         {
@@ -4583,6 +4974,7 @@
             "状態変化"
           ],
           "snippet": "以下は必須ではありませんが、品質向上のため推奨します：\n\n- [ ] `@cssprop` で CSS 変数 API を記載（cssProperties 充実方針）\n- [ ] `docs/knowledge/a11y-annotations.json` に注釈（categories / callouts）を記載\n- [ ] unit test で ARIA 状態変化、キーボード操作、イベント発火を確認\n- [ ] E2E / Fidelity テストを `e2e-evidence/` に追加\n- [ ] Menu系セレクター実装時は `docs/rules/language-selector-implementation-rules.md` の互換・注釈・テスト要件を満たす\n\n---",
+          "body": "以下は必須ではありませんが、品質向上のため推奨します： - [ ] `@cssprop` で CSS 変数 API を記載（cssProperties 充実方針） - [ ] `docs/knowledge/a11y-annotations.json` に注釈（categories / callouts）を記載 - [ ] unit test で ARIA 状態変化、キーボード操作、イベント発火を確認 - [ ] E2E / Fidelity テストを `e2e-evidence/` に追加 - [ ] Menu系セレクター実装時は `docs/rules/language-selector-implementation-rules.md` の互換・注釈・テスト要件を満たす ---",
           "startLine": 101
         },
         {
@@ -4610,6 +5002,7 @@
             "applydadstokens"
           ],
           "snippet": "新規コンポーネント作成時は以下のテンプレートを使用してください：\n\n```typescript\n/**\n * @module <component-name>\n * <コンポーネントの簡潔な説明>\n * @version 1.0.0\n */\n\nimport {\n  html,\n  css,\n  BooleanAttr,\n  PropertyAttr,\n} from '../../core/web-components.js';\nimport { TypographyWebComponent } from '../../core/typography/typography-web-component.js';\nimport { applyDADSTokens } from '../../styles/design-tokens/index.js';\nimport { applySpacingTokens } from '../../styles/spacing-tokens.js';\nimport { withReset } from '../../styles/reset-css.js",
+          "body": "新規コンポーネント作成時は以下のテンプレートを使用してください： html * <dads-component-name variant=\"solid\" size=\"md\"> * コンテンツ * </dads-component-name> * ---",
           "startLine": 113
         },
         {
@@ -4620,6 +5013,7 @@
             "markdown"
           ],
           "snippet": "PRコメントや自己レビュー用：\n\n```markdown",
+          "body": "PRコメントや自己レビュー用： ```markdown",
           "startLine": 196
         },
         {
@@ -4647,6 +5041,7 @@
             "analyze"
           ],
           "snippet": "### 必須\n- [ ] `@customElement` + `@tagname dads-<name>` をJSDocに記載\n- [ ] `@attr` で公開属性を型付き記載\n- [ ] `@slot` で公開スロットを記載\n- [ ] `@csspart` で公開partを記載\n- [ ] `@fires` で公開イベントを記載\n- [ ] `npm run cem:analyze` 実行、`custom-elements.json` 更新・コミット\n- [ ] `custom-elements.json` に `decl.custom.install` が注入されている\n- [ ] `src/demos.ts` にデモ追加\n- [ ] `src/demos.ts` の説明ページに **Usage（HTML）コードブロック（`<dads-code-block>`）** を追加\n- [ ] `src/demos.ts` に **操作可能な API / Controls テーブル**を追加（`docs/knowledge/viewer-api-controls-table.md` ",
+          "body": "### 必須 - [ ] `@customElement` + `@tagname dads-<name>` をJSDocに記載 - [ ] `@attr` で公開属性を型付き記載 - [ ] `@slot` で公開スロットを記載 - [ ] `@csspart` で公開partを記載 - [ ] `@fires` で公開イベントを記載 - [ ] `npm run cem:analyze` 実行、`custom-elements.json` 更新・コミット - [ ] `custom-elements.json` に `decl.custom.install` が注入されている - [ ] `src/demos.ts` にデモ追加 - [ ] `src/demos.ts` の説明ページに **Usage（HTML）コードブロック（`<dads-code-block>`）** を追加 - [ ] `src/demos.ts` に **操作可能な API / Controls テーブル**を追加（`docs/knowledge/viewer-api-controls-table.md` ",
           "startLine": 201
         },
         {
@@ -4674,6 +5069,7 @@
             "重要度"
           ],
           "snippet": "`validate:wc` が出力する診断情報のスキーマ：\n\n| フィールド | 型 | 説明 |\n|-----------|------|------|\n| `file` | string | ファイルパス |\n| `range` | `{ start: { line, col }, end: { line, col } }` | 位置情報 |\n| `severity` | `'error' \\| 'warning'` | 重要度 |\n| `code` | `'unknownElement' \\| 'unknownAttribute' \\| 'forbiddenAttribute'` | 診断コード |\n| `message` | string | メッセージ |\n| `tagName` | string? | 対象タグ名 |\n| `attrName` | string? | 対象属性名 |\n| `hint` | string? | 修正ヒント |\n\n**range の基準**:\n- `line`: 1-based（1行目 = 1）\n- `col`: 0-based（行頭 = 0）\n",
+          "body": "`validate:wc` が出力する診断情報のスキーマ： | フィールド | 型 | 説明 | |-----------|------|------| | `file` | string | ファイルパス | | `range` | `{ start: { line, col }, end: { line, col } }` | 位置情報 | | `severity` | `'error' \\| 'warning'` | 重要度 | | `code` | `'unknownElement' \\| 'unknownAttribute' \\| 'forbiddenAttribute'` | 診断コード | | `message` | string | メッセージ | | `tagName` | string? | 対象タグ名 | | `attrName` | string? | 対象属性名 | | `hint` | string? | 修正ヒント | **range の基準**: - `line`: 1-based（1行目 = 1） - `col`: 0-based（行頭 = 0） - ",
           "startLine": 233
         },
         {
@@ -4701,6 +5097,7 @@
             "skill"
           ],
           "snippet": "- [Custom Elements Manifest 運用](../knowledge/custom-elements-manifest.md)\n- [Web Components 検証](../knowledge/wctools-validate.md)\n- [Design System MCP](../knowledge/design-system-mcp.md)\n- [コンポーネント雛形](../knowledge/component-skeleton.md)\n- [CSSコーディングルール](../../.claude/skills/css-writing-rules/SKILL.md)\n- [ヘッドレスコンポーネント設計](../../.claude/skills/headless-component-design/SKILL.md)\n\n---\n\n**最終更新**: 2026-01-25\n**バージョン**: 1.0.0",
+          "body": "- [Custom Elements Manifest 運用](../knowledge/custom-elements-manifest.md) - [Web Components 検証](../knowledge/wctools-validate.md) - [Design System MCP](../knowledge/design-system-mcp.md) - [コンポーネント雛形](../knowledge/component-skeleton.md) - [CSSコーディングルール](../../.claude/skills/css-writing-rules/SKILL.md) - [ヘッドレスコンポーネント設計](../../.claude/skills/headless-component-design/SKILL.md) --- **最終更新**: 2026-01-25 **バージョン**: 1.0.0",
           "startLine": 260
         }
       ]
@@ -4724,6 +5121,7 @@
             "必要に応じて同期"
           ],
           "snippet": "- `packages/components/tab/**`\n- `src/demos/tab.ts`\n- `docs/llms/tab.md`（必要に応じて同期）",
+          "body": "- `packages/components/tab/**` - `src/demos/tab.ts` - `docs/llms/tab.md`（必要に応じて同期）",
           "startLine": 6
         },
         {
@@ -4751,6 +5149,7 @@
             "は上端を青帯で満たす"
           ],
           "snippet": "1. 色は必ずデザイントークン変数を使う。\n- `rgb()` / `rgba()` / `#hex` の直書き禁止\n- 例: `var(--dads-tab-indicator-color)`, `var(--dads-tab-border-color)`\n\n2. selected と hover は同居させない。\n- hover セレクタは必ず `:not([aria-selected=\"true\"])` を含める\n\n3. `orientation=\"top\"` の selected は上端を青帯で満たす。\n- selected 本体は `border-top: 0`\n- `::before` で `--dads-tab-indicator-height` の青帯を上面に重ねる\n- 重ね描き時は selected 内 `indicator` を `transparent` にして二重描画を防ぐ\n\n4. `orientation=\"bottom\"` の selected も同様に下端を青帯で満たす。\n- selected 本体は `border-bottom: 0`\n- `::aft",
+          "body": "1. 色は必ずデザイントークン変数を使う。 - `rgb()` / `rgba()` / `#hex` の直書き禁止 - 例: `var(--dads-tab-indicator-color)`, `var(--dads-tab-border-color)` 2. selected と hover は同居させない。 - hover セレクタは必ず `:not([aria-selected=\"true\"])` を含める 3. `orientation=\"top\"` の selected は上端を青帯で満たす。 - selected 本体は `border-top: 0` - `::before` で `--dads-tab-indicator-height` の青帯を上面に重ねる - 重ね描き時は selected 内 `indicator` を `transparent` にして二重描画を防ぐ 4. `orientation=\"bottom\"` の selected も同様に下端を青帯で満たす。 - selected 本体は `border-bottom: 0` - `::after`",
           "startLine": 12
         },
         {
@@ -4778,6 +5177,7 @@
             "position"
           ],
           "snippet": "```css\n:host([orientation=\"top\"]) [part~=\"tab\"][aria-selected=\"true\"] {\n  border-top: 0;\n  border-right: 1px solid var(--dads-tab-border-color);\n  border-bottom: 0;\n  border-left: 1px solid var(--dads-tab-border-color);\n}\n\n:host([orientation=\"top\"]) [part~=\"tab\"][aria-selected=\"true\"]::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: -1px;\n  inline-size: calc(100% + 2px);\n  block-size: var(--dads-tab-indicator-height);\n  background: var(--dads-tab-indic",
+          "body": "",
           "startLine": 39
         },
         {
@@ -4794,6 +5194,7 @@
             "7238"
           ],
           "snippet": "- top selected: `24144:6935`\n- bottom selected: `24169:7238`",
+          "body": "- top selected: `24144:6935` - bottom selected: `24169:7238`",
           "startLine": 87
         },
         {
@@ -4815,6 +5216,7 @@
             "色指定をトークン変数へ置換してからレビューに進むこと"
           ],
           "snippet": "```bash\nnpm run test:run -- packages/components/tab/tab.test.ts\nnpm run type-check\n```\n\n```bash\nrg -n \"rgb\\\\(|rgba\\\\(|#[0-9a-fA-F]{3,8}\" packages/components/tab\n```\n\n上記 `rg` でヒットした場合は、色指定をトークン変数へ置換してからレビューに進むこと。",
+          "body": "上記 `rg` でヒットした場合は、色指定をトークン変数へ置換してからレビューに進むこと。",
           "startLine": 92
         }
       ]
@@ -4843,6 +5245,7 @@
             "の3見出しを基本構成にする"
           ],
           "snippet": "- テンプレート作成は `dads-*` コンポーネントを前提に行う。\n- 必要なら `.codex/prompts/create-dads-template-page.md` をベースプロンプトとして使用する。\n- 出力は `## 1) 生成HTML / ## 2) 変更内容 / ## 3) テンプレート不足ギャップ` の3見出しを基本構成にする。",
+          "body": "- テンプレート作成は `dads-*` コンポーネントを前提に行う。 - 必要なら `.codex/prompts/create-dads-template-page.md` をベースプロンプトとして使用する。 - 出力は `## 1) 生成HTML / ## 2) 変更内容 / ## 3) テンプレート不足ギャップ` の3見出しを基本構成にする。",
           "startLine": 5
         },
         {
@@ -4870,6 +5273,7 @@
             "docs"
           ],
           "snippet": "### 2.1 テンプレート全体検証\n\n```bash\nnpm run validate:templates\n```\n\nは `node scripts/dads-template/cli.js validate templates --mode full` を呼び、以下を通す。\n\n- `patterns:check`\n- `vendor:check`\n- `wcf:docs:check`\n- `validate:wc`\n\n### 2.2 クイック検証\n\n```bash\nnpm run validate:templates:quick\n```\n\nは以下のみ実行する。\n\n- `patterns:check`\n- `validate:wc`",
+          "body": "### 2.1 テンプレート全体検証 は `node scripts/dads-template/cli.js validate templates --mode full` を呼び、以下を通す。 - `patterns:check` - `vendor:check` - `wcf:docs:check` - `validate:wc` ### 2.2 クイック検証 は以下のみ実行する。 - `patterns:check` - `validate:wc`",
           "startLine": 11
         },
         {
@@ -4897,6 +5301,7 @@
             "html"
           ],
           "snippet": "```bash\nnpm run templates:gaps:collect\n# 出力: tmp/template-gaps.json\n```\n\n既定は `collect gaps --scope all --out tmp/template-gaps.json`。  \n`scope` は `patterns|viewer|all`。  \n`patterns` は `registry/pattern-registry.json` の `patterns[*].html` を検証。  \n`viewer` は `wc.config.js` の `include` を検証。\n\n### Gap分類ルール\n\n- `unknownElement` → `component-gap`\n- `unknownAttribute` / `forbiddenAttribute` → `api-gap`\n- それ以外の診断 → `expression-gap`\n- `--mark-expression-gap <gapId>` 指定時は対象IDを `expression-gap` として上書き",
+          "body": "既定は `collect gaps --scope all --out tmp/template-gaps.json`。 `scope` は `patterns|viewer|all`。 `patterns` は `registry/pattern-registry.json` の `patterns[*].html` を検証。 `viewer` は `wc.config.js` の `include` を検証。 ### Gap分類ルール - `unknownElement` → `component-gap` - `unknownAttribute` / `forbiddenAttribute` → `api-gap` - それ以外の診断 → `expression-gap` - `--mark-expression-gap <gapId>` 指定時は対象IDを `expression-gap` として上書き",
           "startLine": 37
         },
         {
@@ -4924,6 +5329,7 @@
             "status"
           ],
           "snippet": "### 4.1 ドライラン\n\n```bash\nnpm run templates:gaps:dry-run\n```\n\n`templates:gaps:collect` → `escalate gaps` で起票予定を出す。  \nGitHub API 呼び出しは実行しない。\n\n### 4.2 実起票\n\n```bash\nnpm run templates:gaps:create\n```\n\n`--create` を付けて `gh auth status` を検査し、ローカル認証済み時のみ作成する。  \n重複起票防止キーは `type:scope:proposedComponentId`（`dedupeKey`）を使う。\n\n### Issue フォーマット\n\n- タイトル: `[template-gap][{type}][{scope}][{proposedComponentId}] {title}`\n- dedupeKey を本文に必須明記\n- ラベル: `enhancement` のみ\n- `expression-gap` は `proposedComponentId` を `expr:<",
+          "body": "### 4.1 ドライラン `templates:gaps:collect` → `escalate gaps` で起票予定を出す。 GitHub API 呼び出しは実行しない。 ### 4.2 実起票 `--create` を付けて `gh auth status` を検査し、ローカル認証済み時のみ作成する。 重複起票防止キーは `type:scope:proposedComponentId`（`dedupeKey`）を使う。 ### Issue フォーマット - タイトル: `[template-gap][{type}][{scope}][{proposedComponentId}] {title}` - dedupeKey を本文に必須明記 - ラベル: `enhancement` のみ - `expression-gap` は `proposedComponentId` を `expr:<slug>` 形式（`slug` は英数ハイフン） ### エラーハンドリング - `status=failed` が1件以上あると `0` 以外で終了。 - `--create` 時のみ `",
           "startLine": 56
         },
         {
@@ -4937,6 +5343,7 @@
             "internal_error"
           ],
           "snippet": "- `INPUT_INVALID`\n- `VALIDATION_FAILED`\n- `GH_AUTH_REQUIRED`\n- `ISSUE_CREATE_FAILED`\n- `INTERNAL_ERROR`",
+          "body": "- `INPUT_INVALID` - `VALIDATION_FAILED` - `GH_AUTH_REQUIRED` - `ISSUE_CREATE_FAILED` - `INTERNAL_ERROR`",
           "startLine": 89
         },
         {
@@ -4953,6 +5360,7 @@
             "dads-template"
           ],
           "snippet": "- エスカレーションissueテンプレート: `.github/ISSUE_TEMPLATE/dads-template-gap.yml`\n- テンプレートgap収集 CLI: `scripts/dads-template/cli.js`",
+          "body": "- エスカレーションissueテンプレート: `.github/ISSUE_TEMPLATE/dads-template-gap.yml` - テンプレートgap収集 CLI: `scripts/dads-template/cli.js`",
           "startLine": 97
         },
         {
@@ -4980,6 +5388,7 @@
             "バリデーション契約"
           ],
           "snippet": "GovUI テンプレート（`gov-*`）の Issue を新規作成・更新するときは、以下を必須項目として固定する。\n\n### 7.1 必須セクション\n\n- 背景（調査反映）\n- 目的\n- 非ゴール\n- 想定URL\n- 依存関係（先行/後続）\n- 実装対象ファイル（絶対パス）\n- 利用コンポーネント（想定）\n- UI要件（必須セクション順）\n- API/状態/バリデーション契約\n- アクセシビリティ要件\n- 実装制約（#104準拠）\n- 検証コマンド\n- 受け入れ条件（挙動ベース）\n- 参考（一次情報URL）\n\n### 7.2 共通固定値\n\n- 認証方式（初期対象）: `municipal | e-gov | myna`\n- 申請状態辞書（共通）:\n  `draft, in_progress, submitted, under_review, needs_fix, needs_resubmission, failed, completed, rejected, withdrawn, expired`\n- Pattern Issue の最低検証コマンド:\n  - `npm run pat",
+          "body": "GovUI テンプレート（`gov-*`）の Issue を新規作成・更新するときは、以下を必須項目として固定する。 ### 7.1 必須セクション - 背景（調査反映） - 目的 - 非ゴール - 想定URL - 依存関係（先行/後続） - 実装対象ファイル（絶対パス） - 利用コンポーネント（想定） - UI要件（必須セクション順） - API/状態/バリデーション契約 - アクセシビリティ要件 - 実装制約（#104準拠） - 検証コマンド - 受け入れ条件（挙動ベース） - 参考（一次情報URL） ### 7.2 共通固定値 - 認証方式（初期対象）: `municipal | e-gov | myna` - 申請状態辞書（共通）: `draft, in_progress, submitted, under_review, needs_fix, needs_resubmission, failed, completed, rejected, withdrawn, expired` - Pattern Issue の最低検証コマンド: - `npm run patterns:ch",
           "startLine": 102
         }
       ]
@@ -5005,6 +5414,7 @@
             "により契約が強制される"
           ],
           "snippet": "- `registry/pattern-registry.json` を正とする\n- CI で `npm run patterns:check` により契約が強制される",
+          "body": "- `registry/pattern-registry.json` を正とする - CI で `npm run patterns:check` により契約が強制される",
           "startLine": 7
         },
         {
@@ -5032,6 +5442,7 @@
             "パターン内で使う"
           ],
           "snippet": "ファイル：`registry/pattern-registry.json`\n\n```json\n{\n  \"schemaVersion\": 1,\n  \"canonicalPrefix\": \"dads\",\n  \"patterns\": {\n    \"pattern-id\": {\n      \"id\": \"pattern-id\",\n      \"title\": \"表示名\",\n      \"description\": \"短い説明（任意）\",\n      \"requires\": [\"componentId\", \"componentId\"],\n      \"html\": \"<div>...</div>\\n\"\n    }\n  }\n}\n```\n\n### フィールドの意味\n\n- `canonicalPrefix`: パターン内で使う canonical tag prefix（この repo では `dads`）\n- `patterns[<id>]`: パターン定義\n  - `id`: patternId（key と一致必須）\n  - `title`: 人間向けタイトル（必須）\n  - `descriptio",
+          "body": "ファイル：`registry/pattern-registry.json` ### フィールドの意味 - `canonicalPrefix`: パターン内で使う canonical tag prefix（この repo では `dads`） - `patterns[<id>]`: パターン定義 - `id`: patternId（key と一致必須） - `title`: 人間向けタイトル（必須） - `description`: 任意 - `requires`: 直接必要な `componentId[]`（deps は install-registry から closure で解決される） - `html`: **canonical tag（`dads-*`）**で書かれた HTML snippet（必須） - ルート要素には原則 `data-dads-typeset` を付与する",
           "startLine": 12
         },
         {
@@ -5059,6 +5470,7 @@
             "mcp"
           ],
           "snippet": "- `html` は **プレーン HTML snippet** とし、`<script>` / `<style>` を含めない\n- `html` に **インラインイベントハンドラ**（`on*=\"...\"`）を含めない\n- `html` に **危険なURL**（`javascript:`）や `srcdoc=` を含めない\n- カスタム要素は **`dads-*` のみ**を使う（prefixed `<myui-*>` は書かない）\n  - prefix 変換は MCP 側が行う（`prefix` 引数）\n- `dads-heading` の大きい上余白は `margin=\"top\"` を優先し、組版CSS側はフォールバックにとどめる",
+          "body": "- `html` は **プレーン HTML snippet** とし、`<script>` / `<style>` を含めない - `html` に **インラインイベントハンドラ**（`on*=\"...\"`）を含めない - `html` に **危険なURL**（`javascript:`）や `srcdoc=` を含めない - カスタム要素は **`dads-*` のみ**を使う（prefixed `<myui-*>` は書かない） - prefix 変換は MCP 側が行う（`prefix` 引数） - `dads-heading` の大きい上余白は `margin=\"top\"` を優先し、組版CSS側はフォールバックにとどめる",
           "startLine": 43
         },
         {
@@ -5086,6 +5498,7 @@
             "がない"
           ],
           "snippet": "`npm run patterns:check` が以下を検証する：\n- JSON の整合性（必須フィールド、id/key一致）\n- `requires[]` が `registry/install-registry.json` に存在する\n- `html` に未知の custom element がない（CEMで unknownElement=error）\n- `html` の custom element 属性に typo がない（CEMで unknownAttribute=error）\n- canonical tag prefix 以外の custom element を含まない\n- `<script>` / `<style>` / `on*=` / `javascript:` / `srcdoc=` を含まない",
+          "body": "`npm run patterns:check` が以下を検証する： - JSON の整合性（必須フィールド、id/key一致） - `requires[]` が `registry/install-registry.json` に存在する - `html` に未知の custom element がない（CEMで unknownElement=error） - `html` の custom element 属性に typo がない（CEMで unknownAttribute=error） - canonical tag prefix 以外の custom element を含まない - `<script>` / `<style>` / `on*=` / `javascript:` / `srcdoc=` を含まない",
           "startLine": 52
         },
         {
@@ -5113,6 +5526,7 @@
             "wcf"
           ],
           "snippet": "- `list_patterns()` で一覧\n- `get_pattern_recipe({ patternId, prefix? })` で\n  - 必要 componentId（deps closure 含む）\n  - prefix 適用済み HTML\n  - install 情報（tags/define/deps/source）\n  を取得できる\n\n次のステップ（consumer 側）：\n1. `wcf add <componentIds...>` を実行\n2. 返ってきた snippet を画面へ貼る\n3. `validate_markup` / `validate:wc` で検証",
+          "body": "- `list_patterns()` で一覧 - `get_pattern_recipe({ patternId, prefix? })` で - 必要 componentId（deps closure 含む） - prefix 適用済み HTML - install 情報（tags/define/deps/source） を取得できる 次のステップ（consumer 側）： 1. `wcf add <componentIds...>` を実行 2. 返ってきた snippet を画面へ貼る 3. `validate_markup` / `validate:wc` で検証",
           "startLine": 62
         }
       ]
@@ -5138,6 +5552,7 @@
             "カラムの表示形式を規定する"
           ],
           "snippet": "`src/demos.ts` で定義するコンポーネントの API テーブル（CSS vars セクション）における Default カラムの表示形式を規定する。",
+          "body": "`src/demos.ts` で定義するコンポーネントの API テーブル（CSS vars セクション）における Default カラムの表示形式を規定する。",
           "startLine": 3
         },
         {
@@ -5165,6 +5580,7 @@
             "1a4ccc"
           ],
           "snippet": "### 1. グローバルトークン参照\n\nデザイントークンを参照している場合：\n\n```html\n<td>\n  <code>--token-name</code><br>\n  <small class=\"wc-api-table__meta\">(実値)</small>\n</td>\n```\n\n**例:**\n| 変数 | 表示 |\n|------|------|\n| `--spacing-4` | `--spacing-4`<br>`(16px)` |\n| `--color-neutral-solid-gray-600` | `--color-neutral-solid-gray-600`<br>`(#666)` |\n| `--color-primitive-blue-900` | `--color-primitive-blue-900`<br>`(#1a4ccc)` |\n\n### 2. リテラル値\n\n直接値を指定している場合（トークン参照なし）：\n\n```html\n<td><code>1px</code></td>\n```\n\n**例:**\n- `1px`\n- `transparent`\n-",
+          "body": "### 1. グローバルトークン参照 デザイントークンを参照している場合： **例:** | 変数 | 表示 | |------|------| | `--spacing-4` | `--spacing-4`<br>`(16px)` | | `--color-neutral-solid-gray-600` | `--color-neutral-solid-gray-600`<br>`(#666)` | | `--color-primitive-blue-900` | `--color-primitive-blue-900`<br>`(#1a4ccc)` | ### 2. リテラル値 直接値を指定している場合（トークン参照なし）： **例:** - `1px` - `transparent` - `0` ### 3. calc 計算値 `calc()` で計算している場合、rem 値と px 換算値を表示： **例:** | 元の定義 | 表示 | |---------|------| | `calc(24 / 16 * 1rem)` | `1.5rem`<br>`(24px)` | |",
           "startLine": 7
         },
         {
@@ -5188,6 +5604,7 @@
             "3桁に省略する"
           ],
           "snippet": "色のトークンで実値を表示する際は、以下の省略形式を使用：\n\n| 完全形 | 省略形 |\n|--------|--------|\n| `#666666` | `#666` |\n| `#ffffff` | `#fff` |\n| `#000000` | `#000` |\n\n6桁の HEX で省略可能な場合は 3桁に省略する。",
+          "body": "色のトークンで実値を表示する際は、以下の省略形式を使用： | 完全形 | 省略形 | |--------|--------| | `#666666` | `#666` | | `#ffffff` | `#fff` | | `#000000` | `#000` | 6桁の HEX で省略可能な場合は 3桁に省略する。",
           "startLine": 80
         },
         {
@@ -5215,6 +5632,7 @@
             "value"
           ],
           "snippet": "```typescript\n// demos.ts 内の CSS vars テーブル行\n<tr>\n  <th scope=\"row\"><code>--dads-search-box-gap</code></th>\n  <td><code>--spacing-4</code><br><small class=\"wc-api-table__meta\">(16px)</small></td>\n  <td>\n    <div class=\"wc-api-control\">\n      <dads-input-text\n        label=\"--dads-search-box-gap\"\n        value=\"\"\n        data-api-css-var=\"--dads-search-box-gap\"\n        data-default=\"\"\n      ></dads-input-text>\n    </div>\n  </td>\n  <td>fields と button の間隔</td>\n</tr>\n```",
+          "body": "",
           "startLine": 92
         },
         {
@@ -5238,6 +5656,7 @@
             "は出力しない"
           ],
           "snippet": "- `src/demos/shared.ts` の `renderApiTableMeta(text)` を使用する。\n- 引数はプレーンテキストのみ（HTMLタグ挿入不可）。\n- 文字列は内部で HTML エスケープされる。\n- `text === ''` の場合は `''` を返し、空の `<small>` は出力しない。",
+          "body": "- `src/demos/shared.ts` の `renderApiTableMeta(text)` を使用する。 - 引数はプレーンテキストのみ（HTMLタグ挿入不可）。 - 文字列は内部で HTML エスケープされる。 - `text === ''` の場合は `''` を返し、空の `<small>` は出力しない。",
           "startLine": 113
         },
         {
@@ -5256,6 +5675,7 @@
             "を参照"
           ],
           "snippet": "1. コンポーネントの `*-tokens.ts` ファイルを確認\n2. セマンティックトークン → グローバルトークンの参照関係を追跡\n3. グローバルトークンの実値は `packages/styles/design-tokens/` を参照",
+          "body": "1. コンポーネントの `*-tokens.ts` ファイルを確認 2. セマンティックトークン → グローバルトークンの参照関係を追跡 3. グローバルトークンの実値は `packages/styles/design-tokens/` を参照",
           "startLine": 120
         },
         {
@@ -5275,6 +5695,7 @@
             "グローバルデザイントークン"
           ],
           "snippet": "- `src/demos.ts` - デモ定義\n- `packages/components/*/[component]-tokens.ts` - コンポーネントトークン\n- `packages/styles/design-tokens/` - グローバルデザイントークン",
+          "body": "- `src/demos.ts` - デモ定義 - `packages/components/*/[component]-tokens.ts` - コンポーネントトークン - `packages/styles/design-tokens/` - グローバルデザイントークン",
           "startLine": 126
         }
       ]
@@ -5309,6 +5730,7 @@
             "を参照する"
           ],
           "snippet": "- コンテンツルートに `data-dads-typeset` を付与する（例: `<main data-dads-typeset>`）\n- 密度を詰めるときだけ `data-dads-density=\"compact\"` を使う\n- `dads-heading` の大きい上余白は `margin=\"top\"` を使い、組版側で重ねて定義しない\n- 詳細は `docs/rules/content-typeset-rules.md` を参照する",
+          "body": "- コンテンツルートに `data-dads-typeset` を付与する（例: `<main data-dads-typeset>`） - 密度を詰めるときだけ `data-dads-density=\"compact\"` を使う - `dads-heading` の大きい上余白は `margin=\"top\"` を使い、組版側で重ねて定義しない - 詳細は `docs/rules/content-typeset-rules.md` を参照する",
           "startLine": 5
         },
         {
@@ -5335,6 +5757,7 @@
             "notes"
           ],
           "snippet": "```\n1. Overview（用途・操作要点・注意）\n2. A11y（a11y-annotate）\n3. API / Controls\n   3.1 Preview\n   3.2 Attributes / Properties テーブル\n   3.3 CSS Variables テーブル（カテゴリ別に details で折りたたみ）\n4. Examples（2〜3件、実務寄り）\n5. Notes（任意）\n```",
+          "body": "",
           "startLine": 12
         },
         {
@@ -5362,6 +5785,7 @@
             "実務例"
           ],
           "snippet": "- **E2E/Figma検証用デモ** は `{componentName}Fidelity` として分離する\n- ショーケースからは検証用 ID 依存を外す（`#demo-xxx-basic` 等）\n- Fidelity デモは **ID安定性を最優先**（ショーケース整理でE2Eが壊れない）\n\n| ページ | 用途 |\n|--------|------|\n| `componentName` | 人間向けショーケース（API/CSS Vars/実務例） |\n| `componentNameFidelity` | E2E/Figma検証用（ID安定性優先） |",
+          "body": "- **E2E/Figma検証用デモ** は `{componentName}Fidelity` として分離する - ショーケースからは検証用 ID 依存を外す（`#demo-xxx-basic` 等） - Fidelity デモは **ID安定性を最優先**（ショーケース整理でE2Eが壊れない） | ページ | 用途 | |--------|------| | `componentName` | 人間向けショーケース（API/CSS Vars/実務例） | | `componentNameFidelity` | E2E/Figma検証用（ID安定性優先） |",
           "startLine": 25
         },
         {
@@ -5389,6 +5813,7 @@
             "value"
           ],
           "snippet": "### 必須データ属性\n\n| 属性 | 用途 |\n|------|------|\n| `data-api-target` | 制御対象のコンポーネント |\n| `data-api-attr=\"attrName\"` | HTML属性の制御 |\n| `data-api-prop=\"propName\"` | JSプロパティの制御 |\n| `data-api-css-var=\"--var-name\"` | CSS変数の制御 |\n| `data-api-reset` | リセットボタン |\n| `data-default=\"value\"` | 初期値（リセット時に戻す値） |\n\n### スクリプト初期化\n\n```html\n<script>\n  (function() {\n    var currentScript = document.currentScript;\n    Promise.all([\n      import('dads-component-name'),\n      import('dads-table'),\n      import('dads-switch'),\n     ",
+          "body": "### 必須データ属性 | 属性 | 用途 | |------|------| | `data-api-target` | 制御対象のコンポーネント | | `data-api-attr=\"attrName\"` | HTML属性の制御 | | `data-api-prop=\"propName\"` | JSプロパティの制御 | | `data-api-css-var=\"--var-name\"` | CSS変数の制御 | | `data-api-reset` | リセットボタン | | `data-default=\"value\"` | 初期値（リセット時に戻す値） | ### スクリプト初期化",
           "startLine": 36
         },
         {
@@ -5414,6 +5839,7 @@
             "card-section__note"
           ],
           "snippet": "> 注釈表示は dev 専用です。viewer / demo では `?a11y=1` を付与してください。\n\n### トグルブロック\n\n```javascript\n${renderAnnotationToggleBlock()}\n```\n\n### 注釈見出し\n\n```javascript\n${renderA11ySectionHeader()}\n```\n\n特殊な見た目が必要な場合はクラス名を渡す。\n\n```javascript\n${renderA11ySectionHeader({ titleClassName: 'card-section__title', noteClassName: 'card-section__note' })}\n```",
+          "body": "> 注釈表示は dev 専用です。viewer / demo では `?a11y=1` を付与してください。 ### トグルブロック ### 注釈見出し 特殊な見た目が必要な場合はクラス名を渡す。",
           "startLine": 72
         },
         {
@@ -5436,6 +5862,7 @@
             "内部でhtmlエスケープされる"
           ],
           "snippet": "`<small style=\"color:#666\">` は使わず、以下を使用する。\n\n```javascript\n\"<code>--spacing-4</code><br>\" + renderApiTableMeta(\"(16px)\")\n```\n\n`renderApiTableMeta(text)` はプレーンテキスト限定で、内部でHTMLエスケープされる。",
+          "body": "`<small style=\"color:#666\">` は使わず、以下を使用する。 `renderApiTableMeta(text)` はプレーンテキスト限定で、内部でHTMLエスケープされる。",
           "startLine": 94
         },
         {
@@ -5463,6 +5890,7 @@
             "変数名"
           ],
           "snippet": "### 折りたたみ構造\n\n```html\n<div class=\"wc-api-panel__section\">\n  <h4 class=\"wc-api-panel__section-title\">CSS Variables</h4>\n\n  <details open>\n    <summary>カテゴリ1（例: Opener）</summary>\n    <dads-table>\n      <table>\n        <thead>\n          <tr>\n            <th scope=\"col\">変数名</th>\n            <th scope=\"col\">説明</th>\n            <th scope=\"col\">初期値</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td><code>--dads-xxx-property</code></td>\n            <td>説明文</td>\n         ",
+          "body": "### 折りたたみ構造 ### 推奨カテゴリ 1. **Layout** - サイズ、パディング、ギャップ 2. **Colors** - 背景、ボーダー、テキスト 3. **Typography** - フォント関連 4. **Focus** - フォーカス状態 5. **State** - ホバー、アクティブ、disabled",
           "startLine": 104
         },
         {
@@ -5485,6 +5913,7 @@
             "実務でよくある使用パターン"
           ],
           "snippet": "### 避けるべき作例\n\n- API テーブルで確認できる単純なバリエーション（size sm/md など）\n- Figma検証用のデモ（Fidelity に分離）\n\n### 含めるべき作例\n\n- カテゴリ + divider の組み合わせ\n- 説明文付きアイテム\n- スクロールが発生するケース\n- 実務でよくある使用パターン",
+          "body": "### 避けるべき作例 - API テーブルで確認できる単純なバリエーション（size sm/md など） - Figma検証用のデモ（Fidelity に分離） ### 含めるべき作例 - カテゴリ + divider の組み合わせ - 説明文付きアイテム - スクロールが発生するケース - 実務でよくある使用パターン",
           "startLine": 149
         },
         {
@@ -5504,6 +5933,7 @@
             "componentnamefidelity"
           ],
           "snippet": "セレクタに新しいコンポーネントを追加する際は、Fidelity も同時に追加：\n\n```html\n<option value=\"componentName\">Component Name</option>\n<option value=\"componentNameFidelity\">Component Name (Fidelity)</option>\n```",
+          "body": "セレクタに新しいコンポーネントを追加する際は、Fidelity も同時に追加：",
           "startLine": 163
         },
         {
@@ -5531,6 +5961,7 @@
             "3件に絞られている"
           ],
           "snippet": "- [ ] Overview セクションがある\n- [ ] Usage（HTML）コードブロック（`<dads-code-block>`）がある\n- [ ] a11y-annotate が表示される\n- [ ] API / Controls に Props/Attrs テーブルがある\n- [ ] API / Controls に CSS Variables テーブルがある（折りたたみ）\n- [ ] Examples が 2〜3件に絞られている\n- [ ] E2E用 ID は Fidelity デモに移動済み\n- [ ] viewer.html に Fidelity オプションがある\n- [ ] E2E テストが Fidelity を参照している\n- [ ] ルートコンテナに `data-dads-typeset` がある",
+          "body": "- [ ] Overview セクションがある - [ ] Usage（HTML）コードブロック（`<dads-code-block>`）がある - [ ] a11y-annotate が表示される - [ ] API / Controls に Props/Attrs テーブルがある - [ ] API / Controls に CSS Variables テーブルがある（折りたたみ） - [ ] Examples が 2〜3件に絞られている - [ ] E2E用 ID は Fidelity デモに移動済み - [ ] viewer.html に Fidelity オプションがある - [ ] E2E テストが Fidelity を参照している - [ ] ルートコンテナに `data-dads-typeset` がある",
           "startLine": 172
         }
       ]
@@ -5552,6 +5983,7 @@
             "振り返りまでの一連の作業を体系的に進められます"
           ],
           "snippet": "Claude Codeのスラッシュコマンドは、開発ワークフローを効率化するための専用コマンドです。  \nこれらのコマンドを使用することで、計画から実装、レビュー、振り返りまでの一連の作業を体系的に進められます。",
+          "body": "Claude Codeのスラッシュコマンドは、開発ワークフローを効率化するための専用コマンドです。 これらのコマンドを使用することで、計画から実装、レビュー、振り返りまでの一連の作業を体系的に進められます。",
           "startLine": 3
         },
         {
@@ -5579,6 +6011,7 @@
             "---"
           ],
           "snippet": "### `/design` - 実装計画作成\n**目的**: タスクの分解と技術設計\n\n**実行内容**:\n1. 要件の分析\n2. タスクの最小単位への分解（30分〜2時間）\n3. 技術的決定事項の文書化\n4. リスクと依存関係の特定\n5. テスト戦略の策定\n\n**出力**:\n- `docs/plans/feature-YYYYMMDD-{name}.md` に実装計画を作成\n\n**使用例**:\n```\n/design アコーディオンコンポーネントの実装\n```\n\n---\n\n### `/revise` - 実装計画の修正\n**目的**: 計画の更新と調整\n\n**実行内容**:\n1. 既存の実装計画をレビュー\n2. 新しい要件や制約の反映\n3. タスクの再評価と調整\n4. リスクの再評価\n\n**使用例**:\n```\n/revise アクセシビリティ要件を追加\n```\n\n---\n\n### `/implement` - 実装実行\n**目的**: 計画に基づいた実装\n\n**実行内容**:\n1. TDDアプローチの適用\n   - テスト作成\n   - 最小実装\n   - リファクタリング\n2. ",
+          "body": "### `/design` - 実装計画作成 **目的**: タスクの分解と技術設計 **実行内容**: 1. 要件の分析 2. タスクの最小単位への分解（30分〜2時間） 3. 技術的決定事項の文書化 4. リスクと依存関係の特定 5. テスト戦略の策定 **出力**: - `docs/plans/feature-YYYYMMDD-{name}.md` に実装計画を作成 **使用例**: --- ### `/revise` - 実装計画の修正 **目的**: 計画の更新と調整 **実行内容**: 1. 既存の実装計画をレビュー 2. 新しい要件や制約の反映 3. タスクの再評価と調整 4. リスクの再評価 **使用例**: --- ### `/implement` - 実装実行 **目的**: 計画に基づいた実装 **実行内容**: 1. TDDアプローチの適用 - テスト作成 - 最小実装 - リファクタリング 2. 型安全性の確保 3. ベストプラクティスの適用 4. 継続的な検証 **自動実行**: **使用例**: --- ### `/review` - コードレビュー **",
           "startLine": 8
         },
         {
@@ -5604,6 +6037,7 @@
             "変更後"
           ],
           "snippet": "### 新機能開発\n```\n1. /design 新機能の名前と要件\n2. /implement タスク1\n3. /implement タスク2\n4. /review \n5. /recap\n```\n\n### バグ修正\n```\n1. /ask バグの原因調査\n2. /design 修正計画\n3. /implement 修正実装\n4. /review\n```\n\n### リファクタリング\n```\n1. /design リファクタリング計画\n2. /review 現在のコード\n3. /implement リファクタリング\n4. /review 変更後\n5. /recap\n```",
+          "body": "### 新機能開発 ### バグ修正 ### リファクタリング",
           "startLine": 143
         },
         {
@@ -5622,6 +6056,7 @@
             "知識の文書化を怠る"
           ],
           "snippet": "### DO ✅\n- 各フェーズで適切なコマンドを使用\n- 小さな単位で頻繁に実行\n- レビューとrecapを忘れずに\n- 計画を立ててから実装\n\n### DON'T ❌\n- 計画なしでいきなり/implement\n- レビューをスキップ\n- 大きすぎるタスクで実行\n- 知識の文書化を怠る",
+          "body": "### DO ✅ - 各フェーズで適切なコマンドを使用 - 小さな単位で頻繁に実行 - レビューとrecapを忘れずに - 計画を立ててから実装 ### DON'T ❌ - 計画なしでいきなり/implement - レビューをスキップ - 大きすぎるタスクで実行 - 知識の文書化を怠る",
           "startLine": 171
         },
         {
@@ -5635,6 +6070,7 @@
             "各コマンドの詳細な動作をカスタマイズできます"
           ],
           "snippet": "プロジェクト固有の振る舞いは`CLAUDE.md`で定義されています。  \n必要に応じて、各コマンドの詳細な動作をカスタマイズできます。",
+          "body": "プロジェクト固有の振る舞いは`CLAUDE.md`で定義されています。 必要に応じて、各コマンドの詳細な動作をカスタマイズできます。",
           "startLine": 185
         },
         {
@@ -5655,6 +6091,7 @@
             "開発効率と品質が大幅に向上します"
           ],
           "snippet": "- [CLAUDE.md](../CLAUDE.md) - プロジェクト固有の設定\n- [claude-code-workflow.md](./claude-code-workflow.md) - 全体的なワークフロー\n- [knowledge/](./knowledge/) - 蓄積された知識\n\n---\n\n*スラッシュコマンドは Claude Code の強力な機能です。適切に使用することで、開発効率と品質が大幅に向上します。*",
+          "body": "- [CLAUDE.md](../CLAUDE.md) - プロジェクト固有の設定 - [claude-code-workflow.md](./claude-code-workflow.md) - 全体的なワークフロー - [knowledge/](./knowledge/) - 蓄積された知識 --- *スラッシュコマンドは Claude Code の強力な機能です。適切に使用することで、開発効率と品質が大幅に向上します。*",
           "startLine": 190
         }
       ]
@@ -5675,6 +6112,7 @@
             "fontは読み込まない運用とする"
           ],
           "snippet": "すべてのWeb ComponentsでNoto Sans JPを優先適用し、Web Fontは読み込まない運用とする。",
+          "body": "すべてのWeb ComponentsでNoto Sans JPを優先適用し、Web Fontは読み込まない運用とする。",
           "startLine": 3
         },
         {
@@ -5699,6 +6137,7 @@
             "コンポーネント固有スタイル"
           ],
           "snippet": "### 3層構造\n\n```\n1. グローバルフォント管理層\n   └── ensureFontsInitialized()\n       └── Web Fontは読み込まない\n       └── bodyクラス管理（初期化のみ）\n\n2. ベースコンポーネント層\n   └── TypographyWebComponent\n       └── 自動フォント初期化\n       └── 読み込み状態同期\n       └── ベーススタイル適用\n\n3. 個別コンポーネント層\n   └── DadsText等\n       └── TypographyWebComponent継承\n       └── コンポーネント固有スタイル\n```",
+          "body": "### 3層構造",
           "startLine": 7
         },
         {
@@ -5726,6 +6165,7 @@
             "03em"
           ],
           "snippet": "### フォント運用方針\n\n1. **Web Fontは読み込まない**\n   - ローカルフォントのみ\n   - ネットワーク依存を排除\n\n2. **読み込み状態管理**\n   ```javascript\n   body.fonts-loaded   // 初期化完了\n   body.fonts-error    // エラー時（基本は発生しない）\n   ```\n\n### チラツキ対策\n\n```css\n/* 読み込み中 */\n.fonts-loading {\n  letter-spacing: 0.03em; /* わずかに広げる */\n}\n\n/* 読み込み完了 */\n.fonts-loaded {\n  letter-spacing: 0.02em; /* 正常値 */\n  transition: letter-spacing 0.1s ease-out;\n}\n```\n\n文字間隔の微調整はローカルフォント前提の見た目調整。",
+          "body": "### フォント運用方針 1. **Web Fontは読み込まない** - ローカルフォントのみ - ネットワーク依存を排除 2. **読み込み状態管理** ### チラツキ対策 文字間隔の微調整はローカルフォント前提の見た目調整。",
           "startLine": 29
         },
         {
@@ -5753,6 +6193,7 @@
             "div"
           ],
           "snippet": "### 方法1: TypographyWebComponent継承（推奨）\n\n```typescript\nimport { TypographyWebComponent } from '@core/typography';\n\nexport class MyComponent extends TypographyWebComponent {\n  static definition = {\n    name: 'my-component',\n    template: html`<div>自動的にNoto Sans JP適用</div>`,\n    styles: css`:host { color: blue; }`\n  };\n}\nMyComponent.define();\n```\n\n### 方法2: 既存コンポーネントへの適用\n\n```typescript\nimport { WebComponent } from '@core/web-components';\nimport { baseTypographyStyles, ensureFontsInitialized } from '@",
+          "body": "### 方法1: TypographyWebComponent継承（推奨） ### 方法2: 既存コンポーネントへの適用 ### 方法3: グローバル初期化",
           "startLine": 60
         },
         {
@@ -5780,6 +6221,7 @@
             "letter-spacing"
           ],
           "snippet": "### CSS変数\n\n```css\n:host {\n  /* フォントファミリー変更 */\n  --base-font-family: \"Custom Font\", \"Noto Sans JP\", -apple-system, BlinkMacSystemFont, sans-serif;\n  \n  /* モノスペースフォント */\n  --mono-font-family: \"Fira Code\", monospace;\n  \n  /* 文字間隔調整 */\n  letter-spacing: 0.05em;\n}\n```",
+          "body": "### CSS変数",
           "startLine": 111
         },
         {
@@ -5807,6 +6249,7 @@
             "キャッシュ利用"
           ],
           "snippet": "### 最適化ポイント\n\n1. **単一インスタンス管理**\n   - フォント読み込みは一度だけ\n   - 重複読み込み防止\n\n2. **遅延読み込み**\n   - コンポーネント初回使用時に読み込み\n   - 不要な場合は読み込まない\n\n3. **キャッシュ活用**\n   - ブラウザキャッシュ\n   - CDNキャッシュ\n\n### メトリクス\n\n| 指標 | 値 | 備考 |\n|------|-----|------|\n| 初回読み込み | ~300ms | CDN依存 |\n| 2回目以降 | 0ms | キャッシュ利用 |\n| FOUT期間 | <100ms | font-display: swap |\n| メモリ使用量 | 最小 | 単一インスタンス |",
+          "body": "### 最適化ポイント 1. **単一インスタンス管理** - フォント読み込みは一度だけ - 重複読み込み防止 2. **遅延読み込み** - コンポーネント初回使用時に読み込み - 不要な場合は読み込まない 3. **キャッシュ活用** - ブラウザキャッシュ - CDNキャッシュ ### メトリクス | 指標 | 値 | 備考 | |------|-----|------| | 初回読み込み | ~300ms | CDN依存 | | 2回目以降 | 0ms | キャッシュ利用 | | FOUT期間 | <100ms | font-display: swap | | メモリ使用量 | 最小 | 単一インスタンス |",
           "startLine": 128
         },
         {
@@ -5834,6 +6277,7 @@
             "ブラウザサポートに依存"
           ],
           "snippet": "### 読み込み状態確認\n\n```javascript\n// コンソールで実行\ndocument.body.className; // fonts-loaded等を確認\n\n// Font Loading API\ndocument.fonts.ready.then(() => {\n  console.log('All fonts loaded');\n});\n\n  // 個別フォント確認（ブラウザサポートに依存）\n  document.fonts.check('16px \"Noto Sans JP\"'); // true/false\n```\n\n### トラブルシューティング\n\n| 問題 | 原因 | 解決策 |\n|------|------|--------|\n| フォントが適用されない | ローカル未インストール | フォールバックフォントを確認 |\n| チラツキが目立つ | ネットワーク遅延 | セルフホスティング検討 |\n| フォールバックのまま | 読み込みエラー | fonts-errorクラス確認 |",
+          "body": "### 読み込み状態確認 ### トラブルシューティング | 問題 | 原因 | 解決策 | |------|------|--------| | フォントが適用されない | ローカル未インストール | フォールバックフォントを確認 | | チラツキが目立つ | ネットワーク遅延 | セルフホスティング検討 | | フォールバックのまま | 読み込みエラー | fonts-errorクラス確認 |",
           "startLine": 153
         },
         {
@@ -5854,6 +6298,7 @@
             "実装例"
           ],
           "snippet": "- `/packages/core/typography/typography-web-component.ts` - ベースクラス\n- `/packages/core/typography/base-typography-styles.ts` - スタイル定義\n- `/packages/core/typography/font-loader.ts` - 高度なローダー\n- `/packages/components/typography/dads-text.ts` - 実装例",
+          "body": "- `/packages/core/typography/typography-web-component.ts` - ベースクラス - `/packages/core/typography/base-typography-styles.ts` - スタイル定義 - `/packages/core/typography/font-loader.ts` - 高度なローダー - `/packages/components/typography/dads-text.ts` - 実装例",
           "startLine": 178
         },
         {
@@ -5878,6 +6323,7 @@
             "ダークモード最適化"
           ],
           "snippet": "### Phase 1（現在）\n- ✅ Web Fontなし運用\n- ✅ 基本的な見た目調整\n- ✅ 自動適用システム\n\n### Phase 2（次期）\n- セルフホスティング（必要なら検討）\n- サブセット化（使用文字のみ）\n- Service Worker キャッシュ\n\n### Phase 3（将来）\n- Variable Fonts対応\n- 動的ウェイト調整\n- ダークモード最適化",
+          "body": "### Phase 1（現在） - ✅ Web Fontなし運用 - ✅ 基本的な見た目調整 - ✅ 自動適用システム ### Phase 2（次期） - セルフホスティング（必要なら検討） - サブセット化（使用文字のみ） - Service Worker キャッシュ ### Phase 3（将来） - Variable Fonts対応 - 動的ウェイト調整 - ダークモード最適化",
           "startLine": 185
         },
         {
@@ -5900,15 +6346,155 @@
             "バージョン"
           ],
           "snippet": "- **Shape Up原則**: 完璧より動作を優先\n- **現在の解決策**: CDNで即座に動作\n- **技術的負債**: セルフホスティング未対応（意図的）\n\n---\n\n*最終更新: 2025-09-02*\n*作成者: Claude Code*\n*バージョン: 1.0.0*",
+          "body": "- **Shape Up原則**: 完璧より動作を優先 - **現在の解決策**: CDNで即座に動作 - **技術的負債**: セルフホスティング未対応（意図的） --- *最終更新: 2025-09-02* *作成者: Claude Code* *バージョン: 1.0.0*",
           "startLine": 202
         }
       ]
+    },
+    {
+      "id": "dads:keyboard-navigation",
+      "title": "Keyboard Navigation",
+      "topic": "accessibility",
+      "sections": [
+        {
+          "heading": "Keyboard Navigation",
+          "keywords": [
+            "keyboard",
+            "navigation",
+            "focus",
+            "tab",
+            "tabindex",
+            "key event",
+            "focus trap",
+            "focus management",
+            "arrow keys"
+          ],
+          "snippet": "All interactive elements must be operable via keyboard. Use tabindex=\"0\" for custom interactive elements. Implement arrow key navigation within composite widgets. Ensure focus is visible and follows a logical order.",
+          "body": "All interactive elements must be operable via keyboard. Use tabindex=\"0\" for custom interactive elements. Implement arrow key navigation within composite widgets. Ensure focus is visible and follows a logical order. Avoid tabindex values greater than 0. Use focus trap for modal dialogs.",
+          "startLine": 1
+        }
+      ]
+    },
+    {
+      "id": "dads:focus-management",
+      "title": "Focus Management",
+      "topic": "accessibility",
+      "sections": [
+        {
+          "heading": "Focus Management",
+          "keywords": [
+            "focus",
+            "focus management",
+            "focus trap",
+            "focus visible",
+            "focus-visible",
+            "focus ring",
+            "outline",
+            "tabindex"
+          ],
+          "snippet": "Manage focus programmatically when content changes dynamically. Move focus to new content when it appears (e.g., modal open). Return focus to trigger when content is dismissed. Use :focus-visible for keyboard-only focus styles.",
+          "body": "Manage focus programmatically when content changes dynamically. Move focus to new content when it appears (e.g., modal open). Return focus to trigger when content is dismissed. Use :focus-visible for keyboard-only focus styles. Ensure focus indicator has at least 3:1 contrast ratio.",
+          "startLine": 1
+        }
+      ]
+    },
+    {
+      "id": "dads:contrast-color",
+      "title": "Contrast and Color",
+      "topic": "accessibility",
+      "sections": [
+        {
+          "heading": "Contrast and Color",
+          "keywords": [
+            "contrast",
+            "color",
+            "wcag",
+            "color contrast",
+            "contrast ratio",
+            "aa",
+            "aaa",
+            "text contrast"
+          ],
+          "snippet": "Text must have at least 4.5:1 contrast ratio (WCAG AA). Large text (18px+ or 14px+ bold) requires 3:1. UI components and graphical objects require 3:1 against adjacent colors. Do not use color alone to convey information.",
+          "body": "Text must have at least 4.5:1 contrast ratio against background (WCAG AA). Large text (18px+ or 14px+ bold) requires 3:1 minimum. UI components and graphical objects require 3:1 against adjacent colors. Do not use color alone to convey information. Use design tokens for consistent accessible colors.",
+          "startLine": 1
+        }
+      ]
+    },
+    {
+      "id": "dads:form-validation",
+      "title": "Form Validation",
+      "topic": "accessibility",
+      "sections": [
+        {
+          "heading": "Form Validation",
+          "keywords": [
+            "form",
+            "validation",
+            "error",
+            "required",
+            "label",
+            "aria-invalid",
+            "aria-describedby",
+            "input",
+            "error message"
+          ],
+          "snippet": "Use aria-invalid=\"true\" to indicate validation errors. Connect error messages via aria-describedby. Do not use aria-live for error text. Provide clear error messages in Japanese. Mark required fields with aria-required=\"true\".",
+          "body": "Use aria-invalid=\"true\" to indicate validation errors. Connect error messages via aria-describedby. Do not use aria-live or role=\"alert\" for error text as it interrupts screen reader users. Provide clear error messages. Mark required fields with aria-required=\"true\" and visual indicator.",
+          "startLine": 1
+        }
+      ]
+    },
+    {
+      "id": "dads:heading-hierarchy",
+      "title": "Heading Hierarchy",
+      "topic": "accessibility",
+      "sections": [
+        {
+          "heading": "Heading Hierarchy",
+          "keywords": [
+            "heading",
+            "heading hierarchy",
+            "h1",
+            "h2",
+            "h3",
+            "heading level",
+            "document structure",
+            "semantic"
+          ],
+          "snippet": "Use heading elements (h1-h6) in proper hierarchical order. Each page should have exactly one h1. Do not skip heading levels (e.g., h2 to h4). Use headings to create a meaningful document outline.",
+          "body": "Use heading elements (h1-h6) in proper hierarchical order. Each page should have exactly one h1. Do not skip heading levels. Use headings to create a meaningful document outline that screen reader users can navigate.",
+          "startLine": 1
+        }
+      ]
+    },
+    {
+      "id": "dads:skip-navigation",
+      "title": "Skip Navigation",
+      "topic": "accessibility",
+      "sections": [
+        {
+          "heading": "Skip Navigation",
+          "keywords": [
+            "skip-navigation",
+            "skip-link",
+            "skip nav",
+            "landmark",
+            "main content",
+            "navigation",
+            "dads-layout-shell"
+          ],
+          "snippet": "Provide a skip navigation link as the first focusable element on the page. The link should jump to the main content area. Use dads-layout-shell for built-in skip navigation support. Ensure landmarks (main, nav, aside) are properly defined.",
+          "body": "Provide a skip navigation link as the first focusable element on the page. The link should jump to the main content area. Use dads-layout-shell component which provides built-in skip navigation. Define ARIA landmarks (main, nav, aside) for screen reader navigation.",
+          "startLine": 1
+        }
+      ]
     }
   ],
   "topicCounts": {
     "css": 10,
-    "accessibility": 2,
-    "all": 7,
+    "accessibility": 8,
+    "all": 8,
     "patterns": 13
   }
 }