Frontend Studio

デザインエンジニアリング、モーションシステム、AI生成アセット、説得力のあるコピー、 ジェネレーティブアートの5つの専門機能を調整することで、 本番環境対応のフロントエンドページを完全に構築します。

呼び出し

/frontend-dev <request>

ユーザーが自然言語でリクエストを提供します（例：「音楽ストリーミングアプリのランディングページを構築してください」）。

スキル構造

frontend-dev/
├── SKILL.md                      # コアスキル（このファイル）
├── scripts/                      # アセット生成スクリプト
│   ├── minimax_tts.py            # テキスト音声変換
│   ├── minimax_music.py          # 音楽生成
│   ├── minimax_video.py          # 動画生成（非同期）
│   └── minimax_image.py          # 画像生成
├── references/                   # 詳細ガイド（必要に応じて読む）
│   ├── minimax-cli-reference.md  # CLIフラグクイックリファレンス
│   ├── asset-prompt-guide.md     # アセットプロンプトエンジニアリングルール
│   ├── minimax-tts-guide.md      # TTS使用法と音声
│   ├── minimax-music-guide.md    # 音楽プロンプトと歌詞フォーマット
│   ├── minimax-video-guide.md    # カメラコマンドとモデル
│   ├── minimax-image-guide.md    # アスペクト比とバッチ生成
│   ├── minimax-voice-catalog.md  # すべての音声ID
│   ├── motion-recipes.md         # アニメーションコードスニペット
│   ├── env-setup.md              # 環境セットアップ
│   └── troubleshooting.md        # 一般的な問題
├── templates/                    # ビジュアルアートテンプレート
│   ├── viewer.html               # p5.js インタラクティブアートベース
│   └── generator_template.js     # p5.js コードリファレンス
└── canvas-fonts/                 # スタティックアートフォント（TTF＋ライセンス）

プロジェクト構造

アセット（ユニバーサル）

すべてのフレームワークが同じアセット組織を使用します：

assets/
├── images/
│   ├── hero-landing-1710xxx.webp
│   ├── icon-feature-01.webp
│   └── bg-pattern.svg
├── videos/
│   ├── hero-bg-1710xxx.mp4
│   └── demo-preview.mp4
└── audio/
    ├── bgm-ambient-1710xxx.mp3
    └── tts-intro-1710xxx.mp3

アセット命名規則： {type}-{descriptor}-{timestamp}.{ext}

フレームワーク別

フレームワーク	アセット場所	コンポーネント場所
Pure HTML	./assets/	なし（インラインまたは ./js/）
React/Next.js	public/assets/	src/components/
Vue/Nuxt	public/assets/	src/components/
Svelte/SvelteKit	static/assets/	src/lib/components/
Astro	public/assets/	src/components/

Pure HTML

project/
├── index.html
├── assets/
│   ├── images/
│   ├── videos/
│   └── audio/
├── css/
│   └── styles.css
└── js/
    └── main.js           # アニメーション（GSAP/バニラ）

React / Next.js

project/
├── public/assets/        # スタティックアセット
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # ページ
└── package.json

Vue / Nuxt

project/
├── public/assets/
├── src/                  # または Nuxt のルート
│   ├── components/
│   │   ├── ui/
│   │   ├── sections/
│   │   └── motion/
│   ├── composables/      # 共有ロジック
│   ├── pages/
│   └── assets/           # 処理済みアセット（オプション）
└── package.json

Astro

project/
├── public/assets/
├── src/
│   ├── components/       # .astro, .tsx, .vue, .svelte
│   ├── layouts/
│   ├── pages/
│   └── styles/
└── package.json

コンポーネント命名規則： PascalCase（HeroSection.tsx, HeroSection.vue, HeroSection.astro）

---

コンプライアンス

このスキル内のすべてのルールは必須です。いかなるルール違反もブロッキングエラーです。 修正してから進むか配信してください。

---

ワークフロー

フェーズ1：デザインアーキテクチャ

1. リクエストを分析 — ページタイプとコンテキストを決定
2. ページタイプに基づいてデザインダイヤルを設定
3. レイアウトセクションを計画し、アセット要件を特定

フェーズ2：モーションアーキテクチャ

1. セクションごとにアニメーションツールを選択（ツール選択マトリクスを参照）
2. パフォーマンスガードレールに従ってモーションシーケンスを計画

フェーズ3：アセット生成

scripts/ を使用してすべての画像/動画/オーディオアセットを生成します。 プレースホルダーURL（unsplash、picsum、placeholder.com、via.placeholder、placehold.co など）や 外部URLを使用しないでください。

1. アセット要件を解析（タイプ、スタイル、仕様、用途）
2. 最適化されたプロンプトを作成し、ユーザーに表示して、生成前に確認
3. スクリプトを実行してプロジェクトに保存 — すべてのアセットがローカルに保存されるまでフェーズ5に進まない

フェーズ4：コピーライティングとコンテンツ

AIDA、PAS、FABなどのコピーライティングフレームワークに従ってすべてのテキストコンテンツを作成します。 「Lorem ipsum」を使用しないでください — 実際のコピーを書いてください。

フェーズ5：UI構築

プロジェクトをスカフォールディングし、デザインとモーションのルールに従って各セクションを構築します。 生成されたアセットとコピーを統合します。すべての <img>、<video>、<source>、および CSS background-image は、 フェーズ3のローカルアセットを参照する必要があります。

フェーズ6：品質ゲート

最終チェックリストを実行します（品質ゲートセクションを参照）。

---

1. デザインエンジニアリング

1.1 ベースライン設定

ダイヤル	デフォルト	範囲
DESIGN_VARIANCE	8	1=対称、10=非対称
MOTION_INTENSITY	6	1=スタティック、10=シネマティック
VISUAL_DENSITY	4	1=エアリー、10=パック状

ユーザーのリクエストに基づいて動的に調整します。

1.2 アーキテクチャ規約

• 依存関係検証： ライブラリをインポートする前に package.json を確認します。不足している場合は、インストールコマンドを出力します。
• フレームワーク： React/Next.js。デフォルトはサーバーコンポーネント。インタラクティブコンポーネントは、分離した "use client" リーフコンポーネントである必要があります。
• スタイリング： Tailwind CSS。package.json でバージョンを確認 — v3/v4構文を混在させない。
• アンチ絵文字ポリシー： どこでも絵文字を使用しないでください。Phosphor または Radix アイコンのみ使用してください。
• ビューポート： h-screen ではなく min-h-[100dvh] を使用します。フレックスのパーセンテージ計算ではなく CSS Grid を使用します。
• レイアウト： max-w-[1400px] mx-auto または max-w-7xl。

1.3 デザインルール

ルール	指示
タイポグラフィ	見出し：text-4xl md:text-6xl tracking-tighter。本文：text-base leading-relaxed max-w-[65ch]。決して Inter を使用しないでください — Geist/Outfit/Satoshi を使用してください。決して ダッシュボード上でセリフを使用しないでください。
色	最大1つのアクセント、彩度 < 80%。決して AI 紫/青を使用しないでください。1つのパレットに固執します。
レイアウト	VARIANCE > 4 の場合、中央配置のヒーロを使用しないでください。 スプリットスクリーンまたは非対称レイアウトを強制します。
カード	DENSITY > 7 の場合、ジェネリックカードを使用しないでください。 border-t、divide-y、またはスペーシングを使用します。
状態	常に実装してください： ローディング（スケルトン）、空、エラー、触覚フィードバック（scale-[0.98]）。
フォーム	ラベルは入力の上に。エラーは下に。入力ブロックには gap-2。

1.4 アンチスロップテクニック

• 液体ガラス： backdrop-blur + border-white/10 + shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]
• 磁気ボタン： useMotionValue/useTransform を使用 — 連続アニメーション用の useState を使用しない
• 永続的モーション： INTENSITY > 5 の場合、無限マイクロアニメーション（Pulse、Float、Shimmer）を追加
• レイアウト遷移： Framer layout と layoutId プロップを使用
• スタッガー： staggerChildren または CSS animation-delay: calc(var(--index) * 100ms) を使用

1.5 禁止パターン

カテゴリ	禁止
ビジュアル	ネオングロー、純黒（#000）、彩度の高いアクセント、ヘッダーのグラデーションテキスト、カスタムカーソル
タイポグラフィ	Inter フォント、超大型 H1、ダッシュボード上のセリフ
レイアウト	3列の同等カードの行、不自然なギャップを持つフローティング要素
コンポーネント	カスタマイズなしのデフォルト shadcn/ui

1.6 クリエイティブアーセナル

カテゴリ	パターン
ナビゲーション	ドック拡大、磁気ボタン、グーイーメニュー、ダイナミックアイランド、ラジアルメニュー、スピードダイアル、メガメニュー
レイアウト	ベントグリッド、マソンリー、クロマグリッド、スプリットスクリーンスクロール、カーテンリビール
カード	パラレックスティルト、スポットライトボーダー、グラスモーフィズム、ホログラフィックホイル、スワイプスタック、モーフィングモーダル
スクロール	スティッキースタック、水平ハイジャック、ロコモーティブシーケンス、ズームパラレックス、プログレスパス、液体スワイプ
ギャラリー	ドームギャラリー、カバーフロー、ドラッグ＆パン、アコーディオンスライダー、ホバートレイル、グリッチエフェクト
テキスト	キネティックマーキー、テキストマスクリビール、スクランブルエフェクト、サーキュラーパス、グラデーションストローク、キネティックグリッド
マイクロ	パーティクル爆発、プルトゥリフレッシュ、スケルトンシマー、方向ホバー、リップルクリック、SVG描画、メッシュグラデーション、レンズブラー

1.7 ベントパラダイム

• パレット： 背景 #f9fafb、カード純白（border-slate-200/50）
• サーフェス： rounded-[2.5rem]、拡散シャドウ
• タイポグラフィ： Geist/Satoshi、tracking-tight 見出し
• ラベル： カードの外側と下側
• アニメーション： スプリングフィジックス（stiffness: 100, damping: 20）、無限ループ、React.memo 分離

5カードアーキタイプ：

1. インテリジェントリスト — layoutId を使った自動ソート
2. コマンド入力 — タイプライタと点滅カーソル
3. ライブステータス — 呼吸インジケーター
4. ワイドデータストリーム — 無限水平カルーセル
5. コンテキストUI — スタッガーハイライト + フローティングツールバー

1.8 ブランドオーバーライド

ブランドスタイルがアクティブな場合：

• ダーク：#141413、ライト：#faf9f5、ミッド：#b0aea5、サブル：#e8e6dc
• アクセント：オレンジ #d97757、ブルー #6a9bcc、グリーン #788c5d
• フォント：Poppins（見出し）、Lora（本文）

---

2. モーションエンジン

2.1 ツール選択マトリクス

必要なもの	ツール
UI の開閉/レイアウト	Framer Motion — AnimatePresence、layoutId、スプリング
スクロールストーリーテリング（ピン留め、スクラブ）	GSAP + ScrollTrigger — フレーム精密制御
ループアイコン	Lottie — 遅延読み込み（~50KB）
3D/WebGL	Three.js / R3F — 分離した <Canvas>、独自の "use client" 境界
ホバー/フォーカス状態	CSS のみ — ゼロ JS コスト
ネイティブスクロール駆動	CSS — animation-timeline: scroll()

競合ルール [必須]：

• 同じコンポーネント内で GSAP と Framer Motion を混合しない
• R3F は分離した Canvas ラッパーに存在する必要があります
• 常に Lottie、GSAP、Three.js を遅延読み込みします

2.2 インテンシティスケール

レベル	テクニック
1-2 微妙	CSS トランジションのみ、150-300ms
3-4 スムーズ	CSS キーフレーム + Framer animate、スタッガー ≤3項目
5-6 流動的	whileInView、磁気ホバー、パラレックスティルト
7-8 シネマティック	GSAP ScrollTrigger、ピン留めセクション、水平ハイジャック
9-10 没入型	完全スクロールシーケンス、Three.js パーティクル、WebGL シェーダー

2.3 アニメーションレシピ

完全なコードについては references/motion-recipes.md を参照してください。概要：

レシピ	ツール	用途
スクロールリビール	Framer	ビューポート進入時のフェード＋スライド
スタッガーグリッド	Framer	シーケンシャルリストアニメーション
ピン留めタイムライン	GSAP	水平スクロール（ピン留め付き）
ティルトカード	Framer	マウス追跡 3D パースペクティブ
磁気ボタン	Framer	カーソル吸着ボタン
テキストスクランブル	バニラ	マトリックススタイルデコード
SVGパス描画	CSS	スクロール連動パスアニメーション
水平スクロール	GSAP	垂直方向から水平方向へのハイジャック
パーティクル背景	R3F	デコラティブ WebGL パーティクル
レイアウトモーフ	Framer	カードからモーダルへの拡張

2.4 パフォーマンスルール

GPU のみのプロパティ（これらのみをアニメーション化してください）： transform、opacity、filter、clip-path

アニメーション化しないこと： width、height、top、left、margin、padding、font-size — これらの効果が必要な場合は、代わりに transform: scale() または clip-path を使用します。

分離：

• 永続的なアニメーションは React.memo リーフコンポーネントに存在する必要があります
• will-change: transform はアニメーション中のみ
• 重いコンテナに contain: layout style paint

モバイル：

• 常に prefers-reduced-motion を尊重
• 常に pointer: coarse でパラレックス/3D を無効化
• パーティクルを制限：デスクトップ 800、タブレット 300、モバイル 100
• 768px 未満のモバイルで GSAP ピン留めを無効化

クリーンアップ： GSAP/オブザーバーを使用するすべての useEffect は return () => ctx.revert() を含む必要があります

2.5 スプリングとイージング

フィール	Framer 設定
スナッピー	stiffness: 300, damping: 30
スムーズ	stiffness: 150, damping: 20
バウンシー	stiffness: 100, damping: 10
ヘビー	stiffness: 60, damping: 20

CSS イージング	値
スムーズ減速	cubic-bezier(0.16, 1, 0.3, 1)
スムーズ加速	cubic-bezier(0.7, 0, 0.84, 0)
エラスティック	cubic-bezier(0.34, 1.56, 0.64, 1)

2.6 アクセシビリティ

• 常にモーションを prefers-reduced-motion チェックでラップ
• 3回/秒を超える点滅（発作リスク）は絶対禁止
• 常に表示フォーカスリングを提供（box-shadow ではなく outline を使用）
• 動的に表示されるコンテンツに常に aria-live="polite" を追加
• 自動再生アニメーション用に常に一時停止ボタンを含める

2.7 依存関係

npm install framer-motion           # UI（トップレベルに保持）
npm install gsap                    # スクロール（遅延読み込み）
npm install lottie-react            # アイコン（遅延読み込み）
npm install three @react-three/fiber @react-three/drei  # 3D（遅延読み込み）

---

3. アセット生成

3.1 スクリプト

タイプ	スクリプト	パターン
TTS	scripts/minimax_tts.py	同期
音楽	scripts/minimax_music.py	同期
動画	scripts/minimax_video.py	非同期（作成 → ポーリング → ダウンロード）
画像	scripts/minimax_image.py	同期

環境変数：MINIMAX_API_KEY（必須）。

3.2 ワークフロー

1. 解析： タイプ、数量、スタイル、仕様、用途
2. プロンプト作成： 具体的に（構図、照明、スタイル）。画像プロンプトにテキストを含めないでください。
3. 実行： ユーザーにプロンプトを表示、生成前に必ず確認、スクリプト実行
4. 保存： <project>/public/assets/{images,videos,audio}/ に {type}-{descriptor}-{timestamp}.{ext} として保存 — ローカルに保存する必要があります
5. 後処理： 画像 → WebP、動画 → ffmpeg 圧縮、オーディオ → 正規化
6. 配信： ファイルパス + コードスニペット + CSS 提案

3.3 プリセットショートカット

ショートカット	仕様
hero	16:9、シネマティック、テキスト安全
thumb	1:1、中央配置被写体
icon	1:1、フラット、クリーン背景
avatar	1:1、ポートレート、円形クロップ対応
banner	21:9、OG/ソーシャル
bg-video	768P、6秒、[Static shot]
video-hd	1080P、6秒
bgm	30秒、ボーカルなし、ループ可能
tts	MiniMax HD、MP3

3.4 リファレンス

• references/minimax-cli-reference.md — CLI フラグ
• references/asset-prompt-guide.md — プロンプトルール
• references/minimax-voice-catalog.md — 音声ID
• references/minimax-tts-guide.md — TTS 使用法
• references/minimax-music-guide.md — 音楽生成（プロンプト、歌詞、構造タグ）
• references/minimax-video-guide.md — カメラコマンド
• references/minimax-image-guide.md — アスペクト比、バッチ

---

4. コピーライティング

4.1 コアジョブ

1. 注意を引く → 2. 欲望を作る → 3. 摩擦を除去 → 4. 行動を促す

4.2 フレームワーク

AIDA（ランディングページ、メール）：

ATTENTION:  大胆な見出し（約束または問題）
INTEREST:   問題を詳述（「そう、それは私だ」）
DESIRE:     変換を表示
ACTION:     明確なCTA

PAS（痛みに駆動される製品）：

PROBLEM:    明確に述べる
AGITATE:    緊急感を作る
SOLUTION:   あなたの製品

FAB（製品差別化）：

FEATURE:    それが何をするか
ADVANTAGE:  なぜそれが重要か
BENEFIT:    顧客が何を得るか

4.3 見出し

公式	例
約束	"30日で開封率を倍に"
質問	"それでも毎週10時間を浪費していますか？"
ハウツー	"パイプラインを自動化する方法"
番号	"コンバージョンを失わせる7つの間違い"
ネガティブ	"リード喪失を止める"
好奇心	"予約を3倍にした1つの変更"
変換	"50から500リードへ"

具体的にしてください。方法ではなく成果でリードします。

4.4 CTA

悪い例： Submit、Click here、Learn more

良い例： "無料トライアルを開始"、"テンプレートを今すぐ取得"、"私の戦略コールを予約"

公式： [アクション動詞] + [何を得るか] + [緊急感/簡単さ]

配置：フォールドの上、価値後、長いページに複数回。

4.5 感情的トリガー

トリガー	例
FOMO	"残り3枠のみ"
喪失への恐れ	"この間もあなたは$Xを失っている"
ステータス	"10,000+ トップエージェンシーに参加"
簡単さ	"一度設定したら、永遠に忘れる"
欲求不満	"何も提供しないツールにうんざりしていますか？"
希望	"はい、あなたは月額$10K に到達できます"

4.6 異議処理

異議	応答
高すぎる	ROI を表示：「2週間で元が取れる」
自分には機能しない	類似顧客からの社会的証明
時間がない	"セットアップには10分"
失敗したら	"30日間返金保証"
考える必要がある	緊急感/希少性

FAQ、推奨文、CTA 近くに配置します。

4.7 証明タイプ

推奨文（名前/職位付き）、ケーススタディ、データ/メトリクス、社会的証明、認定

---

5. ビジュアルアート

哲学優先ワークフロー。2つの出力モード。

5.1 出力モード

モード	出力	いつ
スタティック	PDF/PNG	ポスター、プリント、デザインアセット
インタラクティブ	HTML（p5.js）	ジェネレーティブアート、探索可能なバリエーション

5.2 ワークフロー

ステップ1：哲学創作

ムーブメントに名前をつけます（1-2語）。哲学を表明します（4-6段落）。以下をカバーします：

• スタティック：スペース、形、色、スケール、リズム、階層
• インタラクティブ：計算、浮現、ノイズ、パラメトリック変動

ステップ2：概念的シード

微妙でニッチなリファレンスを特定 — 洗練された、リテラルではない。ジャズミュージシャンが別の曲を引用する。

ステップ3：作成

スタティックモード：

• 単一ページ、非常に視覚的、デザイン指向
• 繰り返しパターン、完全な形
• canvas-fonts/ からのスパーステキポグラフィ
• 何も重ならない、適切なマージン
• 出力：.pdf または .png + 哲学 .md

インタラクティブモード：

1. まず templates/viewer.html を読む
2. 固定セクション（ヘッダー、サイドバー、シードコントロール）を保持
3. 可変セクション（アルゴリズム、パラメータ）を置換
4. シード付きランダムネス：randomSeed(seed); noiseSeed(seed);
5. 出力：単一の自己完結 HTML

ステップ4：リファインメント

追加ではなくリファイン。クリスプに。傑作にポーランド。

---

品質ゲート

デザイン：

• 高分散デザイン用のモバイルレイアウト崩壊（w-full、px-4）
• h-screen ではなく min-h-[100dvh]
• 空、ローディング、エラー状態を提供
• スペーシングが十分な場所ではカードを省略

モーション：

• 選択マトリクスごとの正しいツール
• 同じコンポーネント内で GSAP + Framer を混合しない
• すべての useEffect がクリーンアップ戻り値を持つ
• prefers-reduced-motion を尊重
• 永続的なアニメーションを React.memo リーフコンポーネントに配置
• GPU プロパティのみをアニメーション化
• 重いライブラリを遅延読み込み

一般：

• 依存関係を package.json で確認
• プレースホルダー URL なし — 出力で unsplash、picsum、placeholder、placehold、via.placeholder、lorem.space、dummyimage をグレップします。見つかった場合は STOP し、配信前に生成アセットに置き換えます。
• すべてのメディアアセットがプロジェクトのアセットディレクトリにローカルファイルとして存在
• アセットプロンプトは生成前にユーザーと確認

---

React と Next.js は Meta Platforms, Inc. および Vercel, Inc. のそれぞれの商標です。Vue.js は Evan You の商標です。Tailwind CSS は Tailwind Labs Inc. の商標です。Svelte と SvelteKit はそれぞれの所有者の商標です。GSAP/GreenSock は GreenSock Inc. の商標です。Three.js、Framer Motion、Lottie、Astro、およびその他すべての製品名は、それぞれの所有者の商標です。