UI Skills
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Install
npx ui-skills get baseline-uiList skills with npx ui-skills list --category motion.
This is third-party code. Review the repository files before installing.
What it does
The repository holds a set of UI skills plus the registry behind ui-skills.com. baseline-ui sets strict rules for stack, components, interaction, animation and typography, and reviews a file by quoting each violation with a reason and a fix. Other skills fix accessibility, page metadata and animation performance, improve UI and create a DESIGN.md. Skills can be fetched with the ui-skills CLI or served to an agent over MCP.
Who it is for. For frontend and design engineers who want to strip generic flaws out of agent-built interfaces.
Good fit when
- You need a quick pass on spacing, hierarchy and typography after generation
- You need to check a component for accessibility and focus behavior
- You need to fix janky animations
Not a fit when
- Your project is not Tailwind and React, which baseline-ui assumes
- You need a design from scratch rather than fixes
Example request
/baseline-ui src/components/PricingCard.tsxLimitations
The README is very short; details live on the website and in each SKILL.md. baseline-ui rules prescribe specific libraries such as Tailwind, motion/react and Base UI. MCP use needs access to ui-skills.com.
How to disable. Delete the skill folders from the agent's skills directory or remove the ui-skills MCP server from the config.
Security check
- The skills are rules and instructions for the agent
README in short
The short README points to the website and shows three ways in: a CLI to browse categories and fetch skills, a remote MCP registry server, and a playbook page with distilled UI lessons. MIT licensed.
SKILL.md
--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- # Baseline UI Enforces an opinionated UI baseline to prevent AI-generated interface slop. ## How to use - `/baseline-ui` Apply these constraints to any UI work in this conversation. - `/baseline-ui <file>` Review the file against all constraints below and output: - violations (quote the exact line/snippet) - why it matters (1 short sentence) - a concrete fix (code-level suggestion) ## Stack - MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested - MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required - SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS - MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic ## Components - MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) - MUST use the project’s existing component primitives first - NEVER mix primitive systems within the same interaction surface - SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack - MUST add an `aria-label` to icon-only buttons - NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
FAQ
What does the MCP server do?
It exposes two tools: list_skills to browse the registry and get_skill to fetch one.
Which skills are in the repository?
baseline-ui, create-design-md, fixing-accessibility, fixing-metadata, fixing-motion-performance and improve-ui.
Related
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Figma's official MCP server: code from a selected frame, design system variables and components, and writing designs to the canvas