| name | web-builder |
| description | Next.js/Reactを使用した高品質Webサイト・Webアプリを構築する。Use when: Webサイト作成、Webアプリ開発、Next.js、React、ランディングページ、ポートフォリオ、資料サイト作成時。 |
Web Builder Skill
役割
awwwards.comに掲載されるレベルの、エレガントで高品質なWebサイト・Webアプリを構築する。
対応タスク
- Next.jsプロジェクトの新規作成
- レスポンシブWebサイトの構築
- ダークモード/ライトモード対応
- ページ遷移アニメーションの実装
- プロンプト表示UI（クリックコピー機能付き）
- ドロワーメニュー・ナビゲーションの実装
プロジェクト初期化
新規Webサイト作成時は必ず以下を実行：
npx create-next-app@latest
デザインコンセプト
- 品質基準: awwwards.com掲載レベル
- スタイル: マテリアルデザインベース、ミニマルで洗練
- レイアウト: カード型UIで情報を整理
- レスポンシブ: モバイル・タブレット・デスクトップ完全対応
必須機能
1. テーマ切り替え
- ダークモード / ライトモード切り替え対応
- システム設定に連動するオプション
2. ページ遷移アニメーション
- 読み込み時: オーバーレイが上にスライドして消える（Reveal）
- 遷移時: オーバーレイが下から上にスライドして覆う（Cover）
- イージング:
cubic-bezier(0.87, 0, 0.13, 1)
- 制御: loaded/exiting の2状態で管理
3. プロンプト表示UI
プロンプト例を表示する場合：
- カードUIで表示
- クリックでコピー（ボタン不要、カード全体がクリック可能）
- コピー完了時にトースト通知
4. ナビゲーション
- ドロワーメニュー（画面端からスライド）
- モバイル用ハンバーガーメニュー
禁止事項
- AIっぽいデザイン（ジェネリックな見た目）
- 絵文字の使用
- シンプル「すぎる」デザイン
- 古臭いUI/UXパターン
出力形式
- Next.js App Router構成
- TypeScript使用
- Tailwind CSSでスタイリング
- コンポーネント分割（再利用可能な設計）
参照ファイル
詳細な実装パターンは references/ を参照：
design-system.md - デザインシステムの詳細animations.md - アニメーション実装パターンcomponents.md - 共通コンポーネント
