rn8mwsb6pf-alt/tim-studio: アンチ・スロップフロントエンドスキル

tasteskill: アンチ・スロップフロントエンドスキル

ランディングページ、ポートフォリオ、リデザイン。ダッシュボード、データテーブル、マルチステップのプロダクトUIは対象外。 以下のルールはすべて状況に応じたものです。自動的に発動することはありません。まずブリーフを読み、必要なものだけを引き出してください。

---

0. ブリーフ推論（コードを書く前に状況を読む）

コードに触れたり、設定をいじる前に、ユーザーが本当に望んでいることを推論してください。大半のLLMデザイン出力が悪いのは、モデルが状況を読まずにデフォルトの美的感覚に飛びついてしまうからです。

0.A まずこれらのシグナルを読む

1. ページの種類 - ランディング（SaaS / 消費者向け / エージェンシー / イベント）、ポートフォリオ（開発者 / デザイナー / クリエイティブスタジオ）、リデザイン（維持 vs 刷新）、エディトリアル / ブログ。
2. ユーザーが使用したバイブ言語 - 「ミニマリスト」「落ち着いた」「Linearスタイル」「Awwwards」「ブルータリズム」「プレミアム消費者向け」「Appleっぽい」「遊び心がある」「シリアスなB2B」「エディトリアル」「エージェンシーっぽい」「グラッシー」「ダークテック」。
3. 参照シグナル - ユーザーがリンクしたURL、貼り付けたスクリーンショット、名前を挙げた製品、競合しているブランド。
4. オーディエンス - B2B調達パネル vs デザイン重視の消費者 vs ポートフォリオをスキャンする採用担当者。オーディエンスが美的感覚を選び、あなたの好みは選びません。
5. すでに存在するブランドアセット - ロゴ、色、書体、写真。リデザインの場合、これらは出発点であり、オプションの入力ではありません（セクション11参照）。
6. 静かな制約 - アクセシビリティ最優先のオーディエンス、公共部門、規制業界、信頼第一のコマース、子供向け製品。これらの制約は美的嗜好よりも優先されます。

0.B 生成前に一行の「デザインリード」を出力する

コードの前に、次のように一行で述べてください：「これは次のように読み取ります：<ページの種類>、対象は<オーディエンス>、<バイブ言語>の言語で、<デザインシステムまたは美的ファミリー>に傾いています。」

読み取りの例：

• 「これは次のように読み取ります：B2B SaaSランディング、対象は技術者、Linearスタイルのミニマリスト言語で、Tailwindユーティリティ + Geist + 控えめなモーションに傾いています。」
• 「これは次のように読み取ります：個人デザイナーのポートフォリオ、対象は採用担当者、エディトリアル / キネティックタイプの言語で、ネイティブCSS + スクロール駆動アニメーション + カスタムタイポグラフィに傾いています。」
• 「これは次のように読み取ります：公共部門サービスサイトのリデザイン、信頼第一の言語で、GOV.UK FrontendまたはUSWDSに傾いています。」

0.C ブリーフがあいまいな場合は、一つだけ質問し、推測しない

質問する場合は、正確に一つだけの明確化質問にしてください。複数質問のダンプは避け、デザインリードが本当に分岐する場合にのみ使用してください。例：「これはLinearクリーンとAwwwards実験的のどちらに近づけるべきでしょうか？」

コンテキストから自信を持って推論できる場合は、質問しないでください。デザインリードを宣言して先に進んでください。

0.D アンチデフォルトの規律

これらをデフォルトにしないでください：AIパープルのグラデーション、中央揃えのヒーローにダークメッシュ、3つの等しいフィーチャーカード、すべてにジェネリックなグラスモーフィズム、無限ループのマイクロアニメーション、Inter + slate-900。これらはLLMのデフォルトです。デザインリードに基づいて意図的にそれらを超えてください。

---

1. 3つのダイヤル（コア設定）

デザインリードの後、3つのダイヤルを設定します。以下のすべてのレイアウト、モーション、密度の決定は、これらによって制御されます。

• デザイン・バリアンス: 8 - 1 = 完全対称、10 = アート風カオス
• モーション強度: 6 - 1 = 静的、10 = 映画的 / 物理的
• ビジュアル密度: 4 - 1 = アートギャラリー / 風通し良い、10 = コックピット / データ満載

ベースライン： 8 / 6 / 4。デザインリードが上書きしない限り、これらを使用します。ユーザーにこのファイルの編集を依頼しないでください。上書きは会話的に行われます。

1.A ダイヤル推論（デザインリード → ダイヤル値）

シグナル	バリアンス	モーション	密度
「ミニマリスト / クリーン / 落ち着いた / エディトリアル / Linearスタイル」	5-6	3-4	2-3
「プレミアム消費者向け / Appleっぽい / ラグジュアリー / ブランド」	7-8	5-7	3-4
「遊び心がある / ワイルド / Dribbble / Awwwards / 実験的 / エージェンシー」	9-10	8-10	3-4
「ランディングページ / ポートフォリオ / マーケティングサイト（デフォルト）」	7-9	6-8	3-5
「信頼第一 / 公共部門 / 規制 / アクセシビリティ重視」	3-4	2-3	4-5
「リデザイン - 維持」	既存に合わせる	+1	既存に合わせる
「リデザイン - 刷新」	+2	+2	既存に合わせる

1.B ユースケースプリセット

ユースケース	バリアンス	モーション	密度
ランディング（SaaS、メインストリーム）	7	6	4
ランディング（エージェンシー / クリエイティブ）	9	8	3
ランディング（プレミアム消費者向け）	7	6	3
ポートフォリオ（デザイナー / スタジオ）	8	7	3
ポートフォリオ（開発者）	6	5	4
エディトリアル / ブログ	6	4	3
公共部門サービス	3	2	5
リデザイン - 維持	既存に合わせる	既存+1	既存に合わせる
リデザイン - 刷新	+2	+2	既存に合わせる

1.C ダイヤルが出力を駆動する方法

これら（またはユーザーが上書きした値）をグローバル変数として使用します。このドキュメント全体での相互参照は、これらの正確な変数名を参照します。レイアウト・バリアンスやアニメーションレベルなどのエイリアスを決して発明しないでください。

---

2. ブリーフ → デザインシステムマップ

デザインリード（セクション0）とダイヤル（セクション1）が決まったら、適切な基盤を選択してください。公式パッケージが存在するものに対してCSSを発明しないでください。美的トレンドを公式システムと偽らないでください。

2.A 本物のデザインシステムを利用するタイミング（公式パッケージを使用）

ブリーフが…と読める場合	利用するもの	理由
Microsoft / エンタープライズSaaS / ダッシュボード	@fluentui/react-components または @fluentui/web-components	公式Fluent UI、Microsoftトークン、アクセシビリティ完備
Google風UI、Materialフレーバーのプロダクト	@material/web + Material 3トークン	公式、Material Themingでテーマ設定可能
IBMスタイルのB2B / エンタープライズ分析	@carbon/react + @carbon/styles	公式Carbon、成熟したデータ密度パターン
Shopifyアプリサーフェス	polaris.js Webコンポーネント / Polaris React	Shopify管理UIに必須
Atlassian / Jiraスタイルのプロダクト	@atlaskit/* + @atlaskit/tokens	公式Atlassian DS
GitHubスタイルのDevTool / コミュニティページ	@primer/css または @primer/react-brand	公式Primer；マーケティング向けBrandバリアント
公共部門UKサービス	govuk-frontend	法的 / 規制的に期待される
米国公共部門 / 信頼第一	uswds	同上
地元ビジネス / エージェンシーの高速MVP	Bootstrap 5.3	退屈、高速、動作する
モダンなアクセシブルなReact基盤	@radix-ui/themes	プリミティブ + 洗練されたテーマ
モダンSaaS、コンポーネントを自分で所有	shadcn/ui（npx shadcn@latest add ...）	コードを自分で所有、カスタマイズ容易；デフォルト状態で出荷しない
TailwindベースのモダンSaaS / AIマーケティング	Tailwind v4ユーティリティ + dark: バリアント	個人開発 + 小規模チームのデフォルト

正直ルール： ブリーフが上記のシステムのいずれかと読める場合は、公式パッケージをインストールして使用してください。手動でCSSを再現しないでください。システムのトークンをインポートして、その90%を上書きしないでください。

プロジェクトごとに1つのシステム。 同じツリー内でFluent ReactとCarbonを混在させないでください。shadcn/uiコンポーネントをMaterial 3アプリにインポートしないでください。

2.B ブリーフが美学であり、システムではない場合

これらの方向性に対しては、単一の公式パッケージはありません。ネイティブCSS + Tailwind + メンテナンスされたコンポーネントライブラリで構築してください。コードコメントでは、何が借用したインスピレーションで、何が公式マテリアルかを正直に記載してください。

美学	正直な実装
グラスモーフィズム / 「すりガラス」	backdrop-filter、レイヤードボーダー、ハイライトオーバーレイ。prefers-reduced-transparencyにはソリッドフィルフォールバックを提供。
Bento（Appleスタイルのタイルグリッド）	CSS Gridと混合セルサイズ。単一のライブラリはこれを所有していない。
ブルータリズム	ネイティブCSS、モノスペース、生のボーダー。ライブラリなし。
エディトリアル / マガジン	セリフ書体、非対称グリッド、たっぷりとしたホワイトスペース。ライブラリなし。
ダークテック / ハッカー	モノ + アクセントネオン、ターミナルモチーフ。ライブラリなし。
オーロラ / メッシュグラデーション	SVGまたはレイヤードラジアルグラデーション。ライブラリなし。
キネティックタイポグラフィ	ネイティブCSSアニメーション、スクロール駆動アニメーション、ハイジャック用GSAP。ライブラリなし。
Apple Liquid Glass	AppleはこれをAppleプラットフォームでのみ文書化しています。公式の liquid-glass.css はありません。 Web実装はbackdrop-filter + レイヤードボーダー + ハイライトを使用した近似値です。近似値として明確にラベル付けしてください。

---

3. デフォルトアーキテクチャと規約

デザインリードが実際のデザインシステム（セクション2.A）を選択しない限り、これらがデフォルトです：

3.A スタック

• フレームワーク： ReactまたはNext.js。デフォルトでサーバーコンポーネント（RSC）を使用します。
  • RSCの安全性： グローバル状態はクライアントコンポーネントでのみ機能します。Next.jsでは、プロバイダーを "use client" コンポーネントでラップします。
  • インタラクティビティの分離： Motion、スクロールリスナー、ポインターフィジックスを使用するコンポーネントは、先頭に 'use client' を付けた分離されたリーフである必要があります。サーバーコンポーネントは静的レイアウトのみをレンダリングします。
• スタイリング： Tailwind v4（デフォルト）。Tailwind v3は、既存のプロジェクトで要求される場合のみ。
  • v4の場合：postcss.config.js で tailwindcss プラグインを使用しないでください。@tailwindcss/postcss またはViteプラグインを使用してください。
• アニメーション： Motion（以前Framer Motionとして知られていたライブラリ）。motion/react からインポート（import { motion } from "motion/react"）。framer-motion パッケージはレガシーエイリアスとして引き続き機能します。新しいコードでは motion/react を優先してください。
• フォント： 常に next/font（Next.js）を使用するか、@font-face + font-display: swap でセルフホストします。本番環境では <link> を介してGoogle Fontsをリンクしないでください。

3.B 状態管理

• 分離されたUIにはローカルの useState / useReducer。
• 深いプロップドリルを回避する場合のみグローバル状態 - Zustand、Jotai、またはReactコンテキスト。
• 絶対に useState を使用して、ユーザー入力（マウス位置、スクロール進行度、ポインターフィジックス、マグネティックホバー）によって駆動される連続値を追跡しないでください。Motionの useMotionValue / useTransform / useScroll を使用してください。useState は変更のたびにReactツリーを再レンダリングし、モバイルではクラッシュします。

3.C アイコン

• 許可されるライブラリ（優先順位順）： @phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react。
• 推奨しない： lucide-react。ユーザーが明示的に要求した場合、またはプロジェクトがすでに依存している場合のみ許容されます。
• SVGアイコンを手動で作成しないでください。 グリフが欠落している場合は、2番目のライブラリをインストールするか、プリミティブから構成してください。アイコンパスをゼロから描画しないでください。
• プロジェクトごとに1つのファミリー。 同じコンポーネントツリー内でPhosphorとLucideを混在させないでください。
• strokeWidth をグローバルに標準化（例：1.5 または 2.0）。

3.D 絵文字ポリシー

コード、マークアップ、表示テキストではデフォルトで推奨しません。記号はアイコンライブラリのグリフに置き換えてください。上書き： ユーザーが遊び心 / チャットスタイル / ソーシャルネイティブな雰囲気を明示的に要求した場合のみ絵文字を許可します。それでも意図を持って控えめに使用してください。

3.E レスポンシブとレイアウトメカニクス

• ブレークポイントを標準化（sm 640、md 768、lg 1024、xl 1280、2xl 1536）。
• ページレイアウトは max-w-[1400px] mx-auto または max-w-7xl を使用してコンテナ化します。
• ビューポートの安定性： 全高のヒーローセクションに h-screen を絶対に使用しないでください。モバイル（iOS Safariのアドレスバー）でのレイアウトジャンプを防ぐために、常に min-h-[100dvh] を使用してください。
• フレックス計算ではなくグリッド： 複雑なフレックスボックスのパーセンテージ計算（w-[calc(33%-1rem)]）を絶対に使用しないでください。常にCSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）を使用してください。

3.F 依存関係の確認（必須）

サードパーティライブラリをインポートする前に、package.json を確認してください。パッケージが欠落している場合は、最初にインストールコマンドを出力してください。ライブラリが存在することを決して前提としないでください。

---

4. デザインエンジニアリングの指令（バイアス補正）

LLMは決まり文句にデフォルトします。これらのデフォルトをプロアクティブに上書きしてください。各ルールには、状況認識型の上書きパスがあります。

4.1 タイポグラフィ

• 表示 / 見出し： デフォルト text-4xl md:text-6xl tracking-tighter leading-none。

• 本文 / 段落： デフォルト text-base text-gray-600 leading-relaxed max-w-[65ch]。

• サンセリフフォントの選択：

  • デフォルトとして推奨しない： Inter。最初に Geist、Outfit、Cabinet Grotesk、Satoshi、またはブランドに適したセリフを選んでください。
  • 上書き： ユーザーがニュートラル / スタンダード / Linearスタイルの雰囲気を明示的に要求した場合、またはブリーフが公共部門 / アクセシビリティ最優先のサイトである場合、Interは許容されます。

• 知っておくべきペアリング： Geist + Geist Mono、Satoshi + JetBrains Mono、Cabinet Grotesk + Inter Tight、GT America + IBM Plex Mono。

• セリフの規律（デフォルトとして非常に推奨しない）：

  • セリフはどのプロジェクトのデフォルトフォントとしても非常に推奨されません。 「クリエイティブ / プレミアム / エディトリアルに感じられる」というのは、セリフに手を伸ばす理由にはなりません。「クリエイティブブリーフ = セリフ」というエージェントのデフォルトのメンタルモデルは、プロダクションラウンドで最もテストされたAIの特徴です。
  • セリフは、以下のいずれかが明示的に真実である場合にのみ許容されます：
    • ブランドブリーフが文字通りセリフフォントを指定している、または
    • 美的ファミリーが真にエディトリアル / ラグジュアリー / 出版 / 写本 / ヘリテージ / ビンテージであり、かつこの特定のセリフがこの特定のブランドに適合する理由を明確に説明できる
  • それ以外のすべて（クリエイティブエージェンシー、デザインスタジオ、モダンブランド、プレミアム消費者向け、ポートフォリオ、ライフスタイル）では、デフォルトでサンセリフ表示（Geist Display、ABC Diatype、Söhne Breit、Cabinet Grotesk Display、Migra Sans、GT Walsheim、Inter Display、PP Neue Montreal）。サンセリフ表示フォントは「退屈」ではありません。それは、ファッションで黒がデフォルトであるのと同じ理由でデフォルトなのです。
  • 強調ルール（関連）： 見出し内の単語を強調したい場合（キネティックな「そして 空間的 デザイン」のような動き）、同じフォントのイタリックまたはボールドを使用してください。視覚的な興味を追加するためだけに、サンセリフの見出しにランダムなセリフの単語を注入しないでください（またはその逆）。混合ファミリーの強調はアマチュア的です。同じファミリー内のイタリック / ボールドの強調が正しい動きです。
  • 特にデフォルトとして禁止： Fraunces および Instrument_Serif（LLMが好む2つの表示用セリフ）。
  • セリフが正当化される場合（上記に従い稀）、このプールからローテーションし、連続するプロジェクト間で同じセリフを再利用しないでください：PP Editorial New、GT Sectra Display、Cardinal Grotesque、Reckless Neue、Tiempos Headline、Recoleta、Cormorant Garamond、Playfair Display、EB Garamond、IvyPresto、Migra、Editorial Old、Saol Display、Söhne Breit Kursiv、Domaine Display、Canela、Schnyder、Tobias、NB Architekt、I