awesome-design-skills-registry

Q: How do I install awesome-design-skills-registry?

Run npx skills add https://github.com/reason-machines/design-skills --skill awesome-design-skills-registry in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/awesome-design-skills-registry/ (personal) or .claude/skills/awesome-design-skills-registry/ (project).

by reason-machinesAI & Agents

Pull and use curated DESIGN.md and SKILL.md files for AI-powered design systems and agentic workflows

Installs: 149
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill awesome-design-skills-registry

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads awesome-design-skills-registry automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Awesome Design Skills Registry

Skill by ara.so — Design Skills collection.

Overview

awesome-design-skills is a curated registry of 67 design system skill files optimized for AI-powered agentic tools (Claude Code, Cursor, Codex, Google Stitch). Each skill ships as a folder containing:

SKILL.md — AI-agent instructions (tokens, component rules, accessibility constraints, quality gates)
DESIGN.md — Human-readable design intent, rationale, and implementation notes

Pull any skill into your project with a single command using the TypeUI CLI.

Official registry: https://typeui.sh/design-skills

Installation

Install TypeUI CLI

The TypeUI CLI is the recommended way to pull design skills:

npx typeui.sh pull <slug>

No installation required — npx runs the latest version directly.

Alternatively, install globally:

npm install -g typeui.sh

Core Commands

Pull a Design Skill

Pull a specific design skill by slug:

npx typeui.sh pull glassmorphism

This creates a design-skills/glassmorphism/ folder in your project with:

SKILL.md (AI agent instructions)
DESIGN.md (human documentation)

List All Available Skills

Browse all 67 skills interactively:

npx typeui.sh list

Outputs a filterable list with slugs, descriptions, and preview URLs.

Pull Multiple Skills

Pull multiple skills in one command:

npx typeui.sh pull brutalism glassmorphism claymorphism

Preview Before Pulling

Visit the web gallery to preview styles before pulling:

# Open in browser
open https://typeui.sh/design-skills

Or preview a specific skill:

open https://typeui.sh/design-skills/glassmorphism

Available Design Skills (67 Total)

Style Categories

Modern & Minimalist:

clean — Clean, minimal design with breathing room
flat — Flat design with bold colors and simple shapes
contemporary — Modern, balanced, accessible
elegant — Refined typography and subtle interactions

Expressive & Creative:

brutalism — Bold, raw, unapologetic design
glassmorphism — Frosted glass effects with depth
claymorphism — Soft, tactile, 3D elements
gradient — Vibrant gradients and smooth color transitions
artistic — Asymmetric layouts and creative freedom
doodle — Hand-drawn, playful, sketch-like
colorful — Vibrant, saturated color palettes

Professional & Enterprise:

enterprise — Conservative, scalable, accessible
corporate — Professional, trustworthy, structured
dashboard — Data-dense interfaces with clear hierarchy
application — Functional, utilitarian UI patterns

Specialized:

agentic — AI-first design patterns for agentic workflows
claude — Claude Code-optimized design tokens
bento — Grid-based card layouts
levels — Gaming-inspired progression UI
cafe — Warm, inviting, community-focused

Full list of 67 skills: https://typeui.sh/design-skills

Using Design Skills with AI Agents

Claude Code (Claude Desktop)

Pull the skill into your project:

npx typeui.sh pull agentic

Reference it in your conversation:

@design-skills/agentic/SKILL.md

Build a dashboard using this design system

Claude Code reads SKILL.md and generates code following:
- Color tokens
- Typography scale
- Component patterns
- Accessibility rules
- Quality gates

Cursor

Pull the skill:

npx typeui.sh pull glassmorphism

Add to .cursorrules or reference directly:

Use the design system defined in design-skills/glassmorphism/SKILL.md

Cursor applies the design tokens when generating UI code.

Codex / GitHub Copilot

Pull the skill:

npx typeui.sh pull brutalism

Open SKILL.md in your editor alongside your code files
Copilot reads context and suggests components matching the design system

File Structure

After pulling a skill, your project structure:

your-project/
├── design-skills/
│   ├── glassmorphism/
│   │   ├── SKILL.md        # AI agent instructions
│   │   └── DESIGN.md       # Human documentation
│   ├── brutalism/
│   │   ├── SKILL.md
│   │   └── DESIGN.md
│   └── claymorphism/
│       ├── SKILL.md
│       └── DESIGN.md
├── src/
└── package.json

Anatomy of SKILL.md

A typical SKILL.md file contains:

1. Brand & Mission

## Brand & Mission

A design system focused on glass-like surfaces with depth and blur.

2. Color Tokens

## Color Palette

- Primary: hsl(220, 90%, 56%)
- Background: hsl(220, 20%, 10%)
- Surface: hsl(220, 20%, 16%) with 40% opacity
- Border: hsl(0, 0%, 100%) with 10% opacity

3. Typography

## Typography

- Font family: Inter, system-ui, sans-serif
- Scale: 12px, 14px, 16px, 20px, 24px, 32px, 48px
- Line height: 1.5 for body, 1.2 for headings

4. Component Patterns

## Button

- Background: rgba(255, 255, 255, 0.1)
- Backdrop-filter: blur(10px)
- Border: 1px solid rgba(255, 255, 255, 0.2)
- Padding: 12px 24px
- Border-radius: 12px

5. Accessibility Rules

## Accessibility

- WCAG 2.2 AA compliant contrast ratios (4.5:1 for text)
- Keyboard-first navigation (Tab, Enter, Escape)
- Focus visible: 2px solid ring with 2px offset
- ARIA labels on all interactive elements

6. Quality Gates

## Quality Gates

- [ ] All interactive elements keyboard-accessible
- [ ] Color contrast passes WCAG AA
- [ ] Focus states visible
- [ ] Loading states for async actions
- [ ] Error messages actionable and clear

DESIGN.md Overview

DESIGN.md is the human companion to SKILL.md. It includes:

Design Overview: High-level visual direction
Rationale: Why these tokens/patterns exist
References: Links to inspiration (Dribbble, Behance, etc.)
Maintenance Notes: How to keep the system aligned

Example snippet:

## Design Overview

Glassmorphism creates depth through layered, semi-transparent surfaces.
Inspired by Apple's Big Sur and Microsoft Fluent Design.

## Rationale

- Blur effects create visual hierarchy without heavy shadows
- Translucency allows background content to remain contextually visible
- Works well in dark mode with reduced eye strain

Code Examples

React Component Using Glassmorphism Skill

import React from 'react';

export function GlassCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div
      className="glass-card"
      style={{
        background: 'rgba(255, 255, 255, 0.1)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        borderRadius: '12px',
        padding: '24px',
      }}
    >
      <h2 style={{ fontSize: '24px', fontWeight: 600, marginBottom: '16px' }}>
        {title}
      </h2>
      {children}
    </div>
  );
}

Tailwind CSS Config for Brutalism Skill

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#FF6B00',
        background: '#FFFFFF',
        text: '#000000',
        border: '#000000',
      },
      fontFamily: {
        sans: ['Space Grotesk', 'monospace'],
        display: ['Space Mono', 'monospace'],
      },
      borderWidth: {
        DEFAULT: '3px',
        thick: '6px',
      },
      boxShadow: {
        brutal: '8px 8px 0 0 #000000',
      },
    },
  },
};

CSS Variables from Enterprise Skill

:root {
  /* Colors */
  --color-primary: hsl(210, 100%, 50%);
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(210, 20%, 98%);
  --color-border: hsl(210, 20%, 88%);
  --color-text: hsl(210, 20%, 14%);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Common Patterns

Pattern 1: Multi-Skill Projects

Use multiple skills for different sections:

# Landing page uses Glassmorphism
npx typeui.sh pull glassmorphism

# Dashboard uses Enterprise
npx typeui.sh pull enterprise

# Marketing uses Gradient
npx typeui.sh pull gradient

Reference each skill in the appropriate component folder:

src/
├── landing/         # Uses design-skills/glassmorphism/SKILL.md
├── dashboard/       # Uses design-skills/enterprise/SKILL.md
└── marketing/       # Uses design-skills/gradient/SKILL.md

Pattern 2: Custom Overrides

Pull a base skill and override specific tokens:

npx typeui.sh pull clean

Edit design-skills/clean/SKILL.md:

## Color Palette (Customized)

- Primary: hsl(280, 90%, 56%)  /* Changed from blue to purple */
- Background: hsl(0, 0%, 100%)
- Text: hsl(0, 0%, 10%)

Pattern 3: Git Workflow

Commit design skills to your repository:

git add design-skills/
git commit -m "Add glassmorphism and enterprise design skills"
git push

Now all team members and AI agents reference the same design system.

Pattern 4: Monorepo Setup

Pull skills at the root or per package:

# Root-level (shared across packages)
npx typeui.sh pull enterprise

# Package-specific
cd packages/web
npx typeui.sh pull glassmorphism

cd ../mobile
npx typeui.sh pull friendly

Configuration

Custom Output Directory

Specify a custom directory for design skills:

npx typeui.sh pull glassmorphism --output ./docs/design-system

Environment Variables

If you fork the TypeUI CLI or self-host the registry:

# .env
TYPEUI_REGISTRY_URL=https://your-registry.com/api

Then pull from your custom registry:

export TYPEUI_REGISTRY_URL=https://your-registry.com/api
npx typeui.sh pull custom-skill

Troubleshooting

Skill Not Found

If a skill slug is invalid:

npx typeui.sh pull nonexistent-skill
# Error: Skill "nonexistent-skill" not found in registry

Solution: List available skills:

npx typeui.sh list

Or browse at https://typeui.sh/design-skills

Network Timeout

If the registry is unreachable:

npx typeui.sh pull glassmorphism
# Error: Request timeout

Solution: Check your internet connection or try again later.

Permission Denied

If npx cannot create the design-skills/ folder:

npx typeui.sh pull glassmorphism
# Error: EACCES: permission denied, mkdir 'design-skills'

Solution: Run with elevated permissions or change directory ownership:

sudo npx typeui.sh pull glassmorphism

Or:

sudo chown -R $USER:$USER .
npx typeui.sh pull glassmorphism

Stale Cache

If you're seeing outdated skill content:

Solution: Clear npx cache:

npx clear-npx-cache
npx typeui.sh pull glassmorphism

Or force-reinstall:

npm install -g typeui.sh@latest
typeui.sh pull glassmorphism

Advanced Usage

Programmatic Access

If you're building tooling that integrates the registry:

import { fetch } from 'node-fetch';

async function fetchSkill(slug) {
  const response = await fetch(`https://typeui.sh/api/skills/${slug}`);
  const data = await response.json();
  return data;
}

const glassmorphism = await fetchSkill('glassmorphism');
console.log(glassmorphism.skill_md); // SKILL.md content
console.log(glassmorphism.design_md); // DESIGN.md content

Creating Custom Skills

Fork the registry and create your own skill:

git clone https://github.com/bergside/awesome-design-skills.git
cd awesome-design-skills/skills
mkdir my-custom-skill

Create SKILL.md and DESIGN.md:

<!-- skills/my-custom-skill/SKILL.md -->
# My Custom Skill

## Brand & Mission
A custom design system for internal tools.

## Color Palette
- Primary: hsl(180, 80%, 50%)
- Background: hsl(0, 0%, 98%)

Submit a pull request to add your skill to the registry.

Integration with Other Tools

Storybook

Document design tokens in Storybook:

// .storybook/preview.tsx
import { SKILL_MD } from '../design-skills/glassmorphism/SKILL.md';

export const parameters = {
  docs: {
    page: () => <Markdown>{SKILL_MD}</Markdown>,
  },
};

Figma Variables

Export design tokens from SKILL.md to Figma variables:

# Use a community plugin or script
npx figma-export design-skills/glassmorphism/SKILL.md

Design Linter

Lint your codebase against SKILL.md rules:

npx design-lint --skill design-skills/enterprise/SKILL.md src/

(Example tool — replace with your preferred linter)

Best Practices

Commit design skills to version control — Keep design and code in sync
Reference SKILL.md in AI agent prompts — Use @design-skills/slug/SKILL.md in Cursor/Claude
Update DESIGN.md when you override tokens — Document why you diverged
Use one skill per product area — Landing (Glassmorphism), Dashboard (Enterprise), Docs (Clean)
Pull skills early in the project — Establish design foundations before building components

Resources

Registry: https://typeui.sh/design-skills
GitHub: https://github.com/bergside/awesome-design-skills
CLI: https://github.com/bergside/typeui.sh
Awesome Badge:

License

MIT License — See LICENSE

When to use this skill:

You need a design system for AI agents (Claude Code, Cursor, Codex)
You want consistent design tokens across your project
You're building with agentic workflows and need design constraints
You want to preview and pull pre-built design systems quickly

Quick reference:

# Pull a skill
npx typeui.sh pull glassmorphism

# List all skills
npx typeui.sh list

# Preview in browser
open https://typeui.sh/design-skills

FAQ

What does the awesome-design-skills-registry skill do?

Pull and use curated DESIGN.md and SKILL.md files for AI-powered design systems and agentic workflows

How do I install awesome-design-skills-registry?

Run npx skills add https://github.com/reason-machines/design-skills --skill awesome-design-skills-registry in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/awesome-design-skills-registry/ (personal) or .claude/skills/awesome-design-skills-registry/ (project).

Which AI agents can use awesome-design-skills-registry?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is awesome-design-skills-registry safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains awesome-design-skills-registry?

It is published by reason-machines in reason-machines/design-skills. It has 149 recorded installs.

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs

awesome-design-skills-registry

Install

Install

Describe the task

Review the result

SKILL.md

Awesome Design Skills Registry

Overview

Installation

Install TypeUI CLI

Core Commands

Pull a Design Skill

List All Available Skills

Pull Multiple Skills

Preview Before Pulling

Available Design Skills (67 Total)

Style Categories

Using Design Skills with AI Agents

Claude Code (Claude Desktop)

Cursor

Codex / GitHub Copilot

File Structure

Anatomy of SKILL.md

1. Brand & Mission

2. Color Tokens

3. Typography

4. Component Patterns

5. Accessibility Rules

6. Quality Gates

DESIGN.md Overview

Code Examples

React Component Using Glassmorphism Skill

Tailwind CSS Config for Brutalism Skill

CSS Variables from Enterprise Skill

Common Patterns

Pattern 1: Multi-Skill Projects

Pattern 2: Custom Overrides

Pattern 3: Git Workflow

Pattern 4: Monorepo Setup

Configuration

Custom Output Directory

Environment Variables

Troubleshooting

Skill Not Found

Network Timeout

Permission Denied

Stale Cache

Advanced Usage

Programmatic Access

Creating Custom Skills

Integration with Other Tools

Storybook

Figma Variables

Design Linter

Best Practices

Resources

License

FAQ

More from reason-machines/design-skills

Popular ai & agents skills