Skip to content
Get packs

Guide · Open source

How to use ui-skills: CLI commands, MCP setup and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

UI Skills is an open-source collection of pre-written skills for user interface design and front-end work, aimed at design engineers. You can browse categories and fetch skills from your terminal with a CLI, or let an AI agent query the registry through the Model Context Protocol (MCP). This guide walks through both routes so you can get started and know what the tools do.

UI Skillsibelick/ui-skills · ★ 10.5k · MIT

Quick start

  1. 1Check Node.js. Make sure Node.js is installed so npx is available in your terminal.
  2. 2Start the CLI. Run npx ui-skills start to launch the CLI.
  3. 3List categories. Run npx ui-skills categories to see the available skill groups.
  4. 4List skills in a category. Run npx ui-skills list --category motion, or swap in another category name.
  5. 5Fetch a skill. Run npx ui-skills get baseline-ui to fetch that skill.
  6. 6Connect an agent. Add the MCP endpoint https://www.ui-skills.com/mcp to an MCP-capable agent and use list_skills and get_skill.

What you need before you start

UI Skills is run with npx, so you need Node.js installed. The README does not specify which Node.js version is required.

The project is MIT licensed and written in TypeScript. You do not need to install it globally to try the CLI, because npx runs it directly.

  • Node.js (required for npx)
  • A terminal to run the commands
  • Optional: an AI coding agent that supports Model Context Protocol, if you want MCP access

Start the CLI and browse skill categories

Start the CLI with npx to browse and fetch skills from your terminal. To see what groups of skills exist, list the categories.

Once you know a category name, list the skills inside it. The README's example uses the motion category.

npx ui-skills start npx ui-skills categories npx ui-skills list --category motion

Fetch a skill by name

When you find a skill you want, fetch it by name. The README's example fetches the baseline-ui skill.

The README does not say where the fetched skill is saved or how its content is formatted, so check the CLI output on your machine.

npx ui-skills get baseline-ui

Connect an AI agent over MCP

The README describes an MCP endpoint that lets agents query the registry. Point your MCP-capable agent at the URL given in the README.

The README lists two MCP tools: list_skills and get_skill. Your agent can use these to find and load skills. The README does not give client-specific setup steps, so consult your agent's documentation for how to add a remote MCP server.

  • Endpoint: https://www.ui-skills.com/mcp
  • Tool: list_skills
  • Tool: get_skill
https://www.ui-skills.com/mcp

Read the Playbook for UI lessons

The Playbook is a set of distilled UI lessons drawn from the best design engineering skills. It is useful if you want guidance without fetching individual skills first.

The full site is at ui-skills.com, with the Playbook at ui-skills.com/playbook.

What people use it for

  • Browsing motion skills from the terminal before adding one to a front-end project
  • Fetching baseline-ui to give an AI coding agent baseline layout guidance
  • Letting an AI agent query the registry over MCP to find relevant UI skills
  • Reading Playbook lessons on UI patterns before designing a component

Frequently asked questions

Is ui-skills free to use?

Yes, the project is licensed under the MIT license, as stated in the README. The license file is linked from the repository. Check the LICENSE file for the full terms.

What do I need to install ui-skills?

The README lists Node.js as the prerequisite, required for npx. It does not state a specific Node.js version. You run the commands with npx ui-skills rather than a separate install step shown in the README.

How do I install ui-skills?

The README shows usage through npx commands such as npx ui-skills start and npx ui-skills categories. It does not describe a separate global install step, so start with npx.

How do I connect ui-skills to an AI agent?

Use the MCP endpoint https://www.ui-skills.com/mcp in an agent that supports Model Context Protocol. The README lists the tools list_skills and get_skill. Setup details for specific agents are not covered in the README.

Are the skills tested or guaranteed to work with my stack?

The README does not describe how skills are reviewed or tested, and it does not promise that every skill fits every stack. Review any skill before relying on it in your project.

Are there alternatives to ui-skills?

Our analysis lists no comparable projects. Browse the README and the Playbook to judge whether the skills match your needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

UI Skills suits front-end developers and design engineers who use AI coding agents or like browsing UI guidance from the terminal. It is not a finished app or visual design tool, and because the README does not describe how skills are reviewed, you should check any skill against your own stack before using it.

Install options & downloads