frontend-dev

フロントエンドスタジオ

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

呼び出し方法

/frontend-dev <request>

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

スキルの構成

frontend-dev/
├── SKILL.md                      # Core skill (this file)
├── scripts/                      # Asset generation scripts
│   ├── minimax_tts.py            # Text-to-speech
│   ├── minimax_music.py          # Music generation
│   ├── minimax_video.py          # Video generation (async)
│   └── minimax_image.py          # Image generation
├── references/                   # Detailed guides (read as needed)
│   ├── minimax-cli-reference.md  # CLI flags quick reference
│   ├── asset-prompt-guide.md     # Asset prompt engineering rules
│   ├── minimax-tts-guide.md      # TTS usage & voices
│   ├── minimax-music-guide.md    # Music prompts & lyrics format
│   ├── minimax-video-guide.md    # Camera commands & models
│   ├── minimax-image-guide.md    # Ratios & batch generation
│   ├── minimax-voice-catalog.md  # All voice IDs
│   ├── motion-recipes.md         # Animation code snippets
│   ├── env-setup.md              # Environment setup
│   └── troubleshooting.md        # Common issues
├── templates/                    # Visual art templates
│   ├── viewer.html               # p5.js interactive art base
│   └── generator_template.js     # p5.js code reference
└── canvas-fonts/                 # Static art fonts (TTF + licenses)

プロジェクト構成

アセット（共通）

すべてのフレームワークで、同じアセット構成を使用します。

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           # Animations (GSAP/vanilla)

React / Next.js

project/
├── public/assets/        # Static assets
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # Pages
└── package.json

Vue / Nuxt

project/
├── public/assets/
├── src/                  # or root for Nuxt
│   ├── components/
│   │   ├── ui/
│   │   ├── sections/
│   │   └── motion/
│   ├── composables/      # Shared logic
│   ├── pages/
│   └── assets/           # Processed assets (optional)
└── 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] を使用します。割合を使った flex の計算ではなく 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 Bentoパラダイム

• パレット： 背景は#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	カーソルに引き寄せられるボタン
テキストスクランブル	Vanilla	Matrix風のデコード効果
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 のチェックで囲んでください
• てんかん発作の危険があるため、コンテンツを1秒あたり3回を超えて点滅させないでください
• 視認できるフォーカスリングを必ず用意してください（box-shadow ではなく outline を使用）
• 動的に表示されるコンテンツには、必ず aria-live="polite" を追加してください
• 自動再生するアニメーションには、必ず一時停止ボタンを含めてください

2.7 依存関係

npm install framer-motion           # UI (keep at top level)
npm install gsap                    # Scroll (lazy-load)
npm install lottie-react            # Icons (lazy-load)
npm install three @react-three/fiber @react-three/drei  # 3D (lazy-load)

---

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. 保存： {type}-{descriptor}-{timestamp}.{ext} として <project>/public/assets/{images,videos,audio}/ に保存します — 必ずローカルに保存してください
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、6s、[Static shot]
video-hd	1080P、6s
bgm	30s、ボーカルなし、ループ可能
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:  Bold headline (promise or pain)
INTEREST:   Elaborate problem ("yes, that's me")
DESIRE:     Show transformation
ACTION:     Clear CTA

PAS（課題を重視する製品）：

PROBLEM:    State clearly
AGITATE:    Make urgent
SOLUTION:   Your product

FAB（製品の差別化）：

FEATURE:    What it does
ADVANTAGE:  Why it matters
BENEFIT:    What customer gains

4.3 見出し

形式	例
価値の提示	「30日で開封率を2倍に」
質問	「今も週に10時間を無駄にしていますか？」
方法	「パイプラインを自動化する方法」
数字	「コンバージョンを損なう7つの間違い」
否定	「見込み客を逃すのはやめましょう」
好奇心	「予約数を3倍にした、たった1つの変更」
変化	「見込み客50人から500人へ」

具体的にしましょう。方法ではなく、成果を最初に伝えます。

4.4 CTA

悪い例： 送信、ここをクリック、詳細を見る

良い例： 「無料トライアルを始める」、「今すぐテンプレートを入手する」、「戦略相談を予約する」

形式： [行動を表す動詞] + [得られるもの] + [緊急性／手軽さ]

配置：ファーストビュー、価値を伝えた後、長いページでは複数箇所に配置します。

4.5 感情に訴えるきっかけ

きっかけ	例
取り残される不安	「残り3枠のみ」
損失への恐れ	「これがないまま過ごすと、毎日$Xを失います」
ステータス	「トップクラスの代理店1万社以上が利用」
手軽さ	「一度設定すれば、あとは何もしなくて大丈夫です。」
不満	「何の成果も出さないツールにうんざりしていませんか？」
希望	「そう、月間経常収益$10Kを達成できます」

4.6 懸念への対応

懸念	回答
高すぎる	投資対効果を示す：「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：作成

静的モード：

• 1ページで、ビジュアルを重視し、デザイン主導にする
• パターンを繰り返し、形を整える
• canvas-fonts/ のタイポグラフィを控えめに使う
• 要素を重ねず、適切な余白を設ける
• 出力：.pdf または .png と、哲学を記した .md

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

1. 最初に templates/viewer.html を読む
2. 固定セクション（ヘッダー、サイドバー、シードコントロール）を維持する
3. 可変セクション（アルゴリズム、パラメーター）を置き換える
4. シード付き乱数：randomSeed(seed); noiseSeed(seed);
5. 出力：単体で動作する HTML ファイル1つ

ステップ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 が含まれていないか grep で検索する。1 つでも見つかった場合は、作業を停止し、納品前に生成したアセットに置き換える。
• すべてのメディアアセットがプロジェクトのアセットディレクトリ内にローカルファイルとして存在する
• 生成前にアセットのプロンプトをユーザーに確認する

---

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、およびその他すべての製品名は、それぞれの所有者の商標です。