UI Skills
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
- 10,322 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills are rules and instructions for the agent
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ui-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills are rules and instructions for the agent
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.
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.
Discussion
No questions or reviews yet.
Related
SkillsMake interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Jakub Krehel's Interface Skills
Interfaces skills
Skills for interface polish: typography, color, layout, accessibility, product copy and a review across all of them
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
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.
README badge
Original 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