Make Interfaces Feel Better
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
Scans a codebase for missing or inconsistent UI motion, scores it from 0 to 100, and applies a transitions.dev fix only after you pick between a light polish and a full recipe revamp.
Install Transitions Agent Motion Audit
$ npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-agent --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Jakubantalik/transitions.dev.git skills-src && mkdir -p .claude/skills && cp -r skills-src/agent/skill .claude/skills/transitions-agent && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "transitions-agent" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/agent/skill into .claude/skills/transitions-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-agent", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Jakubantalik/transitions.dev/tree/main/agent/skillType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-agent --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakubantalik/transitions.dev.git skills-src && mkdir -p .agents/skills && cp -r skills-src/agent/skill .agents/skills/transitions-agent && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "transitions-agent" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/agent/skill into .agents/skills/transitions-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-agent", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-agent --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakubantalik/transitions.dev.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/agent/skill .cursor/skills/transitions-agent && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "transitions-agent" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/agent/skill into .cursor/skills/transitions-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-agent", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Jakubantalik/transitions.dev.git --path agent/skill--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-agent --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakubantalik/transitions.dev.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/agent/skill .gemini/skills/transitions-agent && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "transitions-agent" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/agent/skill into .gemini/skills/transitions-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-agent", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Jakubantalik/transitions.dev transitions-agentInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Jakubantalik/transitions.dev.git skills-src && mkdir -p .github/skills && cp -r skills-src/agent/skill .github/skills/transitions-agent && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "transitions-agent" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/agent/skill into .github/skills/transitions-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-agent", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-agent --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakubantalik/transitions.dev.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/agent/skill .opencode/skills/transitions-agent && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "transitions-agent" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/agent/skill into .opencode/skills/transitions-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-agent", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
transitions-agent- GitHub stars
- 4.7k
- Token cost
- ~1.6k tokens
- SKILL.md length
- 883 words
- Files
- 1
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Scans a codebase for missing or inconsistent UI motion, scores it from 0 to 100, and applies a transitions.dev fix only after you pick between a light polish and a full recipe revamp.
- Works in 4 steps: Scan (safe, read-only, no account… → Present exactly these two options and… → License: hosted fixes need a key. It… → …
- Auditing a UI for missing or janky transitions after a round of changes
- SKILL.md covers Workflow, CI setup, Network and Rules
- Calls npx and npm
What it does
Running the transitions-agent CLI's scan step is free, read-only and needs no account: it reports a motion score, then every recognized UI component such as a modal, dropdown, tooltip or accordion with its current motion and the matching transitions.dev recipe, flagged as matching, off-scale, built wrong or hand-rolled, followed by findings grouped by rule with file and line. The agent is told to always continue past the scan to presenting options rather than stopping at the report.
Exactly two fix choices are then presented: a polish fix that moves existing transition values onto a consistent motion-token scale, covers hover states and adds a reduced-motion guard with small diffs, or a revamp fix that additionally installs the full transitions.dev recipe, including CSS, state hooks and enter and exit JavaScript, on each recognized component. Hosted fixes need a license key, resolved from an environment variable or a local config file, with a signup command that opens a browser to obtain one if neither is set. A separate init-ci command sets up CI only and never scans or fixes as part of that.
When your agent uses it
- Auditing a UI for missing or janky transitions after a round of changes
- Getting a numeric motion quality score for a codebase
- Applying consistent transition timing across modals, dropdowns and tooltips
Example prompts
- “npx transitions-agent”
- “Scan this project's motion quality and show me the score.”
- “Polish the motion on our modal and dropdown components.”
Requirements
- Node.js, to run npx transitions-agent
- A license key for hosted fixes, beyond the free scan
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Scan (safe, read-only, no account needed) from the repository root
- Present exactly these two options and let the user choose (do not fix without a choice, and do not invent other options such as fixing the…
- License: hosted fixes need a key. It resolves from TRANSITIONS_AGENT_LICENSE, or ~/.transitions-agent.json. If neither exists, offer
- Verify: re-run the scan and report the score change (for example "71 to 89"). If the user wants it as a pull request, use fix --pr (it…
What it can do on your machine
Read from SKILL.md and the folder at commit 2773886. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npxnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Transitions Agent Motion Audit loads about 1.6k tokens when it runs. Until then it costs about 142 tokens; SKILL.md has 883 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 883 words (~1,592 tokens).
“You drive the transitions-agent CLI for the user: scan, present choices, run the choice they pick, verify. The scan is deterministic and free; fixes change files, so every fix step needs the user's go-ahead first.”
- name
- transitions-agent
Files
Just SKILL.md in agent/skill of Jakubantalik/transitions.dev.
Open the folder on GitHubat commit 2773886
Compare with similar skills
Transitions Agent Motion Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Transitions Agent Motion Audit this skillJakubantalik/transitions.dev | 4.7k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| Baseline UIibelick/ui-skills | 9.6k | 8 repos | ~855 | Automated safety check: Pass | MIT | |
| Apple Liquid Glass Designnaplesblue/apple-design-skill | 269 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Better UItrycompai/crm | 11k | — | ~2.4k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxOhh-889/skyroc | 795 | 6 repos | ~14k | Automated safety check: Pass | MIT |
Similar skills
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
Apple Liquid Glass Design
naplesblue/apple-design-skill
Sets design rules for web interfaces that should feel like current Apple design: unified surfaces, restrained type and glass only where layers overlap.
Better UI
trycompai/crm
Design engineering principles for making interfaces feel polished.
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence for web, mobile, and desktop. An agent skill from Ohh-889/skyroc.
Antigravity Design Expert
sickn33/agentic-awesome-skills
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
More from Jakubantalik/transitions.dev
Transitions Polish
Jakubantalik/transitions.dev
Audits existing UI animations against the transitions.dev motion-token scale and suggests tokens for duration, distance, scale, blur and easing.
Refine Live In-Chat Relay
Jakubantalik/transitions.dev
Acts as the LLM behind the Timeline Inspector's Refine button by long-polling a local relay for jobs, posting suggestions back, and exiting cleanly on a stop signal.
Related
Categories
Questions about Transitions Agent Motion Audit
What does Transitions Agent Motion Audit do?
Scans a codebase for missing or inconsistent UI motion, scores it from 0 to 100, and applies a transitions.dev fix only after you pick between a light polish and a full recipe revamp. dev recipe, flagged as matching, off-scale, built wrong or hand-rolled, followed by findings grouped by rule with file and line. The agent is told to always continue past the scan to presenting options rather than stopping at the report.
When should I use Transitions Agent Motion Audit?
Transitions Agent Motion Audit fits situations like: auditing a UI for missing or janky transitions after a round of changes; getting a numeric motion quality score for a codebase; applying consistent transition timing across modals, dropdowns and tooltips.
How do I install Transitions Agent Motion Audit in Claude Code?
Run `npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a claude-code`. Or copy the skill folder (agent/skill in Jakubantalik/transitions.dev) into .claude/skills/transitions-agent in your project. Claude Code loads it when a task matches its description.
How do I install Transitions Agent Motion Audit in Codex?
Run `npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a codex`. Or copy the skill folder (agent/skill in Jakubantalik/transitions.dev) into .agents/skills/transitions-agent in your project. Codex loads it when a task matches its description.
Can I use Transitions Agent Motion Audit in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Jakubantalik/transitions.dev --skill transitions-agent -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/transitions-agent, .gemini/skills/transitions-agent, .github/skills/transitions-agent and .opencode/skills/transitions-agent in your project.
What does Transitions Agent Motion Audit need to run?
Going by SKILL.md and its folder, Transitions Agent Motion Audit needs the command-line tools its instructions call (npx and npm). Our summary lists: Node.js, to run npx transitions-agent; A license key for hosted fixes, beyond the free scan.
Does Transitions Agent Motion Audit access the network?
SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Transitions Agent Motion Audit safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Transitions Agent Motion Audit use?
Transitions Agent Motion Audit has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Transitions Agent Motion Audit use?
About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Transitions Agent Motion Audit?
Skills that share tags, products or a category with Transitions Agent Motion Audit: Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars), Baseline UI (ibelick/ui-skills, 9.6k stars), Apple Liquid Glass Design (naplesblue/apple-design-skill, 269 stars) and Better UI (trycompai/crm, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Transitions Agent Motion Audit?
Jakubantalik (a GitHub user) maintains it in Jakubantalik/transitions.dev, which has 4,747 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 10, 2026.
Source: Jakubantalik/transitions.dev on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.