1仕組みと動作原理

まず「モデルのデフォルト出力は粗悪である」という前提を置き、その上で個別に禁止：冒頭でLLMの5つの統計的偏向（6行に及ぶ大見出しの改行、Bentoグリッドの隙間、安っぽいメタラベル、不可視なボタンテキスト、常に左右分割のカラム）を名指しし、「デフォルトの打破」を唯一の目標に設定します。

skills/gpt-tasteskill/SKILL.md

Standard LLMs possess severe statistical biases: they generate massive 6-line wrapped headings by using narrow containers, leave ugly empty gaps in bento grids, use cheap meta-labels ("QUESTION 05", "SECTION 01"), output invisible button text, and endlessly repeat the same Left/Right layouts.

ここで行われていること：anti-slop系スキルの共通動作メカニズム——具体的な失敗パターンをまずモデルの統計的慣性に帰属させることで、後続のルールの「是正」に対する正当性を確保し、これらの観点に対するモデルの注意力を高めます。

中核メカニズムは「擬似ランダム化」：コード記述前に<design_plan>内でPythonの実行をシミュレートし、プロンプトの文字数を法とする剰余を確定的なシードとして使用。Hero構成／フォントスタック／コンポーネント／GSAPパラダイムの4つのリストから固定数を抽出し、その結果への従属を強制します。

skills/gpt-tasteskill/SKILL.md

LLMs are inherently lazy and always pick the first layout option. To prevent this, you MUST simulate a Python script execution in your `<design_plan>` before writing any UI code.

重要な明確化（再検証済み）：全文を通して要求しているのは「シミュレーション実行」と「3行のモックPython出力の記述」のみであり、実際にPythonを実行するわけではありません（スキルディレクトリ内に.pyファイルや実行コマンドは皆無）。本質はモデルに取消不能なランダムアンカーを与え、常に最初のレイアウト選択肢を選んでしまう慣性に対抗することです。ランダム性は真の乱数ではなくプロンプトの決定論的ハッシュに由来するため、同一の指示内容からは同一のレイアウトが再現可能です。

構造面ではページ全体をAIDAの4段階＋広大なセクション間隔に固定し、モデルが勝手なアレンジを加える余地を削減します。

skills/gpt-tasteskill/SKILL.md

**SPACING RULE:** Add huge vertical padding between all major sections (e.g., `py-32 md:py-48`). Sections must feel like distinct, cinematic chapters. Do not cramp elements together.

§2に対応：Attention（Hero）/ Interest（Bento）/ Desire（GSAP）/ Action（Footer）。冒頭は必ずNavigation Barで始めるよう強制されます。

タイポグラフィには美的な形容詞ではなく定量化可能な「2〜3行の鉄則」を採用：H1の行数超過は致命的な失敗と判定され、解決策も同時に提示されます（clampフォントサイズの縮小＋コンテナ幅の拡大）。

skills/gpt-tasteskill/SKILL.md

**The Line Limit:** The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure. Make the font size smaller (`clamp(3rem, 5vw, 5.5rem)`) and the container wider to ensure this.

「美しいタイポグラフィ」を自己検証可能な幾何学的制約に変換することが、「Awwwardsを参考にして」といった曖昧な指示とこの一連のスキルを分かつ核心的手法です。

グリッドの隙間問題は、CSSメカニズム＋数学的自己証明の二重構造で封鎖：grid-auto-flow: denseを強制し、col-span/row-spanの噛み合わせによって空白がないことを証明させます。

skills/gpt-tasteskill/SKILL.md

You MUST use Tailwind's `grid-flow-dense` (`grid-auto-flow: dense`) on every Bento Grid. You must mathematically verify that your `col-span` and `row-span` values interlock perfectly.

grid-flow-denseにより後続の小さなセルが自動的に空きを埋めるのはCSS側の実機序であり、「数学的検証」はモデルにplan内でspanの組み合わせを明示的に宣言させ、角の空白を低減させるためのものです。

モーションには「アニメーションを追加」とは書かず、ライブラリ、API、具体的なパラメータ設定（pin/scrub/stack、scale 0.8→1.0、画面外opacity 0.2、hover scale-105）を直接指定し、実際のGSAPコードとして落とし込めるようにします。

skills/gpt-tasteskill/SKILL.md

Static interfaces are strictly forbidden. You must write real GSAP (`@gsap/react`, `ScrollTrigger`).

§5ではGSAPパラダイムを5つの具体的な実装（Hover Physics / Scroll Pinning / Image Scale & Fade / Scrubbing Text Reveals / Card Stacking）に分解しており、各項目はそのまま転記可能なAPIスニペットの形式をとっています。

納品前のゲートを設定：コード記述を許可する前に、<design_plan>内で5項目のセルフチェック（RNG再現、AIDAチェックリスト、H1幅の計算、Bento密度の証明、ラベルの一掃とボタンのコントラスト比）の出力を義務付けます。

skills/gpt-tasteskill/SKILL.md

Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:

QAを必須の中間生成物として前置することは、モデルにスキップ不能なセルフチェックのターンを与えることと同義であり、同時にユーザーがコード生成前に軌道修正することを可能にします。

2コア機能

01重複レイアウトを防止するランダム化（模擬Python RNG＋決定論的シード）

02AIDAページ構造と広大なセクション間余白（py-32 / py-48）

03Hero 2〜3行の鉄則＋超ワイドコンテナ＋ボタンコントラスト比チェック

04隙間のないBentoグリッド（grid-flow-dense＋span噛み合わせ計算）

05GSAPモーションパラダイム集（pin / scrub / card stacking / scale-fade）

06コンポーネント兵器庫：テキスト内インライン画像、水平アコーディオン、無限marquee、推薦文カルーセル

07コンテンツ＆コピー規律：メタラベル（SECTION 01 / ABOUT US など）の恒久的一掃

08アセット＆フェイルセーフ：picsumシード画像＋「ストック写真感」を低減するCSSフィルター、横スクロールバーを防ぐ最外層のoverflow-x-hidden

3外部依存関係

Kind	Dependency / Endpoint
network	picsum.photos（占位图 CDN）
package	GSAP（@gsap/react + ScrollTrigger）
package	Tailwind CSS（grid-flow-dense 等工具类）
package	@phosphor-icons/react（marquee 图标来源）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

アクセス可能ドメインとキー範囲を宣言

管理者向け

最小権限のキー、リクエストログを保持

判定根拠（ファイルパスと抜粋）

网络端点: 外部ネットワークアクセスの宣言: picsum.photos —— スキル自体がリクエストを発行するのではなく、スキルが生成するページコードが https://picsum.photos を参照するよう規定されています。

監査ノート： 純粋な指示型スキルです。ディレクトリ内にはMarkdownファイルが1つあるのみで、スクリプト実行、外部ネットワーク送信、認証情報の読み取り、ローカルファイルへの書き込みは行いません。唯一の外部接点は、生成される成果物ページがpicsum.photosのプレースホルダー画像およびGSAP/Tailwind/Phosphorの3つのフロントエンドパッケージを参照するよう規定している点であり、これはホスト側のコーディングエージェントにおける通常のビルド挙動です。注意点：①「Python-driven randomization」はプロンプト層でのシミュレーションに過ぎず、実際にPythonを実行するわけではありません（隠れた実行面は存在しません）。② ルール量が多いため（74行、8セクション）、長いコンテキスト環境ではトークン消費に留意する必要があります。

5二重目の独立検証

[ok] 『Python-driven』是否意味着真实脚本/执行面 — 反查全文只出现 'simulate a Python script execution' 与 'Write a 3-line mock Python output' 两处；目录内无 .py，无 exec/subprocess/pip 指令。结论：纯提示词层面的伪执行，无代码执行面。
[ok] 外部依赖清单完整性 — token 扫描命中项全部核实：picsum.photos（§7 图片源）、@gsap/react+ScrollTrigger（§5）、Tailwind grid-flow-dense（§4）、@phosphor-icons/react（§6）；此外 §1/§3 提到字体名 Satoshi / Cabinet Grotesk / Outfit / Geist 与禁用 Inter——为字体选型建议，非包依赖，故未计入 external_deps。
[ok] 是否存在隐藏网络调用或凭证读取 — api_key / token / secret / .env / keychain / credential 等 token 零命中；无任何外发端点声明。
[ok] 元数据（license / stars / last_push） — gh api repos/leonxlnx/taste-skill：spdx MIT、stargazers 87309、pushed_at 2026-08-24T15:23:56Z（= 本地 HEAD 提交时间 2026-08-24T23:23:56+08:00）。此处 stars 为 2026-09-15 实测值，与库内批1快照（84793）不同属正常增长。
[ok] 路径与 commit 归属 — git ls-files 确认 skills/gpt-tasteskill/SKILL.md 存在；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37，工作树干净。
[ok] frontmatter 声明与实际内容是否相符（夸大检查） — description 列的 AIDA、2–3 行排版、防止 6 行换行、gapless bento、GSAP ScrollTrigger（pinning/stacking/scrubbing）、inline micro-images、超大分区间距，逐项在 §2/§3/§4/§5/§6 找到对应正文；唯一措辞夸大点是 'Python-driven true randomization'（实为模拟），已记录。

6結論

美的な要求を検証可能なハード制約に変換：2〜3行の上限、py-32/48の間隔、grid-flow-dense、ボタンコントラスト比など、「Awwwards参考」のような曖昧さに頼りません。

LLM特有の反復慣性をピンポイントで排除：Hero/フォント/コンポーネント/モーションの組み合わせをシミュレーション抽出で強制決定し、同一UIの重複出力を禁止します。

モーションを即座に実装可能：「アニメーションを追加」といった抽象的な要求ではなく、@gsap/react + ScrollTriggerの具体的なパラダイム（pin / scrub / stack / scale-fade）を提供します。

納品前の強制セルフチェックゲート：QAをスキップ不能な中間成果物とすることで、コード生成前にユーザーが軌道修正できます。

導入コストゼロ：単一ファイルのスキルであり、スクリプトや依存パッケージ定義は不要。会話にそのまま貼り付けるか、任意のリポジトリに配置するだけで利用可能です。

最適な用途： Claude Code、Codex、Cursorなどのコーディングエージェントを使用して、マーケティングLP、公式サイト、ポートフォリオなどの「ビジュアル優先」フロントエンドを構築するユーザー。特にFramer MotionではなくGSAPによるスクロールストーリーテリング（pin/scrub/stack）を求めるGPT/Codexワークフローや、既存フロントエンドリポジトリに「反復防止ワクチン」として組み込みたい場合に適しています。

不向きな用途： データ集約型ダッシュボード、管理画面、複数ステップのプロダクトUI（作者はv2でスコープ外と明記しており、本バリアントもマーケティングLP志向です）。整然とした対称レイアウトが必要なプロジェクトやブランド規定でレイアウトが厳格に固定されている場合（ハードルールと競合します）。オフライン環境や自社内厳密審査が必要なサプライチェーン環境（picsumおよび3つのフロントエンドパッケージに依存）。コンテキストウィンドウが短いモデル（指示の分量により他のコンテキストが圧迫されます）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload gpt-taste.tar.gz

sha256: f0a8eb4dbb6682af…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ccbc15639c.