web-design

Web Design

「このビジュアルタスクを担当する上流の Web デザインレシピはどれか、そしてどうインストールするか」が本当の質問である場合に、このスキルを使用してください。

これはルーティングパックであり、再実装ではありません。79 個の実際のサブスキルは、上流の MengTo/Skills · agent-skills/web-design にあります。このスキルの役割は次のとおりです。

1. リクエストを 7 つのファミリーのいずれかに分類する
2. そのファミリーの中で、最も対象を絞った単一のサブスキルを選ぶ
3. まだインストールされていない場合は、ローカルに取得する
4. 複数のファミリーにまたがる作業を、ドキュメントに記載された順序で進める
5. 実際の担当先がこのリポジトリのシステム／アーキテクチャ／アクセシビリティスキルである場合は、そちらに案内する

7 つのファミリー

ファミリー	数	リクエストの対象
スタイル／デザインシステムパック	23	ブランド全体またはサイト全体の美的表現 — 背景、ヒーロー、ナビゲーション、カード、タイポグラフィを組み合わせたもの（「ダークなガラス調のダッシュボード」「明るいベージュの SaaS」「鮮やかな緑のテクニカルシステム」など）
サイト全体の品質と方向性	10	ページ／サイトレベルの概要や達成基準（「Awwwards 品質」、料金ページ、エンタープライズ AI 製品ページ、サービス予約サイトなど）
モーションとスクロールシステム	10	スクロール時の動作、表示タイミング、ピン留め、演出、スクロールの進捗
WebGL／3D 背景とシェーダー	8	特定の名前付きパッケージに依存しない、リアルタイムで描画される背景やヒーローオブジェクト（グリッド、レーザー、パーティクルフィールド、多面体の 3D オブジェクトなど）
ライブラリの埋め込みと統合	10	名前が指定されたサードパーティのライブラリやパッケージ — GSAP、Three.js、Tailwind、Matter.js、globe.gl、cobe、Vanta.js、Unicorn Studio、Shaders
コンポーネントと状態のエフェクト	4	単一コンポーネントのインタラクティブな状態 — ホバー、読み込み中、フォーカス、選択、押下
CSS テクニックのプリミティブ	14	単一の小さな再利用可能な CSS／SVG テクニックや装飾の詳細（グラデーションボーダー、アルファマスク、段階的なぼかし、コーナーカット、シャドウ、アイコンなど）

各サブスキルの具体的な「使用する場面」を記載した全 79 行の表は、 references/skill-catalog.md にあります。ファミリーの選択ルール、最も対象を絞った候補を選ぶルール、組み合わせのルールは references/family-routing.md にあります。

このスキルを使用する場面

• マーケティングサイト、ランディングページ、ポートフォリオ、エディトリアルページ、ダッシュボードシェルのビジュアルレイヤーをデザインまたは改良する
• 上流の Web デザインサブスキルを 2 つ以上の候補から選ぶ必要があり、どれが最も対象を絞ったものか判断できない
• 特定のエフェクト（カーソルトレイル、レーザー背景、段階的なぼかし、スクロールに固定されたセクション）が指定されており、そのエフェクトのレシピをすでに備えたものを探している
• ライブラリ（GSAP、Three.js、Vanta、globe.gl、Unicorn Studio）が指定されており、場当たり的なセットアップコードではなく、統合やクリーンアップのパターンが必要
• 1 つのページで複数のビジュアルレイヤーを組み合わせる必要があり、安全な適用順序が必要
• タスクに必要な上流サブスキルがまだインストールされていない

このスキルを使用しない場面

• エフェクトを自作するのではなく、すぐに使えるアニメーション付き React コンポーネントライブラリを採用するタスク → react-bits を使用

• 実際のアプリのスクリーンショット、競合の参考例、UI 批評の入力など、デザインの根拠を生成するタスク → lazyweb を使用

• デザイントークンのガバナンス、テーマ設定の契約、システム全体の一貫性ルールに関するタスク → design-system を使用

• ブレークポイント戦略、ページシェルへの適応、コンテナクエリの分類に関するタスク → responsive-design を使用

• ビジュアルスタイリングではなく、React のレンダー／バンドル／データ取得のパフォーマンスに関するタスク → react-best-practices を使用

• アクセシビリティ監査、WCAG 準拠、支援技術の動作に関するタスク → web-accessibility を使用

• カメラ、敵、戦闘、遭遇など、ゲームプレイを伴うインタラクティブな 3D に関するタスク → web-game-development を使用

• 2D ピクセルアートのスプライトシートを生成するタスク → perfectpixel を使用

境界の詳細な説明：references/route-outs.md。

ステップ 1：リクエストを 1 つのファミリーに分類する

references/family-routing.md §1 を参照してください。キーワードではなく、リクエストの形式に基づいて照合します。リクエストが 2 つのファミリーにまたがる場合は、主な意図に基づいて振り分けます。コンポーネントの状態の意味に関する質問は、名前付きパッケージとして提供されている場合でも Component & State Effects に該当します。ライブラリの接続方法に関する質問は Library Embeds & Integrations に該当します。

ステップ 2：最も範囲の狭いサブスキルを 1 つ選ぶ

references/skill-catalog.md を参照し、サブスキルを 1 つ選んでください。広範な関連項目よりも、具体的なレシピを優先します。「この画像の下端をフェードさせる」なら、スタイルパック全体ではなく css-alpha-masking です。

ステップ 3：インストール済みか確認する

ls "${SKILLS_ROOT:-$HOME/.agents/skills}" | grep -x "<matched-skill-name>" || echo "not installed"

ステップ 4：サブスキルがない場合は取得する

scripts/fetch-upstream-skills.sh は https://github.com/MengTo/Skills.git から agent-skills/web-design のみをスパースチェックアウトし、要求されたフォルダーを ${SKILLS_ROOT:-$HOME/.agents/skills} にコピーします。既存のものは削除しません。

scripts/fetch-upstream-skills.sh --list
scripts/fetch-upstream-skills.sh --skill gsap --skill animation-on-scroll
scripts/fetch-upstream-skills.sh --dry-run --all
scripts/fetch-upstream-skills.sh --all

ステップ 5：複数ファミリーの作業を順序付ける

複数のファミリーが必要な場合は、次の順序で適用します（詳細は references/family-routing.md §5 を参照してください）。

1. 方向性／スタイルパック — 色、タイポグラフィ、構造のルールを決めます
2. レイアウト — グリッド、コンテナー、分割レイアウト
3. 背景／3D — 最終レイアウトに合わせたサイズの WebGL、シェーダー、またはパーティクルレイヤー
4. モーション — DOM 構造が安定してからスクロールとリビールのシステムを適用します
5. コンポーネントの状態 — 実際のコンポーネントにホバー／読み込み中／選択済み／フォーカス状態を適用します
6. 仕上げ — CSS Technique Primitives を最後に追加します

ステップ 6：振り分け先を報告する

ファミリー、選択したサブスキル、すでにインストール済みか取得したか、組み合わせる追加のファミリーとその理由、別のスキルに振り分けた場合はその内容を明記します。

例

「ランディングページを Awwwards のサイトのような雰囲気にしてください。暗く、ガラスのような質感で、レーザー背景とスクロール時のリビールを加えてください。」 → 方向性には Full-Site Quality & Direction（build-awwwards-quality-sites）、次に表面のシステムには Style/Design-System Packs（dark-glass-clean-layout）、次に背景には WebGL/3D Backgrounds & Shaders（webgl-laser）、最後に Motion & Scroll Systems（animation-on-scroll）を適用します。§5 に従い、この順序で適用します。

「このヒーロー画像の下端にフェードを加えてください。」 → CSS Technique Primitives のサブスキル css-alpha-masking のみです。スタイルパックは追加しないでください。

「Next.js のヒーロー部分に Vanta.js を設定し、ルート変更時に確実にクリーンアップされるようにしてください。」 → Library Embeds & Integrations の vantajs です。このリクエストはライブラリの接続とライフサイクルのクリーンアップに関するものであり、ビジュアルの方向性を選ぶものではありません。

「3 つのアプリでデザイントークンに一貫性がありません。」 → design-system に振り分けます。このパックはページのスタイルを整えるものであり、トークンを管理するものではありません。

ベストプラクティス

1. コードを書く前にサブスキルを 1 つ決めてください — 該当するレシピがあるのに、シェーダーやスクロールシステムを即興で作ることを防ぐのが、このパックの目的です。
2. リクエストが実際に複数のレイヤーにまたがる場合に限り、ファミリーを組み合わせてください — ほとんどのリクエストは 1 つのサブスキルで対応できます。
3. 適用順序を守ってください — レイアウトが確定する前にモーションを組み込むと、古い要素境界を基準に再計測されます。
4. 同じ問題を解決するサブスキルを 2 つ重ねて使わないでください（単語のリビールレシピを 2 つ、スクロールリスナーを 2 つなど）。各セクションに最も適した、範囲の狭いものを選んでください。
5. 上流の SKILL.md を正式な参照元として扱ってください — ここで指示を言い換えるのではなく、フォルダー全体を取得してください。
6. 早めに別のスキルへ振り分けてください — トークン管理、コンポーネント API、ブレークポイント、アクセシビリティは、このリポジトリ内の別のスキルが担当しています。ここで回答すると、もっともらしくても誤った助言になります。

参考資料

• 上流ファミリー：MengTo/Skills · agent-skills/web-design
• references/skill-catalog.md — ファミリー別に分類した79件すべてのサブスキル
• references/family-routing.md — ファミリーの選択、最も範囲の狭い一致、組み合わせ、順序
• references/route-outs.md — このリポジトリの他のスキルとの境界
• scripts/fetch-upstream-skills.sh — スパースチェックアウトによる取得スクリプト
• 関連パック：web-game-development（Three.js／ブラウザーゲーム）