no-slop-ui

No Slop UI

人間向けの UI を構築します。目指すのは、機能的で、誠実で、すっきりしていることです。印象的である必要はありません。ドラマチックである必要もありません。普通であること。

デザイン上の判断が、AI が安易に選びそうなものだと感じたら、おそらくそのとおりです。より手間がかかっても、すっきりした選択肢を選んでください。

UI コードを書く前に、禁止事項の全リストを references/banned-patterns.md で確認してください。 色を選ぶ必要があるときは、references/colour-palettes.md を確認してください。

有効化の境界

このスキルを使うのは、ユーザーが UI デザイン、フロントエンドの実装、ビジュアルの調整、デザインレビューを明示的に依頼した場合、または現在のタスクの主な成果物が目に見えるインターフェースである場合に限ります。バックエンドのみのタスク、コピーライティング、図表、インフラ、一般的なコードレビューでは有効化しないでください。

このスキルは、ビジュアル品質を高めるためのレイヤーとして扱ってください。製品要件、アクセシビリティ、セキュリティ、ローカライズ、データの正確性、リポジトリ既存のデザインシステムより優先してはいけません。これらがスロップを避けるルールと衝突する場合は、ユーザーの要件を優先し、トレードオフを説明してください。

基準

Linear、Raycast、Stripe、GitHubを参考にしてください。注目を集めようとはしません。ただ機能します。

普通の見た目とは：

• サイドバー：幅 240〜260px で固定し、背景色は単色、右側に 1px の境界線を付けます。浮いたシェルや外側の角丸は使いません。
• カード：角丸は最大 8〜12px、控えめな 1px の境界線を付け、影は最大 0 2px 8px rgba(0,0,0,0.08) とします。発光や浮遊感は付けません。
• ボタン：塗りつぶしかシンプルな境界線にし、角丸は最大 6〜10px とします。ピル型やグラデーションは使いません。
• タイポグラフィ：明確な階層を設け、本文は 14〜16px にします。システムフォントか、単一のサンセリフ体を使います。セリフ体とサンセリフ体を混在させません。
• 余白：4／8／12／16／24／32px の尺度で統一します。ばらばらの隙間は作りません。
• 境界線：1px の実線で、控えめな色を使います。装飾目的の太い境界線やグラデーション境界線は使いません。
• トランジション：100〜200ms のイージングを使います。不透明度か色だけを変化させます。弾む動きや変形は使いません。
• 入力欄：単色の境界線とシンプルなフォーカスリングを使います。ラベルはフィールドの上に配置します。
• アイコン：16〜20px で、単色か控えめな色にします。装飾的な背景は付けません。

色の優先順位

1. まずプロジェクト既存の色を使います — Tailwind の設定か CSS 変数を確認してください。
2. パレットが存在しない場合は、references/colour-palettes.md から選んでください。
3. ランダムな色の組み合わせを作らないでください。

スタック別の注意事項

shadcn/ui + Tailwind：

• shadcn のコンポーネントはそのまま使い、既存のものを作り直さないでください。
• 既存の CSS 変数システム（--background、--foreground、--primary など）を尊重してください。
• 明確な製品上の理由がない限り、コンポーネントのデフォルト設定を上書きしないでください。

プレーンな HTML ダッシュボード：

• 単一ファイルでも構いません。自己完結するようにしてください。
• テーマ設定には CSS カスタムプロパティを使ってください。
• 絶対に必要な場合を除き、外部 CDN への依存は避けてください。

厳守事項

• 浮遊するグラスモーフィズムパネルは使わないでください。
• 装飾目的のグラデーション背景は使わないでください。
• 過剰な角丸（どこもかしこも 20px 以上）は使わないでください。
• 見出しの上に小見出しラベル（<small>SECTION LABEL</small>）を置かないでください。
• 内部向けダッシュボードにヒーローセクションを設けないでください。
• 装飾的なコピー（「雑然としたものを取り除き、業務を明快に」など）は使わないでください。
• ダッシュボードのデフォルトレイアウトに、指標カードのグリッドを使わないでください。
• スペースを埋めるためだけの、実態のないグラフは作らないでください。
• ホバー時の変形アニメーションは使わないでください。
• Segoe UI、Trebuchet MS、Arial のフォントスタックは使わないでください。
• ::before 擬似要素を使ったステータスドットは使わないでください。
• 実際のデータを示さないナビゲーションバッジは使わないでください。
• あらゆる場所でピル型ボタンを使わないでください。
• 劇的なボックスシャドウ（ぼかし 24px 以上）は使わないでください。
• 配置を混在させないでください（左揃えと、浮かせた中央配置を混ぜるなど）。

例を含む禁止事項の全リスト：references/banned-patterns.md