unvibe は何をしますか？
このスキルは、生成されたように見えるインターフェースを、デザインされたように見えます。新しいスタイルを発明するのではなく、プロフェッショナルなインターフェースが共有し、生成されたインターフェースが見逃している小さな、計測された詳細のカタログを、プロジェクト自身の色にマッピングして適用します。これは実際のプロダクション SaaS での 2 日間の polish パス（references/case-study.md）から抽出されました。すべてのルールは、破ったときに気づかれたために存在します。
色をマッピングし、数値は保持します。 プロポーション（半径、パディング、サイズ、長さ、重み）が品質をもたらします。色だけが適応するものです。
始める前に
references/tells.mdを読んでください（UI が生成されたように見える原因と、それぞれの置き換え）。- プロジェクトのデザイントークンと、あらゆるデザインドキュメントを読んでください。
references/porting.mdのトークンテーブルを埋めてください。 - オーナーに、どの画面が最も気になり、何が好きかを尋ねてください。彼らが好きなものは残し、彼らが理解しているものを決して削除しないでください（「これが好きです、わかりやすいです—ただもっとうまくフォーマットしてほしい」というのは、再スタイルであって、カットではありません）。
- スタックをメモしてください：React かどうか、Tailwind 3/4 かプレーン CSS か、既存のコンポーネントライブラリがあるか、ヘッドレスライブラリ（React Aria）があるかどうか。
ワークフロー
フェーズ 1 · 基礎（1 パス、アプリ全体）
トークン（assets/css/unvibe.css セクション 1、マッピング済み）、ブランドカラーでのネイティブの残り物、等幅数字、モーション削減、モーションカーブ。次に言葉：トラッキングされた大文字ラベル、絵文字見出し、バッジ内の ✓ グリフ、感嘆符を削除します（カタログ §0–§1）。高速で、目に見え、リスクゼロ。
フェーズ 2 · コントロール（1 パス、アプリ全体）
浮き上がりと画面ごとに 1 つのプライマリがあるボタン（§2） · 塗りつぶされたフィールド、行ごとに 1 つの高さ（§3） · ネイティブセレクトの代わりに実際のメニュー（§4；最初にすべての呼び出し箇所を監査、references/pitfalls.md） · すべての yes/no にスイッチ、重要なものにはスイッチカード、表示可能な選択肢にはラジオカード、タグ（§6） · ピルがスライドするセグメントコントロール（§5）。
フェーズ 3 · 最も表示される画面をレファレンス上で再構築
最もよく見られる 3〜5 の画面を選び、それぞれを最も近いプロフェッショナルテンプレート上で計測して再構築します（references/method.md）：分析概要 → KPI タイル（§9）；AI 画面 → エージェントスレッド（§12）；アクティビティ → フィード（§11）；設定 → 行（§7）；一括リスト → データグリッド（§10）；長時間ジョブ → ジャーナル（§13）；日付 → プリセット + 2 ヶ月（§15）。
フェーズ 4 · 一掃
残りのすべての画面に同じ詳細を適用します：1 つのテーブルヘッダーバンド、1 つのフィールドスタイル、1 つのメニュー、1 つのバッジスタイル、塗りつぶしゾーンとしてのコールアウト、フレームブロックとしてのリスト、すべてのリストページで同じフィルター高さ（§8、§10、§16）。兄弟画面間の不整合自体がテルです。
フェーズ 5 · 証明
scripts/capture.mjs でプロダクションとブランチの before/after キャプチャを取得し、scripts/compare.mjs で横並びページを作成します。一目で違いが明らかなペアのみを保持します。次に、プッシュ前に references/verification.md の完全なノンリグレッションパスを実行します。
黄金ルール
- 選択 ≠ アクション。 穏やかな色が選択されたものを示します；明るいブランドカラーは、画面ごとに 1 つのプライマリアクション用です。
- ホバー ≠ 選択。 ホバーはニュートラル；選択は淡い色合いにチェックマークを加えたものです。
- 3 つのサーフェス：キャンバス、浮かんでいるものには白、フィールドやタイルにはより暗い 沈んだ 塗りつぶし。
- トラッキングされた大文字、絵文字見出し、チェックグリフ、色付きの左バーは禁止。
- 同じ行のすべてのコントロールは、高さと塗りつぶしを共有します。
- すべての yes/no はスイッチ；チェックボックスはリストと同意用です。
- 設定は行：左側にその機能、右側にコントロール；ロックされた行は灰色で理由を表示します。
- 塗りつぶされたタイル内の数字は 24/34、アイコンチップと、意味によって色が変わるデルタピル付き（コストが上がる場合は赤）。
- どこでも 1 つのテーブルヘッダーバンド、文のスタイル、16px フレーム内；選択された行には 3px のインセットバー。
- AI の回答はスレッド内のテキスト、読まれたものと実際の経過時間を含む；フェイクのステップは決して使わない。
- モーションは状態変更に従う、ホバーには決して従わない；押下は .985 にスケール；メニューとモーダルは出現する。
- 推測の数値、装飾的なコントロールは禁止。 データがない場合は「未確定」と表示；フィールドが何もしないなら削除する。
- 同じパスで兄弟を処理する。
- 目に見える違いのみを示し、リグレッションがないことを証明する。
このスキルに含まれるもの
| パス | 用途 |
|---|---|
references/catalogue.md | 正確な値を持つすべての詳細（§0 基礎 → §17 絶対に使わないリスト） |
references/tells.md | 生成された UI の兆候とその置き換え |
references/method.md | レファレンス駆動の再設計：選択、計測、マッピング、再構築、証明 |
references/pitfalls.md | polish がもたらすバグ（モーダル内のメニュー、重複キー、名前の喪失、CSS レイヤー、テスト） |
references/verification.md | before/after とノンリグレッションパス |
references/porting.md | トークンマッピング、Tailwind 3/4、その他のフレームワーク、リトロフィット順序、ダーク段階 |
references/case-study.md | これが来た実際のパス（オーナーの言葉付き） |
assets/css/unvibe.css | ドロップインスタイルシート（プレーン CSS、uv- クラス、:root 上のトークン） |
assets/react/* | Select, NativeSelect（<select> のドロップイン）、Switch/SwitchCard、SettingsRow、Accordion、NumberField、Segmented（スライドピル）、RollingNumber、ThinkingIndicator、DateRangePicker、useFlipToFit |
scripts/capture.mjs | ヘッドレス Chrome で [data-shot] 要素、またはコンソールチェック付きのアプリ画面を撮影 |
scripts/compare.mjs | 横並び before/after ページ |
demo/index.html | すべてのパターン、before と after、架空のデータ上で |
アセットの使用
- CSS：
assets/css/unvibe.cssをプロジェクトにコピーし、セクション 1 をプロジェクトのトークンにマッピングし、ベーススタイルの後にインポートします。クラスをそのまま使うか、プロジェクト独自のクラス名に変換します（値は保持）。 - React：必要なコンポーネントをコピーします；これらは
react-aria-components（および日付範囲用の@internationalized/date）に依存します。Tailwind クラスは含まれていません。 - 既存のコンポーネントライブラリ：ライブラリを置き換えるのではなく、カタログの数値を使用してそのパーツを再スタイルします。
引き渡すもの
- before/after ページ（目に見える違いのみ）。
- 変更点の短いリスト（ファミリー別、および影響を受けた画面）。
- ノンリグレッションレポート：監査された内容、ブラウザでテストされたインタラクション、コンソールステータス、テスト、ビルド。チェックされなかったものを明確に述べます。