mcpField

gsap-animated-frontend

github.com/yousefabdallah171设计与 UI87 次安装
代码仓库

关于 gsap-animated-frontend

面向不同模型的 GSAP 前端动画规划 Skill，通过 `gsap-new` 和 `gsap-refactor` 处理新建与改造，并将决策记录在 `.gsap` 项目文件中。

主要功能

  1. 01分别处理新建和改造流程
  2. 02将计划与决策保存到 `.gsap`
  3. 03改造规划前检查现有代码
  4. 04纳入减少动态效果和移动端规则
  5. 05按阶段规划实施任务

适用场景

  1. 01规划新页面或区块的动画
  2. 02改进现有组件的动效
  3. 03在不同 Agent 会话间续接动画工作

安装

复制下面的命令，在终端中运行。

$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 工作流根路由。

对外工作流

仅提供两个主要工作流：

  • 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. 不要一次性实现整个页面；生成分阶段文件，并在每个阶段执行一个主要版块。
  8. 及时更新 .gsap/tasks/*.md 和 .gsap/phases/**/*.md，确保新的 Agent 能安全地接续工作。

评论

支持 Markdown