ホーム / 全スキル / デザイン＆モーション / design-taste-frontend-v1
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · leonxlnx/taste-skill

design-taste-frontend-v1

正確な動作に依存するプロジェクトのために保持された、オリジナルの v1 taste-skill です。現在のデフォルトは大幅な書き直しが行われた `design-taste-frontend`（v2 実験版）です。厳密な後方互換性が必要な場合にのみ、この v1 インストール名を使用してください。

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信ファイル書き込みDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 87309License MIT（仓库根 LICENSE，Copyright (c) 2026 Leonxlnx；GitHub API spdx_id=MIT）Commit ccbc15639c
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

「凍結されたオリジナル版」としての位置づけ：v1 のダイヤル駆動思想、アンチスロップ（粗悪生成防止）ルール、パターン用語集をそのまま保持し、その正確な挙動に依存するレガシープロジェクトのバージョン固定利用に対応。

CHANGELOG.md
The original release. Dial-driven philosophy, anti-slop rules, reference vocabulary of pattern names.
CHANGELOG と README の双方で v2 を新たなデフォルト、本ファイルを互換性の安全弁と位置づけています。本スキルの価値は革新性ではなく「振る舞いの再現性」にあり、v2 への移行で既存ワークフローが破損する恐れのあるプロジェクトでは、明示的に design-taste-frontend-v1 を導入すべきです。

3 つの 1〜10 段階ダイヤル（DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY）で全ルールの分岐を駆動し、基準値を 8/6/4 に固定。ユーザーによるファイル直接改変を禁止し、対話内での動的オーバーライドのみを許容。

skills/taste-skill-v1/SKILL.md
The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file.
§6 で各ダイヤルに 1-3 / 4-7 / 8-10 の 3 段階定義を与え（例：VARIANCE 8-10 = Masonry、分数単位グリッド、2fr 1fr 1fr、padding-left: 20vw）、§3 のルールがその段階に応じて発火する構成となっており、これが v1 の「パラメトリックデザイン規律」の中核を成しています。

依存関係の検証を必須の事前ステップとして規定：サードパーティ製ライブラリをインポートする前に必ず package.json を読み込み、不足している場合は先にインストールコマンドを出力させ、パッケージの存在を勝手に仮定することを禁止。

skills/taste-skill-v1/SKILL.md
**DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`.
同セクションには Tailwind のバージョン固定（v3 プロジェクトでの v4 構文禁止、v4 での postcss.config.js 内 tailwindcss プラグイン使用禁止と @tailwindcss/postcss または Vite プラグインの強制）も含まれ、本リポジトリでは稀有な「ビルド構成の正確性」に関する制約となっています。

フレームワーク層の規約：React/Next.js および RSC を前提とし、インタラクティブな要素は必ず 'use client' を付与した末端コンポーネントとして切り出し、グローバル状態はバケツリレーの回避目的のみに制限。

skills/taste-skill-v1/SKILL.md
* **State Management:** Use local `useState`/`useReducer` for isolated UI.
§2 では RSC SAFETY（プロバイダーへの 'use client' ラップ）と INTERACTIVITY ISOLATION（§4/§7 適用時のインタラクティブ UI 切り出し）を同時に規定し、コードが「実際に動くこと」をモデルの即興任せにせずルールとして明文化しています。

脱 AI バイアス規則を 6 つの実行可能な設計指示（確定的タイポグラフィ、色彩キャリブレーション、脱中心化レイアウト、マテリアルと脱カード化、全ライフサイクルのインタラクション状態、フォームパターン）に体系化し、それぞれにデフォルトのクラス文字列を付与。

skills/taste-skill-v1/SKILL.md
**ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `DESIGN_VARIANCE > 4`.
例として Rule 1 では「デフォルトを `text-4xl md:text-6xl tracking-tighter leading-none` とする」、Rule 6 では「入力ブロックには標準で `gap-2` を使用する」など、審美的な判断をそのまま転記可能なクラス名に落とし込んでいます。

クリエイティブな表現に対して厳格な技術実装要件を設定：マグネット微物理表現には Framer Motion の useMotionValue/useTransform を用いて React のレンダリングループから切り離すことを義務付け、連続アニメーションでの useState の使用を禁止。

skills/taste-skill-v1/SKILL.md
**CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations.
§4 ではさらに layout/layoutId による共有要素遷移や、staggerChildren における親子コンポーネントの同一 Client Component ツリー所属を規定。クリエイティブな演出とパフォーマンス制約を不可分に結びつけており、v2 と比較して v1 がより「エンジニアリング寄り」であることを示しています。

アニメーションスタックの混用を禁止：同一コンポーネントツリー内での GSAP/ThreeJS と Framer Motion の併用を禁じ、GSAP/ThreeJS はページ全体のスクロール演出用途に限定した上で厳格な useEffect クリーンアップを要求。

skills/taste-skill-v1/SKILL.md
**CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree.
本リポジトリ内の gpt-taste（GSAP へ全面移行）とは明確に対比され、v1 は Framer Motion を標準とし、GSAP をフルページスクロール演出のための例外ルートとして扱っています。

AI 特有の不自然さ（AI tells）を 5 つの次元（視覚/CSS、タイポグラフィ、レイアウト・余白、コンテンツ・データ、外部リソース・コンポーネント）で網羅し、ダミー名（John Doe/Sarah Chan）、架空の数値（99.99%/50%）、架空の企業名（Acme/Nexus/SmartFlow）、陳腐なマーケティング用語を排除。

skills/taste-skill-v1/SKILL.md
**NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.
このリストは v1 の象徴的な機能であり、「いかにも AI が作ったような質感」を具体的に指摘可能なパターンへと分解したもので、後の v2 や gpt-taste に継承される基盤データとなっています。

§8 に「高度なインタラクション用語集」（ナビゲーション、レイアウト、カード、スクロール、ギャラリー、タイポグラフィ、マイクロインタラクションの 7 カテゴリ、数十種のパターン名）を整備し、モデルがその場しのぎで捏造せずパターン名を参照して実装するよう制限。

skills/taste-skill-v1/SKILL.md
## 9. THE "MOTION-ENGINE" BENTO PARADIGM
§9 ではさらに Bento パラダイムを施工可能な仕様へと具体化：背景色 #f9fafb、カード背景純白 + border-slate-200/50、角丸 rounded-[2.5rem]、拡散シャドウの厳密な数値、ラベルのカード外側下部配置を義務付け。さらに 5 種類のカードそれぞれに具体的なマイクロアニメーション（スマートリスト/コマンド入力/リアルタイムステータス/ワイドデータストリーム/コンテキスト UI）を定義しています。

締めくくりとして 7 項目の pre-flight チェックリストを設け、「納品前セルフチェック」を制度化。グローバル状態、モバイル対応の折りたたみ、100dvh、useEffect クリーンアップ、空/ローディング/エラー状態、脱カード化、高負荷アニメーションの分離を網羅。

skills/taste-skill-v1/SKILL.md
- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?
チェックリストはチェックボックス形式で提供され、モデルによる確実な確認を支援します。特に 100dvh と useEffect のクリーンアップは §2/§5 の本文ルールにも登場しており、二重で強調されています。

2コア機能

013 段階のパラメトリックデザイン規律（VARIANCE 8 / MOTION 6 / DENSITY 4）およびダイヤル連動型ルール分岐
02依存関係とビルド構成の正確性に関する事前チェック（package.json 検証、Tailwind v3/v4 構文ロック、パッケージ不足時のインストールコマンド提示）
03React/Next.js RSC アーキテクチャ規約とインタラクティブ要素の分離（'use client' 末端コンポーネント化、グローバル状態の最小化）
04脱 AI バイアスに向けた 6 つのエンジニアリング指示（タイポグラフィ、カラー、脱中心化レイアウト、脱カード化、インタラクション状態、フォーム）
05高度なモーションパラダイムとパフォーマンスの遵守事項（useMotionValue によるマグネット物理、layout 遷移、stagger 制御、top/left/width/height のアニメーション禁止）
065 次元にわたる AI 特有パターンの禁止リスト（ダミー名義、架空数値、架空ブランド名、バズワード、Unsplash のリンク切れ、均等 3 列カード、ネオングロー、純黒）
07高度なインタラクション用語集（ナビゲーション、レイアウト、カード、スクロール、ギャラリー、タイポグラフィ、マイクロインタラクションの 7 領域）
08Motion-Engine Bento 仕様（配色、角丸、シャドウの具体値 + 5 種のカード別アニメーション要件）および納品前 7 項目セルフチェック

3外部依存関係

KindDependency / Endpoint
networkpicsum.photos（禁用 Unsplash 后指定的占位图源）
packageFramer Motion（默认动效库，含 useMotionValue/useTransform/layout/AnimatePresence）
package@phosphor-icons/react 或 @radix-ui/react-icons（唯一允许的图标包）
packageTailwind CSS v3/v4（90% 样式来源，含版本锁与 v4 postcss 守则）
packageshadcn/ui（允许使用但禁止默认态）
packageGSAP（ScrollTrigger）与 ThreeJS/WebGL（仅限整页滚动叙事/画布背景，禁与 Framer Motion 混用）
packagelucide-react / zustand（被点名作为需先校验是否已安装的示例库）

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

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
  • 网络端点: 外部ネットワークアクセスの宣言: picsum.photos —— スキル自体が通信を行うのではなく、生成するページ内で https://picsum.photos/seed/{random を使用するよう指定
  • 本地工作目录: ファイル入出力と成果物出力: スキルはエージェントに対し、ユーザープロジェクト内へのソースコードファイル（React/Next コンポーネント等）の書き込みを指示（成果物生成としての通常動作）。また、ユーザープロジェクトの package.json の読み込みを要求
監査ノート： 純粋なプロンプト指示型スキルです。内部にスクリプトを持たず、外部通信や認証情報の取得も行いません。「package.json を読み込んで依存関係を確認し、ソースコードを書き出す」という、コーディングエージェントにおける通常の挙動のみを含み、この読み込みはパッケージ存在の勝手な仮定を防ぐための明示的な正確性検証です。外部との接点は、生成コード内で指定される picsum.photos のダミー画像プレースホルダーおよびユーザー自身が導入するフロントエンドパッケージのみとなります。留意点：① 凍結版 v1 であるため以降の修正は行われず、上位の v2 で修正済みの問題が残存する可能性があります。② 用語集に含まれる多数のサードパーティ製品名（Dock、Gooey Menu 等）は純粋にデザインパターンの呼称として記載されており、商標上の問題はありません。

5二重目の独立検証

  • [ok] 『保留 v1 兼容』的定位是否有仓库级依据 — CHANGELOG 'The original release. Dial-driven philosophy, anti-slop rules, reference vocabulary of pattern names.' 与 README 'preserved for projects depending on its exact behavior' 双重印证；README 还给出钉版安装命令与 install name。
  • [discrepancy] 安装名与目录名不一致（易用性坑） — 目录为 skills/taste-skill-v1，但 frontmatter name 与安装用的 install name 是 design-taste-frontend-v1。README 明确 'Install a single skill by its **install name** (the `name:` field inside the SKILL frontmatter, not the folder name)'——两者不一致是官方设计，但对用户是实际坑点，已记录。
  • [ok] 外部依赖清单完整性 — token 扫描命中项全部核实为包名/图片源/工具类，无遗漏的隐藏端点：picsum.photos（§7）、framer-motion/lucide-react/zustand（§2 依赖校验示例）、@phosphor-icons/react 与 @radix-ui/react-icons（§2 Icons）、Tailwind v3/v4 与 @tailwindcss/postcss（§2 版本锁）、shadcn/ui（§7）、GSAP/ThreeJS（§8）。npm install 仅作为『缺包时需输出的命令』示例，非 skill 自行执行。
  • [ok] 是否真的会读用户文件（file_writes/读取面） — §2 要求先检查 package.json 与已安装版本（只读），属技能明示的正确性前置；文中无其它文件读写指令。写入面全部是产物源码。
  • [ok] 与批1 的 design-taste-frontend（v2）是否重复 — 同一 repo 两个不同 skill：v2 位于 skills/taste-skill（install name design-taste-frontend，brief 推断 + 设计系统映射 + 暗色模式/重设计协议/区块库），v1 位于 skills/taste-skill-v1（三档参数 + 名词库 + Framer Motion 栈）。CHANGELOG 视 v2 为 'substantial rewrite'；本次结论只对 pin commit 内的 v1 文件有效，不推广到 v2。
  • [ok] 动画栈规定是否前后矛盾 — §4 强制 Framer Motion 用于 UI/Bento，§8 允许 GSAP/ThreeJS 但限定于整页滚动叙事/画布背景且禁止与 Framer Motion 同树混用——两处口径互补，无矛盾（与 gpt-taste 全面 GSAP 路线不同，属版本差异）。
  • [ok] 元数据（license / stars / last_push / 路径 / commit） — gh api：MIT、87309 stars、pushed_at 2026-08-24T15:23:56Z；git ls-files 确认 skills/taste-skill-v1/SKILL.md；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37。

6結論

  • 振る舞いの再現性を担保する互換性の安全弁：既存プロジェクトにおいて v2 の大幅改修に影響されることなく、v1 を明示的に固定して利用可能。
  • 成熟したパラメータ駆動型の規律：3 つの 1〜10 ダイヤルが全ルールの分岐を司り、各段階が読みやすい 3 ブロックで定義されているため、ルール構造を崩さずダイヤル調整が可能。
  • エンジニアリングの正確性をルールに組み込み：依存性チェック、Tailwind バージョンロック、RSC/'use client' の分離、useEffect クリーンアップにより、「見た目は良いが実行できない」コードの出力を防止。
  • クリエイティブ表現とパフォーマンスの不可分な設計：マグネット効果には useMotionValue を用いたレンダリングループからの分離を義務付け、無限アニメーションのメモ化・微小コンポーネント分離、レイアウトプロパティ変更の禁止を徹底。
  • レスポンシブな折りたたみ、100dvh、状態の網羅性、脱カード化、アニメーション負荷の分離を網羅した納品前 7 項目のチェックボックス式セルフチェック。
    • 最適な用途： 既に v1 で本番パイプラインを確立しており、v2 の刷新による影響を避けたいチーム（バージョン固定による挙動の担保）；「3 ダイヤル + パターン用語集」による確定的制約を求め、Framer Motion スタックを好むフロントエンド開発者；脱 AI 感のチェックリストとして活用したい開発者（架空名、架空数値、バズワード、3 列カード、ネオングロー等の禁止規約を流用可能）；本スキルシリーズの進化の出発点を理解するための教材・リファレンス用途。
    不向きな用途： 新規プロジェクト（最新のデフォルトである design-taste-frontend v2、または要件に応じて gpt-taste の GSAP ルートを直接利用すべき）；ダッシュボードやデータ高密度型 UI（ランディングページ、ポートフォリオ、リデザイン向けに特化）；React/Next + Tailwind 以外の技術スタック（§2 のアーキテクチャ規約に強く依存）；CI での機械的な審美性リンティングを求めるワークフロー；コンテキスト長の短いモデル（21 KB のプロンプト指示および用語集によるコンテキスト消費）。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload design-taste-frontend-v1.tar.gz
    sha256: 470ab18897944ef0…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit ccbc15639c.