AgentHubAgentHub

css-animation Skill Install & Guide

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.

View on SkillsMP ↗

Copy the install config on this page first, then verify docs and permissions upstream.

Popularity

Repo stars9

Overview

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. css-animation is a Agent Skill listed from SkillsMP. This page includes an overview, setup tutorial, install commands, and use cases for Trae, Tongyi Lingma, Cursor, Claude Code, and VS Code.

AgentHub Verified AvailabilityTested & Ready

Automated pipeline validated install commands, protocol & client compatibility

Verified At2026-07-08
Install Snippets TestedCLI & JSON config syntax verified
Protocol Handshake ReadyComplies with JSON-RPC 2.0 specifications
Origin Registry ActiveSourced from skillsmp
Verified ClientsClaude Code、Claude Desktop、Cursor 等
Security Tier: A 级 · 源码开放合规 (A)·Scanned for high-risk vulnerabilities. Recommended to run with project-scoped permissions.
No auto-generated install guide — see the source repository README.

Troubleshooting & Common ErrorsFAQ

Common connection errors and verified fixes for css-animation

Getting 'connection closed' or exit code 1 in Cursor / Claude Code for css-animation?

Usually caused by missing runtime paths or IDE environment inheritance. Fix steps: 1. Verify Node.js 18+ (npx) or Python 3.10+ (uvx) is installed; 2. Run 'which npx' or 'which uvx' in terminal, and replace 'command' with absolute path; 3. Reload or restart the client window after modifying config.

Fix Snippet
# Check binary path in terminal:
which npx
node -v
Getting 'spawn npx ENOENT' or 'command not found'?

The editor background process does not inherit your full terminal PATH. Solution: Globally install the package, or set the absolute binary path (e.g. C:\Program Files\nodejs\npx.cmd on Windows, or /usr/local/bin/npx on macOS).

Tool calls timing out or failing to download packages?

First-time package downloading might be slow or timeout due to network limits. Configure a reliable mirror or check outbound proxy settings.

Agent does not match or apply css-animation during conversations?

Verify SKILL.md is located at .cursor/skills/css-animation/SKILL.md (Cursor) or ~/.claude/skills/css-animation/SKILL.md (Claude Code). You can explicitly mention the skill name in your prompt to boost match confidence.

Still not connecting? Read the MCP troubleshooting guide →

Tool Mock Playground

Sandbox

css-animation Rule Injection & Agent Behavior Simulation · Preview tool schema & outputs without local runtime

Sandbox Ready
fn: agent_skill_runtimeInject system prompt guidelines & workflow constraints from css-animation
Request ArgumentsJSON Schema
{
  "skill": "css-animation",
  "rulePath": ".cursor/skills/css-animation/SKILL.md",
  "userGoal": "请使用 css-animation 的方法与标准帮我完成当前任务",
  "client": "Cursor / Claude Code"
}
💡Parameters generated dynamically by Agent runtime
Agent Tool Output

Click 'Run Mock' above

to preview the raw response returned to the LLM

Env: AgentHub Virtual SandboxJSON-RPC 2.0

Decision Guide: Why & When to Use

Assess suitability before installing to save trial-and-error time

Best Suited For
  • When your AI Agent needs tool calling capabilities in this domain
  • Automating repetitive workflows in your IDE or terminal
  • Pairing with modern clients supporting MCP/Skill standards
When NOT to Use
  • When missing required API secrets or local runtime prerequisites
  • Pure conversational requests that don't need external system access
Recommended Workflow Pairing:

css-animation + Scenario Prompt → Complete Agent Automation

Skill hands-on: install to visible results

Follow the full lab (expected UI/output + contrast checks). After installing this item, verify with the tutorial prompts.

Open tutorial →

An Agent Skill is a folder with SKILL.md instructions. After install, the AI loads it automatically when your task matches its description.

Related resources

Planning with files

v3.23.0

SkillClawHub44.6k

io.clawhub.othmanadi/planning-with-files

Persistent file-based planning for multi-step AI-agent work. Keeps task_plan.md, findings.md, and progress.md on disk; lifecycle hooks inject selected project planning context. Automatic recovery reads project planning files only. Explicit session-catchup.py --metadata reads same-project local agent session records and emits aggregate counts only; --replay may emit bounded nonce-framed excerpts. Optional gated mode can request continuation only when the host supports it and never runs commands declared in Markdown. The skill has no network upload path. Use for research or work needing 5+ tool calls.

source
View on ClawHub

ClawCall

v2.0.1

SkillClawHub53.1k

io.clawhub.clawcall-dev/clawcall-dev

Use when the user wants an AI agent to place a US phone call, call a business, handle hold or phone menus, confirm/reschedule/cancel/book/follow up/check an order, reach a real person, leave voicemail, connect the user into a live call, configure ClawCall voice/personality/profile or inbound reserved-number answering, poll received inbound calls, or link a ClawCall API key. Not for SMS, email, or international calls.

source
View on ClawHub

中文公文写作

v2.0.25

SkillClawHub9.1k

io.clawhub.gongyu0918-debug/chinese-official-writing

用于中文公文、事务性材料和新闻稿件的起草、改写、压缩、润色、审校、文种核对、去口语化、降 AI 味及 Word 格式处理，适用于机关、企事业单位、学校和新闻机构。涵盖申请、请示、报告、通知、通告、意见、决定、决议、议案、公报、命令、函、复函、批复、说明、方案、纪要、公告、公示、通报、制度、规定、办法、细则、操作规程、工作要点、总结、调研、讲话、致辞、主持词、述职、可研、审查材料、技术需求、新闻消息、编者按、新闻评论，以及采购、整改、反馈和 AI 算力等场景。

source
View on ClawHub

Often paired with

Keep exploring AgentHub

Most people compare similar tools or check scenario guides before installing—start here.

Browse more like thisSearch similarPick by scenarioPrompt playbooksSkill hands-onReviews & comparisons

Listing badge: put AgentHub on your site

Copy either snippet into your project homepage, docs, or GitHub README. The badge is a hotlinked SVG — nothing to host — and it links back to this page so visitors can find the install steps.

PreviewListed on AgentHub: css-animation
HTML
<a href="https://myagenthub.cn/p/skillsmp.neonwatty-css-animation-skill-skill-md" title="Listed on AgentHub: css-animation" target="_blank" rel="noopener">
  <img src="https://myagenthub.cn/badge/skillsmp.neonwatty-css-animation-skill-skill-md?lang=en" alt="Listed on AgentHub: css-animation" height="20" style="border:0"/>
</a>
Markdown (GitHub README)
[![Listed on AgentHub: css-animation](https://myagenthub.cn/badge/skillsmp.neonwatty-css-animation-skill-skill-md?lang=en)](https://myagenthub.cn/p/skillsmp.neonwatty-css-animation-skill-skill-md)

Badges are generated on the fly from /badge/<package-id>, so name and listing changes propagate automatically. Keep the link target unchanged — it is what counts as the referral.

Unified 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"
  }
}