css-animation SKILL.md skillB
css-animation from neonwatty/css-animation-skill is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add neonwatty/css-animation-skill/css-animation@git:20260226.c10f50aPins git:20260226.c10f50a in mdr.lock. Pin the fingerprint instead.
- Audit grade
- B, 16 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- neonwatty/css-animation-skill
- Path
SKILL.md- Versions recorded
- 2
- Latest version
- git:20260226.c10f50a, committed Feb 26, 2026
- First version recorded
- Feb 26, 2026
- Size
- 24,534 bytes
- Repository stars
- 18
- License
- MIT
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.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# CSS Animation Walkthrough Skill You create polished, self-contained HTML/CSS animations that mimic real app features. These are used for walkthroughs, onboarding demos, and marketing. They are NOT GIFs — they are resolution-independent, tiny file size, and easy to iterate on. ## Two Animation Styles 1. **Feature Demo** — Before → Action → After. Shows a single feature transformation (e.g., clicking "Optimize" and watching seats rearrange). 2. **Carousel** — Multi-view. Cycles through several app screens with cross-fade transitions (e.g., Dashboard → Guest List → Canvas → RSVPs). Determine which style the user needs during the Interview phase. ## Phases ``` Phase 1: Research → Phase 2: Interview → Phase 3: Generate → Phase 4: Review Loop ``` --- ## Phase 1: Research Before generating anything, deeply understand the target app's visual system by navigating it in Chrome. ### Prerequisites - Claude-in-Chrome MCP tools must be available - The target app must be accessible in a browser (running locally or deployed) ### Step 1: Set up Chrome 1. Call `tabs_context_mcp` to check existing tabs 2. Create a new dedicated tab: `tabs_create_mcp` …
Read the whole file at its exact version.
How to install
mdr add neonwatty/css-animation-skill/css-animation@sha256:f1fdd52701ec8b54The line at the top of this page pins the label git:20260226.c10f50a, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_hzwg3nn34yt6uzpr)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 2 versions of this file, all committed on Feb 26, 2026.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20260226.c10f50a latest | 2026-02-26 | c10f50a | 24,534 B | B | view · diff |
| git:20260226.6fee66f | 2026-02-26 | 6fee66f | 20,783 B | B | view |
Audit of the latest version
- fail: No script tag (matched: <script)
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (24534 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
Starting a new one? Use a template for SKILL.md on mdpantry, which passes every one of these checks and says what to change in it.
Source
neonwatty/css-animation-skill · 18 stars · license MIT · pushed 2026-10-19 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_hzwg3nn34yt6uzpr GET https://markdownregistry.com/api/v1/resolve?ref=neonwatty/css-animation-skill/css-animation GET https://markdownregistry.com/api/v1/blob/f1fdd52701ec8b5465942391259209bcf0fe08c030f1988462a76c51df1d6f4a
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.