Skills

Audits motion code against squash and stretch, anticipation, follow-through, secondary action and the rest. Outputs file:line findings.

npx skills add https://github.com/raphaelsalaja/skill --skill 12-principles-of-animation

Should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Then writes the implementation.

npx skills add https://github.com/emilkowalski/skills --skill animate

Distilled from the WWDC design talks. Gesture-driven UI, spring physics, interruptible transitions, translucent materials, optical sizing and the restraint underneath all of it.

npx skills add https://github.com/emilkowalski/skills --skill apple-design

Accessibility, layout, writing, typography, colour and UI polish in one go. The one to take if you only take one.

npx skills add https://github.com/jakubkrehel/skills --skill better-interface

Based on the Details That Make Interfaces Feel Better article. The small corrections that separate a shipped interface from a generated one.

npx skills add https://github.com/jakubkrehel/skills --skill better-ui

For landing pages, portfolios and redesigns. Infers the right design direction rather than defaulting to one, and uses a real design system where there is one to use.

npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

Emil's main skill. Mostly animation, with the UI-polish and component judgement that surrounds it: what to build, how far to push it, and when to stop.

npx skills add https://github.com/emilkowalski/skills

Official ScrollTrigger guidance, including horizontal containerAnimation and batching — which is where most scroll work goes wrong.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger

Every rule states a value, cites whether that value is spec, measured or convention, and says where it stops applying. Reads your project's own tokens before it quotes a default, so a 7px radius in a 7px system is correct rather than a finding.

npx skills add https://github.com/Board-ly/ordinary-interfaces

Writing your own shaders rather than stacking built-in materials until something looks close enough.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-shaders

Teaches an agent the transitions.dev motion library and adds four commands: reveal lists the catalogue, review finds ad-hoc transitions and hardcoded durations across the project, apply proposes the best-fit transition for where your cursor sits, and refine maps raw durations onto the motion tokens by each token's usage rather than by its number. Review and refine are read-only.

npx skills add Jakubantalik/transitions.dev

Applied when writing, reviewing or refactoring React and Next.js code, so the performance decisions are made while the code is written rather than profiled afterwards.

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

Checks a build against the published guidelines rather than a reviewer's taste, covering accessibility, interaction and the details that guidelines exist to settle.

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

One shared context blitted into cheap 2D canvases, one rAF loop, IntersectionObserver gating, mipmaps, and real optics instead of painted ones. The failure modes are predictable and nearly all come from treating the widget like a demo.

npx skills add https://github.com/flornkm/skills --skill webgl-components

Contrast, keyboard navigation, screen reader support and the rest, checked against the current standard rather than a folk memory of it.

npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility

Defines the scope, samples representative pages and reports against the standard. The formal counterpart to a single-page scan.

npx skills add https://github.com/AccessLint/claude-marketplace --skill accessibility-audit

A regression check. Tells you what your uncommitted changes broke, rather than everything that was ever wrong.

npx skills add https://github.com/AccessLint/claude-marketplace --skill accessibility-diff

Runs the AccessLint rule engine against a live page and returns a worklist, not a PDF.

npx skills add https://github.com/AccessLint/claude-marketplace --skill accessibility-scan

Which thread it runs on, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler and expo-haptics, and fixes motion that stutters on device.

npx skills add https://github.com/emilkowalski/skills --skill animate-expo

"The bouncy thing when a popover opens" becomes Pop in. "The iOS rubber-band scroll" becomes rubber-banding. Better words in, better motion out.

npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

Class-based semantic tokens with dual light/dark, plus design-read, anti-slop and micro-interaction polish for product surfaces.

npx skills add https://github.com/antfu/skills --skill antfu-design

Which toast() call to reach for, promise and loading toasts, updating and dismissing, styling and theming. Also the failures: toasts that appear twice, lose their styles, sit behind a modal or ignore dark mode.

npx skills add https://github.com/emilkowalski/skills --skill ask-sonner

Brings a project up to accessibility standards and keeps it there, at the level of the actual markup rather than a checklist.

npx skills add https://github.com/jakubkrehel/skills --skill better-accessibility

Convert colours, generate palettes, check contrast, clamp to a target gamut, set up fallbacks. Semantic tokens rather than a pile of hexes.

npx skills add https://github.com/jakubkrehel/skills --skill better-colors

The structural decisions that make a layout legible before anything is styled.

npx skills add https://github.com/jakubkrehel/skills --skill better-layout

The typographic details that hold up across a whole product rather than on one hero section.

npx skills add https://github.com/jakubkrehel/skills --skill better-typography

Improves product copy while keeping voice and terminology consistent across the whole surface.

npx skills add https://github.com/jakubkrehel/skills --skill better-writing

Runs ahead of building a feature or a component and digs into what is actually wanted. It exists because the most expensive agent mistake is building the wrong thing correctly.

npx skills add https://github.com/obra/superpowers --skill brainstorming

Finds the design-system failures you don't know about: long names, empty data, overflow, every interactive state at once.

npx skills add https://github.com/jakubkrehel/skills --skill break

For posters, graphics and compositions rather than product screens. Design philosophy first, output second.

npx skills add https://github.com/anthropics/skills --skill canvas-design

Reviews everything since a commit, branch or merge base twice over. Once against the repository's own documented standards, once against what the originating issue actually asked for, and reports the two separately so you can see which kind of problem you have.

npx skills add https://github.com/mattpocock/skills --skill code-review

Gives the agent language for the thing most architecture conversations lack: where a seam belongs, what makes a module deep rather than wide, and why a narrow interface over real work is easier for both people and agents to navigate.

npx skills add https://github.com/mattpocock/skills --skill codebase-design

Diagnose and repair page-experience regressions using real measurement rather than a guess about what got slow.

npx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitals

Stops the agent from guessing at a fix. It reproduces, narrows, forms one hypothesis at a time and tests it, which is the difference between a bug being fixed and a symptom being buried.

npx skills add https://github.com/mattpocock/skills --skill diagnosing-bugs

Names the things your codebase talks about and keeps those names honest, through a CONTEXT.md and architecture decision records. Worth reaching for when two parts of the system call the same concept different things.

npx skills add https://github.com/mattpocock/skills --skill domain-modeling

The other half of writing-plans. It keeps the agent on the plan it agreed to, step by step, rather than quietly redesigning halfway down.

npx skills add https://github.com/obra/superpowers --skill executing-plans

Point it at a page and an effect, such as "how is the gradient on interfere.com built?", and get the actual technique back.

npx skills add https://github.com/jakubkrehel/skills --skill explain-interface

Mandatory prerequisite before get_design_context. Handles the parts a naive export gets wrong: components over detached layers, variables over hardcoded values.

https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/

Tokens, variant sets, theming and component libraries generated from what the code already decided.

https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/

High-conviction opportunities for useful interface motion, with an explicit rejection list so you don't end up animating noise.

npx skills add https://github.com/emilkowalski/skills --skill find-animation-opportunities

Turns a question like how do I do this into a search across the registry, then installs what it finds. The most installed skill there is, which is its own argument for keeping it in the stack.

npx skills add https://github.com/vercel-labs/skills --skill find-skills

Anthropic's first-party skill for distinctive interface work: creative, polished code rather than the default purple gradient.

npx skills add https://github.com/anthropics/skills --skill frontend-design

Audits Web Audio API code for synthesis quality, UX decisions and parameter choices instead of shipping the first oscillator that made a noise.

npx skills add https://github.com/raphaelsalaja/skill --skill generating-sounds-with-ai

GreenSock's own guidance for the core API, including the responsive and reduced-motion patterns matchMedia exists for — the part most GSAP code skips.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-core

Scoped selectors and cleanup on unmount, for the frameworks that are not React.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-frameworks

Holding 60fps with GSAP: what to animate, what quickTo is actually for, and how to batch staggers so they do not thrash layout.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance

Which plugin solves which problem, and the registerPlugin() wiring each one needs.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins

GSAP in React and Next.js without leaking tweens across renders. gsap.context(), contextSafe callbacks, and cleanup that survives strict mode.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-react

Timelines are what separate GSAP from a pile of tweens. Position parameters, labels, nested timelines and playback control.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline

The animation maths helpers in gsap.utils, which quietly replace most hand-written interpolation.

npx skills add https://github.com/greensock/gsap-skills --skill gsap-utils

Read-only on source. Surveys the motion you already ship and produces self-contained implementation plans any agent can execute, ordered by what actually matters.

npx skills add https://github.com/emilkowalski/skills --skill improve-animations

Walks the codebase looking for modules whose interface is wider than the work they do, writes the findings up as a visual report, then works through whichever one you pick. The useful part is that it argues each case rather than handing you a list.

npx skills add https://github.com/mattpocock/skills --skill improve-codebase-architecture

Reviews what you have built across every category at once and reports the findings in detail, rather than fixing as it goes.

npx skills add https://github.com/jakubkrehel/skills --skill interface-review

Audits Motion and Framer Motion presence usage: exits that never play, popLayout, mode="wait", keys that break unmount.

npx skills add https://github.com/raphaelsalaja/skill --skill mastering-animate-presence

Covers designing the tools rather than just exposing an API, in Python with FastMCP or in TypeScript with the MCP SDK. Most of the value is in the part about what makes a tool legible to a model.

npx skills add https://github.com/anthropics/skills --skill mcp-builder

Builds icon components with smooth, line-based transformation rather than a crossfade wearing a costume.

npx skills add https://github.com/raphaelsalaja/skill --skill morphing-icons

General web performance work such as "speed up my site" or "why is this slow", with the fixes ordered by payoff.

npx skills add https://github.com/addyosmani/web-quality-skills --skill performance

Stops your agent hand-rolling a toast or installing whatever is trending. Covers components, motion, charts, interaction, state and styling.

npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library

A component should respond to the space it is given, not to the window. Enforces Tailwind container queries when writing or reviewing responsive code.

npx skills add https://github.com/flornkm/skills --skill prefer-container-queries

Flip through real implementations instead of arguing about descriptions, then promote the one that wins.

npx skills add https://github.com/emilkowalski/skills --skill prototype

Audits pseudo-element and View Transition usage for hover effects, decorative layers and transitions that would otherwise need a wrapper div.

npx skills add https://github.com/raphaelsalaja/skill --skill pseudo-elements

The interesting one. It requires the agent to verify a suggestion before implementing it, and to push back where the feedback is unclear or wrong, which is the opposite of what an agent does by default.

npx skills add https://github.com/obra/superpowers --skill receiving-code-review

Upgrades a live site or app without breaking it: identifies the tells of generated design and applies a higher standard, in whatever CSS the project already uses.

npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

Triggers on finishing a task, landing a significant feature or preparing to merge, and frames the request around what the work was meant to do rather than what changed.

npx skills add https://github.com/obra/superpowers --skill requesting-code-review

Sends the reading legwork to a background agent, restricted to high-trust primary sources, and captures what it found as a Markdown file in the repository so the next person does not repeat it.

npx skills add https://github.com/mattpocock/skills --skill research

For the moment you are mid-rebase with twelve conflicted files and no memory of what either side was trying to do. It reads both sides for intent rather than picking a hunk and moving on.

npx skills add https://github.com/mattpocock/skills --skill resolving-merge-conflicts

A production-critical pass over animation quality, timing and consistency in a diff. Pairs with improve-animations, which does the same for a whole codebase.

npx skills add https://github.com/emilkowalski/skills --skill review-animations

The technical half of being found: what to emit, what crawlers do with it, and which of it actually moves ranking.

npx skills add https://github.com/addyosmani/web-quality-skills --skill seo

The first-party skill for making skills. It covers writing one from scratch, improving an existing one, running evals against it and tuning the description so the agent actually loads it at the right moment.

npx skills add https://github.com/anthropics/skills --skill skill-creator

Audits sound feedback for UX quality, accessibility and the implementation patterns that keep it from being obnoxious.

npx skills add https://github.com/raphaelsalaja/skill --skill sounds-on-the-web

For a plan whose tasks do not depend on each other. It hands them to separate agents in the same session, which is faster and keeps each one's context focused on its own piece.

npx skills add https://github.com/obra/superpowers --skill subagent-driven-development

Fires on any bug, failing test or surprise, and it fires before the agent is allowed to suggest a change. The order is the whole point: understand the failure, then propose. It is the counterweight to an agent that is eager to be helpful.

npx skills add https://github.com/obra/superpowers --skill systematic-debugging

Test-first for features and bug fixes, with integration tests rather than mocks where the integration is the risk. The discipline it adds is writing the failing test before the agent is allowed near the implementation.

npx skills add https://github.com/mattpocock/skills --skill tdd

The Superpowers take on TDD, written to trigger before implementation code exists rather than after. Pairs with verification-before-completion, which is what stops the agent declaring the tests green without running them.

npx skills add https://github.com/obra/superpowers --skill test-driven-development

Driving animation that came out of a modelling tool, and blending between clips.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-animation

Where every Three.js project starts, and where a surprising number of them go wrong before anything is drawn.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-fundamentals

Including instancing, which is the difference between fifty objects and fifty draw calls.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-geometry

Making a 3D scene respond to a cursor without rebuilding hit testing from scratch.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-interaction

Shadows are the expensive part. This says when to pay for them and when to fake it.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-lighting

Asset loading with the progress and error states a real page needs, not the ones a demo gets away with.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-loaders

Choosing a material by what it costs as well as by what it looks like.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-materials

Post effects, and the frame cost each one adds.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-postprocessing

Texture workflows including the mip and colour-space settings that quietly make everything look wrong when skipped.

npx skills add https://github.com/CloudAI-X/threejs-skills --skill threejs-textures

No interview and no questionnaire. It synthesises what has already been discussed into a spec and publishes it to the issue tracker, which is the step most people skip between deciding and building.

npx skills add https://github.com/mattpocock/skills --skill to-spec

Audits animation timing choices. Springs are not free, so this is the argument for each one, per interaction.

npx skills add https://github.com/raphaelsalaja/skill --skill to-spring-or-not-to-spring

An add-on that layers open/close, hover in/out and stagger rules on top of token matching, with explicit distance coverage. Works alongside the main skill or on its own.

npx skills add Jakubantalik/transitions.dev -s transitions-polish

Sets up a worktree so a feature or a plan runs somewhere other than your current checkout. Cheap insurance when an agent is about to touch a lot of files.

npx skills add https://github.com/obra/superpowers --skill using-git-worktrees

Rather than arguing about a description, it builds the alternatives and helps you iterate until one is clearly right.

npx skills add https://github.com/jakubkrehel/skills --skill variant

The ViewTransition component, addTransitionType and the CSS pseudo-elements, used to animate between states without hand-rolling a shared-element transition.

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions

Fires the moment the agent is about to say something is done, fixed or passing. It has to run the verification and read the output first. If you have ever been told the build is green when it is not, this is the skill for that.

npx skills add https://github.com/obra/superpowers --skill verification-before-completion

The whole-site check, run from measurement rather than opinion, with the findings ordered by what they cost the user.

npx skills add https://github.com/addyosmani/web-quality-skills --skill web-quality-audit

Lets the agent open your dev server, click through it, screenshot what it sees and read the browser console. The gap it closes is an agent that writes frontend code it has never actually run.

npx skills add https://github.com/anthropics/skills --skill webapp-testing

For multi-step work, where the failure mode is an agent that starts confidently in the wrong place. It produces a plan you can read and correct while correcting it is still cheap.

npx skills add https://github.com/obra/superpowers --skill writing-plans