FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
HTML/CSS animations of app features v1.0.0
Use this resource to produce an animated demo of a feature for a walkthrough or onboarding
New
- 370 downloads
- 233 likes
- 202 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install css-feature-demo-animationsWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginIn four phases, the agent studies your app's visual language in Chrome, asks what should be animated, writes a brief, then produces an HTML/CSS file that it adjusts until you approve it. This skill requires the Claude-in-Chrome MCP server.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: four-phase workflow, from brief to approval
- stub.yaml: pointer to the full skill to install
Good fit for
- You want to showcase a new feature in an onboarding page
- You are preparing a product demo without video or an editor
Not for
Tags
- product demo
- onboarding
- css animation
- walkthrough
About
You say
“Animate the new add-card flow in my app for the help page.”
Skill published by podo under the MIT license, delivered in its original version.
Show moreShow less
How to use it
- Install the skill in your agent's skills folder
- Ask your agent to produce an animated demo of a feature for a walkthrough or onboarding
- Review and adjust the result
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.5 KB
- SKILL.md3.1 KB
- stub.yaml0.5 KB
Origin and licence
Listed unmodified
- Author
- podo
- Source
- github.com/podo/design-agent-skills/tree/e04dbc882cc85cc3c0f78cf3648cc69da3c241f6/skills/css-animation-skill
- Licence
- MIT
Notice
« css-animation-skill » (podo, MIT) livré dans sa version d'origine : fiche en français et en anglais par PalateKit.
User reviews
–
No ratings yet
Loading reviews…