ui-qualitylisted

# UI Quality 本Skillは設計〜実装〜監査を1回の依頼内で完遂する一貫ワークフローを定める。 検証段階の詳細（実画面の起動経路の探索、検証matrix、証跡の記録形式）は `$ui-verification` を検証の正本として従い、本Skillでは重複記載しない。 ## 対象面を選ぶ 1. 対象をWebまたはNativeに分類する。 2. Webなら [references/web.md](references/web.md)、Nativeなら [references/native.md](references/native.md) を完全に読む。 3. [references/audit-rubric.md](references/audit-rubric.md) を完全に読む。 4. リポジトリの `AGENTS.md`、UI仕様、デザイン規約、参照画像、既存コンポーネント、トークンを確認する。 5. 既存プロジェクトでは既存のフレームワークとデザインシステムを優先する。特定のCSS／UIフレームワークを一律に導入せず、並行するデザインシステムを作らない。 ユーザーが監査、説明、意見だけを求めた場合は、根拠を示して所見を返し、実装許可を推測しない。実装または修正を依頼された場合は、以下のループを同じ依頼内で完遂する。 ## UI契約を固定する 実装前に次を短く整理する。 - 画面の目的と主要タスク - 領域ごとの主要アクション - 変更する範囲と維持する範囲 - 初期、入力済み、処理中、成功、空、エラー、無効など必要な状態 - 対象画面幅、ウインドウサイズ、テーマ、長文・ローカライズ条件 - 再利用する既存コンポーネントとトークン 可能なら変更前の実画面を基準画像として直接確認する。 ## 編集責任を一人に固定する Subagentを使う場合も、UIソースを編集するimplementation ownerは一人だけにする。 - Design reviewer: 階層、構成、密度、余白を読み取り専用で確認する。 - Platform reviewer: Webまたは対象OSの慣習と操作性を読み取り専用で確認する。 - Visual QA reviewer: レンダリング画像を読み取り専用で監査する。 - Implementation owner: 指摘を統合し、唯一UIソースを修正する。 複数担当が別々の色、余白、角丸、コンポーネント体系を導入しない。 ## 一回の依頼内で完遂する 1. 現行画面と既存設計を確認する。 2. UI契約に基づいて設計する。 3. 状態遷移やレイアウトロジックに必要なテストを先に追加する。 4. 既存のコンポーネントとトークンを使って実装する。 5. ビルドとテストを実行し、実アプリを起動する。 6. 現実的なデータで対象画面を操作する。 7. 必要なサイズ、状態、テーマの実画面またはスクリーンショットを開いて確認する。 8. 監査ルーブリックで問題を特定する。 9. 問題を実装修正し、同じ条件で再度ビルド・実画面確認する。 10. 修正必須のdefectがなくなるまで反復する。 実装依頼では監査レポートを書くだけで終了せず、見つけた問題を修正する。 ## 実画面確認の成立条件 次のすべてを満たした場合だけ、視覚確認済みと報告する。 - 実際にレンダリングされた画面またはスクリーンショットを取得した。 - 画像を視覚入力として直接開いて確認した。 - 対象サイズ、