clique-motion
Skill3 starsChanged 28 days agoMITView on GitHub
Rules for any animation, transition or hover effect in the CLIque front end (web/). Load before adding or changing motion.
Files
Motion
Wanted, and cheap, or not at all. The whole argument for this tool is that it is 24 MB and starts instantly; motion that costs a library, a frame budget or a main-thread stall gives that away for polish.
- CSS transitions,
@starting-style, CSS animations, and WAAPI (element.animate()). Never a motion library. Those four are in every browser already and cost nothing to ship. - Animate
transformandopacity. Anything that moves layout — width, height, top, left — repaints the world on a box that is also running a dozen PTYs. - The frequency gate decides first, not the easing. Something opened hundreds of times a day should not animate at all: the command palette, tab switching, the sidebar rail. Modals, drawers, toasts and the settings sheet are where motion earns its place.
prefers-reduced-motionships with the animation, not after it — and as a gentler variant rather than nothing.- Hover effects go behind
@media (hover: hover) and (pointer: fine); touch fires a false hover on tap.
Guidance for the details is vendored in .claude/skills/ — see the README
there for what was left out and why.
In this repository11 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- animateSkill
- animation-vocabularySkill
- apple-designSkill
- clique-release-checkSkill
- clique-three-surfacesSkill
- emil-design-engSkill
- find-animation-opportunitiesSkill
- improve-animationsSkill
- review-animationsSkill
- drive-cliqueSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.