File contents 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 - 共通コンポーネント
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1 --- 2 name: school-agent-inc-orchestrate-it-web-builder 3 description: Web Builder Skill 4 --- 5 6 # Web Builder Skill 7 8 ## 役割 9 awwwards.comに掲載されるレベルの、エレガントで高品質なWebサイト・Webアプリを構築する。 10 11 ## 対応タスク 12 1. Next.jsプロジェクトの新規作成 13 2. レスポンシブWebサイトの構築 14 3. ダークモード/ライトモード対応 15 4. ページ遷移アニメーションの実装 16 5. プロンプト表示UI（クリックコピー機能付き） 17 6. ドロワーメニュー・ナビゲーションの実装 18 19 ## プロジェクト初期化 20 新規Webサイト作成時は必ず以下を実行： 21 ```bash 22 npx create-next-app@latest 23 ``` 24 25 ## デザインコンセプト 26 - **品質基準**: awwwards.com掲載レベル 27 - **スタイル**: マテリアルデザインベース、ミニマルで洗練 28 - **レイアウト**: カード型UIで情報を整理 29 - **レスポンシブ**: モバイル・タブレット・デスクトップ完全対応 30 31 ## 必須機能 32 33 ### 1. テーマ切り替え 34 - ダークモード / ライトモード切り替え対応 35 - システム設定に連動するオプション 36 37 ### 2. ページ遷移アニメーション 38 - **読み込み時**: オーバーレイが上にスライドして消える（Reveal） 39 - **遷移時**: オーバーレイが下から上にスライドして覆う（Cover） 40 - **イージング**: `cubic-bezier(0.87, 0, 0.13, 1)` 41 - **制御**: loaded/exiting の2状態で管理 42 43 ### 3. プロンプト表示UI 44 プロンプト例を表示する場合： 45 - カードUIで表示 46 - クリックでコピー（ボタン不要、カード全体がクリック可能） 47 - コピー完了時にトースト通知 48 49 ### 4. ナビゲーション 50 - ドロワーメニュー（画面端からスライド） 51 - モバイル用ハンバーガーメニュー 52 53 ## 禁止事項 54 - AIっぽいデザイン（ジェネリックな見た目） 55 - 絵文字の使用 56 - シンプル「すぎる」デザイン 57 - 古臭いUI/UXパターン 58 59 ## 出力形式 60 - Next.js App Router構成 61 - TypeScript使用 62 - Tailwind CSSでスタイリング 63 - コンポーネント分割（再利用可能な設計） 64 65 ## 参照ファイル 66 詳細な実装パターンは `references/` を参照： 67 - `design-system.md` - デザインシステムの詳細 68 - `animations.md` - アニメーション実装パターン 69 - `components.md` - 共通コンポーネント 70 71 --- 72 > Converted and distributed by [TomeVault](https://tomevault.io/claim/school-agent-inc) — claim your Tome and manage your conversions. 73 <!-- tomevault:4.0:skill_md:2026-04-13 -->
commit b48caeb0c8
Frequently asked questions How do I install the School Agent Inc Orchestrate It Web Builder skill? Run npx skillmds@latest add tomevault-io/school-agent-inc-orchestrate-it-web-builder in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the School Agent Inc Orchestrate It Web Builder skill do? Web Builder Skill It is listed under AI & ML on SkillMD.
Is School Agent Inc Orchestrate It Web Builder safe to use? This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with School Agent Inc Orchestrate It Web Builder? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is School Agent Inc Orchestrate It Web Builder free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published School Agent Inc Orchestrate It Web Builder? tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io