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/Kevin-Liu-01/Sigil-UIWrote 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/kevin-liu-01/sigil-ui/design-animation-rules)<a href="https://agentmods.dev/rules/kevin-liu-01/sigil-ui/design-animation-rules"><img src="https://agentmods.dev/badge/rules/kevin-liu-01/sigil-ui/design-animation-rules/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/kevin-liu-01/sigil-ui/design-animation-rules"><img src="https://agentmods.dev/badge/rules/kevin-liu-01/sigil-ui/design-animation-rules.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.01372 | $0.01372 |
| Opus 5 | $0.00686 | $0.00686 |
| Sonnet 5 | $0.00274 | $0.00274 |
| Haiku 4.5 | $0.00137 | $0.00137 |
Grade A, and why
design-animation-rules 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 9d 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 — 127 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design & Animation Rules
Imported from Kevin's wiki (
wiki/style/design-and-animation.md). Source: Emil Kowalski's design engineering philosophy. Cross-reference:sigil-design-system.mdc(Seven Motion Rules, Enter/Exit Asymmetry),frontier-stack.mdc(tool selection).
Core Philosophy
Taste is trained, not innate. Reverse engineer animations. Inspect interactions. Unseen details compound — a thousand barely audible voices all singing in tune. Beauty is leverage.
Animation Frequency Framework
| Frequency | Decision |
|---|---|
| 100+ times/day (keyboard shortcuts, command palette) | No animation. Ever. |
| Tens of times/day (hover effects, list navigation) | Remove or drastically reduce |
| Occasional (modals, drawers, toasts) | Standard animation |
| Rare/first-time (onboarding, celebrations) | Can add delight |
Never animate keyboard-initiated actions.
Easing Decision Flowchart
Entering or exiting viewport? → ease-out
Moving/morphing on screen? → ease-in-out
Hover/color change? → ease
Constant motion (marquee, progress)? → linear
Default → ease-out
Use custom curves — built-in CSS easings lack punch:
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
Never use ease-in for UI animations. It starts slow, making the interface feel sluggish.
Duration Guidelines
| Element Type | Duration |
|---|---|
| Button press feedback | 100-160ms |
| Tooltips, small popovers | 125-200ms |
| Dropdowns, selects | 150-250ms |
| Modals, drawers | 200-500ms |
| Marketing/explanatory | Can be longer |
- UI animations stay under 300ms
- Larger elements animate slower than smaller ones
- Exit animations ~20% faster than entrance
- Match duration to distance
Spring Animations
Springs feel more natural — they simulate real physics with no fixed duration.
When to use: drag interactions with momentum, elements that feel "alive", gestures that can be interrupted, decorative mouse-tracking.
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.
- 9d ago First seen · 127 lines · 1,372 tokens per session scan A e43da45eb7b8
design-animation-rules is a cursor rule published in the GitHub repository Kevin-Liu-01/Sigil-UI (9 stars, last pushed 1mo ago), licensed MIT. It adds 1,372 tokens to every session, about $0.0069 per session on Opus 5. 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-08-31.
Other cursor rules, from other repositories
designlang
Design system extracted from https://cal.com — use these tokens, do not invent new ones.
registry-bases-parity
Keep registry base and radix trees in sync when editing shared UI.
ponytail
Ponytail, lazy senior dev mode. Always pick the simplest solution that works.
angular-20
This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.
dev-standard
Apache Superset development standards and guidelines for Cursor IDE.
cli-error-handling
CLI command error handling patterns.