Communitygithub.com

theme-review

ユーザーがUIテーマ、デザイントークン、またはテーマに対するビジュアルの一貫性とコンポーネントの再利用について、デザインやコードベースのレビューや監査を依頼した場合のみ使用します。一般的なコードレビュー、UXフローレビュー、またはUI以外の作業には使用しないでください。

theme-review とは?

このスキルは、プロジェクトが自身のテーマにどの程度従っているかを監査します。テーマファイル自体の健全性、およびデザインやコードが実際にテーマを使用しているかをチェックし、発見事項をランク付けしたリストとテーマの変更案を出力します。監査は常にプロジェクトの既存テーマに基づいて行われ、新しいテーマをでっち上げることは絶対にありません。テーマに不足がある場合は、新たなパレットを作成するのではなく、`theme`スキルが追加するための提案として報告されます。コード内の生の値、トークンの未使用、カラーの重複、グリッドから外れたスペーシングなどをスクリプトで検出し、最終的には人間が確認して確定的な発見事項とします。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mrgnhnt96/ultrahand/tree/main/skills/theme-review

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ultrahand: theme-review

プロジェクトが自身のテーマにどの程度従っているかを監査する。テーマファイル自体が健全かどうか、そしてデザインとコードが実際にテーマを使用しているかを確認する。出力はランク付けされた発見事項のリストと、提案されたテーマ変更のリストである。レビュー担当者はプロジェクトのテーマに基づいて構築し、決して新しいテーマをでっち上げてはならない。テーマにギャップがある場合は、themeスキルが追加するための提案となり、新しいパレットをでっち上げるものではない。

ルールは shared/theme/rules.md (非交渉事項 NN-n、創造的な軸 CR-n、進化ルール EV-n) にあり、すべてのチェックは references/checklist.md にあり、両方とも shared/theme/sources.md を引用している。テーマを超えたUXの問題(フロー、ラベル、プラットフォームの慣習)については、代わりに review スキルを参照すること。

以下のスクリプトは ${CLAUDE_PLUGIN_ROOT}/shared/theme/ に存在する。

1. テーマとターゲットを取得する

  • テーマ: design/THEME.md とトークンファイルを見つける(theme スキルのステップ1と同様に検索する)。THEME.md を読む:その個性、どの決定がロックされているか、コンポーネント一覧、そして変更履歴。これらがターゲットが準拠すべき基準である。
  • テーマがまだない場合: 自分で作り上げない。node scan.mjs <src dir> を実行して、コードが現在使用している値を表示し、非交渉事項に対してのみレビューする。そこからテーマを抽出するために theme スキルを推奨し、スキャンで見つかった主要なクラスターをレポートの出発点として記載する。
  • ターゲット: コード(ソースフォルダ、差分、またはPR)、キャンバスのアーティファクト、またはスクリーンショット。review と同様に、どれに該当するかを明記し、各発見事項に Confirmed(コード、トークンファイル、またはキャンバスで測定)または Likely(画像から判断)のマークを付ける。差分の場合は、変更内容をレビューし、追加されたドリフトがあれば指摘する。

2. チェックを実行する

  1. テーマファイル: node check.mjs design/theme.tokens.json --json。すべてのエラーが発見事項となる。両方のスキームのコントラストテーブルを読む。
  2. コード内のトークン使用: node scan.mjs <src dir> --theme design/theme.tokens.json。
    • トークンと一致する生の値: テーマ値のハードコードされたコピー。テーマが変更されたときに、これらは変更されない [HIG-COLOR] [PRIMER-LINT]。
    • トークンがない値: テーマからのドリフト。それぞれは、間違い(最も近い表示されているトークンにスナップする)か、実際のニーズ(トークンを提案する)のいずれかである。
    • どのファイルも言及していないトークン: 使用されていない可能性がある。削除を提案する前に確認すること。スキャンはパターンによって名前を照合する。
    • ほぼ重複した色 と グリッドから外れたスペーシング: 行ごとではなく、クラスターごとに1つの発見事項。 また、コード内でプリミティブトークンが直接使用されていないかも検索する(primitive.、またはプラットフォームに相当するもの)。これはロールをスキップしている(NN-1)。
  3. キャンバス上またはライブページ上: レビュー対象の要素の計算済みスタイルを読み取る。構成監査(shared/composition/audit.mjs、shared/input/drive.mjs 経由で実行)は、コントロールのスタイル、タイプサイズ、セクションごとのギャップを報告し、2番目のボタンスタイルや迷子のタイプサイズを即座に表示する。
  4. references/checklist.md のパスを順に実行する:テーマの健全性、トークンの使用、コンポーネントの再利用、画面間の一貫性、両方のスキーム、そしてキャラクター。

スクリプトはパターンを見つけるのであって、証明するわけではない。各リードを開いて確認してから、発見事項とする。

3. 評価して報告する

review と同じ0–4のスケール(そのチェックリストの重大度ガイドを参照)で評価し、このスキルのチェックリストにあるアンカーを使用する。多数の場所に存在する1つの問題は、カウントと主要な場所を持つ1つの発見事項とする。

## 評決
<テーマのバージョンとターゲット、証拠、重大度別のカウント、ドリフトの最大の原因。>

## 発見事項
### T1 · 3 Major · <短いタイトル>
- **場所:** <file:line、screen › element、または token path>; ×<count>
- **証拠:** Confirmed | Likely
- **問題:** <何がドリフトしているか、そしてそのコスト:人々が目にする不整合、または次のテーマ変更に追随しない値>
- **ルール:** <NN-n / EV-n / CR-n> [<source key>]
- **修正:** <具体的に:「#8e3f27 を var(--color-primary) に 3箇所で置き換え」>

## 提案されたテーマ変更
<theme スキルが適用するため。それぞれ:追加 / 非推奨 / ロック、トークンまたは決定、エイリアスとしての値、理由、そしてそれを必要とする発見事項。既存のトークンで既にカバーされているものは省略する。>

## うまく機能している点
## チェックされなかった点

修正はテーマの範囲内に留める:まず既存のトークンにスナップし、次にトークンを提案し、非交渉事項を破る値を決して提案しない。コード修正の適用を提案し、提案された変更に対して theme スキルを実行することを提案する。

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

関連スキル