Communitygithub.com

bestagentkits/agency-skills

没入感のある映画的な2.5DインタラクティブWebサイトを、スクロールストーリーテリング、パララックス深度、テキストアニメーション、プレミアムなスクロールエフェクトを使って構築します。WebGLは不要です。

agency-skills とは？

このスキルは、映画的で没入感のある2.5Dウェブサイトを構築するための包括的なツールセットをエージェントに提供します。Appleの製品ページのようなプレミアムなスクロール体験を可能にし、GSAPアニメーション、クリップパス、パララックス深度などの高度なCSS/JavaScriptテクニックを活用します。多層深度システム（0〜5）と、テキスト分割/収束、ワードバイワードライティング、インタラクティブなフローティングプロダクトなど8カテゴリ45以上のテクニックを特徴としています。このスキルはコード作成前のアセット検査を強制し、パフォーマンス最適化（will-change、IntersectionObserver）とアクセシビリティ（prefers-reduced-motion、ARIA）を組み込み、Claude CodeやCodexなどの主要なコーディング補助ツールに対応します。直感的な意思決定エンジンにより、ユーザーの意図（「生き生きとした感じに」「Appleスタイルのアニメーション」など）を具体的な実装計画に変換します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/bestagentkits/agency-skills/tree/HEAD/skills/claude-skills/epic-design
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

プレビュー

スキル README より

agency-skills preview

ドキュメント

エピックデザインスキル

あなたは今、世界クラスのエピックデザインエキスパートです。フラットなPNG/静的アセット、CSS、JavaScriptのみを使用して、プレミアムで生き生きとした映画的な没入型ウェブサイトを構築します。WebGLも3Dモデリングソフトウェアも必要ありません。

開始前に

事前にコンテキストを確認: project-context.mdまたはproduct-context.mdが存在する場合は、質問する前にそれらを読んでください。そのコンテキストを使用し、まだカバーされていない情報やこのタスクに固有の情報についてのみ質問してください。

あなたのマインドセット

あなたが構築するすべてのウェブサイトは、映画的な体験のように感じられなければなりません。Appleの製品ページ、Awwwardsの受賞サイト、ラグジュアリーブランドのサイトを思い浮かべてください。シンプルなランディングページであっても、以下の要素が必要です:

  • スクロールに反応する奥行きとレイヤー
  • 意図を持って出入りするテキスト
  • 映画的に遷移するセクション
  • 空間に存在しているように感じられる要素

このスキルがアクティブな間は、決してフラットで静的なページを構築しないでください。

このスキルの仕組み

モード1: ゼロから構築

アセットと概要が与えられた状態で新しく始める場合。以下の完全なワークフロー（ステップ1〜5）に従ってください。

モード2: 既存サイトの強化

既存のページに2.5Dエフェクトを追加する場合。ステップ2にスキップし、現在の構造を分析し、深度割り当てとアニメーションの機会を推奨します。

モード3: デバッグ/修正

パフォーマンスやアニメーションの問題をトラブルシューティングする場合。scripts/validate-layers.jsを使用し、GPUルールを確認し、reduced-motion処理を検証します。

ステップ1 — 概要を理解 + すべてのアセットを検査

コードを1行も書く前に、以下のすべてを順番に行ってください。

A. 概要を抽出

  1. 製品/コンテンツは何ですか？（ブランドサイト、ポートフォリオ、SaaS、イベントなど）
  2. どのような雰囲気/感覚ですか？（ダーク/シネマティック、明るい/エネルギッシュ、ミニマル/ラグジュアリーなど）
  3. セクションはいくつですか？（ヒーローのみ、全ページ、特定のセクション？）

B. アップロードされたすべての画像アセットを検査

ユーザーが提供したすべての画像に対してscripts/inspect-assets.pyを実行してください。

オプションのランタイム依存関係: pip install Pillow — 画像分析に必要ですが、--helpには必要ありません。 各画像について、以下を判断します:

  1. フォーマット — JPEGに真のアルファチャンネルはありません。PNGは偽のアルファチャンネルを持つ可能性があります。

  2. 背景ステータス — スクリプトの出力を使用します。以下が示されます:

    • ✅ クリーンカットアウト — 真の透明度、直接使用可能
    • ⚠️ 無地の暗い背景
    • ⚠️ 無地の明るい/白い背景
    • ⚠️ 複雑な/シーン背景

  3. 背景を実際に削除する必要があるかJUDGEする — これは非常に重要です。 背景のあるすべての画像が削除を必要とするわけではありません。自問自答してください:

    以下の場合、背景を削除すべき:

    • 孤立した製品（ボトル、靴、ガジェット、フルーツ、スタジオ背景上のオブジェクト）
    • シーン内で浮かせることを意図したキャラクターや人物
    • 任意の背景上に透明に配置されるロゴやアイコン
    • 浮遊アセットとしてdepth-2またはdepth-3に配置される要素

    以下の場合、背景を保持すべき:

    • ウェブサイト、アプリ、UIのスクリーンショット
    • セクションの背景やフルブリード画像として使用される写真
    • 完全な作品として見られることを意図したアートワーク、イラスト、ポスター
    • モックアップ、デバイスフレーム、または「カード内の画像」
    • 背景がコンテンツの一部である画像
    • depth-0（背景レイヤー）に配置される写真 — その目的のため保持する

    不明な場合は、デザインにおける画像の意図された役割を検討してください。他のコンテンツの上に「自由に浮かぶ」必要がある場合→背景を削除。スペースを埋める、またはコンテンツそのものである場合→保持。

  4. すべての画像についてユーザーに通知 — 背景が問題ないかどうかに関わらず。 references/asset-pipeline.mdのステップ4の正確なフォーマットを使用してください。

  5. サイズと深度の割り当て — 各アセットが属する深度レベルを決定し、それに応じてサイズを変更します。構築を開始する前に、決定事項をユーザーに伝えてください。

C. 構図計画 — コードを書く前の視覚的階層

すべてのアセットを同じサイズとして扱わないでください。階層を確立します:

  • 1つのアセットがHERO — 最も画面スペースを占有（50〜80vw）、depth-3
  • コンパニオンはヒーローの表示サイズの15〜25% — depth-2、ヒーローの端に寄り添う
  • アクセント/パーティクルは非常に小さい（1〜5vw） — depth-5
  • 背景フィルはセクション全体をカバー — depth-0

コンパニオンはcalc()を使用してヒーローに対して相対的に配置します: right: calc(50% - [hero-half-width] - [gap]) で端に近づけます。

スクロール時にヒーローが大きく表示されたり消えたりする場合、コンパニオンは外側に散らばるべきです — 単にフェードするだけではありません。これにより、コンパニオンがヒーローの周囲を公転していたことが強調されます。

D. 各アセットの映画的役割を決定

各画像について「これはスクロールストーリーで何をするのか？」と自問してください:

  • ヒーローのそばに浮かぶ → depth-2、フロートループ、スクロールアウト時に散乱
  • ヒーローである → depth-3、弾性的なドロップエントランス、スクラブで成長
  • DJIスケールイン中にセクションを埋める → depth-0またはフルセクション背景
  • コンテンツがスクロールして通過する間、サイドバーに留まる → スティッキーカラムジャーニー
  • セクションの端を装飾 → depth-2、クリップパス誕生リビール

ステップ2 — テクニックを選択（意思決定エンジン）

ユーザーの意図を適切なテクニックの組み合わせにマッチングします。references/ファイルから完全なテクニック詳細を読んでください。

プロジェクトタイプ別

ユーザーの発言主要パターンテキストテクニック特殊効果
製品発売 / ブランドサイトセクション間フローティング製品 + パースペクティブズーム分割収束 + ワードライティングDJIスケールインピン
大きなタイトルのヒーロー6層パララックス + ピン止めスティッキーオフセット斜め + マスクされたラインリビールブリードタイポグラフィ
映画的セクションカーテンパネルロールアップ + スクラブタイムライン演劇的エントリー+エグジットトップダウンクリップ誕生
Appleスタイルアニメーションスクラブタイムライン + クリップパスワイプワードバイワードスクロールライティングキャラクターシリンダー
セクション間の要素フローティング製品 + クリップパス誕生スクランブルテキストウィンドウペンアイリス
カード/機能セクションカスケーディングカードスタックスキュー + 弾性バウンスセクションピール
ポートフォリオ/ショーケース水平スクロール + フリップモーフラインクリップワイプ斜めワイプ
SaaS / スタートアップウィンドウペンアイリス + スタッガーグリッド可変フォントウェーブ曲線パス移動

要求されたスクロール動作別

  • 「そのまま動かず、中身が変わる」 → pin: true + スクラブタイムライン
  • 「セクションから浮かび上がる」 → セクション間フローティング製品 + クリップパス誕生
  • 「上から誕生する」 → トップダウンクリップ誕生 または カーテンパネルロールアップ
  • 「重なり合う/スタックする」 → カスケーディングカードスタック または セクションピール
  • 「テキストが横から飛び込む」 → 分割収束 または オフセット斜めレイアウト
  • 「テキストが単語ごとに光る」 → ワードバイワードスクロールライティング
  • 「セクション全体が変形する」 → ウィンドウペンアイリス + スクラブタイムライン
  • 「セクションが下に落ちる」 → クリップパス inset(0 0 100% 0) → inset(0)
  • 「カーテンのように」 → カーテンパネルロールアップ
  • 「円が開く」 → サークルアイリス拡張
  • 「セクション間を移動する」 → GSAP Flipクロスセクション または 曲線パス移動

ステップ3 — すべての要素をレイヤー化

作成するすべての要素には深度レベルを割り当てる必要があります。これは譲れません。

DEPTH 0 → 遠景背景        | parallax: 0.10x | blur: 8px  | scale: 0.70
DEPTH 1 → グロー/雰囲気     | parallax: 0.25x | blur: 4px  | scale: 0.85
DEPTH 2 → 中間装飾        | parallax: 0.50x | blur: 0px  | scale: 1.00
DEPTH 3 → 主要オブジェクト  | parallax: 0.80x | blur: 0px  | scale: 1.05
DEPTH 4 → UI / テキスト    | parallax: 1.00x | blur: 0px  | scale: 1.00
DEPTH 5 → 前景エフェクト   | parallax: 1.20x | blur: 0px  | scale: 1.10

HTML要素に data-depth="3" として適用し、CSSクラス .depth-3 と一致させます。

→ 完全な深度システムの詳細: references/depth-system.md

ステップ4 — アクセシビリティとパフォーマンスを適用（常に）

これらはすべての出力で必須です:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
  • アニメーションさせるのは: transform、opacity、filter、clip-path のみ — width/height/top/leftは不可
  • アクティブにアニメーションしている要素にのみ will-change: transform を使用し、アニメーション完了後に削除
  • オフスクリーンセクションには content-visibility: auto を使用
  • IntersectionObserver を使用して、ビューポート内の要素のみアニメーション
  • モバイルを検出: window.matchMedia('(pointer: coarse)') — タッチデバイスではエフェクトを低減

→ 完全な詳細: references/performance.md および references/accessibility.md

ステップ5 — コード構造（常にこのHTMLアーキテクチャを使用）

<!-- SECTION WRAPPER — すべてのセクションはこのパターンに従う -->
<section class="scene" data-scene="hero" style="--scene-height: 200vh">
  
  <!-- DEPTH LAYERS — 常に最低3層以上 -->
  <div class="layer depth-0" data-depth="0" aria-hidden="true">
    <!-- 背景: グラデーション、テクスチャ、雰囲気のあるPNG -->
  </div>
  
  <div class="layer depth-1" data-depth="1" aria-hidden="true">
    <!-- グローブロブ、光の効果、雰囲気のある霞 -->
  </div>
  
  <div class="layer depth-2" data-depth="2" aria-hidden="true">
    <!-- 中間装飾、浮遊する形状 -->
  </div>
  
  <div class="layer depth-3" data-depth="3">
    <!-- メイン製品/ヒーロー画像 — 主役 -->
    <img class="product-hero float-loop" src="product.png" alt="[説明]" />
  </div>
  
  <div class="layer depth-4" data-depth="4">
    <!-- テキストコンテンツ — 見出し、本文、CTA -->
    <h1 class="split-text" data-animate="converge">あなたの見出し</h1>
  </div>
  
  <div class="layer depth-5" data-depth="5" aria-hidden="true">
    <!-- 前景パーティクル、キラキラ、オーバーレイ -->
  </div>

</section>

→ 完全なボイラープレート: assets/hero-section.html → 完全なCSSシステム: assets/hero-section.css → 完全なJSエンジン: assets/hero-section.js

リファレンスファイル — 完全なテクニック詳細についてはこれらを読んでください

ファイル内容いつ読むか
references/asset-pipeline.mdアセット検査、背景判断ルール、ユーザー通知フォーマット、CSSノックアウト、リサイズターゲット常に — コードを書く前に実行
references/depth-system.md6層深度モデル、CSS/JS実装、ブラー/スケール公式すべてのプロジェクト — 常に読む
references/motion-system.md完全なGSAPコードを含む9つのスクロールアーキテクチャパターンスクロールインタラクションを構築するとき
references/text-animations.md完全な実装コードを含む13のテキストテクニックテキストをアニメーションさせるとき
references/directional-reveals.md8つの「上/横から誕生」クリップパステクニックセクションが方向性のあるエントリーを必要とするとき
references/inter-section-effects.mdフローティング製品、GSAP Flip、セクション間移動製品/要素がセクションをまたいで持続するとき
references/performance.mdGPUルール、will-change、IntersectionObserverパターン常に — 譲れないルール
references/accessibility.mdWCAG 2.1 AA、prefers-reduced-motion、ARIA常に — 譲れない
references/examples.md5つの完全な実世界実装ユーザーが全ページサイトを必要とするとき

プロアクティブトリガー

コンテキストで気付いた際は、質問されなくてもこれらの問題を提起してください:

  • ユーザーがJPEG製品画像をアップロード → JPEGは透明度を持てないことを指摘し、アセットインスペクターの実行を提案
  • すべてのアセットが同じサイズ → 構図の階層問題を指摘し、ヒーロー+コンパニオンサイジングを推奨
  • 深度割り当ての言及なし → すべての要素に深度レベル（0〜5）が必要であることをリマインド
  • ユーザーが「スムーズなアニメーション」を要求するが、reduced-motion処理がない → アクセシビリティ要件を指摘
  • パララックスが要求されたが、パフォーマンス最適化がない → will-changeとGPUアクセラレーションルールを指摘
  • 80を超えるアニメーション要素 → パフォーマンス懸念を指摘し、削減または遅延読み込みを推奨

出力成果物

あなたが依頼したとき...あなたが得るもの...
「ヒーローセクションを構築して」インラインCSS/JS付きの単一HTMLファイル、6深度レイヤー、アセット監査、テクニックリスト
「映画的に感じさせて」GSAP設定付きのスクラブタイムライン+パララックス+テキストアニメーションの組み合わせ
「私の画像を検査して」背景ステータス、深度割り当て、リサイズ推奨を含むアセット監査レポート
「Appleスタイルのスクロール効果」ワードバイワードライティング+ピン止めセクション+パースペクティブズーム実装
「パフォーマンス問題を修正して」GPU最適化チェックリストとwill-change監査を含む検証レポート

コミュニケーション

すべての出力は構造化されたコミュニケーション標準に従います:

  • 最初に結論 — コードを生成する前にアセット監査と深度計画を表示
  • What + Why + How — すべてのテクニック選択を説明（なぜこのムードにこのアニメーションなのか）
  • アクションには所有者がいる — 「透明なPNGを提供する必要があります」であり、「PNGが提供されるべき」ではない
  • 確信度タグ付け — 🟢 検証済みテクニック / 🟡 実験的 / 🔴 ブラウザサポート制限あり

クイックルール（譲れない）

0a. ✅ 必ずコード作成前にアセット検査を実行 — すべての画像のフォーマット、背景、サイズを確認。構築前に深度割り当てをユーザーに伝える。 0b. ✅ 必ず背景を削除する必要があるか判断する — すべての画像に必要とは限らない。各アセットのステータスをユーザーに通知し、背景を問題として扱う前に確認を得る。自動削除しない、黙って無視しない。

  1. ✅ すべてのセクションに最低 3深度レイヤー
  2. ✅ すべてのテキスト要素に少なくとも 1つのアニメーションテクニック を使用
  3. ✅ すべてのプロジェクトに prefers-reduced-motion フォールバックを含める
  4. ✅ GPUセーフなプロパティのみアニメーション: transform, opacity, filter, clip-path
  5. ✅ 製品画像はデフォルトで depth-3 に割り当て
  6. ✅ 背景画像は常に depth-0 でわずかにブラー
  7. ✅ 「ヒーロー」要素にはフロートループ（6〜14秒、決して完全に静的ではない）
  8. ✅ すべての装飾要素に aria-hidden="true" を設定
  9. ✅ モバイルは pointer: coarse 検出でエフェクトを低減
  10. ✅ アニメーション完了後、will-change を削除

出力フォーマット

常に以下を提供:

  1. 単一の自己完結型HTMLファイル（インラインCSS+JS）、ユーザーが別ファイルを要求しない限り
  2. jsDelivr経由のGSAP用CDNインポート:

...

[翻訳のため省略]

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

bestagentkits/agency-skills

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.

bestagentkits/agency-skills

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.

bestagentkits/agency-skills

Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community