Web Style Extractor
Lucent-Snow/style-extractor
Extracts evidence-backed style guides and motion appendices from websites, keeping reusable visual language and stripping product-specific content.
Audits existing UI animations against the transitions.dev motion-token scale and suggests tokens for duration, distance, scale, blur and easing.
Install Transitions Polish
$ npx skills add Jakubantalik/transitions.dev --skill transitions-polish -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-polish --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/skills/transitions-polish .claude/skills/transitions-polish && 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-polish" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-polish into .claude/skills/transitions-polish/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-polish", 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/skills/transitions-polishType 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-polish -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-polish --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/skills/transitions-polish .agents/skills/transitions-polish && 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-polish" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-polish into .agents/skills/transitions-polish/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-polish", 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-polish -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-polish --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/skills/transitions-polish .cursor/skills/transitions-polish && 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-polish" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-polish into .cursor/skills/transitions-polish/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-polish", 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 skills/transitions-polish--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-polish -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Jakubantalik/transitions.dev transitions-polish --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/skills/transitions-polish .gemini/skills/transitions-polish && 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-polish" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-polish into .gemini/skills/transitions-polish/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-polish", 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-polishInstalls 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-polish -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/skills/transitions-polish .github/skills/transitions-polish && 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-polish" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-polish into .github/skills/transitions-polish/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-polish", 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-polish -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-polish --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/skills/transitions-polish .opencode/skills/transitions-polish && 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-polish" agent skill from https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-polish into .opencode/skills/transitions-polish/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "transitions-polish", 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-polish- GitHub stars
- 4.7k
- Used in
- 2 other repos
- Token cost
- ~3.2k tokens
- SKILL.md length
- 1,526 words
- Files
- 4
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Audits existing UI animations against the transitions.dev motion-token scale and suggests tokens for duration, distance, scale, blur and easing.
- Works in 5 steps: Scan the whole project — not just… → For each value, infer what the motion… → Apply the polish rules: check open/close… → …
- Tuning the timing and easing of animations that already exist
- SKILL.md covers Core doctrine: match on usage,…, The five dimensions, Polish rules — when a value is… and Commands, plus 2 more sections
- Calls modal
What it does
This is an add-on to the transitions-dev skill. Instead of adding new transitions, it scans animations that already exist and compares five dimensions (duration, distance, scale, blur and easing) with a shared motion-token scale, suggesting which token each value should reference. The token values are restated in the skill, so it can audit a project on its own, and the bundled _root.css can be copied into the project to use them as CSS variables.
Its core rule is to match on usage rather than the nearest number: a 300ms modal close maps to the 150ms quick duration because both are a modal close, and a value whose usage fits no token is left alone. Higher-level rules cover open and close asymmetry, hover in versus hover out, stagger offsets and intent delays. When installed, the transitions.dev Refine panel feeds these rules into its Small refinement jobs. A _refine-rules.md file ships alongside.
When your agent uses it
- Tuning the timing and easing of animations that already exist
- Auditing a project for ad-hoc transition values
- Fixing stagger offsets or open and close timing that feels off
- Aligning durations and easings to a shared motion-token scale
Example prompts
- “Polish my transitions, because the modal close feels too slow.”
- “Audit the motion in src/components and tokenize the ad-hoc durations.”
- “The dropdown hover in and hover out timing feels off, so refine it against the motion tokens.”
- “Fix the stagger on the card list, it feels janky.”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Scan the whole project — not just stylesheets, but inline style= / CSS-in-JS, styled-components, blocks, and Tailwind arbitrary values…
- For each value, infer what the motion does from the surrounding selectors / component names (modal close, dropdown open, tooltip, badge…
- Apply the polish rules: check open/close asymmetry, hover in/out, stagger totals, and delays — not just whether a single value is on-grid.
- Output a numbered list grouped by file, showing only values that should change
- Do not edit anything. End with: "Run transitions polish to apply these changes, or confirm any line to apply individually."
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:
modal
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
transitions.dev
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 Polish loads about 3.2k tokens when it runs. Until then it costs about 250 tokens; SKILL.md has 1,526 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 1,526 words (~3,190 tokens).
“An add-on to the transitions-dev skill. Where transitions-dev installs whole transitions, this skill polishes motion that already exists: it scans the five motion-token dimensions — duration, distance, scale, blur, easing — and suggests the token each value should reference, plus…”
- name
- transitions-polish
- license
- Free for personal and commercial use; see LICENSE.txt (no redistribution of the library itself)
Files
SKILL.md and 3 other files in skills/transitions-polish of Jakubantalik/transitions.dev.
- SKILL.md
- LICENSE.txt
- _refine-rules.md
- _root.css
Open the folder on GitHubat commit 2773886
Used in 2 other repositories
We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in Jakubantalik/transitions.dev, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Transitions Polish 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 Polish this skillJakubantalik/transitions.dev | 4.7k | 2 repos | ~3.2k | Automated safety check: Pass | Custom licence | |
| Web Style ExtractorLucent-Snow/style-extractor | 453 | — | ~3.8k | Automated safety check: Pass | None | |
| Design System AnalyzerNakanoSanku/OhMySkills | 163 | — | ~1.2k | Automated safety check: Pass | None | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Web Animation DesignbaptisteArno/typebot.io | 11k | 2 repos | ~2.7k | Automated safety check: Pass | Custom licence | |
| Liuguang Banlan UIsickn33/agentic-awesome-skills | 47k | 1 repos | ~2.5k | Automated safety check: Pass | MIT |
Similar skills
Design System Analyzer
NakanoSanku/OhMySkills
Inspects a live website through Chrome DevTools and turns its CSS tokens, animations and hover states into a design system prompt.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
Liuguang Banlan UI
sickn33/agentic-awesome-skills
Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.
Tailwind Design System
SuFxGIT/scoutarr
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.
More from Jakubantalik/transitions.dev
Transitions Agent Motion Audit
Jakubantalik/transitions.dev
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.
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 Polish
What does Transitions Polish do?
Audits existing UI animations against the transitions.dev motion-token scale and suggests tokens for duration, distance, scale, blur and easing. This is an add-on to the transitions-dev skill. Instead of adding new transitions, it scans animations that already exist and compares five dimensions (duration, distance, scale, blur and easing) with a shared motion-token scale, suggesting which token each value should reference.
When should I use Transitions Polish?
Transitions Polish fits situations like: tuning the timing and easing of animations that already exist; auditing a project for ad-hoc transition values; fixing stagger offsets or open and close timing that feels off; aligning durations and easings to a shared motion-token scale.
How do I install Transitions Polish in Claude Code?
Run `npx skills add Jakubantalik/transitions.dev --skill transitions-polish -a claude-code`. Or copy the skill folder (skills/transitions-polish in Jakubantalik/transitions.dev) into .claude/skills/transitions-polish in your project. Claude Code loads it when a task matches its description.
How do I install Transitions Polish in Codex?
Run `npx skills add Jakubantalik/transitions.dev --skill transitions-polish -a codex`. Or copy the skill folder (skills/transitions-polish in Jakubantalik/transitions.dev) into .agents/skills/transitions-polish in your project. Codex loads it when a task matches its description.
Can I use Transitions Polish 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-polish -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-polish, .gemini/skills/transitions-polish, .github/skills/transitions-polish and .opencode/skills/transitions-polish in your project.
What does Transitions Polish need to run?
Going by SKILL.md and its folder, Transitions Polish needs the command-line tools its instructions call (modal).
Does Transitions Polish access the network?
SKILL.md names 1 domain. As links in the text: transitions.dev. This is read from the text; nothing was executed.
Is Transitions Polish 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 Polish use?
Transitions Polish has a licence file (from the LICENSE file in the skill folder) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Transitions Polish use?
About 3.2k tokens (SKILL.md is roughly 13k 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 Polish?
Skills that share tags, products or a category with Transitions Polish: Web Style Extractor (Lucent-Snow/style-extractor, 453 stars), Design System Analyzer (NakanoSanku/OhMySkills, 163 stars), MCP Development (coollabsio/coolify, 63k stars) and Web Animation Design (baptisteArno/typebot.io, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Transitions Polish?
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.