# School Agent Inc Orchestrate It Web Builder > Web Builder Skill - Skill: `tomevault-io/school-agent-inc-orchestrate-it-web-builder` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/school-agent-inc-orchestrate-it-web-builder` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/school-agent-inc-orchestrate-it-web-builder/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/school-agent-inc-orchestrate-it-web-builder --- # Web Builder Skill ## 役割 awwwards.comに掲載されるレベルの、エレガントで高品質なWebサイト・Webアプリを構築する。 ## 対応タスク 1. Next.jsプロジェクトの新規作成 2. レスポンシブWebサイトの構築 3. ダークモード/ライトモード対応 4. ページ遷移アニメーションの実装 5. プロンプト表示UI（クリックコピー機能付き） 6. ドロワーメニュー・ナビゲーションの実装 ## プロジェクト初期化 新規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` - 共通コンポーネント --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/school-agent-inc) — claim your Tome and manage your conversions.