# UI Skills — Design Pattern Library for AI Coding Agents

> Browse and retrieve curated UI/UX design patterns via a CLI that routes agents through structured design skills.

## Install

Save in your project root:

# UI Skills — Design Pattern Library for AI Coding Agents

## Quick Use
```bash
# List available skill categories
npx ui-skills categories

# List skills in a category
npx ui-skills list

# Retrieve a specific skill
npx ui-skills get motion-fade-in
```

## Introduction
UI Skills is a CLI tool that provides a curated collection of UI/UX design patterns organized for use by both developers and AI coding agents. Instead of searching documentation or design systems for the right pattern, developers can query a structured library of design engineering knowledge directly from the terminal. The tool is especially useful when paired with AI agents that need reliable design guidance.

## What UI Skills Does
- Provides a searchable catalog of design patterns organized by category
- Retrieves detailed implementation guidance for specific UI patterns
- Integrates with AI coding agents as a design knowledge source
- Covers motion, layout, interaction, and component patterns
- Runs entirely via npx with no installation or configuration needed

## Architecture Overview
UI Skills is a Node.js CLI application that ships with a bundled library of design pattern descriptions. Each skill is a structured document containing the pattern name, category, description, and implementation guidance. The CLI parses user commands to browse categories, list skills, or retrieve specific patterns, outputting the content in a format suitable for both human reading and agent consumption.

## Self-Hosting & Configuration
- Run directly with `npx ui-skills` — no installation needed
- Alternatively install globally with `npm install -g ui-skills`
- Skills are bundled with the package; no external API calls required
- Works offline after the initial npx download
- Extend by contributing new skills via pull requests to the repository

## Key Features
- Zero-config CLI that runs instantly via npx
- Categorized skill library covering common UI/UX patterns
- Agent-friendly output format for integration with coding assistants
- MIT-licensed and open source with active community contributions
- Lightweight with no runtime dependencies beyond Node.js

## Comparison with Similar Tools
- **Storybook** — component playground; UI Skills is a pattern reference, not a renderer
- **shadcn/ui** — copy-paste React components; UI Skills provides design guidance, not code
- **Tailwind UI** — commercial component library; UI Skills is free and framework-agnostic
- **Material Design docs** — Google-specific design system; UI Skills is platform-neutral
- **Figma** — visual design tool; UI Skills targets CLI and agent workflows

## FAQ
**Q: Does UI Skills generate code?**
A: No. It provides design pattern descriptions and implementation guidance. Code generation is left to the developer or AI agent.

**Q: Which AI agents can use UI Skills?**
A: Any agent with terminal access or tool-calling capabilities can invoke the CLI. It works well with Claude Code, Cursor, and similar tools.

**Q: Can I add custom skills?**
A: Yes. The project accepts contributions via pull requests. You can also fork it and add private skills.

**Q: Does it require an internet connection?**
A: Only for the initial npx download. After that, all skills are available offline.

## Sources
- https://github.com/ibelick/ui-skills

---
Source: https://tokrepo.com/en/workflows/asset-0506bfb6
Author: AI Open Source