bruno-baeta/clean-ui

クリーンUI

ミニマルでモダンなインターフェース。ライトテーマとダークテーマに対応し、画面に収まり、データを最優先し、AIではなく人間が作ったプロダクトのように見える。以下のルールは実際の調整依頼から生まれた。それぞれが破られたときにユーザーをイライラさせたことがあるため、提案ではなく要件として扱うこと。

スキルのファイル

このスキルフォルダからの相対パス。

ファイル	使用時
references/informacao.md	すべての新規画面またはリデザイン、レイアウトの前に。 何を表示するか、優先順位、各情報の位置（在庫、ユーザーの質問、レベル、フィルター、位置マップ、計画書）の選び方。
references/padroes-aprovados.md	ユーザーが承認したブロック（「かなり良くなった」と評価されたもの）：決定カード、決定の測定値と限界線のグラフ、時間経過に伴う残高を表示する状況カード、ユーザー自身のリスト、季節的サポート、スマートフォンのヘッダー、優先順位順、ウルトラワイド。固定の骨格としてではなく、コンテンツの出発点として使用。
references/armadilhas.md	すでに手戻りの原因となった技術的エラー（Tailwind v4、cnマージなし、[&>*]:の詳細度、next-themes、古いCSSを提供するサーバー、ローカルデータベースにない状態のテスト）。コードを書く前に読むこと。
references/migracao.md	アプリ全体を再デザイン（複数画面）：最初に承認済みの参照画面、あなたが作成するベース（フレーム、ページパーツ、bodyのトークン、保存されたテーマ）、共通のブリーフを持つ並行フロント、統合（キットへの要求、最後にのみ古いコードを削除、再起動、すべてを確認）。
references/exemplos.md	間違った例と正しい例の実際のケース。新しい画面を作成するとき、または何かが適切かどうか迷ったときに読むこと。
references/dashboards.md	数字、グラフ、またはマップを含むすべての画面。 アマチュアとプロフェッショナルを分けるもの、原則（NN/g、Stephen Few、IBM Carbon）、7つの構成（情報計画に役立つものを選択）、ワイド画面とウルトラワイド画面のルール、グラフの色と仕上げ。
references/paletas.md	検証済みのパレット（コバルト、インディゴ、シアン、コーラル）で、グレー、アクセントカラー、順序付きスケール、両テーマの系列色を含む。ここから選択し、単独の色は使用しないこと。
assets/tokens.css	新規プロジェクト、またはアイデンティティがない場合：ライトテーマとダークテーマ（システムに従い、手動切り替え可能）、フォント、フォーカス、グラフ、タッチ操作がすでに設定済み（Tailwind v4）。出発点としてコバルトパレットが付属するため、選択したパレットの完全なブロック（paletas.mdの末尾）に置き換えること。tallバリアント、正/負/警告、カーソル（ポインター）を含む。
references/exemplos-dashboards/	ユーザーによる7つのモダンダッシュボード参照。ダッシュボードをデザインする前に、すべて開くこと。
references/anatomia-dashboard.md	参照を寸法に変換したもの：カード、タイトル、インジケーター、チップ、グラフ上部の数字、グラフ、全体の一部、ゲージ、テーブル、スマートフォン、およびコピーすべきでないもの。
assets/dashboard.tsx	ダッシュボードキット：DashCard、Kpi、IconCircle、DeltaChip、StatusChip、TrendDot、CountBadge、Tabs、SeriesStat、StatColumns、Dashed、KeyValue、StackedBar、LegendGrid、Gauge、テーブル用TH/TRクラス、TooltipCard、PillMark、Recharts用chartプロパティ、ListaAlta（縦型カードのリスト、高さでページ分割）、Divergentes（増加したものと減少したもの）、Quadro100（100あたり）、Colunas（浮動カラム；滝とファネルは難しいとして不採用）、useFitRows（収まる行数）、useFitHeight（ウィンドウの残りからのグラフ高さ；上のカードが拡大したときに再測定）。
assets/painel.tsx	マップヘルパー：useMapColumns（マップ列の幅）とFillMap（塗りつぶす世界地図）。
assets/ui.tsx	既製のベースコンポーネント（Card、Section、IconBox、Chip、Pill、Button、BottomActions、ListRow、ListCard、StatCard、DateBlock、FillEmpty、InfoTip、NavLoading、Spinner、ThemeToggle、FitScreen）。新しいものを発明する代わりに、これらを再利用または適応すること。プロジェクトに同等のものがあれば、プロジェクトのものを使用。
scripts/lint-ui.mjs	node <skill>/scripts/lint-ui.mjs src：変更されたコードをスキャン（ホバー時の移動、省略記号、色付きボーダー、狭い幅、禁止フォント、一方のテーマを壊す固定色、「—」、「・」、小文字、「ラベル：値」）。
scripts/check-ui.mjs	node <skill>/scripts/check-ui.mjs http://localhost:3000/rota --out=prints：320pxと390px（モバイル）、および1366×650、1536×730、1920×950（ノートPCとモニター）、2560×960、2752×1100（Windows 125%ズームの21:9）、3440×1300（ウルトラワイド21:9）のブラウザ表示領域でスクリーンショットを撮影。ダークテーマとライトテーマの両方で実施。水平および垂直のはみ出し（カードが最初の画面の下端を超える、またはウィンドウより高い）、似たようなリストの重複、引き伸ばされたグラフ、幅が広すぎるリスト行、「…」、隣接するカードの高さの不一致（背景のないラッパー内も含む）、内部に空の隙間があるカード、またはコンテンツが散らばっているカード、不完全なグリッド、コンテナのないアイコン、ホバー時の移動、内部スクロール、狭いコンテンツ、フォント、クリック可能なものにカーソルがない、行間でほぼ揃っていないカードの境界線、画面外の「i」バルーン（それぞれを開く）、スマートフォンのスクロールバー、幅が広すぎるテーブル行（繰り返される行）、窮屈なテキスト、スマートフォンでタイトルまたは説明が折り返されるリスト行、空のページまたはエラーページ（読み込みを待機；データが来なかった場合、チェックは無効）。各発見にはサイズとテーマが含まれる。プロジェクトにPlaywrightが必要。--user/--passでパスワード保護されたページに対応。

スクリプトはガイドです。各発見を確認し、特にスクリーンショットを開いて実際に見てください。

1. プロセス（最も手戻りの原因となるもの）

1. 依頼されたことだけを行う。 明示的な依頼なしに、既存の要素を削除、置換、または「簡略化」しないこと。提案が何かを削除する必要がある場合は、事前に質問すること。迷ったら、維持すること。
2. 指定されたブレークポイントを尊重する。 モバイルでの調整を依頼された場合：Webは変更しない（sm:/md:を使用してWebを維持し、その逆も同様）。
3. 公開前に、すべてのサイズを確認して表示する。 良しとする前に、チェックの各サイズ（1366、1536、2752も含む。これらではテーブルが崩れたりカードがはみ出したりする）のスクリーンショットを開くこと。390と1920だけでなく。エージェントの委任作業でも同様：自分で確認すること。ローカルで実行し、モバイル（390px、および320pxも確認） とWeb（1366×650、1536×730、1920×950、実際のブラウザ表示領域） の両方のテーマでスクリーンショットを撮影し、各スクリーンショットを実際に確認し、明示的な承認がある場合のみcommit/push/deployを行うこと。
4. 新しい画面またはリデザイン：最初に情報、次にレイアウト。 references/informacao.md（およびreferences/padroes-aprovados.mdのブロックとreferences/armadilhas.mdのエラーを確認）に従うこと：プロダクトが知っていることのインベントリ（古い画面が表示していたものすべてを含む）、緊急度順のユーザーの質問、優先レベル、各情報のフィルター、位置マップ、および計画書。構成はこの計画から生まれる。構成とパレットはあなたが選択すること（プロジェクトにブランドがある場合はそのブランドのもの、そうでない場合はテーマに合うpaletas.mdのもの）。ユーザーが選択できるように画面の複数のバージョンやビジョンを構築しないこと。 1つ、最良のものを構築し、各要素がなぜそこにあるのかを数行で説明すること。以前のプロジェクトの骨格から始めたり、「4つのインジケーター＋カードグリッド＋リスト」をデフォルトで繰り返したりしないこと。
5. 2回却下された詳細＝並列オプション。 ユーザーが同じ詳細（チップの位置、フォントなど）を2回却下した場合のみ、その詳細の2～3のバリエーションをスクリーンショットで表示すること。画面全体に対して行うことは決してない。
6. ファイルを削除または再作成した後は、チェックの前に開発サーバーを再起動する（またはCSSを再度保存する）：Tailwindが新しいクラスなしで古いCSSを提供し続ける可能性がある。
7. 各スクリーンショットの前に、チェックリスト（セクション10）でレビューすること。 対称性がなければ、準備はできていない。

2. タイポグラフィ

• 禁止（AIっぽいもの）： Inter、Roboto、Arial、Helvetica、ブランドフォントとしてのsystem-ui、Geist、Poppins、Montserrat、Space Grotesk、Open Sans、Lato。
• 推奨かつAIがほとんど使用しないもの： Plus Jakarta Sans（推奨かつ承認済み）、Manrope、Onest、Figtree、Hanken Grotesk、Schibsted Grotesk、Instrument Sans、Albert Sans、Familjen Grotesk。見出しの強調にはBricolage Grotesque。アプリ全体で1ファミリーのみ。
• 数字はfont-variant-numeric: tabular-nums（tabular-nums）を使用。ゼロがスラッシュまたはドットで区切られたモノフォントは不可。
• ウェイトとサイズで控えめに階層を作成。上部に小さなラベル（12px、薄い色）、下部に値（16px、セミボールド）。同じフォントサイズで値を横並び。巨大な色付きテキストは不可。
• すべての表示テキストは大文字で始める、「Qui」、「Sex」などの略語も含む。文の途中では通常通りに記述：「Vs terça anterior」であって「Vs Ter anterior」ではない。タイトルは文の先頭のみ大文字、すべて大文字は不可。

3. 色とテーマ

• 常に2つのテーマ、ライトとダーク。 すべてのアプリは両方のテーマで開始する：システムテーマ（prefers-color-scheme）に従い、選択を保存する切り替えボタン（assets/ui.tsxのThemeToggle）を持つ。メールとプレビューもprefers-color-schemeに応答する。1つのテーマだけで存在できる画面はない。
• 色は常にトークンを使用（var(--card)、bg-card、text-muted-foreground）。コンポーネント、グラフ、SVG内で#000、#fff、bg-black、text-white、または単独のhexは使用しない：これらはもう一方のテーマを壊す。
• ダーク： 非常に暗い背景（黒に近い）、ワントーン上のカード、控えめなボーダー、ほぼ白のテキスト。ライト： 非常に明るいグレーの背景、白いカード、薄いボーダー、ほぼ黒のテキスト。両方に同じ注意を払い、スクリーンショットで確認すること。
• パレットは固定ではないが、ばらばらでもない。 標準的な「黒＋オレンジ」は存在しない：references/paletas.mdの完全なパレット（調和し、コントラストと色覚異常に対してすでに検証されたグレー、アクセント、スケール、系列）を使用し、テーマに基づいて選択し、レンダリングして表示すること。個々の色（ある場所の青、別の場所の黄色、さらに別の場所の赤）を組み合わせないこと。ブランドがあるプロジェクトはそれに従う（例：MegaLabはオレンジを選択）。新しい色は、両方のテーマでカードに対して少なくとも3:1のコントラスト比があり、色覚異常者が識別できること（エージェントがdatavizガイドを持っている場合は、そのバリデーターを使用すること）。
• ニュートラルベース、目的のある色。 グレーが画面の約90%を占める。アプリごとに1つのアクセントカラー（テーマごとにバージョン）。順序付けられたデータ（大きさ、レベル、範囲）は1色のみのスケール（--seq-1..4）を使用し、グレー、青、黄、赤の虹色は使用しない。順序のない系列は固定順で--cat-1..3を使用。警戒の赤/黄は本当のステータスのみに使用し、アイコンとラベルを付けること。緑はブランドカラーとしては決して使用しないが、データでは表示される場合がある：「改善した」変化のチップ、良好なステータス、および検証済みパレットのカテゴリ系列3。ランダムな紫、茶色は不可。
• 数字は決して色付けしない。 値とラベルはテキストの色のままにする。データの色は、隣接する小さなマーク（ドット、細いバー、色付きの小さなバーのあるニュートラルなシール）に表示される。
• 改善と悪化の変化（ユーザーの参照のように）：柔らかい緑のチップと柔らかい赤のチップ、常に矢印を付ける（色を識別できない人のため）（DeltaChip）。等しい：グレーのチップ。
• 類似した状態（例：間違った、難しい、良い、簡単）は、互いに明確に異なる色を必要とする。
• カードを強調するための色付きの境界線やリングは不可。 強調はその色のソフトな背景のみ（bg-primary/10）。
• テキストは両方のテーマで常に読みやすく、クリック後のグラフの凡例やツールチップも含む。

4. レイアウトと対称性

• Webでは全幅。 中央揃えの狭いコンテンツ（ページでのmax-w-*＋mx-auto）は不可。グリッドを使用して画面を埋めること。
• ワイド画面では列を増やし、伸ばさない。 1920px以上およびウルトラワイド21:9（2560px、3440px）では、tokens.cssで定義された3xl:（1920px）と4xl:（2560px）を使用して列数を増やし、決してmin-[1920px]:（Tailwind v4ではlg:に負ける）を使用しないこと。以前は非表示だったパネルを開き（詳細を横に、テーブルをグラフの横に）、アスペクト比を制限する：時間グラフは最大約4:1、バーとマップは最大約2.5:1、リスト行は最大約720px。references/dashboards.mdのセクション4を参照。
• モバイルファースト。 快適な横方向の余白（16px）、窮屈にしないこと。水平方向にゆとりのあるカルーセル、最初のアイテムの上部にスペース。
• 画面の高さに収まる。 コンテンツは幅だけでなく、両方向でウィンドウに適応する。固定サイズのマップ、グラフ、画像、カードが最初の画面の下端を超えたり、ウィンドウより高くなったりしないこと（リストのみ、ページをスクロールして下に続く）。マップ、グラフ、大きな画像の高さはウィンドウによって制限される（max-h-[calc(100dvh-<cabeçalho>)]、h-[min(…,60dvh)]、高さが定義されたコンテナ内で`preserveAspectRatio=