mcpField

gsap-animated-frontend

github.com/yousefabdallah171デザイン・UI87 回インストール
リポジトリ

gsap-animated-frontend について

特定のモデルに依存しない、GSAPフロントエンドアニメーションの計画スキルです。`gsap-new`と`gsap-refactor`で新規作成と改修を振り分け、決定事項を`.gsap`のプロジェクトファイルに記録します。

主な機能

  1. 01新規作成と改修を別々に振り分け
  2. 02計画と決定事項を`.gsap`に保存
  3. 03改修計画の前に既存コードを確認
  4. 04動きを抑える設定とモバイル向けルールを含める
  5. 05段階的な実装タスクを計画

活用シーン

  1. 01新しいページやセクションのアニメーションを計画
  2. 02既存コンポーネントの動きを改善
  3. 03エージェントのセッション間で作業を再開

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/yousefabdallah171/gsap-animated-frontend --skill gsap-animated-frontend

インストール後、Claude Code で/gsap-animated-frontendを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
gsap_cli.py
requirements.txt
agents/
openai.yaml
gsap-new/agents/
openai.yaml
gsap-refactor/agents/
openai.yaml
references/
performance-guide.md
animation-recipes.md
gsap-core-patterns.md
scroll-trigger-patterns.md
scripts/
brand_extractor.py
gsap_workflow.py
project_intelligence.py
interview_generator.py
structure_search.py
phase_planner.py
interview_strategy.py
subskills/gsap-new/agents/
openai.yaml
subskills/gsap-refactor/agents/
openai.yaml
templates/
animation-spec.md
animation-tasks.md
phase.md
audit-report.md
page-animation.md
animation-plan.md

詳細

GSAP アニメーション付きフロントエンド

モデルに依存しない GSAP ワークフローのルートルーターとして、このスキルを使用します。

公開ワークフローの範囲

主要なワークフローとして公開するのは、次の 2 つだけです。

  • gsap-new
  • gsap-refactor

scan、audit、recipes、doctor、validate などのヘルパーを、ユーザー向けの主要なワークフローとして提示しないでください。

信頼できる情報源

常に、まず次のプロジェクト成果物を読み込み、更新してください。

  • .gsap/animation-spec.md
  • .gsap/animation-plan.md
  • .gsap/audit-report.md
  • .gsap/pages/*.animation.md

ワークフローの記憶として、チャット履歴に依存しないでください。

ワークフローの振り分け

新規ページ、新規セクション、または初めてモーションシステムを構築する場合：

  • subskills/gsap-new/SKILL.md を読み込みます。

既存のページやコンポーネントを改善する場合：

  • subskills/gsap-refactor/SKILL.md を読み込みます。

内部ヘルパー

サポート作業には、内部スクリプトとテンプレートを使用します。

  • scripts/gsap_workflow.py
  • scripts/brand_extractor.py
  • scripts/structure_search.py
  • scripts/interview_generator.py
  • scripts/phase_planner.py
  • templates/animation-spec.md
  • templates/animation-plan.md
  • templates/audit-report.md
  • templates/animation-tasks.md
  • templates/page-animation.md
  • templates/phase.md

必要に応じて、次のリファレンスのみを使用します。

  • references/gsap-core-patterns.md
  • references/scroll-trigger-patterns.md
  • references/animation-recipes.md
  • references/performance-guide.md

必ず守ること

  1. 決定事項を .gsap に保存します。
  2. 成果物のデータが不足している場合に限り、質問します。
  3. リファクタリングを計画する前に、現在のコードを読み込みます。
  4. すべての計画に、モーション軽減とモバイル向けの縮小ルールを含めます。
  5. ヘルパーコマンドは内部にとどめ、ユーザーに見える体験の中心は gsap-new と gsap-refactor にします。
  6. 質問する前に、ワークフロースクリプトでフレームワーク、パッケージ、ページ構造、デザインの特徴、既存のモーションを調べます。
  7. ページ全体を一度に実装しないでください。フェーズごとの成果物を生成し、各フェーズで主要なセクションを 1 つずつ実行します。
  8. 新しいエージェントが安全に作業を再開できるよう、.gsap/tasks/*.md と .gsap/phases/**/*.md を最新の状態に保ちます。

コメント

Markdown 対応