Skills
Agent skills for motion craft from SoraLabs, animating-icons & motion-meaning
Install: /plugin marketplace add SoraLabsOSS/skills
Works with Claude Code · 28 GitHub stars
Install
/plugin marketplace add SoraLabsOSS/skillsInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →SoraLabs skills
Agent skills for motion craft — small, opinionated, measurable. Built while shipping real UI, not from a generic a11y checklist.
Each skill follows the Agent Skills progressive-disclosure model: lean SKILL.md, depth in references/, helpers in scripts/.
Skills
animating-icons
An icon is not a picture you move. It is an object that does something, and the animation is that thing happening once.
Twelve gesture families, a failure catalog, vector morph + icon↔icon morph, and a verify harness that measures instead of eyeballing.
| Site | skills.soralabs.studio/animating-icons |
| Icons in product | Sora UI Icons |
| Verify | node skills/animating-icons/scripts/verify-icon.mjs · npm test |
motion-meaning
Reduced motion isn't about removing animation. It's about deciding what remains when animation disappears.
Classify motion as communicative (sequence = content) or decorative (decorating a result), pick a reduce strategy, audit dead branches, and verify both preference states.
| Blog origin | prefers-reduced-motion in React |
| Site | skills.soralabs.studio/motion-meaning |
| Verify | node skills/motion-meaning/scripts/verify-reduced.mjs · npm run test:motion-meaning |
Install
As a Claude Code plugin (recommended — updates with /plugin update):
/plugin marketplace add SoraLabsOSS/skills
/plugin install animating-icons@soralabs
/plugin install motion-meaning@soralabs
Install one or both. The package exposes every skill under skills/.
Via skills.sh — Claude Code, Cursor, Codex, and other agents:
npx skills add SoraLabsOSS/skills
Pick the skill(s) you want and which agents to install them on.
Or copy the folder into your agent skills dir:
cp -r skills/animating-icons ~/.claude/skills/
cp -r skills/motion-meaning ~/.claude/skills/
Or drop via the local installer (animating-icons only today):
npx github:SoraLabsOSS/skills # ./.claude/skills
npx github:SoraLabsOSS/skills --global # ~/.claude/skills
Using them
Skills fire when the task matches their description. You can also invoke by name.
animating-icons — icon hover gestures, morphs, “is there an honest verb?”
Animate the calendar icon on hover. Here are the poses from Figma. Rest must match the source glyph pixel for pixel.
Run the swap test on this gesture. If the keyframes would look fine on a different icon, throw them out.
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.