1-Pankaj/slopless-ui

Slopless UI

スロップ（Slop）とは、機械的な見た目のことです：デフォルトのグラデーションヒーロー、脈打つドット、すべての見出しにアイコン、すべてのアクションにボタン、emダッシュと形容詞で埋め尽くされたコピー、そしてレビューで守れる決断がどこにもありません。近年、生成されるインターフェースが壊れたマークアップで失敗することはほとんどありません。それらが失敗するのは、互換性があり、洗練されているが、記憶に残らない、つまり「取り替え可能」であることです。

このスキルは、エージェントの出力がそうならないために存在します。コードの前に書かれた方向性、構築中の規律、そして結果を誰かに見せる前の検証パスを与えます。スタイルを追加するのではありません。決定を追加し、そして仕上げます。

方法

この順序で作業します。各ステップには1つの役割があり、各ステップの詳細は1つの参照ファイルにあります。そのステップに到達したときだけ参照を読んでください。

1. 状況を読む

コードを書く前に、すでに存在する決定を見つけましょう：DESIGN.mdやトークンファイル、プロジェクトのCSS変数、tailwind.config.*や@themeブロック、既存のコンポーネントです。プロジェクトに既に外観がある場合は、それを正確に従ってください。あなたの仕事は、一貫性が第一、好みは第二です。ユーザーが再スタイルを依頼しない限り、何も再スタイルしないでください。

2. ブリーフを書く

コードを書く前に、4行で書き留めます。それは自分自身との契約であり、後のステップでそれらと照合します。

1. オーディエンス: 誰がこれを使い、10秒でここで何をしているのか。
2. フィーリング: レビューで守れる形容詞を1つか2つ（落ち着いている、密度が高い、温かみがある、正確）。
3. シグネチャー: 他人が覚えているであろう唯一のこと。名前を付けられなければ、結果は凡庸になります。1つ選んでください：珍しい書体、1つの大胆な数字、1つの予想外の色、1つの強い構成。
4. モード: 説得（ランディング、価格設定）、操作（ダッシュボード、アプリ）、読む（ドキュメント、記事）、または体験（ポートフォリオ、ギャラリー）。モードはその後のすべての決定を変えます。

完全なガイダンス、4つのモード、一般的なウェブサイトカテゴリ向けの28の開始方向のライブラリ：references/direction.md。

3. 決定をトークンとして行う

ブリーフを形容詞ではなく実際の値に変換します：ウェイトとフォールバックスタックを持つ2つのフォントファミリー、役割を持つ1つのアクセントカラー、スペーシングスケール、半径スケール、モーションの継続時間とイージング。これらをCSS変数またはフレームワークのトークンフォーマットで記述します。「クリーンでモダン」は決定ではありません。--accent: #8E3B2F こそが決定です。

• タイポグラフィ：references/typography.md
• カラー：references/color.md
• モーション：references/motion.md

4. 木目に沿って構築する

次に、構築中に規律ルールを適用します：

• 法則が最優先。 1つのグリッド、1つのカラム、4または8ポイントのスペーシング、ビューあたり1つの焦点、8つすべてのコンポーネント状態、キーボードとコントラストの最低基準。これらはスタイルではなく、すべてのデザインシステムが同意する物理法則です：references/foundations.md。
• ビューあたり1つの焦点、1つのプライマリアクション。 階層はサイズ、ウェイト、スペースから生まれ、ボックスからではありません。
• ボタンはコミットメントです。 ビューあたり1つの塗りつぶしボタンが標準です。セカンダリアクションはリンクまたは控えめなボタンにします。領域に3つ以上のボタンが表示される場合は、再設計してください：references/icons-and-buttons.md。
• アイコンは家具です。 言葉の方が明確です。アイコンが居場所を得るときは、1つのセット、1つのウェイト、一貫したサイズ：references/icons-and-buttons.md。
• コピーはデザインです。 短い文、具体的な名詞、動詞ファーストのボタン、emダッシュなし、専門用語なし：references/copy.md。
• すべての状態が存在する： 空、ローディング、エラー、長いコンテンツ。5つの完璧な行とハッピーパスだけでは、完成した画面ではありません。
• ページには脈拍があります。 コントロールは押下に応答し、トランジションは入ってきた方法と同じように戻り、1つのエントランスが最初の1秒を振り付け、セクションはスクロールごとに1回表示されます。ブリーフに名前が付けられた、最大1つのシグネチャーアンビエント。モーションバジェットと必要なすべてのカーブ：references/motion.md。
• テキストブロックは左揃え。 短い単一行の要素のみ中央揃え。

5. 納品前に仕上げる

確認していないUIを決して提示しないでください。順番に仕上げパスを行います：

1. python3 scripts/foldcheck.py <変更したファイル> を実行し、報告されたすべてのエラーを修正します。
2. 導入したすべてのテキストペアに対して python3 scripts/contrast.py <前景> <背景> を実行します。本文テキストは4.5:1以上、大きなテキストと境界線は3:1以上が必要です。
3. 実際のブラウザでレンダリングし、デスクトップと電話の幅でスクリーンショットを撮ります（Playwrightが利用可能な場合は node scripts/finish.mjs <url-or-file>、そうでない場合は環境が提供するブラウザツールを使用）。
4. スクリーンショットを目を細めて見る：目をぼんやりさせるか、画像を縮小します。階層と焦点が維持されている必要があります。
5. 修正し、変更したビューのみを再確認し、3回の修正パスの後で停止します。

完全なプロトコル、正直ラベル、報告フォーマット：references/verification.md。

非交渉事項

これらのパターンは機械的に見えます。たとえチュートリアルで示されていても、デフォルトで禁止されているものとして扱います：

• 点滅、脈動、跳ねる、または浮遊するドットや装飾（誰も求めていない「タイピング」インジケーターや光るステータスドットを含む）。
• サイバーパンク、ネオン、グリッチ、シンセウェーブ、ヴェイパーウェーブ、マトリックス、ホログラフィックスタイル。グローには光源がないため、誰も納得させられません。
• 紫から青、藍からフクシアへのグラデーションヒーロー、グラデーションテキスト、コンテンツの背後にあるぼやけたカラーオーブ。
• ユーザー向けテキストにおけるemダッシュ。代わりにピリオド、カンマ、または括弧を使用します。references/copy.mdのAI専門用語リストも同様。
• 絵文字をアイコン、箇条書き、UIクロームとして使用すること。
• すべての見出しにアイコン、すべてのアクションにボタン。
• Lorem ipsum、「近日公開」、架空の推薦文や実際のものとして提示されたメトリクス。
• Inter、Roboto、Arial、またはシステムスタックをデフォルトのアイデンティティフォントとして使用すること。
• 決して動かないページ。静的な出力は組み立てられたテンプレートのように読まれます。references/motion.mdのモーションバジェットは、飾りではなく仕上げの一部です。

修正を含む完全なカタログ：references/anti-slop.md。

目を細めてテスト

目をぼんやりさせる（またはスクリーンショットをサムネイルサイズに縮小する）して、もう一度見てください。ぼやけても3つのことが維持されていなければなりません：焦点、読み取り順序、プライマリアクションです。ページが灰色のスープになった場合、問題は階層であり、いくら磨いても修正できません。最初にスペーシング、サイズ、ウェイトを修正してください。このテストは10秒で完了し、どんなチェックリストよりも多くの悪いデザインを発見します。

ユーザーが禁止パターンを求めてきた場合

時々、人は本当にネオン、強いグラデーション、またはサイバーパンクテーマを望むことがあります。彼らと戦ったり、説教したりしないでください。それをうまく構築してください：実際のコントラスト、実際の階層、動作する状態、抑制されたモーション。スキルがデフォルトでそれに反していること、そしてあなたが彼らの好みに従ったことを、1行で一度だけ言ってください。禁止リストは、ガイドされていない出力を守るためのものであり、表明された好みを守るものではありません。

参照マップ

ファイル	いつ読むか
references/direction.md	ステップ2、新しいページまたは再スタイルのたびに
references/typography.md	ステップ3、フォントの選択またはチェック時
references/color.md	ステップ3、色の選択またはチェック時
references/motion.md	ステップ3（トークン用）、ステップ4（モーションパス用：バジェット、エントランス、表示、アンビエント、動きの抑制）
references/foundations.md	ステップ4、レイアウト、スペーシング、階層、状態、および指定された法則用
references/copy.md	ステップ4、テキストを書くたびに
references/icons-and-buttons.md	ステップ4、アクション、コントロール、アイコン用
references/anti-slop.md	出力が悪い意味で見覚えがある場合、またはレビュー時
references/verification.md	ステップ5、何かが完了したと言う前に

報告

UI作業は短い報告で終了します：何が構築されたか、ブリーフの1行のフィーリング、references/verification.mdからの検証ラベル（視覚的に検証済み、静的に検証済み、または未検証、その理由）、および未完了の事項。結果を「ピクセルパーフェクト」または「完全にテスト済み」と呼んではいけません。行ったことを言ってください。

スクリプト

依存関係ゼロ、ネットワークコールなし、テレメトリーなし。パスはこのファイルのフォルダからの相対パスです。

python3 scripts/foldcheck.py src/            # 機械的なパターンの静的監査
python3 scripts/contrast.py "#201B12" "#F6F1E5"   # ペアのWCAGコントラスト
node scripts/finish.mjs ./index.html          # ブラウザパス：スクリーンショット、コンソール、オーバーフロー（Playwrightが必要）

foldcheckとcontrastは常に実行されます。finishはオプションであり、Playwrightがない場合は優雅に低下します。代わりに環境が提供する任意のブラウザツールを使用してください。重要なのはツールではなく、見ることだからです。