用途：该技能用于为应用创建定制 CSS 动画。它会依次执行四个阶段：一、通过 Claude-in-Chrome MCP 抓取线上应用，提取现有设计语言（颜色、字体、间距、动效风格）；二、就需动画的元素、期望感受与约束进行访谈；三、产出动画简报及含自定义 @keyframes 动画的自包含 HTML/CSS 输出文件；四、根据反馈迭代至获认可。相比现成的库类，其结果更贴合应用的视觉标识。
安装与调用：先判断全量技能是否已安装，检查指定路径是否仍存在 das: 块。全局：grep -q "^das:" ~/.agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"；项目：grep -q "^das:" .agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"。若无 das: 块即已安装，可直接调用；若存在则检测范围：[ -e ~/.agents/skills/css-animation-skill ] && echo "global" || echo "project"。随后全局安装使用 npx skills add neonwatty/css-animation-skill --skill css-animation-skill -g -y，项目安装使用 npx skills add neonwatty/css-animation-skill --skill css-animation-skill -y。在 Claude Code 中，可将任一命令作为以 ! 开头的聊天消息发送以原地运行。安装后调用技能名 css-animation-skill，触发短语包括 "CSS animation"、"custom animation"、"animation from live app"、"css-animation-skill"。
限制：不需要自定义 keyframes 的库式动画不适用（可改用 animate-css-skill 或 framer-motion-skills）；视频或 Lottie 输出也不适用（可用 wiggle-claude-skill）。其具体收费、价格、支持平台与效果指标暂未提供。