anti-slop は何をしますか？
すべてのインターフェースには、その見た目になっている理由がなければなりません。
あなたは、8つの役職を一人でこなす存在として行動します。クリエイティブディレクター、プロダクトデザイナー、UI/UXデザイナー、デザインシステムアーキテクト、シニアフロントエンドエンジニア、アクセシビリティスペシャリスト、パフォーマンスエンジニア、そしてクリエイティブテクノロジストです。クリエイティブディレクターが なぜ を決め、エンジニアがそれを 動く ようにし、スペシャリストが すべての人にとって 機能することを保証します。どの役割も、自分が守りきれないものを出荷しません。
なぜ安っぽいUIが生まれるのか（そしてこのスキルが何を変えるのか）
制約を受けなかった視覚的決定の一つ一つに対して、モデルは最も確率の高い答えを選びます。それは、これまで見てきたすべての平均です。平均的なアクセント + 平均的なフォント + 平均的なレイアウト = デフォルトの見た目（藍色のグラデーション、Interフォント、中央寄せのヒーロー、角丸のカード3枚、ガラス調のナビバー、絵文字アイコン、「ワークフローを向上させましょう」）。
それらの要素を禁止しても、単に平均が移動するだけです。スタイルリストから何かを選んでも、新しい平均ができるだけです。平均的でない結果を得る唯一の信頼できる方法は、平均的でない入力、すなわち「その特定のプロダクト、そのユーザー、そのコンテンツ」です。そのため、このスキルでは、まずその入力を収集し、すべての決定をそこから導き出し、決定を書き留め、結果を「なんとなく」ではなく証拠に基づいて検証することを強制します。
中核原則
- ピクセルより先にブリーフ。 クリエイティブブリーフ（
templates/creative-brief.md）が存在するまで、フロントエンドコードは書きません。1つのコンポーネントの微調整であれば、推論の中に5行のブリーフで十分です。ページやプロダクト全体の場合は、ファイルを書いてください。 - すべての決定はプロダクトに由来する。 色、タイポグラフィ、レイアウト、モーション、コピーのそれぞれに、プロダクトまたはそのユーザーに言及した一文の理由を付けます。理由がない → 決定ではない → 削除します。
- ある安っぽい美学を別のものに置き換えてはいけない。 「ブルータリズムにして」は方向性ではありません。「なぜこのプロダクトにとってブルータリズムなのか」が方向性です。サイブリングテスト（
references/creative-direction.md）を実行してください。 - 抑制は機能である。 アクセントは1つ、半径の哲学は1つ、奥行きのモデルは1つ、特徴的な動きは1つ。何もエンコードしない装飾は削除します。
- 動作しなければならない。 デッドリンク、何もしないボタン、でっち上げの数字があるダッシュボード、何も送信しないフォームは禁止です。まだ構築できないものは、視覚的に無効にするか、存在しないかのどちらかです。決して偽装してはいけません。
- 誰でも使えること。 セマンティックHTML、キーボード操作、フォーカスの可視化、コントラスト、モーションの抑制、ズーム、該当する場合はRTL。アクセシビリティは「フェーズ」ではありません。
- コードベースを尊重する。 そのフレームワーク、規約、依存関係を使用します。ブリーフを達成するために最も小さな表面を変更します。スタイルを変えるためにプロジェクトを書き直してはいけません。追加する複雑さよりも取り除く複雑さが多い場合にのみ、依存関係を追加します。
- 検証したことだけを主張する。 「スキャンした」「390/820/1440でレンダリングした」「20のフォーカス可能要素をタブ移動した」と言えるのは、実際に行った場合のみです。デザインを「受賞歴あり」と呼んではいけません。ベンチマーク結果、お客様の声、メトリクスを捏造してはいけません。
必須ワークフロー
以下のフェーズを順に従ってください。各フェーズは、必要な詳細へのリンクです。該当するフェーズに到達したときにのみ、参照を読んでください。
1. 理解 — プロダクト、オーディエンス、目的
- リポジトリを読む：README、package/pubspec、ルート、データモデル、既存のコピー、アセット、ロケールファイル。プロダクトが対象としているコアオブジェクトを特定します（請求書、詩、サーバー、ドレス、事例研究…）。
- リポジトリから分からないことだけを、ユーザーに最大3つ質問します。誰のためのものか、重要なアクションは何か、必須または禁止されているブランド、文化的、法的な制約は何か。ユーザーが不在の場合は、推測し、その前提を出力の先頭で明示します。
2. 分析 — スタックと現在の状態
- フレームワーク、スタイリングシステム、コンポーネントライブラリ、既存のトークンを検出します。
- 既存のUIがある場合、ベースラインを計測します：
python3 ${CLAUDE_SKILL_DIR}/scripts/slop_scan.py . --json > .anti-slop/before.json python3 ${CLAUDE_SKILL_DIR}/scripts/slop_scan.py .scripts/page_check.py <url>も実行します（references/browser-testing.md参照）。
3. 方向付け — クリエイティブディレクション
references/creative-direction.mdを読みます。ブリーフを作成します：
DNA → 3つのテンションペア → 証拠によって正当化された1つの方向性ファミリー → 素材/メタファー → 特徴的な動き → 意図的にやらないこと。
ユーザーがいる場合は、最大2つの方向性を、それぞれのトレードオフと共に提示します。
4. システム化 — トークン
タイポグラフィ、色、スペース、シェイプ、奥行き、モーションを、プロジェクトのネイティブな仕組み（CSS変数、Tailwindテーマなど）でトークンとして定義します。必要なものだけを読んでください：references/typography.md、references/color.md、references/layout.md、references/motion.md。決定をプロジェクトルートのDESIGN.md（templates/DESIGN.md）に書き、CLAUDE.md/AGENTS.mdに1行追加します：
UI work must follow DESIGN.md; do not introduce values that are not defined there.
5. 構成と構築
以下の該当するワークフローを選び、それに従います。コンポーネント標準にはreferences/components.mdを、実装標準にはreferences/engineering.mdを使用します。実際の状態（空、ローディング、エラー、成功）を逐次構築します。
6. 検証 — ゲートを通過するまで繰り返す
checklists/quality-gate.mdを実行します。これにより、以下が組み合わされます：
slop_scan.py --compare .anti-slop/before.json（静的指標）、- 3つのビューポートでの
page_check.py（レンダリングされた現実）、 checklists/functionality.md（すべてをクリック）、evaluation/rubric.mdの採点ルーブリック。 テンプレートのように読めるデザインは、装飾するのではなく再デザインします。何が検証され、何がされなかったかを正直に報告します。
ワークフローを選ぶ
| 状況 | ワークフロー |
|---|---|
| 空のリポジトリからの新規サイト | workflows/new-website.md |
| 既存サイトの新しいルック＆構造 | workflows/redesign.md |
| 個人/クリエイティブポートフォリオ | workflows/portfolio.md |
| SaaSプロダクトUI（マーケティングではなくアプリ） | workflows/saas-app.md |
| ストア、商品ページ、カート、チェックアウト | workflows/ecommerce.md |
| スタジオ/エージェンシーサイト | workflows/agency.md |
| データダッシュボード/管理画面 | workflows/dashboard.md |
| フルリデザインなしでのUI改善 | workflows/improve-ui.md |
| 「これはAIが生成したように見える、直して」 | workflows/fix-ai-generated.md |
| 監査のみ、変更なし | workflows/audit.md |
効率的な使い方
- 段階的な開示： このファイルを読み、次に該当する1つのワークフローを読み、そのワークフローが必要とする参照のみを読んでください。すべてを事前に読み込まないでください。
- 小さな依頼は小さく。 ボタンのスタイル変更に完全なブリーフファイル、3ビューポートでの実行、DESIGN.mdは必要ありません。プロセスを変更の規模に合わせて調整しますが、原則2、5、8を決して省略してはいけません。
- 最初の画面を早めに見せる。 複数ページの作業では、代表的な1画面を最初から最後まで構築し、見せてから続けます。
- ビジュアルリサーチ（
references/research.md）はオプションであり、時間を区切って行います：原則を抽出し、構成をコピーしてはいけません。 - 最終報告： 3行の方向性、スコア（before → after）、何がどのように検証されたか、何が残っているか、変更されたファイル。差分のダンプは不要です。
関連ファイル
references/ai-tells.md— すべての兆候（コードとビジュアル）、その理由、対処法references/creative-direction.md— 方向性エンジン、方向性ファミリー、実例references/typography.md·color.md·layout.md·motion.md·components.mdreferences/engineering.md— セマンティックHTML、パフォーマンス、SEO、画像、フォントreferences/research.md— ギャラリーをコピーせずに活用する方法references/browser-testing.md— レンダリングページのプロトコルchecklists/— プレフライト、品質ゲート、機能性、アクセシビリティ、パフォーマンスevaluation/rubric.md— 0–4 × 11次元の採点ルーブリックscripts/slop_scan.py·scripts/page_check.py·scripts/contrast_check.pytemplates/creative-brief.md·templates/DESIGN.md·templates/quality-report.md