# デザインレビュー (design-review)

> デザイナーの目で実際のサイトの不統一、余白、階層、AI っぽさ、遅い操作を洗い出し、一件ずつ修正して再確認します。

- カテゴリ: [UI・インタラクション](https://www.myskills.tools/ja/categories/ui-interaction/)
- 提供元: コミュニティ · Garry Tan
- リポジトリ: https://github.com/garrytan/gstack/tree/main/design-review (commit ed10791 · v2.0.0)
- SKILL.md: https://github.com/garrytan/gstack/blob/main/design-review/SKILL.md
- インストールコマンド: `npx skills add garrytan/gstack --skill design-review`
- ライセンス: MIT
- 対応ツール: Claude Code, Codex, Cursor, Copilot
- 権限: read-repo ✓, write-files ✓, shell ✓, network ✓
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。
- ⚠ 修正ごとに git コミットし（開始前に未コミットの変更をコミットまたは stash することがあります）、ログイン済みのブラウザセッションでサイトを操作します。

## 基本ルール

指摘ごとに最小限の修正を行って個別にコミットし、回帰が出たら元に戻します。

## 実行フェーズ

1. **準備** — 対象 URL を決め（URL がなく機能ブランチなら差分に限定）、DESIGN.md やコード内のトークンを読み、git の作業ツリーがクリーンであることを求めます。
2. **デザイン監査** — ブラウザでスクリーンショットを撮り、第一印象、実際のデザインシステム抽出、ページ別チェック、操作フロー、ページ間の一貫性を確認します。指摘には必ず画像を付けます。
3. **優先度付けと修正** — 影響度順に並べ、CSS 優先で最小限に修正し、一件ごとにコミットして再テストします。リスクが20%を超えたら止めて確認し、上限は30件です。
4. **最終監査と報告** — 影響ページを再監査して前後のスコアを算出し、修正状況と前後比較を含むレポートを書き、TODOS.md を更新します。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 一部で必要 | 指摘に直接関係するソースだけを変更し、回帰テストの新規作成、レポート、同意を得た DESIGN.md は可能です。CI 設定と既存テストは変更しません。 |
| コマンド実行 | 必要 | git、ブラウザ操作スクリプト（Aside または gstack のブラウザ）、gstack の補助ツール、テストコマンドを実行します。 |
| 外部通信 | 必要 | 対象サイトにアクセスし、WebSearch を使い、Codex に外部意見を求めることがあります。 |

## SKILL.md のフロントマター（YAML）

```yaml
---
name: design-review
preamble-tier: 4
version: 2.0.0
description: "Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack)"
allowed-tools:
  - Bash
  - Read
  - Write
  - Edit
  - Glob
  - Grep
  - AskUserQuestion
  - WebSearch
triggers:
  - visual design audit
  - design qa
  - fix design issues
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/design-review/