Clawd animation

Skill YiShu5/claude-skills/skills/clawd-animation

Battle-tested coding-agent skills for product, content, writing, presentations, and workflow automation.

Install

npx -y skills add YiShu5/claude-skills --skill clawd-animation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Clawd 像素风动画生成器。根据用户的自然语言描述，生成自包含的 HTML 像素风动画文件，主角是 Claude Code 的吉祥物 Clawd（像素风小螃蟹）。当用户提到 clawd、clawd 动画、像素动画、pixel animation、给 clawd 做一个小动画、让小螃蟹做某事、或任何涉及为 Clawd 角色创建动画场景的需求时，务必使用此 skill。即使用户只是说"让小螃蟹安慰一下我"或"今天和小螃蟹的合作很愉快"，也应触发。请判断用户互动需求的深度，如果用户互动意图只是"快速/简单动画"或"单一状态表情"，应使用 clawd-animation-lite（消耗token更少，时长更短）而非此 skill。

SKILL.md

6.8 KB, as published. Nobody here has run it

Clawd 像素风动画生成器

你的角色

你是 Clawd 像素动画的创作引擎。用户给你一句话（比如"clawd 在雨中撑伞"），你生成一个完整的、可直接在浏览器打开的 HTML 动画文件。

Clawd 是 Claude Code 的官方吉祥物——一只像素风的小螃蟹，配色温暖（珊瑚橙 #CD6E58），造型扁平可爱。所有动画必须忠实于这个视觉身份。

工作流程

收到用户描述后，按以下步骤执行：

Step 1: 解析意图

从用户描述中提取：

核心动作：clawd 要做什么（吃东西、跳舞、下雨撑伞……）
情绪基调：开心、好奇、慵懒、惊喜……
需要的道具：食物、天气元素、物品……
场景氛围：默认是标准星空背景，用户可能要求特殊氛围

Step 2: 设计动画剧本

将动画拆分为 3-6 个阶段（phase），遵循叙事弧线：

引入 → 发现/触发 → 核心动作（可多阶段）→ 情绪高潮/收尾

每个阶段定义：

时间占比（所有阶段加起来 = 100%）
Clawd 的位置和移动
表情变化（眼睛）
道具状态变化
粒子/特效

总时长控制在 4-8 秒循环，默认 5 秒。

Step 3: 设计新道具精灵

如果场景需要模板中没有的道具：

在 36×36 的逻辑网格中设计道具的像素矩阵
道具宽度通常 6-12 格，高度根据物体比例
使用调色板中已有的颜色，或为新道具定义 2-4 个和谐的新颜色
必须包含高光点（白色像素）增加质感
数据格式遵循模板中 ICECREAM 的范式（二维数组 + palette 映射）

道具设计原则：

保持像素风的简洁感，不要过度精细
每个道具应该在 10×15 格以内可辨认
颜色不超过 5 种（含高光白）

Step 4: 基于模板生成代码

读取 references/template.html 作为基础
保留所有引擎代码（PALETTE、像素网格、drawBg、drawStars、drawClawd、粒子系统、缓动函数、动画循环）不变
在 === YOUR ANIMATION HERE === 区域填入：
- 新道具的精灵数据和绘制函数
- getPhase(t) 阶段定义
- render(f) 中的完整动画逻辑
更新 <title> 和 info 文字
如果需要新的颜色，添加到 PALETTE 对象中

Step 5: 输出

将生成的 HTML 文件保存，文件名使用英文短横线命名（如 rainy-umbrella.html）。

设计规范（不可违反）

像素网格

画布 720×720 屏幕像素
逻辑网格 36×36，每格 20×20 屏幕像素
所有绘制通过 px(gx, gy, color) 函数，不使用反锯齿
Canvas 必须设置 image-rendering: pixelated

Clawd 造型

14×8 扁平宽体。身体/眼睛/锚点坐标完整定义在 template.html 的 CLAWD_BODY 和 EYES 对象里，直接照抄即可。

关键约束：

身体单一纯色 #CD6E58，无渐变无阴影
眼睛 1×1 纯黑像素，没有嘴巴——情绪靠眼睛方向 + 粒子 + 气泡表达
眼睛变体：forward / look_right / look_left / look_down / blink

调色板 / 背景

完整定义在 template.html 的 PALETTE 对象中，始终从 PALETTE 引用颜色，不硬编码 hex。新道具颜色直接添加到 PALETTE。

动画质量标准

节奏感

动画必须有明确的"起承转合"，不是匀速运动
使用 easeOut 做进入，easeInOut 做移动，让运动有弹性
关键动作瞬间加入粒子效果强化冲击感
每个阶段之间要有微妙的停顿或预备动作

表现力

Clawd 的表情必须配合剧情变化（发现东西时眼睛看向目标，开心时微笑）
善用 bounce（弹跳）表达情绪——开心时上下跳，惊讶时后退一格
对话气泡用于关键情绪节点（"!!"表示发现，"Yummy~"表示满足）
结尾阶段飘出爱心粒子表达幸福感

循环设计

动画首尾必须可以无缝循环
每次循环开始时清空粒子 particles = []
进入动画从画面外开始，让每次循环的起点自然

技术约束

单个 HTML 文件，零外部依赖
所有精灵数据内联在 <script> 中
使用 requestAnimationFrame 驱动，30 FPS
文件大小控制在 30KB 以内

复杂度边界

这个系统适合生成单角色、单场景、简单叙事的小动画。

合理的请求：

"clawd 吃冰淇淋" → 走过去、一口口吃、开心
"clawd 在雨中撑伞" → 下雨、撑伞、踩水花
"clawd 收到一封信" → 信飘来、打开、开心/惊讶
"clawd 摸摸头" → 一只手出现、摸头、舒服地眯眼

超出范围的请求（应礼貌告知用户简化）：

多个角色互动
复杂的场景切换
超过 10 秒的非循环叙事
需要用户输入/交互的动画

参考文件

在生成动画前，务必读取以下参考资源：

文件	何时读取	内容
`references/template.html`	每次生成都读	完整的动画引擎模板，包含所有绘制函数和引擎代码
`references/ice-cream.html`	仅当对多阶段节奏编排没有把握时才读；如果你已理解动画设计模式，跳过此文件，只读 template.html 即可	高质量范例：5秒9阶段的完整动画，展示道具设计、阶段编排、粒子使用的最佳实践
`references/clawd-kiss.html`	需要参考情绪/粒子表达时	无嘴巴版范例：用腮红（drawBlush）、眼神、爱心粒子表达情绪，展示了如何不依赖嘴巴叙事
`references/palette.json`	需要确认颜色时	完整调色板

完整示例

用户输入： "clawd 吃冰淇淋"

Claude 的思考过程：

核心动作：吃冰淇淋（分阶段吃掉三个球）
情绪弧线：好奇 → 兴奋 → 满足 → 幸福
需要道具：三球冰淇淋（薄荷/草莓/香草 + 蛋筒 + 樱桃）
阶段设计：enter(10%) → spot(10%) → approach(12%) → grab(8%) → eat×3(30%) → happy(18%)
表情规划：forward → look_right(发现) → forward(走过去) → blink(吃) → forward(满足)

产出： ice-cream.html — 参见 references/ice-cream.html