Skills

Skills for your AI agent, picked by hand, with the command to install each one.

Direction

Set how the work should look and think. Two of these at once will pull against each other, so pick one.

Frontend Design
by Anthropic
Start here if you only install one. It makes the agent settle on the subject and a visual direction before it builds, so the page is less likely to come out looking like a template.
```
npx skills add https://github.com/anthropics/skills --skill frontend-design
```
anthropics/skillsGitHub stars: 191.7KUpdated Nov 6
Impeccable
by Paul Bakaus
Gives you words to direct the agent with. Steer the work with polish and bolder, then review it with critique and audit. Good when you can see what is wrong but keep failing to describe it.
```
npx impeccable install
```
pbakaus/impeccableGitHub stars: 107.2KUpdated Nov 10
UI UX Pro Max
by Next Level Builder
A big searchable reference. Its README lists 79 UI styles and 192 reasoning rules. Useful for exploring directions early. Because it is so broad, you still have to pick one and hold the agent to it.
```
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
```
nextlevelbuilder/ui-ux-pro-max-skillGitHub stars: 147.6KUpdated Nov 10
Refero Design
by Refero
Makes research part of the job. It works best with the Refero MCP server connected, which gives the agent real product screens to look at before it designs.
```
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
```
referodesign/refero_skillGitHub stars: 347Updated Oct 15
Design Engineering
by Emil Kowalski
Emil Kowalski's way of thinking about polish, component design and when to animate. A good one to keep on if you care about how an interface feels in the small details.
```
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Apple Design
by Emil Kowalski
Apple's approach to interfaces and physical motion, translated for the web. Reach for it when you build sheets, swipes, springs or translucent layers.
```
npx skills add https://github.com/emilkowalski/skills --skill apple-design
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Frontend UI Engineering
by Addy Osmani
Less about style, more about building it properly. Components, layout, state and accessibility, with the aim of output that does not read as AI-generated.
```
npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering
```
addyosmani/agent-skillsGitHub stars: 114.8KUpdated Nov 1

Review and polish

Run these on something that already exists. Each one checks a different thing.

Web Design Guidelines
by Vercel
A reviewer, not a designer. It checks your UI code against the Web Interface Guidelines. Run it at the end of a build, when you want a list of things to fix.
```
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
```
vercel-labs/agent-skillsGitHub stars: 33.8KUpdated Oct 28
Better Interface
by Jakub Krehel
Reviews a screen or a whole flow across accessibility, layout, writing, type, color and polish, then gives you one ranked report. A good first check when you do not know what is off.
```
npx skills add https://github.com/jakubkrehel/skills --skill better-interface
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Interface Review
by Jakub Krehel
Reviews a branch or pull request for the interface problems that change introduced. Use it before you merge, when you only care about what this work broke.
```
npx skills add https://github.com/jakubkrehel/skills --skill interface-review
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Better UI
by Jakub Krehel
Polishes surfaces with exact values for radius, shadows, optical alignment and icon states. For a screen that is right but still looks a bit rough.
```
npx skills add https://github.com/jakubkrehel/skills --skill better-ui
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Better Typography
by Jakub Krehel
Sets and reviews how text renders, from the type scale and spacing to wrapping, truncation and punctuation.
```
npx skills add https://github.com/jakubkrehel/skills --skill better-typography
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Better Colors
by Jakub Krehel
Generates palettes, names semantic tokens, converts between formats and measures contrast. Useful when you are setting up a color system.
```
npx skills add https://github.com/jakubkrehel/skills --skill better-colors
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Better Layout
by Jakub Krehel
Sorts out grouping, alignment and reading order, so a layout holds up when it is resized, translated or mirrored.
```
npx skills add https://github.com/jakubkrehel/skills --skill better-layout
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Break UI
by Emil Kowalski
Feeds your UI the worst data it can: long names, missing fields, huge counts, zero items, non-Latin text. Then it reports what broke and how to fix it.
```
npx skills add https://github.com/emilkowalski/skills --skill break-ui
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Accessibility
by Addy Osmani
Audits a site against WCAG 2.2 and helps you fix what it finds, including screen reader and keyboard support.
```
npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility
```
addyosmani/web-quality-skillsGitHub stars: 3.1KUpdated Aug 24
Better Accessibility
by Jakub Krehel
Reviews and fixes keyboard and focus behavior, ARIA, forms, screen reader announcements and zoom, against WCAG 2.2.
```
npx skills add https://github.com/jakubkrehel/skills --skill better-accessibility
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10

Try and build

For exploring versions of something, or building on a stack you already use.

Prototype
by Emil Kowalski
Builds several different versions of one UI piece and puts them behind a picker, so you can flip through them live and keep the one that feels right. It only runs when you ask for it.
```
npx skills add https://github.com/emilkowalski/skills --skill prototype
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Variant
by Jakub Krehel
Builds three versions of a component that differ on purpose, behind a picker in the real page. It never ranks them, so the choice stays yours.
```
npx skills add https://github.com/jakubkrehel/skills --skill variant
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Build Design
by Jakub Krehel
Builds UI from a Figma file or a design image, using the tokens and components your project already has.
```
npx skills add https://github.com/jakubkrehel/skills --skill build-design
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Explain Interface
by Jakub Krehel
Explains how a website, a visual effect or an animation was built, from a live URL or a screenshot.
```
npx skills add https://github.com/jakubkrehel/skills --skill explain-interface
```
jakubkrehel/skillsGitHub stars: 11.9KUpdated Nov 10
Pick UI Library
by Emil Kowalski
An opinionated list of libraries for charts, toasts, command menus, drag and drop and more. It picks one for the job, and only runs when you ask for it.
```
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
shadcn/ui
by shadcn
Helps the agent add, search, fix and compose shadcn/ui components with your project's context in hand. Worth it on any project built on shadcn/ui.
```
npx skills add https://github.com/shadcn-ui/ui --skill shadcn
```
shadcn-ui/uiGitHub stars: 127.8KUpdated Nov 10
Tailwind Design System
by wshobson
Builds a design system on Tailwind CSS v4, with tokens, component variants and responsive patterns. It targets v4, so check your version first.
```
npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
```
wshobson/agentsGitHub stars: 42.4KUpdated Nov 9
Stitch Skills
by Google Labs
Skills made to work with the Stitch MCP server. Only worth installing if Stitch is already part of how you work.
```
npx skills add google-labs-code/stitch-skills
```
google-labs-code/stitch-skillsGitHub stars: 8.7KUpdated Aug 17

Motion

Most of these are Emil Kowalski's. Start with Animate if you are adding motion, or Review Animations if you already have some.

Animate
by Emil Kowalski
Builds an animation from scratch and makes the decisions in order: should it animate at all, which tool, which curve and duration, how it exits.
```
npx skills add https://github.com/emilkowalski/skills --skill animate
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Review Animations
by Emil Kowalski
Reviews your motion code against a high craft bar. It flags by default, so expect a list rather than a pass.
```
npx skills add https://github.com/emilkowalski/skills --skill review-animations
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Improve Animations
by Emil Kowalski
Audits all the motion in a codebase and writes a prioritized plan of fixes. It reads your code and does not change it.
```
npx skills add https://github.com/emilkowalski/skills --skill improve-animations
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Find Animation Opportunities
by Emil Kowalski
Looks for places that should animate and do not, and rejects the ones that should stay still. It proposes exact values and leaves the building to you.
```
npx skills add https://github.com/emilkowalski/skills --skill find-animation-opportunities
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Choreograph
by Emil Kowalski
Coordinates elements that move together: what moves, in what order, how much they overlap. For staggered lists, hero entrances and view swaps.
```
npx skills add https://github.com/emilkowalski/skills --skill choreograph
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Remove Animations
by Emil Kowalski
Finds the animations an interface does not need and removes them. Try it when an app feels slow or over-animated. It only subtracts.
```
npx skills add https://github.com/emilkowalski/skills --skill remove-animations
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Animation Vocabulary
by Emil Kowalski
A glossary in reverse. Describe a motion effect in your own words and it gives you the exact term, so you can ask an agent or a designer for it.
```
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
Animation Performance
by Emil Kowalski
Keeps web animations inside the frame budget and finds the cause when one drops frames. For motion that looks right but does not run smoothly.
```
npx skills add https://github.com/emilkowalski/skills --skill animation-performance
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9
GSAP Core
by GreenSock
The official skill for the GSAP core API: tweens, easing, stagger and reduced motion. Use it if GSAP is your animation library.
```
npx skills add https://github.com/greensock/gsap-skills --skill gsap-core
```
greensock/gsap-skillsGitHub stars: 18.2KUpdated Jul 29
GSAP ScrollTrigger
by GreenSock
The official skill for ScrollTrigger: scroll-linked animation, pinning, scrub and parallax. The one to add if your pages move on scroll.
```
npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger
```
greensock/gsap-skillsGitHub stars: 18.2KUpdated Jul 29
React View Transitions
by Vercel
A guide to React's View Transition API. Use it for page transitions, shared element animations and animated list changes.
```
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions
```
vercel-labs/agent-skillsGitHub stars: 33.8KUpdated Oct 28

Figma

Figma's own skills. They work through the Figma MCP server, so set that up first.

Figma Use
by Figma
Teaches the agent to write to Figma files: nodes, variables, components and auto layout. The two generate skills here work alongside it, so install this one first.
```
npx skills add https://github.com/figma/mcp-server-guide --skill figma-use
```
figma/mcp-server-guideGitHub stars: 2.2KUpdated Nov 9
Figma Design to Code
by Figma
Guides the agent when it turns a Figma design into code. It treats the design as a reference to adapt and reuses your project's components and tokens.
```
npx skills add https://github.com/figma/mcp-server-guide --skill figma-design-to-code
```
figma/mcp-server-guideGitHub stars: 2.2KUpdated Nov 9
Figma Generate Design
by Figma
Builds or updates screens in Figma from code or a description, using the components and variables in your design system.
```
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design
```
figma/mcp-server-guideGitHub stars: 2.2KUpdated Nov 9
Figma Generate Library
by Figma
Builds or updates a design system in Figma from a codebase: variables, components with variants, light and dark themes.
```
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-library
```
figma/mcp-server-guideGitHub stars: 2.2KUpdated Nov 9

Mobile

For Expo apps, and for web apps that have to feel at home on a phone.

Expo Native UI
by Expo
Builds native-feeling Expo screens, with Apple HIG styling, semantic colors, native controls and SF Symbols.
```
npx skills add https://github.com/expo/skills --skill expo-native-ui
```
expo/skillsGitHub stars: 4.1KUpdated Nov 6
Expo Design System
by Expo
Sets up a theme of design tokens inside an Expo app, with rules for when a repeated view should become a shared component.
```
npx skills add https://github.com/expo/skills --skill expo-design-system
```
expo/skillsGitHub stars: 4.1KUpdated Nov 6
Expo Animation
by Expo
Builds animations in Expo with Reanimated and Gesture Handler. It decides whether to animate first, then the thread, the properties, and spring or timing.
```
npx skills add https://github.com/expo/skills --skill expo-animation
```
expo/skillsGitHub stars: 4.1KUpdated Nov 6
Mobile Native
by Emil Kowalski
Small CSS and meta tag fixes that make a web app feel installed on a phone: sticky hover, the 100vh bug, inputs that zoom the page, content under the notch.
```
npx skills add https://github.com/emilkowalski/skills --skill mobile-native
```
emilkowalski/skillsGitHub stars: 55.6KUpdated Nov 9

Graphics and video

For work that is not a screen in a product.

Canvas Design
by Anthropic
Makes posters and static art as PNG or PDF. It writes a design philosophy first, then expresses it on the canvas.
```
npx skills add https://github.com/anthropics/skills --skill canvas-design
```
anthropics/skillsGitHub stars: 191.7KUpdated Nov 6
Theme Factory
by Anthropic
Styles slides, docs and landing pages with a theme. It lists 10 preset themes and can generate a new one.
```
npx skills add https://github.com/anthropics/skills --skill theme-factory
```
anthropics/skillsGitHub stars: 191.7KUpdated Nov 6
Algorithmic Art
by Anthropic
Makes generative art with p5.js, using seeded randomness and parameters you can play with. For flow fields, particle systems and the like.
```
npx skills add https://github.com/anthropics/skills --skill algorithmic-art
```
anthropics/skillsGitHub stars: 191.7KUpdated Nov 6
Banner Design
by Next Level Builder
Designs banners for social, ads, website heroes and print, in several art directions you can choose from.
```
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design
```
nextlevelbuilder/ui-ux-pro-max-skillGitHub stars: 147.6KUpdated Nov 10
Archify
by tt-a1i
Draws architecture, workflow, sequence and data flow diagrams as standalone HTML with light and dark themes. Exports to image, SVG or WebM.
```
npx skills add https://github.com/tt-a1i/archify --skill archify
```
tt-a1i/archifyGitHub stars: 95.3KUpdated Nov 10
Remotion
by Remotion
The entry point to Remotion's skills, for making videos with React code. Only worth adding if you work with Remotion.
```
npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
```
remotion-dev/skillsGitHub stars: 6.8KUpdated Nov 9

Browse skill and MCP directories

The weekly drop

The best new tools, every week. No spam, unsubscribe anytime.