ss-review

このワークフローの前に、セッションごとに一度だけ 更新の事前確認 を実行してください。

UI デザインレビュー

レジストリ優先の成果物境界

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求された成果物 ID を解決し、その後 .styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み取ります。レジストリを使用するプロジェクトでは、グローバルな従来のバンドルにフォールバックしないでください。従来型のプロジェクトでは、レジストリが存在しない場合に限り .styleseed/effective-rules.md を使用できます。

レジストリファイルのいずれかが存在する場合は、両方のファイルと有効な成果物設定を必須とします。選択した成果物のバンドルとマニフェストのみを使用してください。不完全なレジストリは従来型のプロジェクトではありません。 レジストリファイルがどちらも存在しない場合に限り、.styleseed/effective-rules.md と .styleseed/manifest.json を読み取ります。選択したバンドルが存在しないか古くなっている場合は、不足している 証拠を報告してください。レビューのみのリクエスト中に再生成したり、準拠が確認済みであると主張したりしないでください。 フレームワークの規約を確認する前に、タスクへの適合性と文法の整合性を確認してください。Web 以外の成果物では、 React／Tailwind 専用のチェックを、使用中のアダプターのレンダー／エクスポートチェックに置き換えてください。

レビュー範囲

レビューと推奨のみを行い、実装やプロジェクト設定は編集しないでください。問題の修正依頼は、適切な編集ツールを使う別個の実装ステップを許可するものであり、この読み取り専用スキルの範囲を拡張するものではありません。ユーザーからより限定的な依頼があれば、それに従ってください。各違反について、選択された規約を引用してください。重大な不備、規約からの逸脱、任意の提案、不足している証拠を区別してください。以下のライブラリ規約は、プロジェクトがそれらの規約を使用している場合にのみ適用されます。

使用しない場合

• アクセシビリティのみの問題の場合 → /ss-a11y を使用
• Nielsen の UX ヒューリスティックの場合 → /ss-audit を使用
• 簡易な自動チェックの場合 → /ss-lint を使用
• UI 以外のコード（データ取得、ビジネスルール）の場合

ファイルをレビューしてください：$ARGUMENTS

チェックリスト

1. デザイントークンとレシピへの準拠

• ハードコードされた 16 進カラー値を使用していない（text-foreground、bg-brand などのセマンティックトークンを使用）
• Tailwind でハードコードされた px 単位の間隔を使用していない（p-[24px] ではなく p-6 を使用）
• パターンの形状やエレベーションには、選択したレシピまたは明示的なセマンティック変数を使用
• 無関係なレシピ全体で、ハードコードされた汎用の rounded-2xl + shadow + mx-6 を使用していない

2. コンポーネントの規約

• data-slot 属性を使用
• className のマージに cn() を使用
• Props の型に React.ComponentProps<> を使用
• className prop による上書きに対応
• 名前付きエクスポートを使用（コンポーネントにデフォルトエクスポートを使用しない）
• className を追加するだけのラッパーコンポーネントがない

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

• タッチ操作面でのタッチターゲットは 44x44px 以上。アダプターと承認済みコンポーネントの規約が対応している場合、ポインター操作を優先するデスクトップコントロールでは 36～40px でも可
• すべてのインタラクティブ要素に focus-visible スタイルを適用
• 必要な箇所に適切な aria-* 属性を設定
• 色のコントラストが WCAG AA を満たす（テキストは 4.5:1、大きなテキストは 3:1）
• アニメーションが prefers-reduced-motion に対応
• 画像に alt テキストを設定
• フォーム入力に対応するラベルを設定

4. 表示面のベストプラクティス

• 水平方向にはみ出さない
• インタラクティブ要素間にタッチしやすい間隔を確保
• アダプターで必要な場合、モバイルのセーフエリアのインセットを処理
• デスクトップの密度／文字組み、およびWeb以外のキャンバス／エクスポートの規則が、選択したアダプターに準拠
• アダプターの表示距離と対応ズーム倍率で、テキストを読みやすく保つ
• スクロール可能なコンテナーに -webkit-overflow-scrolling: touch を設定

5. パフォーマンス

• 不要な再レンダーがない（必要に応じて参照を安定させ、メモ化）
• 画像を遅延読み込み
• 重いコンポーネントをコード分割

6. タイポグラフィ

• 固定された書体ファミリーと、レシピに適合するタイポグラフィの役割を使用している
• サイズ、ウェイト、行送り、字間が、コンパイル済みのタイポグラフィの役割と承認済みトークンに従っている
• ディスプレイ、見出し、本文、キャプションの役割が、対象となる表示面のサイズで区別されている
• 言語、文字体系、折り返し、ズームによって、クリッピングが生じたり、読みづらくなったりしない
• ハンドブックのタイポグラフィの例はデフォルトであり、承認済みの文字サイズのスケールを置き換える根拠にはならない

7. 余白の一貫性

• 余白には、維持管理された単一のトークンスケールと、選択したレシピの主要なリズムを使用している
• スケール外の値には、視覚的な調整、キャンバス、またはプラットフォーム上の理由がある
• w-* h-* ではなく size-* の省略記法を使用している
• ml-*/mr-* ではなく ms-*/me-* を使用している（論理プロパティ）
• モーションのトランジションにはデザイントークンを使用している（duration-[var(--duration-fast)]）

8. 一貫性（VISUAL-CRAFT.md §C0 —「軸ごとに1つの選択」という原則）

UIが「AI生成」と感じられる最大の理由は、個々のパーツが見苦しいことではなく、パーツ同士が混在していることです。すべてのコンポーネントで値を同一にするのではなく、役割を定めた意図的なシステムが1つあるかを確認してください。

• レシピに基づく角丸のスケール — サーフェス、コントロール、コンパクトな選択肢、ネストされた要素が、それぞれ承認済みの役割に従っている。たとえば、calm-consumer では外側のサーフェスに12～20px、真にコンパクトな選択肢にピル型のコントロールを使用できます。この有効な組み合わせではなく、理由の説明できない不統一を指摘してください。
• 識別しやすい主要アクションが1つあり、それに加えて選択した文法の安定したセマンティック、カテゴリ、またはブランドの役割のみを使用している — 装飾的な強調色が競合していない
• UIアイコンに絵文字を使用していない（リスト／ナビゲーション／ステータス／カテゴリのマーカーに🚗🧺⭐を使用しない） — 絵文字は制御できない色を多数持ち込むため、currentColor を使用する単一のラインアイコンセットを使用する
• 選択した文法とパレットのもとで、ステータスとカテゴリの色に安定した役割がある。重大度を区別でき、通常状態が緊急状態と競合しない
• 契約されていない装飾色がない — 追加の色には、文書化されたセマンティック、カテゴリ、エディトリアル、またはブランド上の役割が必要
• 影の表現が統一されている — 光の方向、スケール、色合いが共通している。黒い影と色付きの影、上から照らす影と下から照らす影が混在していない
• ファイル全体でアイコンファミリー／塗りつぶしモード／線幅が統一されている
• ネストされた輪郭 — レシピの入れ子状の角丸の関係を使用している。同心状の角丸長方形では max(0, outer − padding) が便利なデフォルトですが、すべての形状に適用する規則ではありません
• コントロールの高さが一貫している — ボタン、入力欄、セレクトが同じ高さのセットを共有している（例：40px）。
• エラー／状態を色だけに頼って伝えていない（アイコンとテキストも使用する）。

出力形式

以下を提示してください。

1. スコア：合格／改善が必要／不合格
2. 問題点：ファイル名と行番号を添えて、違反事項を列挙
3. 修正案：各問題に対する具体的なコード変更