feat: DADS 忠実再現デザインシステムを dads-design スキルとして追加 - #623
Conversation
Claude Design でエクスポートした デジタル庁デザインシステム (DADS) v2 忠実再現バンドルを Agent Skill 化して導入する。 - .agents/skills/dads-design/ に配置し .claude/skills/ からシンボリックリンク（既存規約準拠） - 公式トークン CSS（colors / typography / spacing / fonts / base）+ styles.css エントリポイント - React コンポーネント 13 種（jsx / d.ts / prompt.md）+ スタンドアロン版 lib/dads.jsx - ガイドライン specimen HTML・行政ポータル UI キット（ブラウザ直開きで動作） - 既存 dads-design-system スキル（devtools 本体適応値が正本）と役割分担を両 SKILL.md に明記 - デザインツール生成物（_ds_bundle.js 等）と bundle 依存 card.html は除外 - .prettierignore に追加（エクスポート元との diff 容易性のため整形除外） - docs/decisions.md [104] に決定記録を追加 https://claude.ai/code/session_014Vri2Ncq97Vkvg49rrUc4H
🖼️ Visual Regression Test 結果
|
トークン値・コンポーネント構造・サンプル画像の出典である digital-go-jp 各リポジトリ（MIT, Copyright デジタル庁）の著作権表示と非公式である旨を LICENSE.md として同梱し、SKILL.md の caveats から参照する。 https://claude.ai/code/session_014Vri2Ncq97Vkvg49rrUc4H
…m5xl3y # Conflicts: # .prettierignore # docs/decisions.md
fumtas1k
left a comment
fumtas1k
left a comment
There was a problem hiding this comment.
多角的レビュー（#623）
dads-design スキル（DADS 忠実再現バンドル）の追加をレビューしました。スコープは .agents/skills/dads-design/ + .prettierignore + docs/decisions.md の 80 ファイル（src/ 配下のランタイムコード変更なし）。総合的に完成度が高く低リスクで、マージ可と判断します。以下、観点別の所見です。
✅ ローカル検証結果
| チェック | 結果 |
|---|---|
node_modules/.bin/astro check |
0 errors / 0 warnings |
npm run build |
成功（35 pages） |
npm run format:check |
green |
dist/ への bundle 流出（dads-btn / DADS_952a55 / 0017c1） |
なし（後述の Tailwind scan 懸念を実測で否定） |
.claude/skills/dads-design シンボリックリンク |
解決 OK |
| bundle 内の credential / 秘密鍵 | 検出なし |
セキュリティ
- ✅ サプライチェーン:
ui_kits/gov-portal/index.htmlの CDN スクリプト（React / ReactDOM / Babel standalone）はいずれも SRIintegrityハッシュ +crossorigin="anonymous"付き。改ざん耐性が確保されており良好。 - ✅ XSS: React コンポーネントに
dangerouslySetInnerHTML/eval/new Functionなし。guidelines/*.htmlのinnerHTML使用箇所はループ index・スケール段階値などの静的値のみで外部入力を含まず、注入リスクなし。 - ✅ これらは devtools 本番サイトから配信されない参照専用アセットであり、プロダクト実行時の攻撃面は実質ゼロ。
⚠️ （軽微）CDN はreact.development.js（dev ビルド）を参照。プロトタイプ用途では妥当だが、共有/ホストする場合は prod ビルドが望ましい。Google Fonts CDN 依存と併せ SKILL.md / decisions に caveat 済み。
フロントエンドデザイン / a11y
- ✅ デュアルフォーカスリング（2px yellow + 4px 黒 outline）が
.dads-focus/:focus-visibleで全インタラクティブ要素に一貫適用。 - ✅
aria-disabled/aria-invalid/type="button"デフォルト等を各プリミティブが保持。 - ✅ semantic な
dads-*クラス命名で、primitive color 直書きの流出なし。プロジェクトの DADS 規約と整合。
ロジック / 正当性
- ✅
Button.jsx:hrefかつ非 disabled 時のみ<a>、それ以外は<button>+ disabled 制御。妥当。 - ✅
lib/dads.jsx:def()ガードで既存window.DADS_952a55を上書きしない冪等登録。スタンドアロン動作の設計意図がコメントで明示されており納得感がある。
アーキテクチャ
- ✅ 既存
dads-design-systemと統合せず併設する判断は適切。本体の適応値#1a56dbと公式値#0017c1の token ドリフトを回避でき、両 SKILL.md の相互参照 + decisions [122] で source-of-truth 分離が明文化されている。 - ✅ コンパイラ生成物（
_ds_bundle.js等）・bundle 依存*.card.htmlを除外する整理は健全。既存 vendored skill の配置規約（.agents/skills/+ symlink +.prettierignore）にも準拠。
テスト / 検証
- ✅ ランタイムコード変更がないため E2E / unit 追加なしは妥当（vendored skill の前例と整合）。
.prettierignore登録によりエクスポート元との整形 diff を許容する設計判断も decisions に記録済み。
指摘（いずれもブロッカーではない）
- 【軽微・要修正】PR 本文の参照番号ずれ: 本文は「
docs/decisions.md[104]」と記載していますが、実際のエントリは [122]（.prettierignoreのコメントは正しく [122] を参照）。本文を [122] に修正推奨。 - 【任意・防御的ハードニング】Tailwind v4 の content scan:
src/styles/global.css:11は@source not "../../docs";で docs のみ除外しており.agents/は除外していません。Tailwind v4 はプロジェクトルートを自動スキャンするため、今回は bundle に utility 風クラスがなく実測でdist/流出ゼロですが、将来 bundle 内ファイルにbg-blue-500等のリテラルが混入すると本番 CSS をサイレント汚染しうる（CLAUDE.md §7.2 の事故クラス）。@source not "../../.agents";を追加しておくと防御的。別 PR / issue でも可。
総じて、ドキュメント・帰属表示（MIT / digital-go-jp）・caveat が丁寧に整備された質の高い追加です。上記 1 のみ軽微修正の上でマージ可。
Generated by Claude Code
|
レビューありがとうございます。2 件の指摘に対応しました。 指摘1（PR 本文の参照番号ずれ）— 修正済みPR 本文の 指摘2（Tailwind content scan の防御的除外）— 別 issue 化（#726）本 PR では入れない判断をしました。理由を実測で確認したためです。
→ 現状の即時リスクはゼロです（バンドルは独自 検証: Generated by Claude Code |
fumtas1k
left a comment
fumtas1k
left a comment
There was a problem hiding this comment.
再レビュー — 指摘 2 件とも解消、マージ可 ✅
対応を確認しました。head SHA は f95ac99 のまま（コード変更なし・PR 本文 + 運用判断の更新）で、前回の検証結果（astro check 0 errors / build 成功・dist/ 流出 0 / format:check green）はそのまま有効です。
指摘1（PR 本文の番号ずれ）— ✅ 解消
本文の docs/decisions.md 参照が [104] → [122] に修正され、実エントリ番号・.prettierignore コメントと一致しました。
指摘2（Tailwind content scan の防御）— ✅ 妥当な判断、#726 で追跡
むしろ私の元指摘より踏み込んだ正しい結論に到達しています。陽性対照（.agents/ にサニチネル bg-fuchsia-700 を置いてビルド）で検証した結果:
@source not "../../.agents"（dir //**//**/*いずれも）ではdist/への漏れを止められない =@source notは隠しディレクトリ（先頭ドット）を除外できない- かつ
.agents/は実際にスキャンされている（サニチネルが漏れる）ことが判明 → 将来 bundle にリテラルが混入すれば本番 CSS をサイレント汚染しうる、という潜在リスクは実在する
ここで効かない @source not を入れれば「検知ゼロで green」の誤った安心感を生む（test-gates / PR #233 の事故クラス）ため、入れずに #726 へ切り出した判断は適切です。即時リスクは実測ゼロ（バンドルは dads-* クラス・CSS 変数のみで Tailwind utility リテラルなし）であり、本 PR をブロックする理由になりません。
#726 の提案手法 1（tests/meta/ で .agents/skills/** を grep し utility リテラルを検出・陽性対照併設）が、ビルド不要・§7.2 の発生源を直接塞ぐ・test-gates 準拠という点で最も筋が良いと思います。
LICENSE.md の明示追記も含め、ドキュメント・帰属・caveat が一貫して整備されています。マージに支障なしと判断します。
Generated by Claude Code
fumtas1k
left a comment
fumtas1k
left a comment
There was a problem hiding this comment.
多角的レビュー（独立検証パス）— #623
dads-design バンドル（80 ファイル / +2599、src/ ランタイム変更なし）を、既存の 2 レビューとは独立に再検証しました。結論: 完成度が高く低リスク、マージ可。先行レビューの主要主張を実測で裏付けた上で、新規の軽微な所見を 1 点追加します。
🔬 独立検証結果（head f95ac99）
| 項目 | 結果 |
|---|---|
npx prettier --check .agents/skills/dads-design/** |
✅ green |
Tailwind utility リテラル混入（(bg|text|border|…)-(blue|red|…)-\d{2,3} を bundle 全体に grep） |
✅ 0 件（#726 の即時リスクは実測ゼロを再確認） |
secret / 秘密鍵 grep（api_key/BEGIN … PRIVATE KEY/ghp_/sk- 等） |
✅ 検出なし（hit は docs 中の "token" 語のみ） |
.claude/skills/dads-design symlink |
✅ ../../.agents/skills/dads-design に解決 |
innerHTML 使用箇所（guidelines 5 ファイル） |
✅ ループ index・スケール段階値などの静的値のみ、外部入力なし → XSS なし |
セキュリティ
- ✅ サプライチェーン:
ui_kits/gov-portal/index.htmlの CDN 3 本（react / react-dom / @babel/standalone）はすべて SRIintegrity（sha384）+crossorigin="anonymous"付き。形式は正当。改ざん時は読み込みが fail-safe に停止するため、ハッシュ値の正否に関わらず「改ざんスクリプトの実行」は起きない設計。⚠️ 補足: 当環境の network policy が unpkg.com を403 CONNECT tunnel failedで遮断するため、ハッシュ値の正しさ自体はこの場で照合できませんでした。値の検証が必要なら policy 緩和環境でcurl -sSL <url> | openssl dgst -sha384 -binary | openssl base64 -Aを回す想定。機構の適用は正しい。
- ✅ React コンポーネント /
lib/dads.jsxにdangerouslySetInnerHTML/eval/new Functionなし。 - ✅ 本番サイトから配信されない参照専用アセットであり、プロダクト実行時の攻撃面は実質ゼロ。
フロントエンドデザイン / a11y
- ✅ デュアルフォーカスリング（2px yellow-300 + 4px 黒 outline）が
index.html/styles.cssで全インタラクティブ要素に一貫適用。 - ✅ 各プリミティブが
aria-invalid/aria-disabled/aria-hidden（装飾 SVG）/type="button"デフォルトを保持。Selectは native<select>+ 装飾 chevronaria-hidden、Accordionは<details>/<summary>ベースで a11y 健全。
ロジック / 正当性
- ✅
Button:href && !disabledのときのみ<a>、それ以外は<button>+disabled制御。type={rest.type ?? 'button'}の後に{...rest}を展開しても、未指定時は rest にtypeキーが無く既定'button'が残る／指定時は同値で上書きされるため矛盾なし。 - ✅
lib/dads.jsx:def()ガード（if (!NS[name]) …）でwindow.DADS_952a55を上書きしない冪等登録。スタンドアロン動作の意図がコメントで明示。
アーキテクチャ
- ✅ 既存
dads-design-system（本体適応値#1a56db）と統合せず併設し、公式値#0017c1のトークンドリフトを回避する判断は適切。両 SKILL.md の相互参照 +decisions [122]で source-of-truth 分離が明文化。 - ✅ コンパイラ生成物（
_ds_bundle.js等）・bundle 依存*.card.htmlの除外、vendored skill 規約（.agents/skills/+ symlink +.prettierignore）準拠も健全。
テスト / 検証
- ✅
src/ランタイム変更なしのため E2E / unit 追加なしは妥当。.prettierignore登録の整形除外も decisions に記録済み。
新規の所見（先行 2 レビュー未指摘・いずれもブロッカーではない）
-
【軽微・情報】
lib/dads.jsxのLabelがインラインstyle={{ display:'inline-flex', … }}を使用。CLAUDE.md §2.1 / §7（CSPunsafe-inline撤去）のstyle={{}}禁止はsrc/配下が対象で、本バンドルは参照専用・本番非配信のためスコープ外＝今回の問題ではない。ただしエージェントがこの Label をそのままsrc/へ転記すると §7 違反になりうるため、SKILL.md の caveat か当該 Label のコメントに「src/転用時は@layer componentsクラス化が必要」と一言あると事故予防になる（任意）。 -
【運用】本 PR は依然 draft。レビュー観点ではマージ可なので、ready 化 → squash マージへ進めて問題なし（feature → develop は
--squash、§6.3.1）。
既存指摘の追認
- 指摘1（本文
[104]→[122]）解消済みを確認。 - 指摘2（Tailwind content scan）:
@source notが隠しディレクトリを除外できない実測結論・#726 切り出しは妥当。今回 bundle にリテラル 0 件を独立に再確認したため即時リスクなし。#726 の「tests/meta/で.agents/skills/**を grep + 陽性対照」案がビルド不要・§7.2 の発生源を直接塞ぐ点で最善という評価に同意。
総じて、出典・帰属（MIT / digital-go-jp）・caveat が一貫整備された質の高い追加で、マージに支障なしと判断します。
Generated by Claude Code
2 participants
概要
Claude Design (claude.ai/design) でエクスポートした デジタル庁デザインシステム (DADS) v2 忠実再現バンドル を Agent Skill
dads-designとして導入する。公式リポジトリ（digital-go-jp/design-system-example-components-react / design-tokens 等）から転記された公式トークン値（
blue-900 #0017c1・yellow-300デュアルフォーカスリング・Solid Gray 階調）を含む、依存ゼロのデザインシステムパッケージ。変更内容
.agents/skills/dads-design/を新規追加（.claude/skills/からシンボリックリンク。既存スキルの配置規約に準拠）SKILL.md— 用途の切り分け表・主要ファイル索引・DADS デザイン絶対条件・caveatsreadme.md— コンテンツ原則 / ビジュアル基盤 / アイコン方針（バンドル由来）tokens/+styles.css— 公式トークン CSS（colors / typography / spacing / fonts / base）と単一エントリポイントcomponents/— React プリミティブ 13 種（*.jsx/*.d.ts/*.prompt.md）+components.csslib/dads.jsx— スタンドアロン版（CDN React + Babel standalone で動作）guidelines/— カラー / タイポグラフィ / 余白 / ブランドの specimen HTMLui_kits/gov-portal/— 行政手続きポータル UI キット（index.htmlをブラウザ直開きで動作）assets/— プレースホルダーブランドマーク + サンプル写真LICENSE.md— 出典（MIT, Copyright デジタル庁）の帰属表示・非公式である旨dads-design-systemスキルに相互参照を追記: 本体（src/配下、--color-primary: #1a56db）の正本は従来どおり既存スキル + CLAUDE.md §7。プロトタイプ / モック / 公式値参照は新スキル、という役割分担を両 SKILL.md に明記docs/decisions.md[122] に統合しない判断・除外物（_ds_bundle.js等の生成物 / bundle 依存*.card.html）の理由を記録.prettierignoreにバンドルを追加（エクスポート元との diff 容易性のため整形除外。vendored skill の前例に準拠）検証
node_modules/.bin/astro check: 0 errorsnpm run build: 成功 /dist/への bundle 流出なし（実測）npm run format:check: greensrc/配下のランタイムコード変更なし（スキルファイル追加のみ）のため対象外注意（バンドル由来の caveat）
レビュー指摘への対応
docs/decisions.md参照を[104]→[122]に修正（本コメント）。@source notは隠しディレクトリ（.agents/、.claude/symlink 経由含む）を除外できないことが判明したため（docs=非隠しでは有効）、効かない除外を入れる（検知ゼロで green になる事故クラス）ことは避け、現状の即時リスクがゼロ（バンドルに Tailwind utility リテラル皆無を実測確認）であることを踏まえ、正しい防御手法を別途検討する。https://claude.ai/code/session_014Vri2Ncq97Vkvg49rrUc4H