アンチスロップ（Anti-slop）
バイブスコーディングされたUIは、予測可能な同じ失敗パターンを示します。このスキルは、unslopの段階的手法、taste-skillのアートディレクション手法、そして機械的に検出可能な20の時代遅れの兆候を検出するスクリプトを、一つのワークフローに統合します。
クレジットとライセンス
- この手法は、unslop（Damir Sokolovsky著、https://github.com/heydamir/unslop）を基にしています。CC BY 4.0ライセンス（https://creativecommons.org/licenses/by/4.0/）の下で提供されています。LeonxlnxとMolveauのtaste-skill、および`references/playbook.md`にあるMolveauのテルリストと統合・凝縮されました。このクレジットは、いかなるコピーや翻案にも保持してください。オリジナルは`references/vendor/unslop/`に未改変のままベンダーコピーとして保存されています。
- アートディレクションの実行、ハウスルール、インスペクターは、taste-skill（Leonxlnx著、https://github.com/Leonxlnx/taste-skill）からのものです。MITライセンス。`references/vendor/taste/`に未改変のままベンダーコピーとして保存されています。
- 20のテルリストと
scripts/detect-tells.mjsはMolveauのオリジナルです（MITライセンス）。 scripts/story.mjsはunslopのレンダラー（CC BY 4.0、変更点はヘッダーに記載）を基にしています。同様にscripts/story-server.mjs（ローカルサーバー）もCC BY 4.0です。scripts/story-contrast.mjsはMolveauのオリジナルです（MITライセンス）。
ここから始める
最初にreferences/playbook.mdを読んでください。特に「最初に行うこと」ブロックから始めてください。ベンダーファイルは、詳細や実例が必要な場合のみ開いてください。 このプレイブックは、統合されたドクトリン（方向性、パス、コピー、スペーシング、カラー、タイポグラフィ、アイコン、詳細、データ、アプリ画面、イメージ、モーション、チェック）であり、ソースタグと、ソース間で矛盾がある場合の判断が記載されています。下の「何をいつ読むか」の表が、深掘りインデックスです。
重複について：これはAIルックパスです。uiスキルの批評行はより軽い一般的なデザインレビューであり、design-grillは深いマルチレンズ監査です。テルを超えたデザイン品質についてはそれらを使用してください。
方向性ゲート（Direction gate）
新しいページや画面のコーディングを始める前、およびヘビースロップ実行のステップ3として、たとえリクエストが1行だったり「とにかくやってくれ」と言われた場合でも、これを必ず行ってください。このスキルの残りの部分はミスを取り除くものであり、画面にキャラクターを与えるものではありません。これをスキップすると、結果はどのモデルも作る平均的なページになります。詳細は正しいけれど、誰のものでもないページです。
- 5行の定義。 プロダクト：何をするものか、誰のためのものか。キャラクター：具体的な言葉2〜3つ（
落ち着いた、正確で、少し温かみのある）。クリーン、モダン、スタイリッシュ、ミニマル、プレミアムは絶対に使わないでください。世界観：プロダクトが属する場所や素材。ニュートラルカラーに色合いを与え、アクセントカラーを決定します。モーメント：豊かな色とディテールを施す1〜2か所。シグネチャー：このプロダクトだけが持つ、一貫して使われる小さなディテール。 モーメントは注意深く描かれ、単にきれいにするだけではありません。伝えるべきことを再描画したチャート（滑らかな線、ミラー比較、実スケール）、またはプロダクト自体のオブジェクトを重みと光でレンダリングしたものです。 - インベントリ（棚卸し）、そしてアイデア。 競合他社と共有していない8〜12のものをリストアップします（名前、通り、ブリーフ内の数字、素材、ツール、儀式、その業界で印刷される書類など）。そして、「この画面では、[一つのアイテム]が[デバイス]になる」と書きます。そのデバイスがモーメントです。
- 二次的なデフォルトを拒否する（ブランドがすでにそれらを所有している場合を除く）。これらは、明白なテルが禁止された後にモデルが手を伸ばすものです。
- クリーム、ストーン、または温かみのあるオフホワイトのページに、バーントオレンジ、テラコッタ、セージ、フォレストグリーンのアクセント。セリフ体の見出しがある場合もない場合も（「ペーパー＆インク」ルックは新しいデフォルトであり、方向性ではありません）。
- Fraunces、Instrument Serif、Playfair、Georgiaを見出しフォントとして反射的に使う。system-uiだけをフォントとして使う。
- 白地にInterまたはGeist、インジゴまたはブルーのアクセント一つ。
- ヒーロー、3つの特徴、お客様の声、コールトゥアクション、この順番で、それに対する根拠なし。アプリ画面の場合、棒グラフの上に4つの等しい統計カード。
- 中央揃えのアイブロウ（小さなラベル）、見出し、2つのボタンだけで構成される最初の画面全体。
- 交換テスト。 名前と業界を競合他社のものに置き換えます。画面がまだ合うなら、主張、モーメント、シグネチャーを変更し、再度テストします。
- 表示して待つ。 5行の定義とアイデアを表示し、オーナーを待ちます。もし尋ねられない場合（ユーザーが「とにかく作れ」と言った場合、または人がいない状態で実行する場合）、メインファイルの先頭にコメントとしてそれらを書き、その通りに構築します。
深掘り：anti-slopプレイブック§2（方向性）と§12（アプリ画面）。実際のリファレンスについてはdesign-inspiration-indexスキル。
コアアイデア
スロップは色とエフェクトをクローム（背景、ボタン、境界線、ラベル）全体にまき散らします。クラフトはクロームを静かに保ち、豊かさを人々が覚えている1〜2のコンテンツのモーメントに集中させます。スロップを取り除くことは仕事の半分です。どのプロダクトにも属し得るクリーンな画面は、次のテンプレートです。すべての実行は、このプロダクトだけが持つ画面で終わります。
作業の順序
- ゼロからのページ、または大規模なリデザイン？ taste-skillの実行（
references/vendor/taste/taste-skill.md）に従い、プレイブックのオーバーライドを適用します。アプリ画面：プレイブック§12。 - 画面を見る（可能であればレンダリングして）。コードだけでなく。
- 監査する。兆候リスト（
references/vendor/unslop/unslop/references/signs.md）と20のテル（references/tells.md）に対して。兆候ごとに1行で、それがどこにあるかを記録。 - 作業規模を見積もる（ヘビー、ライト、スロップなし）、方向性を書く。そしてオーナーを待つ（プレイブック§1と§2）。
- 9つのパスで修正する。それぞれ画面全体に適用：スペーシング、カラー、アイコン、コピー、タイポグラフィ、レイアウト、詳細、ビジュアル、モーション（プレイブック§3〜§14）。
- チェックする。プレイブックのチェックリストを使って、検出器を実行し、監査結果と比較する（プレイブック§15）。
- 報告する。方向性、各パスの数行、そして削除した、または検証できなかったすべての主張を報告する。
20のテル（Tell）
置き換えを含む完全な表：references/tells.md。スクリプトでキャッチするものの概要：
| # | テル | スクリプト |
|---|---|---|
| 1 | バイオレット/フクシア/インジゴのグラデーション | はい |
| 2 | グラデーションテキスト | はい |
| 3 | コピー内の絵文字 | はい |
| 4 | どこでもInterまたはSpace Grotesk | いいえ |
| 5 | 色付きサイドストライプの境界線 | はい |
| 6 | 装飾的なガラスモーフィズム | はい |
| 7 | 低コントラストのダークモード | いいえ |
| 8 | 3つのアイコンボックスが一列に並んでいる | いいえ |
| 9 | 見出しの上のアイブロウピル | いいえ |
| 10 | デフォルトでLucide | はい |
| 11 | そのままのshadcn/ui | いいえ |
| 12 | スクロールでのフェードイン | はい |
| 13 | カーソル追従グロー | いいえ |
| 14 | ボタンのホバーフェード | はい |
| 15 | 不均一なスペーシング | いいえ |
| 16 | コピー内のemダッシュ | はい |
| 17 | バズワードコピー | はい |
| 18 | セリフ体イタリックのアクセント単語 | いいえ |
| 19 | Space Groteskとよく使われるディスプレイセリフ体のペア（ペアはreferences/tells.mdにあります） | はい |
| 20 | グラデーション上のグレイン | いいえ |
検出器（Detector）
node <スキルフォルダ>/scripts/detect-tells.mjs [--json] [--include-tests] <パス...>
依存関係はゼロ、Node 20以降が必要です。このスキルフォルダの外からのインポートはありません。したがって、スキルが単独でインストールされた場合でも動作します。Exit 0はクリーン、1は発見あり、2は使用方法エラーです。node_modules .git .next dist build .open-next coverageとテストファイルはスキップします。path:line #tell label matchの形式で報告します。制限はreferences/tells.mdの最後にリストされています。ヒットは「ここを見よ」として扱ってください。
プロジェクトでのラチェットテスト（Ratchet test）
ラチェットは今日のカウントを固定し、それが増加した場合に失敗させるため、テルは減少する一方になります。node:testを使用したスケッチ（パスとベースラインを適応させてください）：
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSyncはNode 22が必要です。20の場合は自分でフォルダをウォークしてください。
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // テル番号 -> 今日許可される発見数
test('新しいバイブスコードのテルがないこと', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((path) => ({ path, text: readFileSync(path, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `tell ${tell}: ${n} findings, baseline ${BASELINE[tell] ?? 0}`);
});
テルを修正するたびにベースラインを下げてください。決して上げないでください。
ストーリービデオ（Story video）
約10秒の正方形クリップで、画面が赤線とともに段階的にスロップ解除される様子を示します。依頼された場合のみ作成してください。unslopの「ストーリービデオ」セクション（references/vendor/unslop/unslop.md：1つのstory.html、先頭に.s1から.s5のCSS、data-gap、data-radius、data-slop、スワップ）に正確に従ってストーリーファイルを構築し、このスキルの適応版レンダラーでレンダリングします：
node <スキルフォルダ>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wideで16:9、--playで視聴
unslopのレンダラーに追加されたもの：
- アクセシビリティステップ。 名前がAccessibilityを含むステップは、ライブ測定値を表示します。
data-contrastを、コントラストが変化する2〜4つのテキスト要素に設定します。それぞれがWCAG比率を表示します。4.5:1（大きなテキストの場合は3:1）未満は赤、合格すると白でAA、色が読み取れない場合（lab()やcolor(display-p3 ...)など）は灰色で?を表示します。それらの要素にはsRGB、16進数、またはoklch()カラーを使用してください。data-targetを1〜2つのコントロールに設定します。それぞれがサイズを表示します。24 x 24 px未満は赤です。ビフォーの状態で失敗する要素を選んでください。アフターの状態でもまだ失敗する要素をマークしないでください。 - キャプション、
<meta name="story-caption" content="...">、左下に配置します。実行について真実であることだけを述べてください。例：モデル名、画面が手で編集されていないこと。 - クレジット
molveau/skills · unslop method by @heydamirがすべてのフレームに描画されます。これはunslopのCC BY 4.0ライセンスが要求しているためです。削除しないでください。
ストーリーは実際のファイルのプレゼンテーションです。ステップ0は元のビフォーの状態であり、最後のステップは出荷するクリーンなファイルと同一です。出荷する画面を超えてストーリーを磨かないでください。
何をいつ読むか
| ニーズ | 読むもの |
|---|---|
| 統合されたルール、値、矛盾の判断 | references/playbook.md |
| 置き換えと検出器の制限を含む20のテル | references/tells.md |
| unslopの完全な手法、方向性、9つのパス、チェックリスト、ストーリービデオ | references/vendor/unslop/unslop.md |
| 正確な値（スペーシング、タイプスケール、ランプ、モーションカーブ） | references/vendor/unslop/unslop/references/tokens.md（そのモーション値は上書きされます：uiプレイブック§10とmotion§5が優先、プレイブック矛盾19） |
| 兆候の監査リスト | references/vendor/unslop/unslop/references/signs.md |
| ヒーロービジュアル、画像プロンプト、有効なスタイル | references/vendor/unslop/unslop/references/visuals.md |
| グリフ、ハーフトーン、ディザ、デュオトーンのコード | references/vendor/unslop/unslop/references/effects.md |
| 完成したリファレンス画面（画像） | references/vendor/unslop/unslop/references/refs.md |
| コピーで作業するためのライブURLのスナップショット | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| ゼロからのページまたは大規模なリデザイン：インベントリ、導出された方向性、アイデア、ハウスルール、ゲート | references/vendor/taste/taste-skill.md |
| ダッシュボード、管理画面、設定画面の詳細 | references/vendor/taste/taste-skill/references/app-screens.md |
| コピーデッキ、2行の算術、発明せずに証明する | references/vendor/taste/taste-skill/references/copy.md |
| タイプスケール、ディスプレイ設定、フォントの読み込み | references/vendor/taste/taste-skill/references/type.md |
| パレットの役割、フィールド、ダークページ、コントラスト | references/vendor/taste/taste-skill/references/colour.md |
| マージン、空白、フレーム、セクション、スマートフォン | references/vendor/taste/taste-skill/references/layout.md |
| 画像とビデオの検索、クレジット、配置、処理 | references/vendor/taste/taste-skill/references/imagery.md |
モーションレシピ（オプトイン：motionプレイブック§9）とスクロールシーン | references/vendor/taste/taste-skill/references/motion.md、references/vendor/taste/taste-skill/references/scenes.md |
| ルーブリックで結果を判断する | references/vendor/taste/taste-skill/references/critique.md |
| ウェーブごとの時代遅れのテルレジストリ | references/vendor/taste/taste-skill/references/tells.md |
| tasteの数値の背後にある研究 | references/vendor/taste/taste-skill/references/research.md |
ベンダーファイルはアップストリームのレイアウトを維持しているため、それらの中のいくつかの相対リンクはここでは解決できない場合があります。taste-skillのスクリプトはlibrary/フォルダを読み取ります（全体を読まないでください。draw.mjsを実行してください）。一部のスクリプトはNode 22、ブラウザ、Playwright、ffmpeg、またはネットワークアクセスを必要とします。実行するビジュアルチェックはuiプレイブック、矛盾14で決定されます（このプレイブックの矛盾14はそこを指しています）。