awesome-design-skills

# Awesome Design Skills [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

> A curated registry of design system skill files for AI-powered agentic tools like [Claude Code](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview), [Gemini](https://www.gemini.com/), [Codex](https://openai.com/index/codex/), and others. Pull any skill into your project with a single command.

Each skill is a `SKILL.md` file containing design tokens, component guidelines, accessibility rules, and implementation-ready specifications that instruct AI agents to follow a specific design system when building interfaces.

**[Preview all design skills on typeui.sh](https://typeui.sh/design-skills)**

Built and maintained by [Bergside](https://github.com/bergside). Powered by [typeui.sh](https://github.com/bergside/typeui.sh).

## Contents

- [Quick Start](#quick-start)
- [What is a Design Skill?](#what-is-a-design-skill)
- [Design Skills](#design-skills)
- [Usage](#usage)
- [Registry Structure](#registry-structure)
- [Contributing](#contributing)
- [License](#license)

## Quick Start

Pull any design skill directly into your project using [typeui.sh](https://github.com/bergside/typeui.sh):

```bash
npx typeui.sh pull <slug>
```

For example, to pull the Glassmorphism design skill:

```bash
npx typeui.sh pull glassmorphism
```

Or browse all available skills interactively:

```bash
npx typeui.sh list
```

## What is a Design Skill?

A design skill is a `SKILL.md` file that acts as a set of instructions for AI agents and LLMs. Each file contains:

- **Brand & mission** — the design philosophy and visual identity
- **Style foundations** — typography scale, color palette, spacing system
- **Component families** — buttons, inputs, cards, modals, navigation, and more
- **Accessibility rules** — WCAG 2.2 AA compliance, keyboard-first interactions
- **Writing tone** — content and voice guidelines
- **Do/Don't rules** — explicit patterns and anti-patterns
- **Quality gate