Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/GktuOktay/ai-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/rules/gktuoktay/ai-skills/ui-animation)<a href="https://agentmods.dev/rules/gktuoktay/ai-skills/ui-animation"><img src="https://agentmods.dev/badge/rules/gktuoktay/ai-skills/ui-animation/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/rules/gktuoktay/ai-skills/ui-animation"><img src="https://agentmods.dev/badge/rules/gktuoktay/ai-skills/ui-animation.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.02017 |
| Opus 5 | $0.00000 | $0.01009 |
| Sonnet 5 | $0.00000 | $0.00403 |
| Haiku 4.5 | $0.00000 | $0.00202 |
Grade A, and why
ui-animation scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 202 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Animation — Complete Guide
This skill covers the full lifecycle of UI animations: from identifying where animations add value, through implementation with best practices, to reviewing and optimizing existing animations.
1. Animation Vocabulary & Taxonomy
Motion Primitives
| Primitive | CSS / JS Property | Use Case |
|---|---|---|
| Fade | opacity |
Entrance/exit, overlays, skeleton → content |
| Slide | translateX / translateY |
Page transitions, drawers, toasts |
| Scale | scale / transform: scale() |
Modals, cards, hover emphasis |
| Rotate | rotate / transform: rotate() |
Loading spinners, icon state change |
| Morph | clip-path, d (SVG path) |
Shape transitions, creative reveals |
| Color Shift | background-color, color, fill |
State feedback (success/error), theming |
| Blur | filter: blur() |
Depth of field, focus transitions |
| Stagger | Sequential delay per child | List/grid entrance, cascade effects |
Easing Reference
| Name | CSS Value | Personality |
|---|---|---|
| Ease Out Cubic | cubic-bezier(0.33, 1, 0.68, 1) |
Snappy, responsive (recommended default) |
| Ease In Out Quart | cubic-bezier(0.76, 0, 0.24, 1) |
Elegant, polished transitions |
| Spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
Playful, bouncy, delightful |
| Linear | linear |
Only for infinite loops (spinners, marquees) |
Duration Guidelines
- Micro-interactions (hover, press):
100–200ms - Small transitions (toggle, tab switch):
200–300ms - Medium transitions (modal open, slide-in):
300–500ms - Large/page transitions:
400–700ms - Never exceed
1000msfor functional animations
2. Finding Animation Opportunities
When reviewing a UI, systematically scan for these high-impact animation opportunities:
High Priority (Always Animate)
- Page/Route Transitions — Fade + subtle slide between pages
- Modal & Dialog — Scale from 0.95 → 1.0 + backdrop fade
- Loading States — Skeleton shimmer, spinner, progress bar
- Toast / Notification — Slide in from edge + auto-dismiss fade
- Navigation State — Active tab indicator slide, hamburger → X morph
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 202 lines · 2,017 tokens per session scan A 813d3aef36bc
ui-animation is a cursor rule published in the GitHub repository GktuOktay/ai-skills (2 stars, last pushed 8d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,017 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other cursor rules, from other repositories
motion-designer
Act as a Senior Motion Designer to specify and ship purposeful UI animation — micro-interactions, transitions, scroll-driven sequences, p...
ui-components
USE WHEN: Building UI components, structuring layouts, and applying styles using Tailwind CSS.
figma-translator
Translate any technical specification into five precise, self-contained Figma Make prompts ready to paste and generate.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Covers design thinking, typography pairing, color theory, motion design, spatial composition, and code quality. Generates real working code — HTML/CSS/JS or React — with intentional aesthetic direction, not generic AI output.
canonical__hhadcn-ui
Cursor rule "canonical__hhadcn-ui" from Bilal140202/the-lord-of-the-skills, covering shadcn/ui best practices, installation, initial setup, initialize shadcn/ui in your project and add components as needed.
accessibility
Web accessibility best practices for WCAG compliance and inclusive design.