01 功能说明
研究真实应用，编写功能演示说明，并制作 HTML/CSS 演示；分别设计桌面和移动布局，检查冻结状态。
css-animation 为真实应用功能制作在浏览器中运行的演示。它先研究应用的视觉语言和布局，再规划“操作前—操作—操作后”的演示，或多个画面的轮播。交付物是独立的 HTML/CSS 动画及配套说明。
它将静态状态正确性与时序分开检查：先冻结操作前后的布局并检查，再播放完整循环来调整节奏。桌面和移动端采用独立构图；移动端方案会简化画面，并用触摸指示代替鼠标光标。
预期交付物
查看可访问的应用及相关状态。在目标视口下记录颜色、字体、间距和真实几何布局。
选择单个功能的变化过程或多画面轮播。编写说明、计算元素位置，使用 CSS 以及少量基于 class 的循环控制。
冻结关键状态以检查布局和标签。确认这些内容正确后，播放完整循环，针对过快或过慢的具体阶段作调整。
02 适用场景
上游工作流要求 Claude-in-Chrome 和可访问的应用。其他宿主需要提供等效的检查方式，否则必须说明缺少哪些证据。
03 关键决策
实际测量的颜色、字体和几何布局，让演示保有应用的辨识度。
说明文档与 HTML 一起记录布局和时序决策。
冻结状态暴露布局缺陷，播放过程暴露节奏问题。
04 示例任务
以下示例任务说明尚未经过测试。使用前请检查该技能的设置。
提供功能 URL 或本地预览，并允许访问必要状态。
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求；这不是安装命令。
运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。
使用 css-animation 演示我本地运行的规划应用中的分组功能。先查看真实功能，再起草“操作前—操作—操作后”的动画：未分组条目、用户操作、整理后的结果。匹配应用颜色和文字排版，并保留真实标签。创建桌面版说明，以及聚焦核心操作的独立移动端构图。移动端使用触摸指示。调整完整循环之前，先检查冻结的初始、处理和最终状态。交付说明文档及 HTML 文件，并说明哪些应用行为未能查看。根据以下可观察标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
基于真实应用界面，制作 HTML/CSS 功能演示。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md