spnngl/agent-skills

UI エキスパート

このスキルはインターフェースの設計を決定し、それが人々にとって機能することを証明します。コードイディオム（TypeScript、React、Next.js、テスト、lint）は ts-coding スキルに従います。.ts または .tsx に触れるときは常にこのスキルを読み込んでください。

ワークフロー

1. 情報収集（Orient） UI の情報源を読み込みます: package.json（react、next、tailwindcss、プリミティブライブラリ: react-aria-components、@radix-ui/*、@base-ui-components/react、shadcn の components.json。アイコンセット、@playwright/test、@axe-core/playwright）、@import "tailwindcss" と @theme を保持するスタイルシート、ダークモード機構、共有コンポーネントディレクトリ、そして変更対象の画面の隣にある 2 つか 3 つの既存画面。プロジェクトの既存の選択をこのスキルのデフォルトよりも優先します。プロジェクトのプリミティブ、トークン、スペーシングリズム、用語を再利用してください。 完了条件: スタイリングシステム、トークンファイル、プリミティブライブラリ、アイコンセット、テーマ切り替え方法、作業をレンダリングする dev コマンドと URL、ブラウザテストランナー（または存在しないこと）を名前で言えること。

2. 要件定義（Frame the brief） マークアップの前に、以下のブロックを応答に書き込み、それを基に構築します：

   ユーザーとジョブ:    この画面を使用する人と、その画面が果たす唯一のタスク
   リード:              視線が最初に留まる単一の要素
   プライマリアクション: 1 つの肯定的なアクション。破壊的なアクションは別に命名
   密度:                疎 | 快適 | 密。隣接する画面に合わせる
   ムード:              結果が達成すべき 1 つの形容詞（「正確」「落ち着いた」「温かみのある」）
   状態:                空、ローディング、エラー、部分的、オーバーフロー、権限なし：該当するもの全て
   

   レイアウト、構成、ビジュアルクラフト: references/taste.md を参照。 完了条件: すべてのフィールドがこの画面に対して具体的な回答を持ち、レビュアーがそれを満たさないビルドを却下できるほど具体的であること。

3. トークン解決（Resolve tokens） すべての色、サイズ、スペース、角丸、シャドウ、時間をステップ 1 のセマンティックトークンにマッピングします。不足しているトークンは、明るい値と暗い値を持つソースに追加します。references/tokens.md に従ってください。 完了条件: diff に生の色、任意の値（p-[13px]、bg-[#1a1a1a]）、またはテーマ化可能なプロパティのインラインスタイルが含まれず、すべての新しいトークンが明るい値と暗い値を持ち、node scripts/contrast.ts <theme.css>（このスキルのディレクトリからの相対パス）がパスすること。

4. 構築（Build） プロジェクトのプリミティブから構成します（プロジェクトにプリミティブがない場合は React Aria Components を使用）。モバイルファーストで。ルール と references/components.md に従ってください。セマンティクス、キーボード、WCAG の詳細: references/accessibility.md。インターフェーステキスト: references/copy.md。 完了条件: すべてのインタラクティブ要素が該当する各状態をカバーし、すべてのデータビューが要件定義で指定された各状態をレンダリングし、プレフィックスなしのスタイルが 320px のレイアウトであること。

5. 検証（Verify） ts-coding のチェックを実行し、次に references/verification.md の静的ゲートとブラウザゲートを実行します: トークンドリフト、絵文字、トークンコントラスト、明るい状態と暗い状態での axe、キーボード、320px でのリフロー、ターゲットサイズ、モーション減少。 完了条件: すべてのゲートが終了コード 0 で終了し、それぞれが出力した内容を報告すること。実行できなかったゲートは「未検証」と理由を報告すること。

6. 視覚確認（Look） 1280px 幅と 390px 幅、明るい状態と暗い状態、および要件定義の各状態のスクリーンショットを撮ります。すべての画像を読み取りツールで開き、すべてのコントロールをクリックします。次に、references/review.md に従って却下の根拠を主張します。サブエージェントツールが利用可能な場合は、スクリーンショットとそのファイルを新しいエージェントに渡します。画面を構築しなかった批評家の方がより明確に見えます。 完了条件: すべてのスクリーンショットを表示し、すべてのコントロールが可視の変更を生成し、すべての Critical または Major な問題が修正されるか、ユーザーに報告されていること。

小さな変更（既存コンポーネント内でのスペーシング、色、コピーの微調整）: ステップ 1、3、5 の静的ゲートを実行し、次に変更された要素のスクリーンショットを明るい状態と暗い状態で撮り、両方を表示します。

既存 UI のレビュー: ステップ 1 を実行し、ステップ 2 の要件定義を推測して記述し、ステップ 5 と 6 を実行し、references/review.md の形式で報告します。レンダリングがない場合はその旨を述べ、調査結果をソースが証明できるものに限定します。

ルール

エビデンス

• コントラスト比、合格/不合格、スコアは、コマンドがそれを出力した場合にのみ記載します。それ以外の場合は「未検証」と記載します。スキップされたゲート（ブラウザなし、サーバーなし）は何も測定していません。
• ゲートは正確性を証明しますが、品質は証明しません。階層とクラフトはスクリーンショットから判断します。

階層

• 1 つの要素がリードします: 要件定義のリードは、最も大きく、最も太く、または最も高いコントラストを持つ要素であり、その仲間は控えめにします。マーケティングページやランディングページでは、表示用タイポグラフィはボディサイズの少なくとも 2.5 倍です。プロダクト画面では、ページタイトルをボディより 1 段階または 2 段階上に保ち、ウェイトと位置で残りを行います。
• スペーシングは外側に向かって大きくなります: グループ内のギャップ < そのコンテナのパディング < セクション間のスペース。
• 空の状態は領域を満たし、最初のアクションを指定します。ページは意図的に終了します：要約、フッター、次のステップ。

トークンと色

• 意図によってトークンを選択します。アクションの意味に一致するトークンを選びます。破壊的なアクションは、そのトリガーと確認の両方で破壊トークンを使用します。プライマリは、ビューごとに 1 つの主要な肯定的アクションを示します。
• すべてのステータスは、色とアイコンまたはテキストをペアにします。アクセントは 1 つ。ニュートラルが残りを担います。
• テーマ設定はトークンソースでの 1 回の編集です。すべての画面が同じセマンティックトークンを読み取ります。
• 明るい状態と暗い状態はシステム設定に従います。System / Light / Dark 設定はそれをオーバーライドし、永続化します（references/tokens.md）。

状態

• インタラクティブ要素: default、hover、focus-visible、pressed、disabled、pending、invalid、selected。該当する各状態は、明るい状態と暗い状態で視覚的に区別できること。セレクターは references/components.md を参照。
• Pending 状態は、コントロールをフル強度に保ち、スピナーまたは進行状況ラベル（isPending、aria-busy）を表示します。Disabled 状態は、ユーザーが今は実行できないアクションを示し、理由を近くに表示します。
• フィードバックは何が起こったかを報告します。データが変更された後に成功トーストが表示され、ビューは既に変更を表示しています。

レイアウト

• モバイルがベースです。プレフィックスなしのユーティリティは電話レイアウト、sm:、md:、lg: はより広い画面でレイヤーを追加します。異なる幅で再利用されるコンポーネントは、そのコンテナに応答します（@container、@md:）。
• 水平にスクロールする領域は、目に見える手がかり（エッジフェード、スクロールバー）を示します。

ガードレール

• アイコンは lucide-react（またはプロジェクトのセット）から SVG として currentColor で取得します。UI、コピー、コード、コミットで絵文字はゼロです。
• サーフェスは、フルヘアライン境界線、サーフェスステップ、またはスペーシングで分離します。カード、アラート、トースト、コールアウトの片側のみに色付きの境界線を使用することは禁止されています。
• コンテンツは現実的です：もっともらしい名前、長い文字列、大きな数値、ゼロと 1 つのアイテム。プレースホルダーコピーやデバッグコントロールがプロダクトにレンダリングされることはありません。

リファレンス

該当するブランチに一致するものを読み込んでください：

• references/taste.md: スロップの兆候、構成、タイポグラフィ、色、奥行き。新しい画面や再スタイリングの場合。
• references/tokens.md: Tailwind v4 @theme、セマンティックトークン、システムテーマとそのオーバーライド設定、トークンの追加または監査。
• references/components.md: React Aria Components、状態属性、フォーム、オーバーレイ、データビュー、アイコン、モーション。
• references/accessibility.md: セマンティクス、キーボードとフォーカス、コントラスト、WCAG 2.2 基準、強制色、RTL。
• references/copy.md: ラベル、エラー、空の状態、確認、トースト、生成コピーの兆候。
• references/verification.md: ドリフト、絵文字、コントラストスキャン、コンポーネント状態のレンダリング、Playwright と axe のゲート、スクリーンショットマトリックス。
• references/review.md: 批評レンズ、ヒューリスティック、重大度、調査結果の形式。