GSAP Core
核心 API 的官方 GSAP skill —— 包含 gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()(响应式、prefers-reduced-motion)。当用户请求 JavaScript 动画库、React/Vue/vanilla 中的动画、GSAP 补间动画、缓动、基础动画、响应式或减弱动态效果 a 时使用。
概览
GSAP Core skill 为 AI agent 提供了 GreenSock Animation Platform 的基础能力。该 skill 托管在拥有 423 stars 的 mxyhi/ok-skills 仓库中,支持对基于 JavaScript 的动画进行编程控制。它专注于主要的 API 方法,包括用于管理状态过渡的 gsap.to()、gsap.from() 和 gsap.fromTo()。此外,它还整合了交错动画 (staggering)、自定义缓动 (custom easing) 和全局默认设置等高级功能。针对现代 Web 开发,该 skill 支持 gsap.matchMedia(),允许 agent 生成遵循响应式断点和用户减弱动态偏好的动画。此集成旨在用于 vanilla JavaScript、React 和 Vue 环境,确保与 Claude 和 Cursor 等热门 AI 编程助手兼容。
使用场景
安装说明
# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/gsap-skills/gsap-core/SKILL.md在查阅说明和脚本后,将 skill 文件夹复制或克隆到您的 agent skills 目录中。
安全提示
此 skill 旨在辅助生成基于 GSAP 的动画代码。用户应审核所有生成的 JavaScript 代码,以确保其符合项目特定的安全策略,并确保动画逻辑不会无意中泄露敏感的 DOM 元素或数据。
相关 Skills
Constant Time Testing
trailofbits/skills
Constant-time testing 用于检测加密代码中的定时侧信道。在审计加密实现的定时漏洞时使用。
Managed Deep Agents
langchain-ai/langchain-skills
在使用 mda CLI 在 LangSmith 中构建、测试或部署 Managed Deep Agents 时,INVOKE THIS SKILL。涵盖了代码优先、基于文件的项目布局;define_deep_agent / defineDeepAgent;编写的 tools 和 middleware;MCP 连接器;cron 计划任务;skills;sandboxes;mda init/dev/deploy;Context Hub;以及 Python 和 TypeScript 中的人工在环(human-in-the-loop)中断。
花叔Design · Huashu-Design
mxyhi/ok-skills
花叔Design——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审。根据任务embody对应专家(UX/动画师/幻灯片设计师/原型师),避免web design tropes。触发词:做原型、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、做个HTML页面、做个可视化、app原型、iOS原型、导出MP4/GIF、60fps视频、设计风格、设计方向、配色方案、推荐风格、选个风格、做个好看的、评审、好不好看、review this design、带解说的动画、解说视频、长视频科普、voiceover、narration、5分钟讲清楚什么是X
Design Build
tinh2/skills-hub-registry
以 Ralph Wiggum 的速度构建独特的生产级界面。交付可运行的代码(Web 或移动端),包含现代 CSS、流体排版、有意义的动效,且无通用的 AI 审美。适用场景:'build UI'、'design this'、'create interface'、'make it look good'、'build screen'、'implement design'、'frontend build'、'design build'。
Design Audit
tinh2/skills-hub-registry
跨越无障碍性 (WCAG 2.2)、性能、主题、响应式/自适应设计以及反模式检测的全面自主设计质量审计。生成包含严重程度评级和修复建议的优先级报告。适用场景:“审计设计”、“检查无障碍性”、“a11y 审计”、“设计评审”、“UI 质量检查”、“WCAG 审计”、“设计质量”。
Design Claude
tinh2/skills-hub-registry
以 HTML 为中心的高保真设计技能:交互式原型、幻灯片、动画演示、设计变体探索、视觉方向建议和专家评审。触发词:制作原型、设计演示、交互式原型、HTML 演示文稿、动画演示、设计变体、高保真设计、UI 模型、原型、设计探索、制作 HTML 页面、制作可视化、应用原型、iOS 原型、移动应用模型、导出 MP4、导出 GIF、60fps 视频、设计风格、设计方向、设计 p