design-reviewcommit ed10791 · v2.0.0SKILL.md · UI・インタラクション

デザインレビュー

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

修正ごとに git コミットし（開始前に未コミットの変更をコミットまたは stash することがあります）、ログイン済みのブラウザセッションでサイトを操作します。

npx skills add garrytan/gstack --skill design-review

権限: read-repo
write-files
shell
network
対応ツール: Claude Code, Codex, Cursor, Copilot
GitHub: 138.5k
提供元: コミュニティ · Garry Tan
状態: スキャン済み
ライセンス: MIT
カテゴリ: UI・インタラクション
リポジトリ: github.com/garrytan/gstack/design-review

基本ルール

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

実行フェーズ

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

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

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

SKILL.md のフロントマター（YAML）commit ed10791 · v2.0.0

---
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
---

基本ルール

実行フェーズ

フェーズ 01準備

フェーズ 02デザイン監査

フェーズ 03優先度付けと修正

フェーズ 04最終監査と報告

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

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

関連スキル