AgentSkillsCN

ui-ux-design

根据项目设计系统，审查并落实UI/UX设计。可通过“设计审查”“UI改进”“样式设计”“无障碍设计”“暗黑模式”“响应式设计”“布局设计”“组件设计”等指令触发。涵盖视觉一致性、设计系统合规性、无障碍设计、响应式设计，以及暗黑模式。

SKILL.md
--- frontmatter
name: ui-ux-design
description: >
  Reviews and implements UI/UX following project design systems.
  Triggers: design review, UI improvement, styling, accessibility, dark mode, responsive, layout, component design.
  Covers: visual consistency, design system compliance, accessibility, responsive design, and dark mode.

UI/UX Design

プロジェクトのデザインシステムに準拠したUI/UX設計・レビュー・実装を行うスキル。 CLAUDE.md の方針を厳守すること。プロジェクト固有のデザイン規約は docs/development-patterns.md の「デザインシステム」セクションを参照。

基本姿勢

  • •プロジェクトで定義されたデザインシステムに忠実に従う
  • •デザインシステムのURLが docs/development-patterns.md に記載されている場合、そのガイドラインを参照・準拠する
  • •仕様が曖昧な場合はモックアップや選択肢を示して確認する（推測で進めない）
  • •過剰な装飾・アニメーションを避け、使いやすさを最優先する
  • •アクセシビリティ（a11y）を常に考慮する

モード

デザインレビューモード（読み取り専用）

チームのレビュアーとして使用する場合。ソースコードは変更しない。

  1. •視覚的一貫性チェック — デザインシステムとの乖離を指摘
  2. •アクセシビリティ監査 — WCAG 2.1 AA準拠の確認
  3. •レスポンシブ確認 — ブレークポイント別の表示確認
  4. •ダークモード確認 — ライト/ダーク両方での視認性
  5. •レポート出力 — 下記フォーマットで報告

実装モード

UIの実装・修正を行う場合。

  1. •デザインシステム確認 — docs/development-patterns.md のデザインシステムURLを参照
  2. •コンポーネント選定 — プロジェクトの既存UIライブラリから適切なものを選択
  3. •実装 — セマンティックカラー・トークンを使用、ハードコード禁止
  4. •ダークモード対応 — ライト/ダーク両方で動作確認
  5. •検証 — ビルド・lint通過を確認

レビュー観点

1. デザインシステム準拠

  • •プロジェクトで指定されたデザインシステムのガイドラインに沿っているか
  • •カラーパレット・タイポグラフィ・スペーシングが一貫しているか
  • •コンポーネントの使い方がデザインシステムの推奨パターンに合っているか

2. カラー・テーマ

  • •セマンティックカラー（CSS変数・デザイントークン）を使用しているか
  • •ハードコードされた色値がないか
  • •ダークモードで十分なコントラスト比（WCAG AA: 4.5:1以上）が確保されているか
  • •フォーカス状態・ホバー状態のスタイルが定義されているか

3. タイポグラフィ

  • •フォントサイズ・ウェイトがデザインシステムのスケールに沿っているか
  • •見出し階層（h1〜h6）が論理的か
  • •行間・文字間が読みやすいか

4. レイアウト・スペーシング

  • •デザインシステムのスペーシングスケールを使用しているか
  • •グリッド・フレックスの使い方が適切か
  • •余白が視覚的階層を適切に表現しているか

5. アクセシビリティ（a11y）

  • •セマンティックHTMLを使用しているか（button, nav, main 等）
  • •ARIA属性が適切か（過剰でも不足でもなく）
  • •キーボードナビゲーションが可能か
  • •スクリーンリーダーで意味が通じるか
  • •フォーカスインジケータが視認できるか

6. レスポンシブデザイン

  • •ブレークポイントが適切に設定されているか
  • •モバイル〜デスクトップで崩れないか
  • •タッチターゲットが適切なサイズか（44x44px以上推奨）

7. インタラクション

  • •ローディング状態が適切にフィードバックされているか
  • •エラー状態が視覚的に明確か
  • •遷移・アニメーションが自然か（過剰でないか）
  • •空状態（Empty State）のデザインがあるか

レポートフォーマット（レビューモード）

markdown
# UI/UXレビュー: [対象の概要]

## 概要
- 対象ファイル数: X
- デザインシステム準拠: OK / NG
- ダークモード対応: OK / NG
- アクセシビリティ: OK / NG

## 指摘事項

### MUST（必須修正）
- [ ] [ファイル:行] 指摘内容。デザインシステムの該当ガイドライン。修正案。

### SHOULD（推奨修正）
- [ ] [ファイル:行] 指摘内容。理由。修正案。

### CONSIDER（検討）
- [ ] [ファイル:行] 指摘内容。改善の方向性。

## 良い点
- [デザイン面で優れている点]

## 総合判定
- **承認** / **条件付き承認（MUST修正後）** / **要修正**

実装ガイドライン

カラーの扱い

typescript
// OK: セマンティックカラー（デザインシステムのトークン）
className="text-foreground bg-background border-border"
className="text-primary bg-primary/10"

// OK: ダークモード対応のユーティリティ
className="bg-gray-100 dark:bg-gray-800"

// NG: ハードコードされた色値
style={{ color: '#333333' }}
className="text-[#333333]"

スペーシング

typescript
// OK: デザインシステムのスペーシングスケール
className="p-4 gap-3 space-y-2"

// NG: マジックナンバー
style={{ padding: '13px', gap: '7px' }}

コンポーネント選定

プロジェクトの既存UIライブラリを最大限活用する。 新規コンポーネント追加前に、既存のもので代替できないか確認する。

デザインシステムの参照方法

このスキルは docs/development-patterns.md の「デザインシステム」セクションを参照する。 プロジェクトごとに以下の情報が記載される:

  • •デザインシステムの公式URL
  • •UIコンポーネントライブラリ
  • •カラーパレット・トークンの定義場所
  • •アイコンライブラリ

新しいプロジェクトに適用する際は、docs/development-patterns.md にデザインシステムのURLを記載すること。

禁止事項

  • •デザインシステムに定義されていないカスタムカラーの独自追加
  • •ハードコードされた色値（HEX/RGB直指定）
  • •アクセシビリティを無視したデザイン
  • •ダークモード未対応のUI変更
  • •仕様書にないUI要素の追加
  • •--no-verify によるフック迂回