ui-craft

UI クラフト

プロジェクトのビジュアルとコピーの規範、提供済みのプリミティブ一覧、実際のランタイム動作を使用します。キーボード／フォーカス操作、サポートされている状態、意味のあるラベル、コントラスト、モーション低減、トークンの管理元を維持します。

小規模な編集では、影響を受けるコンポーネントや状態を調べ、既存の判断を再利用します。新しい画面や大幅な再設計では、実際のデザイン上の判断を解決できる場合に、ユーザーの作業、シーン、表現のトーン、ビジュアル調整項目を簡潔に定める必要があるかもしれません。あらゆる微調整で必須となる成果物ではありません。

• 該当するデザイン／トークン／コピーの契約を確認します。生成されたドキュメントとランタイムトークンが一致しない場合は、プロジェクトの正規ソースのルールに従い、管理元のツールで再生成します。
• 既存のプリミティブとサポートされている状態を再利用します。プロトタイプを成立させるために、コントロール、指標、補助コピー、ブランドのバリエーション、ホストの外枠を新たに作りません。
• 変更したインタラクション／ビジュアルの動作に合わせて検証します。影響を受ける状態をレンダリングし、インタラクションを変更した場合はキーボード／フォーカスを確認し、必要に応じて名前付きの参照と比較します。現在の検証結果を再利用します。画面全体を対象とするマトリクスや、すべてのブレークポイントを網羅する確認には、それに見合った対象範囲が必要です。
• 実際の階層、はみ出し、トークンの乖離、誤解を招くインタラクション、アクセシビリティ上の不具合を確認します。主観的な好みを一律のマージ阻止要因に変えてしまう、固定の採点表は避けます。
• デザインの規範を更新するのは、トークン／パターンに実際の変更がある場合に限り、コード生成で管理されている場合は、その生成ツールを通じて更新します。任意の参照資料がないことは、新しいデザインシステムを足場から構築する理由にはなりません。

ニーズ別リファレンス

該当するセクションと、その必要な依存関係を使用してください。この表は参照用であり、すべてを読み込むための一覧ではありません。assets/state-matrix.md、assets/pre-ship-checklist.md、assets/ui-audit-template.md は、大規模なデザイン／監査タスクで使用できる任意の作業フォーマットです。通常の変更では、簡潔な根拠で十分です。

該当するケース	ファイル	内容
新しい画面のデザイン／ユーザビリティ監査	references/usability-foundations.md	ニールセンの10原則、UX の法則、段階的開示、メンタルモデル
インタラクティブなウィジェット（ダイアログ、メニュー、コンボボックス、タブ、スライダー）すべて	references/accessibility-floor.md	WCAG 2.2 AA の必須要件、ARIA パターン、検証手順
ボタン／入力欄／ダイアログ／ナビゲーション／テーブル／カード／ドロップダウン／タブ／トースト	references/component-patterns.md	コンポーネントごとの状態、キーボード操作の要件、アクセシビリティ、よくある問題
ユーザーに表示されるテキストの作成／レビュー	references/microcopy-quality.md	使用禁止の語彙、画面ごとのトーン、エラー／空状態／CTA のテンプレート
AI 生成 UI の監査	references/ai-slop-patterns.md	14 のパターンの変更前／変更後と改善方法、検出プロンプト
デザイン上の判断の再検討が必要な場合	references/anti-defaults.md	階層、読みやすさ、インタラクションに関する状況別の代替案
AI／エージェント向け画面の構築	references/human-ai-ux.md	Microsoft の18項目＋IBM の4つの柱、ストリーミング／引用／信頼度 UI
DESIGN.md、トークン、shadcn/Radix、コード生成ルールの確認／拡張	references/design-system-integration.md	DESIGN.md のセクション、トークン管理、Figma/Code Connect
トークンシステムがない場合、またはスケールの拡張	references/visual-craft.md	タイポグラフィ／色／余白／角丸／エレベーション／モーションのデフォルト値
アニメーションの追加／レビュー	references/motion-patterns.md	時間の区分、イージング、CSS/Framer/@starting-style、視差効果を減らす設定
ダークモードの実装／レビュー	references/dark-mode.md	サーフェスの明度による階層化、アクセントカラーの彩度低下、危険な色の組み合わせ
速度低下が確認された場合、パフォーマンスに影響する変更、または監査の依頼	references/performance.md	計測、読み込み中のフィードバック、関連する最適化、プロジェクトの予算
「[Linear/Notion] のような X が必要」	references/archetypes.md	7つのアーキタイプ、それぞれ6要素からなる特徴の要件

ヘルパー

実際のスキルディレクトリ（<ui-craft-dir>）から以下を解決し、対象の質問に必要な場合にのみ実行してください。

• node <ui-craft-dir>/scripts/check-contrast.mjs — 変更したレンダリング済みの色を読み取り専用でコントラスト計算します。
• node <ui-craft-dir>/scripts/detect-token-drift.mjs — 読み取り専用でトークンのずれをスキャンします。不変条件をプロジェクトの lint／コード生成ですでに管理している場合は、そちらの根拠を使用してください。
• python3 <ui-craft-dir>/scripts/validate-metadata.py — オーサリングメタデータを検証します。

トレードオフについては、ユーザーの明示的な決定とプロジェクトの規範に従ってください。重要な制約は正直に記録してください。このスキルを使用したという理由だけで、現場への聞き取り、デザイン監査、または別の承認を強制しないでください。