ui は何をしますか？
1つのスキルでインターフェースの構築と再スタイリングを行います。Jakub Krehel のスキル「make-interfaces-feel-better」「Impeccable」、そして Molveau 自身のリファレンス（Emil Kowalski の作品から抽出したテイストガイドを含む）を1つのプレイブックに統合しています。
はじめに
最初に references/playbook.md を読んでください。その冒頭にある「最初にこれを行う」ブロックから始めてください。ベンダーファイルや Molveau のリファレンスは、詳細や実例が必要な場合のみ開いてください。 プレイブックは統合されたドクトリンであり（開始前、シェイピング、レイアウト、タイポグラフィ、カラー、ダークモード、サーフェス、アイコン、コンポーネントと状態、フィードバックモーション、レスポンシブとネイティブ、レビュー、洗練パス、パフォーマンス、モックアップファースト、プロンプト）、ソースタグと、ソース間で矛盾がある場合の判断が含まれています。以下のテーブルは深さのインデックスです。
方向性ゲート
新しいページ、画面、または再スタイリングのためのコードを作成する前には、たとえリクエストが1行であっても、これを必ず行ってください。このスキルの残りの部分はミスを取り除くものであり、画面に個性を与えるものではありません。これをスキップすると、結果はすべてのモデルが作る平均的なページになります。細部は正しいものの、誰のものでもないページです。
- 5行。 プロダクト: 何をするのか、誰のために。キャラクター: 具体的な単語2～3語（
落ち着いた、正確な、少し温かみのある）、「クリーン」「モダン」「スマート」「ミニマル」「プレミアム」は不可。世界観: プロダクトが属する場所や素材。ニュートラルカラーに色味を与え、アクセントカラーを決定します。モーメント: 豊かな色とディテールを与える1～2箇所。シグネチャー: このプロダクトだけが持つ、一貫して使用される小さなディテール。 モーメントは単にきれいにするだけでなく、注意深く描かれます。伝えるべきことを再描画したチャート（滑らかな線、ミラー比較、実際のスケール）、または重量感と光を伴ってレンダリングされたプロダクト自身のオブジェクトなどです。 - 棚卸し、そしてアイデア。 競合他社と共有しない8～12の項目（名前、通り、概要の数字、素材、ツール、儀式、業界で印刷されるドキュメント）をリストアップします。次のように書きます：「この画面では、[1つの項目] が [デバイス] になる」。そのデバイスがモーメントです。
- 二次のデフォルトを拒否する（ブランドがすでにそれを使用している場合を除く）。これらは、明白な特徴を禁止した後にモデルが手を伸ばすものです：
- クリーム、ストーン、または温かみのあるオフホワイトのページに、バーントオレンジ、テラコッタ、セージ、フォレストのアクセント。セリフ見出しの有無を問わず（「紙とインク」のルックは、方向性ではなく、新しいデフォルトです）；
- 反射的に Fraunces、Instrument Serif、Playfair、Georgia を見出しフェースに、system-ui を唯一のフェースにすること；
- 白地に Inter または Geist で、1つのインディゴまたはブルーのアクセント；
- ヒーロー、3つの特徴、お客様の声、コールトゥアクション、この順序で、その理由のないままに。アプリ画面では、棒グラフの上に4つの等しい統計カード；
- 中央揃えのアイブロー、見出し、2つのボタンが最初の画面全体を占めること。
- 交換テスト。 名前と業界を競合他社のものに置き換えます。それでも画面が適合する場合は、主張、モーメント、シグネチャーを変更し、再度テストします。
- 表示して待つ。 5行とアイデアを表示し、オーナーを待ちます。尋ねられない場合（ユーザーが「ただ作れ」と言った、または人がいない状態で実行する場合）、メインファイルの先頭にコメントとして書き、その通りに構築します。
深さ: anti-slop プレイブック §2（方向性）と §12（アプリ画面）；実際のリファレンスについては design-inspiration-index スキル。
常に有効
- プロジェクトファースト。 そのトークン、コンポーネント、
DESIGN.md、兄弟画面が、ここでのデフォルトよりも優先されます。 - 一度に1つのデザイン権威。 別のレイヤーを重ねる前に、1つのパスを完了させます。
- 画面ごとに1つの焦点と1つの主要アクション、すべての状態が設計されていること（プレイブック §3、§9）。
- 実装前のモックアップ。新しい画面や再スタイリングされた画面の場合、プロジェクトがモックアップファーストで動作する場合、Molveau のハウスデフォルト（
references/mockup-first.md）、それ以外の場合はプロジェクト独自のレビュープロセスに従います。 - UI 完了と見なす前に：
anti-slopスキルとその検出器、次に型チェック、リント、テスト。
隣接: anti-slop スキルはバイブコーディングされた特徴と AI らしさを取り除くパスを担当。motion は UI フィードバックを超えたアニメーションを担当。ux はコピー、フォーム、フォーカス、ターゲット、アクセシビリティの深さ、エラー、エッジケース、オンボーディングを担当。
レビューの深さ: design-grill は深い監査（7つのレンズ、ランク付けされたレポート）、以下の批評行は軽いシングルパス、anti-slop は AI ルックパス。
タスクごとに読むべきもの
すべてのパスは、このスキルフォルダからの相対パスです。
| タスク | 読むもの |
|---|---|
| 統合ルール、値、競合判断 | references/playbook.md |
| フィードバックが必要な新しい画面または再スタイリングされた画面（小さな微調整ではない） | references/mockup-first.md |
| プロジェクトにまだトークンがない場合のテイストデフォルト | references/taste.md |
| レイアウト、グルーピング、整列、スペーシング | references/vendor/jakub/better-layout.md、次に references/vendor/impeccable/layout.md |
| タイポグラフィ: フォント、スケール、行長、OpenType | references/vendor/jakub/better-typography.md と references/vendor/impeccable/typeset.md |
| カラー: パレット、コントラスト、ダークモード、トークン | references/vendor/jakub/better-colors.md、さらに色を追加する場合は references/vendor/impeccable/colorize.md |
| 最終的な磨き: 角丸、シャドウ、光学的整列、アイコン状態 | references/vendor/feel/make-interfaces-feel-better.md と references/vendor/impeccable/polish.md；正確な値については references/vendor/jakub/better-ui.md |
画面全体のランク付けされたレビュー（アクセシビリティとライティングは ux スキルにあります） | references/vendor/jakub/better-interface.md（包括的なもの） |
| UI リグレッションのためのブランチまたは PR のレビュー | references/vendor/jakub/interface-review.md |
| ファイル、コンポーネント、ルートのフルマルチレンズデザイン監査（重い作業：複数のエージェント） | design-grill スキル |
| ヒーロー、CTA、ナビバー、モーション、アイコンのためのビジュアルリファレンスまたはインスピレーション | design-inspiration-index スキル |
| 画面の批評またはデザインレビュー | references/vendor/impeccable/critique.md（ヒューリスティック、認知負荷、ペルソナ）；クイック分解：references/prompts.md のプロンプト 4 |
監査: パフォーマンス、テーマ設定、レスポンシブ（アクセシビリティについては ux スキルを使用） | references/vendor/impeccable/audit.md、references/vendor/impeccable/optimize.md |
| ごちゃごちゃしている、または重すぎる | references/vendor/impeccable/distill.md、references/vendor/impeccable/quieter.md |
| 退屈、または弱すぎる | references/vendor/impeccable/bolder.md、references/vendor/impeccable/colorize.md、references/vendor/impeccable/delight.md |
| 技術的に野心的なエフェクト | references/vendor/impeccable/overdrive.md |
| ゼロからの新しいデザイン計画 | references/vendor/impeccable/shape.md；references/vendor/impeccable/new-work.md とモードファイル（references/vendor/impeccable/mode-operate.md、mode-persuade.md、mode-read.md）新しいビジュアルアイデンティティの場合 |
| アプリ、ダッシュボード、設定の深さ | references/vendor/impeccable/operate.md |
| 小画面、タッチ、その他のプラットフォーム | references/vendor/impeccable/adapt.md；ネイティブ：references/vendor/impeccable/ios.md、references/vendor/impeccable/android.md、references/vendor/impeccable/adapt.native.md |
DESIGN.md の作成または更新、トークンとコンポーネントの抽出 | references/vendor/impeccable/document.md、references/vendor/impeccable/extract.md |
| フィードバックモーションレシピ（プレス、エンターとイグジット、アイコンスワップ、テーマ切り替え） | references/vendor/jakub/better-ui/animations.md、references/vendor/jakub/better-ui/enter-exit.md、references/vendor/jakub/better-ui/icon-transitions.md；Emil の数値は references/animation.md（完全なワークフローは motion スキル）。一部のレシピはより長く実行されます（約500msのシート、Sonner の400ms）：UI ではプレイブックがオーバーレイを300msに制限しています（§10） |
| インタラクティブコンポーネント完了チェックリスト（トースト、ドロワー、メニュー） | references/components.md |
| LLM に引用されるべきパブリックマーケティングサイト | references/discoverability.md |
| AI 生成 UI にテイストを強制するプロンプト | references/prompts.md |
| ルールの背後にある哲学 | references/quotes.md |
| UI がバイブコーディングされた、または一般的に見える場合 | anti-slop スキル |
| コピー、エラー、空の状態、アクセシビリティの深さ | ux スキル |
Impeccable のエントリポイント references/vendor/impeccable/impeccable.md は、独自のセットアップファイルとスクリプトを備えた完全なコマンドセットを説明しています。シングルパスではなく、そのワークフロー全体が必要な場合に読んでください。その clarify、harden、onboard コマンドは、一度ベンダリングされ、ux スキルにあります。
ベンダリングされたファイルに関する注意
references/vendor/ 以下のファイルは、作成者から変更せずにコピーされているため、内部の相対リンクやコマンド名（Impeccable のスラッシュコマンド、scripts/impeccable、ライブモード、コンポーネントゲート）は、このインストール環境には存在しない可能性があります。ガイダンスを参考にしてください。欠落しているツールを指している部分はスキップしてください。ベンダリングされたファイルがブラウザのスクリーンショット、サブエージェント、自動ビジュアルパスを要求する場合は、プロジェクト独自のルールに従ってください（プレイブックの競合14）。ライセンスと正確なソースは各ベンダーフォルダ（LICENSE、SOURCE.md）にあります。
クレジットとライセンス
references/vendor/jakub/は Jakub Krehel のスキル（https://github.com/jakubkrehel/skills）、MIT ライセンス。references/vendor/feel/は make-interfaces-feel-better by Jakub Krehel（https://github.com/jakubkrehel/make-interfaces-feel-better）、MIT ライセンス。references/vendor/impeccable/は Impeccable by Paul Bakaus（https://github.com/pbakaus/impeccable）、Apache-2.0 ライセンス。その LICENSE と NOTICE は保持されています。ファイルは再配置され、SKILL.md はリネームされ、scripts/は含まれていません。詳細はSOURCE.mdを参照してください。プレイブックは Impeccable のガイダンスを言い換え、圧縮しています。その翻案は元の作品からの変更です。- テイストガイド（
references/taste.md、animation.md、components.md、quotes.md）は Emil Kowalski のデザインエンジニアリング作品（https://emilkowal.ski）から抽出され、プレイブックでは[Molveau/Emil]とタグ付けされています。言葉と構造は Molveau のもの（MIT ライセンス）です。アイデアと数値は彼のものです。references/quotes.mdは各引用の出典を明記しています。references/animation.mdは Rauno Freiberg の devouringdetails.com も参考にしています。 references/discoverability.mdは Suganthan Mohanadasan の研究（suganthan.com）から抽出されています。references/playbook.md、references/prompts.md、references/mockup-first.mdは Molveau 自身のもの（MIT ライセンス）で、各ソースをタグでクレジットしています。