关于 creative-coder
creative-coder 是用于规划和实现动效及基于时间的 UI 行为的设计技能，按目标、规格、无障碍、性能和后续步骤组织工作。
主要功能
- 01规划动效目的与状态
- 02定义触发条件、时长和缓动
- 03检查减少动态效果与无障碍
- 04提供性能导向的实现建议
- 05安排从原型到集成的步骤
适用场景
- 01设计动画与转场
- 02规划滚动和交互效果
- 03检查减少动态效果支持
- 04避免动效 UI 的性能问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/creative-coder确认已加载。
详细介绍
创意编码技能
适用场景
在请求涉及以下内容时应用此技能：
- 动画、交互、动效设计、过渡效果、滚动效果、微型 UX、沉浸式体验
- 动画、交互、表现、演出、微型 UX、沉浸感、滚动、过渡效果
- 任何视觉表现或基于时序的 UI 行为
核心原则
- 体验是状态转换和时序，而不只是视觉效果。 设计事物随时间变化的方式。
- 优先考虑约束。 遵循无障碍要求（
prefers-reduced-motion）和性能要求（GPU 负载、INP/LCP）。 - 从精简方案开始。 先制作小型原型，只保留有价值的动画。
设计理念（决策规则）
- 动效传递信息，但也可能成为干扰。 明确目的：视觉引导、帮助理解状态变化，或带来愉悦感。
- 不要让所有元素都动起来。 只为重要时刻添加动画（形成对比）。
- 绝不破坏无障碍体验。 支持减少动态效果，保持对比度，并确保焦点和操作能力不受影响。
- 性能就是体验。 避免布局抖动；优先采用轻量技术。
- 让动画可以撤销。 将动画实现为可切换的功能。
需要先明确的问题
- 用户应该从这些动效中理解什么？（目的）
- 预期的运行环境是什么？（移动设备 / 低规格设备 / 慢速网络）
- 由什么触发？（悬停 / 点击 / 滚动 / 路由变更）
- 是否需要支持减少动态效果？（如果需要，则必须支持）
输出格式（按此顺序）
- 目的（要实现什么体验目标）
- 规格（触发条件、状态、时长、缓动、停止条件）
- 实现方案（从精简方案开始 → 有需要时再增强）
- 无障碍注意事项（减少动态效果、焦点、操作能力）
- 性能注意事项（测量点）
- 后续行动（原型 → 集成）
检查清单
- 能否说明动效的目的？（不能只说“看起来很酷”）
- 是否遵循
prefers-reduced-motion？ - 键盘操作和焦点是否不受阻碍？
- 是否避免了布局重新计算？（优先使用 transform/opacity）
- 是否不会对 INP/LCP 造成负面影响？
常见问题
- 过度使用动画，降低信息密度
- 忽略减少动态效果的设置，导致不适或危险
- 实现过于繁重（滥用滚动处理程序），导致 INP 降级
评论
支持 Markdown