Web Builder Skill
役割
awwwards.comに掲載されるレベルの、エレガントで高品質なWebサイト・Webアプリを構築する。
対応タスク
- •Next.jsプロジェクトの新規作成
- •レスポンシブWebサイトの構築
- •ダークモード/ライトモード対応
- •ページ遷移アニメーションの実装
- •プロンプト表示UI（クリックコピー機能付き）
- •ドロワーメニュー・ナビゲーションの実装
プロジェクト初期化
新規Webサイト作成時は必ず以下を実行：
bash
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- 共通コンポーネント