css-animation-skill

css-animation-skill

目录占位条目 — 完整技能：neonwatty/css-animation-skill

决策树

1. 是否已安装完整技能？ 检查此位置的技能是否仍有 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: 块 → 已安装完整技能，调用它并继续
   • 存在 das: 块 → 前往第 2 步

2. 检测作用范围，然后安装：

   检测作用范围：

   [ -e ~/.agents/skills/css-animation-skill ] && echo "global" || echo "project"
   

   全局（使用 -g 安装）：

   npx skills add neonwatty/css-animation-skill --skill css-animation-skill -g -y
   

   项目（不使用 -g 安装）：

   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”

功能

运行一个四阶段动画创作工作流：(1) 使用 Claude-in-Chrome MCP 抓取你的在线应用，提取现有的设计语言——颜色、字体、间距、动效风格；(2) 询问你要为哪个元素添加动画、期望的感觉以及约束条件；(3) 生成动画概要，以及包含自定义 @keyframes 动画的独立 HTML/CSS 输出文件；(4) 根据反馈反复迭代，直到结果获得认可。生成与你应用的视觉形象相匹配的定制关键帧动画，而非现成的库类。

不适用场景

• 不需要自定义关键帧的基于库的动画（使用 animate-css-skill 或 framer-motion-skills）
• 视频或 Lottie 输出（使用 wiggle-claude-skill）