name	design-implementation-guide
description	公開ガイドライン（Material Design 3、Apple HIG、Fluent 2、GOV.UK、WCAG 2.2）に基づき、デザイントークンから実装までをキーボード操作・コントラスト・流体スケール・多言語対応で検証可能な形で提供する。

Overview

このスキルは、アクセシビリティと一貫性を重視したUI実装のガイドラインを提供します。

Files in This Skill

SKILL.md (this file) - 使用場面とルール概要
tokens.md - デザイントークンとStyle Dictionary設定
accessibility.md - WCAG、ARIA、キーボード操作、コントラスト
examples.md - 実装例とサンプルコード

使う場面

フォーム・ボタン・エラー表示を含むインタラクティブUIを新規作成する
既存コンポーネントのアクセシビリティ（ARIA・キーボード操作・コントラスト）を修正する
デザイントークンをWeb/iOS/Android各プラットフォームへ自動出力する
レスポンシブ環境でタイポ・余白を流体スケールで統一する
多言語・縦書き・RTL対応でレイアウトを論理プロパティへ移行する

12のルール

1. トークンを明示せよ

色・余白・文字サイズは全てCSS Custom Propertyで定義し、生値を直書きするな。

2. コントラスト比を数値で保証せよ

本文は4.5:1以上（WCAG AA）、18pt以上または太字14pt以上は3:1以上を維持せよ。

3. 可変フォントとclamp()で流体スケールを実装せよ

文字サイズは clamp(1rem, 0.875rem + 0.5vw, 1.125rem) のように下限・可変・上限を明記せよ。

4. 論理プロパティで物理方向依存を排除せよ

margin-left → margin-inline-start、padding-top → padding-block-start を用いよ。

5. 全インタラクティブ要素をキーボード到達可能にせよ

<button>, <a>, <input> 等のネイティブ要素を優先せよ。

6. 状態（hover/focus/active/disabled）を視覚とARIAで二重に伝達せよ

:focus-visible でフォーカスリングを表示し、aria-disabled="true" でスクリーンリーダーへ通知せよ。

7. エラーは要約→詳細の順で構造化せよ

フォーム送信失敗時、ページ上部に role="alert" でエラー数と各フィールドへのアンカーリンクを配置せよ。

8. エラーメッセージは行動を明示せよ

❌「入力が無効です」→ ✅「メールアドレスに@を含めてください」

9. 同期検証はaria-live、非同期はrole="status"を使い分けよ

入力中のリアルタイム検証は aria-live="polite"、非同期API応答は role="status" を使用せよ。

10. 最小タッチターゲットを守れ

モバイルは44×44px、デスクトップは24×24pxの最小タッチターゲットを確保せよ。

11. レスポンシブブレークポイントは流体スケールで不要とせよ

clamp() による連続スケールで段階的変化を排除せよ。

12. プラットフォーム出力は自動化せよ

tokens.json からStyle Dictionaryで各形式を生成し、手動コピーを禁止せよ。

QAチェックリスト

Tabキーで全インタラクティブ要素へ順番に到達できる
エラー発生時、フォーカスがエラー要約（role="alert"）へ自動移動する
各エラーメッセージが対応する入力フィールドにaria-describedbyで紐付いている
本文のコントラスト比が4.5:1以上
キーボードのみで全コンポーネントの状態が識別可能
ビューポート幅320px～1280pxで文字サイズ・余白がclamp()により連続的に変化する
margin-inline-start等の論理プロパティを使用
状態色が各トーンで一貫したコントラスト比を保つ
tokens.jsonがStyle Dictionary経由で各形式へ出力可能
各ルールに参照元ソースのURLを付与

design-implementation-guide

Install Skill

SKILL.md