docs: dads-design-system スキルを #176 完了後の現状に同期

[fumtas1k]

概要

dads-design-system スキルを評価したところ、issue #176（B 案: style-src strict 化）の完了後に追従できておらず、従うとビルドが壊れ、かつ達成済みの CSP strict 化を逆戻りさせる状態だったため修正した。あわせてスキルの想定用途を実態（devtools フロントエンド作成）に再定義した。

背景（何が陳腐化していたか）

スキルの最終更新は #176 PR 1 時点（2026-05-04）で止まっていた。その後:

• src/utils/styles.ts は PR 6 (refactor(csp): #176 B 案 PR 6 (scope 縮小) — styles.ts 削除 + migration tracker glob 化、Astro inline 残存は #289 へ委譲 #290) で削除
• style-src は PR 10 (refactor(csp): #176 B 案 PR 10 — style-src strict 化最終 flip + Astro island hash 取り込み + B 案完了記録 ([068]) #315) で両層 strict 化（public/_headers から unsafe-inline 撤去、security: CSP の script-src/style-src から 'unsafe-inline' を削減する #176 close）

にもかかわらずスキル §11 は以下を案内し続けていた:

• import { colors, onFocusRing, onBlurRing } from '../../utils/styles' → 削除済みでビルドエラー
• style={{ color: ... }} の inline-style パターン → style-src strict 下では適用されず CSP 違反
• 冒頭バナーは「⚠️ 移行中… PR 6 で rewrite 予定」と完了済みの移行を未完と表示

変更内容

• 誤った「移行中」バナーを削除（SKILL.md / components.md 両方）
• §11 を撤去し正本へ委譲: 削除済みコード前提の旧実装記述・トークン表を撤去し、CLAUDE.md §7 / docs/ui-conventions.md / docs/projects/issue-176-b-plan-progress.md / docs/decisions.md [064][067][068] へのポインタに置換。「使ってはいけない旧パターン」警告のみ残置
• §9 の宙吊りポインタを修正: 現状の :focus-visible CSS 一括適用（var(--focus-ring)）に追従
• components.md の「方針2」を inline-style → CSS class 方式に書き換え
• description を再定義: 行政/LP 寄りの的外れな枠組みを捨て、「devtools のフロント UI を作成・変更する際に使う DADS ベース規約」に変更

設計判断

• 削除した §11 の内容は 2 種類: ①削除済みコードの説明（保全不要、消して正しい）②生きているコードへの索引。①は対象が存在せず、②の共通 UI コンポーネント一覧は docs/ui-conventions.md §1 に全件存在を確認済み。useClampedInput（DADS 無関係の汎用フック・索引のみ）だけは正本がないが、scope creep につき意図的にドロップ（src/hooks/ で発見可能）
• 正本を一本化してドリフト源を断つ方針（スキルと CLAUDE.md の二重管理が今回の陳腐化の原因）

確認

• pre-commit hook（Prettier / TypeScript）通過
• SKILL.md frontmatter の YAML パース確認済み
• ポインタ先 4 件すべて実在を確認

🤖 Generated with Claude Code

[github-actions]

🖼️ Visual Regression Test 結果

• Status: ✅ 全 40 件 pass
• Workflow run: 26354823918
• Artifact (diff 画像 / playwright-report): 上記 workflow run の Artifacts セクションから download

diff が 意図的な visual 変更の場合: Update Visual Regression Baseline workflow を本 PR ブランチで workflow_dispatch trigger して baseline を更新。
diff が 意図しない regression の場合: 該当変更を fix。
本 check は required ではないため fail のままでも merge は可能（reviewer 判断）。

[fumtas1k]

レビュー結果: 内容は正確、merge 可（軽微な指摘 1 件）

陳腐化したスキル記述を現状（#176 B 案完了後）に同期する良いクリーンアップです。PR 本文の主張・ポインタ先・削除内容を develop の実体に対して検証し、いずれも正確であることを確認しました。

検証済み（develop 実体と照合）

• src/utils/styles.ts は削除済み → 旧 import (colors / onFocusRing / onBlurRing) はビルドエラーになるという警告は正しい
• public/_headers の style-src は 'self' + island hash のみで 'unsafe-inline' 不在 → HTML inline style が CSP 違反になるという記述は正しい
• focus は global.css で :where(...):focus-visible { outline: var(--focus-ring) } としてCSS 一括適用済み（JS ハンドラ不要）→ §9 / §11 / components.md の記述と一致
• ポインタ先 4 種すべて実在: CLAUDE.md（§5/§7/§8 該当）, docs/ui-conventions.md（§1 に共通 UI コンポーネント全件あり）, docs/projects/issue-176-b-plan-progress.md, docs/decisions.md（[064][067][068] 実在）
• §11 警告が挙げる semantic class（text-muted / alert-error / bg-subtle）・@theme token（--color-primary → text-primary）も global.css に実在
• 章見出しのアンカー参照（§9・components.md → 「11. このプロジェクト（devtools）で実装する場合」）に dangling なし。components.md 方針2 の .btn / .btn-primary / .btn-outline も同ファイル内に定義あり

指摘（1 件・minor）

§11 表の「共通フック（useClampedInput 等）」のポインタが実体と食い違っています（インラインコメント参照）。PR 説明文の「意図的にドロップ」とも矛盾するので、フック行の削除か「src/hooks/ で発見」への置換を推奨します。本 PR の「ドリフト防止」目的に沿った修正です。

この 1 点は任意修正で、merge ブロッカーではありません。

---

Generated by Claude Code

[fumtas1k]

【minor / 任意】この行は「共通フック（useClampedInput 等）」の正本として docs/ui-conventions.md / CLAUDE.md §5・§8 を案内していますが、いずれも useClampedInput を実際には記載していません（ui-conventions.md §1 と CLAUDE.md §5 は UI コンポーネント一覧のみ、CLAUDE.md §8 は src/hooks/ をディレクトリとして列挙しているだけ）。

PR 説明文でも「useClampedInput だけは正本がない…scope creep につき意図的にドロップ（src/hooks/ で発見可能）」と述べており、この表のセルとは食い違っています。本 PR の目的（陳腐化・ドリフト防止＝正本の一本化）に照らすと、ここは:

• フック行を削除する、または
• フックは「src/hooks/ で発見」と明記する

のいずれかにすると、説明文の意図と一致して読者が空振りしません。UI コンポーネント側のポインタ（ui-conventions.md §1）は全件実在を確認済みで問題ありません。

---

Generated by Claude Code

[fumtas1k]

レビューありがとうございます。指摘の通りで、§11 書き換え時に作り込んだ内部矛盾でした（表は「フックの正本あり」、PR 説明文は「索引なしで意図的にドロップ」と食い違い）。

82070ae で対応:

• §11 表からフック句（useClampedInput 等）を削除し、行を UI コンポーネントのみに一本化
• 残した UI コンポーネント行のポインタを docs/ui-conventions.md §1 と章まで明示（全件実在を確認済み）

これで「正本の一本化＝ドリフト防止」という本 PR の目的と表・説明文が一致し、読者が空振りしません。フックの存在自体は CLAUDE.md §8（src/hooks/ をディレクトリとして列挙）と src/hooks/ 配下のコードで発見可能なので、索引消失による実害はありません。

※ 本変更は .claude/skills/ 配下の markdown のみで実行コードに影響しないため、E2E は対象外（pre-commit の Prettier / tsc は通過）。