css-animation 适用于哪些场景？

css-animation 可用于需要该Agent Skill能力的 AI Agent 工作流，建议结合官方文档与本页安装命令试用。

css-animation Skill安装与使用教程

SkillSkillsMP

skillsmp.neonwatty-css-animation-skill-skill-md

原文描述：Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says "css animation", "animate this feature", "create a css walkthrough", "animation walkthrough", or wants to create a CSS-based visual demo of an app feature.

在 SkillsMP 查看 ↗

建议先在本页复制安装配置，再到上游核对文档与权限。

热度数据

仓库星标9

产品介绍

为应用功能生成自包含的 HTML/CSS 动画，用于演示、导览与新手引导。通过 Chrome 调研目标应用、访谈用户、生成结构化简报与动画 HTML 文件，随后进入“冻结-检查-反馈”迭代评审循环直至用户认可。当用户说“css animation”“给这个功能做动画”“创建 CSS 导览”“animation walkthrough”，或想做基于 CSS 的应用功能视觉演示时使用。 css-animation 是一个Agent Skill，收录自 SkillsMP。本页提供产品介绍、配置教程、安装命令与适用场景，支持 Trae、通义灵码、Cursor、Claude Code、VS Code 等。

AgentHub Verified 可用性验证技术测试通过

自动化测试流水线已校验安装命令、传输协议与客户端兼容性

最近校验时间2026-07-08

安装配置格式测试有效CLI 与 mcpServers JSON 语法校验通过

协议连接与握手响应正常支持标准 JSON-RPC 2.0 规格规范

上游数据源存活来源 skillsmp，可正常下载依赖

测试可用客户端Claude Code、Claude Desktop、Cursor 等

安全等级： A 级 · 源码开放合规 (A)·该工具经 AgentHub 静态安全特征扫描，无高危越权行为。建议在项目级配置文件中指定工作区范围。

Score 70/100

暂无自动生成的安装指引，请查看源仓库 README。

常见报错排查与运行避坑 (Troubleshooting)FAQ

针对 css-animation 在 Cursor、Claude Code 中的常见连接错误与解决办法

在 Cursor / Claude Code 中配置 css-animation 提示 connection closed 或 exit code 1？

通常由本地运行时环境缺失或命令路径未被 IDE 继承引起。排查步骤： 1. 确认已安装 Node.js 18+（支持 npx）或 Python 3.10+（支持 uvx）； 2. 尝试在终端运行 which npx 或 which uvx，把配置文件中的 "command" 字段改为完整绝对路径； 3. 修改 mcp.json 后，必须完全重载或重启客户端窗口。

Fix Snippet

# 终端测试命令是否存在：
which npx
node -v

提示 spawn npx ENOENT 或 command not found？

这是因为编辑器后台进程未加载完整的终端环境变量（PATH）。解决方案：在全局安装该包（如 npm install -g 包名），或在配置文件中将 command 设置为系统的实际路径（如 Windows 下的 C:\Program Files\nodejs\npx.cmd，Mac 下的 /usr/local/bin/npx）。

调用工具时响应超时或网络下载依赖失败？

国内环境下首次执行 npx 或拉取依赖时可能因网络受限而超时。建议将 npm 镜像源切换为国内高速镜像（npm config set registry https://registry.npmmirror.com），或在系统级开启开发代理工具。

在对话中描述任务，Agent 没有自动调用 css-animation 规则？

请检查 SKILL.md 是否位于当前项目的 .cursor/skills/css-animation/SKILL.md（Cursor）或 ~/.claude/skills/css-animation/SKILL.md（Claude Code）。在输入提问时，可以显式提示 AI “请使用 css-animation 规范来执行”，以提高智能体的规则匹配权重。

仍连不上？查看 MCP 连接失败排查指南 →

免安装模拟调用 (Playground)

仿真环境

css-animation 规则注入与 Agent 行为仿真 · 无需配置本地环境，直接预览调用参数与返回格式

沙盒就绪 (Virtual Mock)

fn: agent_skill_runtimeAgent 在上下文中匹配并应用 css-animation 的 System Prompt 规范与工作流约束

请求入参 (Arguments)JSON Schema

{
  "skill": "css-animation",
  "rulePath": ".cursor/skills/css-animation/SKILL.md",
  "userGoal": "请使用 css-animation 的方法与标准帮我完成当前任务",
  "client": "Cursor / Claude Code"
}

💡Agent 在规划任务时会自动生成并传递上述入参

Agent Tool Output

点击上方「模拟运行」按钮

查看该工具在 Agent 内部的返回数据格式

测试环境：AgentHub Virtual SandboxJSON-RPC 2.0

选型与决策建议（为什么选它？）

帮助你快速判断该资源是否契合当前项目，避免盲目折腾

适合什么任务？

需要让 AI 在此领域调用自主工具能力时
替代繁琐的手工重复操作，提升自动化闭环
配合支持 MCP / Skill 的现代 AI 编程客户端

什么时候不建议用？

没有对应环境运行权限或缺少必要 API Key 时
单纯需要简单对话、无需外部系统连接的场景

推荐工作流搭配：

浏览更多同类搜索相似资源按场景选型场景提示词 Skill 实战教程评测与对比

收录徽章：把 AgentHub 挂到你的官网

复制下面任意一段代码到项目主页、官网或 GitHub README。徽章是 SVG 热链，无需上传文件，链接指向本页，访客可由此直接找到安装方式。

预览

HTML

<a href="https://myagenthub.cn/p/skillsmp.neonwatty-css-animation-skill-skill-md" title="AgentHub 已收录：css-animation" target="_blank" rel="noopener">
  <img src="https://myagenthub.cn/badge/skillsmp.neonwatty-css-animation-skill-skill-md" alt="AgentHub 已收录：css-animation" height="20" style="border:0"/>
</a>

Markdown（GitHub README）

[![AgentHub 已收录：css-animation](https://myagenthub.cn/badge/skillsmp.neonwatty-css-animation-skill-skill-md)](https://myagenthub.cn/p/skillsmp.neonwatty-css-animation-skill-skill-md)

徽章由 /badge/<资源ID> 动态生成，名称与收录状态变化后自动更新；请保留链接指向，它是收录来源的判定依据。

统一 Manifest

{
  "id": "skillsmp.neonwatty-css-animation-skill-skill-md",
  "type": "skill",
  "version": "main",
  "displayName": "css-animation",
  "description": "Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says \"css animation\", \"animate this feature\", \"create a css walkthrough\", \"animation walkthrough\", or wants to create a CSS-based visual demo of an app feature.",
  "author": {
    "name": "neonwatty"
  },
  "homepage": "https://skillsmp.com/creators/neonwatty/css-animation-skill/skill",
  "distribution": {
    "packages": [
      {
        "registryType": "source",
        "identifier": "neonwatty-css-animation-skill-skill-md",
        "version": "main",
        "runtimeHint": "npx skills add"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "codex",
    "vscode"
  ],
  "keywords": [
    "repo_stars:9"
  ],
  "provenance": {
    "origin": "skillsmp",
    "originalId": "neonwatty-css-animation-skill-skill-md",
    "originalUrl": "https://skillsmp.com/creators/neonwatty/css-animation-skill/skill",
    "isOfficial": false,
    "status": "active"
  }
}

css-animation Skill安装与使用教程

产品介绍

AgentHub Verified 可用性验证技术测试通过

常见报错排查与运行避坑 (Troubleshooting)FAQ

免安装模拟调用 (Playground)

选型与决策建议（为什么选它？）

相关资源

基于文件的规划

OpenClaw 指挥中心

ClawCall 语音电话

中文公文写作

GitLab CLI（glab）指南

Canonry

常搭配使用

顺序思考

n8n

Playwright

GitHub

继续逛 AgentHub

收录徽章：把 AgentHub 挂到你的官网

统一 Manifest