@bergside/energetic

Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

View in AI SkillSafe app
Scanned · no findings
0 downloads
0 stars
0 demos
SKILL.md

Awesome Design Skills Awesome

<img width="1200" height="630" alt="og-awesome-design-skills" src="https://github.com/user-attachments/assets/d392937a-a0a3-408d-b3f8-4d8920f836f9" />


<br>

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.

Each skill now ships as a folder with:

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

Preview all design skills on Type UI

Quick Start

Pull any design skill directly into your project using the TypeUI CLI:

npx typeui.sh pull <slug>

For example, to pull the Glassmorphism design skill:

npx typeui.sh pull glassmorphism

Or browse all available skills interactively:

npx typeui.sh list

What is a Design Skill?

A design skill is a folder containing SKILL.md and DESIGN.md.

SKILL.md acts as the instruction source for AI agents and LLMs. It 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 gates — testable acceptance criteria for code review

DESIGN.md is a companion document for human readers and maintainers. It captures:

  • Design overview — concise summary of the visual direction
  • Rationale and references — context for why patterns/tokens exist
  • Maintenance notes — guidance for keeping design decisions aligned over time

When an AI agent reads a skill file, it follows the SKILL.md guidelines to generate UI code that is consistent, accessible, and true to the design system.

Design Skills

Browse all 67 design skills. Click any thumbnail to open the live preview on typeui.sh/design-skills, or copy the pull command underneath to add the skill to your project.

<table>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/agentic"><img src="https://www.typeui.sh/registry-examples/agentic.png" alt="Agentic" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/agentic"><b>Agentic</b></a><br />
      <sub><code>npx typeui.sh pull agentic</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/ant"><img src="https://www.typeui.sh/registry-examples/ant.png" alt="Ant" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/ant"><b>Ant</b></a><br />
      <sub><code>npx typeui.sh pull ant</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/application"><img src="https://www.typeui.sh/registry-examples/application.png" alt="Application" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/application"><b>Application</b></a><br />
      <sub><code>npx typeui.sh pull application</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/artistic"><img src="https://www.typeui.sh/registry-examples/artistic.png" alt="Artistic" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/artistic"><b>Artistic</b></a><br />
      <sub><code>npx typeui.sh pull artistic</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/bento"><img src="https://www.typeui.sh/registry-examples/bento.png" alt="Bento" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/bento"><b>Bento</b></a><br />
      <sub><code>npx typeui.sh pull bento</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/bold"><img src="https://www.typeui.sh/registry-examples/bold.png" alt="Bold" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/bold"><b>Bold</b></a><br />
      <sub><code>npx typeui.sh pull bold</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/brutalism"><img src="https://www.typeui.sh/registry-examples/brutalism.png" alt="Brutalism" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/brutalism"><b>Brutalism</b></a><br />
      <sub><code>npx typeui.sh pull brutalism</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/cafe"><img src="https://www.typeui.sh/registry-examples/cafe.png" alt="Cafe" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/cafe"><b>Cafe</b></a><br />
      <sub><code>npx typeui.sh pull cafe</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/claymorphism"><img src="https://www.typeui.sh/registry-examples/claymorphism.png" alt="Claymorphism" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/claymorphism"><b>Claymorphism</b></a><br />
      <sub><code>npx typeui.sh pull claymorphism</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/claude"><img src="https://www.typeui.sh/registry-examples/claude.png" alt="Claude" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/claude"><b>Claude</b></a><br />
      <sub><code>npx typeui.sh pull claude</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/clean"><img src="https://www.typeui.sh/registry-examples/clean.png" alt="Clean" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/clean"><b>Clean</b></a><br />
      <sub><code>npx typeui.sh pull clean</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/codex"><img src="https://www.typeui.sh/registry-examples/codex.png" alt="Codex" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/codex"><b>Codex</b></a><br />
      <sub><code>npx typeui.sh pull codex</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/colorful"><img src="https://www.typeui.sh/registry-examples/colorful.png" alt="Colorful" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/colorful"><b>Colorful</b></a><br />
      <sub><code>npx typeui.sh pull colorful</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/contemporary"><img src="https://www.typeui.sh/registry-examples/contemporary.png" alt="Contemporary" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/contemporary"><b>Contemporary</b></a><br />
      <sub><code>npx typeui.sh pull contemporary</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/corporate"><img src="https://www.typeui.sh/registry-examples/corporate.png" alt="Corporate" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/corporate"><b>Corporate</b></a><br />
      <sub><code>npx typeui.sh pull corporate</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/cosmic"><img src="https://www.typeui.sh/registry-examples/cosmic.png" alt="Cosmic" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/cosmic"><b>Cosmic</b></a><br />
      <sub><code>npx typeui.sh pull cosmic</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/creative"><img src="https://www.typeui.sh/registry-examples/creative.png" alt="Creative" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/creative"><b>Creative</b></a><br />
      <sub><code>npx typeui.sh pull creative</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/dashboard"><img src="https://www.typeui.sh/registry-examples/dashboard.png" alt="Dashboard" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/dashboard"><b>Dashboard</b></a><br />
      <sub><code>npx typeui.sh pull dashboard</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/dithered"><img src="https://www.typeui.sh/registry-examples/dithered.png" alt="Dithered" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/dithered"><b>Dithered</b></a><br />
      <sub><code>npx typeui.sh pull dithered</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/doodle"><img src="https://www.typeui.sh/registry-examples/hand-drawn.png" alt="Doodle" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/doodle"><b>Doodle</b></a><br />
      <sub><code>npx typeui.sh pull doodle</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/dramatic"><img src="https://www.typeui.sh/registry-examples/dramatic.png" alt="Dramatic" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/dramatic"><b>Dramatic</b></a><br />
      <sub><code>npx typeui.sh pull dramatic</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/editorial"><img src="https://www.typeui.sh/registry-examples/editorial.png" alt="Editorial" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/editorial"><b>Editorial</b></a><br />
      <sub><code>npx typeui.sh pull editorial</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/elegant"><img src="https://www.typeui.sh/registry-examples/elegant.png" alt="Elegant" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/elegant"><b>Elegant</b></a><br />
      <sub><code>npx typeui.sh pull elegant</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/energetic"><img src="https://www.typeui.sh/registry-examples/energetic.png" alt="Energetic" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/energetic"><b>Energetic</b></a><br />
      <sub><code>npx typeui.sh pull energetic</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/enterprise"><img src="https://www.typeui.sh/registry-examples/enterprise.png" alt="Enterprise" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/enterprise"><b>Enterprise</b></a><br />
      <sub><code>npx typeui.sh pull enterprise</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/expressive"><img src="https://www.typeui.sh/registry-examples/expressive.png" alt="Expressive" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/expressive"><b>Expressive</b></a><br />
      <sub><code>npx typeui.sh pull expressive</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/fantasy"><img src="https://www.typeui.sh/registry-examples/fantasy.png" alt="Fantasy" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/fantasy"><b>Fantasy</b></a><br />
      <sub><code>npx typeui.sh pull fantasy</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/fiction"><img src="https://www.typeui.sh/registry-examples/fiction.png" alt="Fiction" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/fiction"><b>Fiction</b></a><br />
      <sub><code>npx typeui.sh pull fiction</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/flat"><img src="https://www.typeui.sh/registry-examples/flat.png" alt="Flat" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/flat"><b>Flat</b></a><br />
      <sub><code>npx typeui.sh pull flat</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/friendly"><img src="https://www.typeui.sh/registry-examples/friendly.png" alt="Friendly" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/friendly"><b>Friendly</b></a><br />
      <sub><code>npx typeui.sh pull friendly</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/futuristic"><img src="https://www.typeui.sh/registry-examples/futuristic.png" alt="Futuristic" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/futuristic"><b>Futuristic</b></a><br />
      <sub><code>npx typeui.sh pull futuristic</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/glassmorphism"><img src="https://www.typeui.sh/registry-examples/glassmorphism.png" alt="Glassmorphism" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/glassmorphism"><b>Glassmorphism</b></a><br />
      <sub><code>npx typeui.sh pull glassmorphism</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/gradient"><img src="https://www.typeui.sh/registry-examples/gradient.png" alt="Gradient" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/gradient"><b>Gradient</b></a><br />
      <sub><code>npx typeui.sh pull gradient</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/immersive"><img src="https://www.typeui.sh/registry-examples/immersive.png" alt="Immersive" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/immersive"><b>Immersive</b></a><br />
      <sub><code>npx typeui.sh pull immersive</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/impeccable"><img src="https://www.typeui.sh/registry-examples/impeccable.png" alt="Impeccable" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/impeccable"><b>Impeccable</b></a><br />
      <sub><code>npx typeui.sh pull impeccable</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/levels"><img src="https://www.typeui.sh/registry-examples/levels.png" alt="Levels" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/levels"><b>Levels</b></a><br />
      <sub><code>npx typeui.sh pull levels</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/lingo"><img src="https://www.typeui.sh/registry-examples/lingo.png" alt="Lingo" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/lingo"><b>Lingo</b></a><br />
      <sub><code>npx typeui.sh pull lingo</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/luxury"><img src="https://www.typeui.sh/registry-examples/luxury.png" alt="Luxury" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/luxury"><b>Luxury</b></a><br />
      <sub><code>npx typeui.sh pull luxury</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/material"><img src="https://www.typeui.sh/registry-examples/material.png" alt="Material" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/material"><b>Material</b></a><br />
      <sub><code>npx typeui.sh pull material</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/matrix"><img src="https://www.typeui.sh/registry-examples/matrix.png" alt="Matrix" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/matrix"><b>Matrix</b></a><br />
      <sub><code>npx typeui.sh pull matrix</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/minimal"><img src="https://www.typeui.sh/registry-examples/minimal.png" alt="Minimal" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/minimal"><b>Minimal</b></a><br />
      <sub><code>npx typeui.sh pull minimal</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/modern"><img src="https://www.typeui.sh/registry-examples/modern.png" alt="Modern" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/modern"><b>Modern</b></a><br />
      <sub><code>npx typeui.sh pull modern</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/mono"><img src="https://www.typeui.sh/registry-examples/mono.png" alt="Mono" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/mono"><b>Mono</b></a><br />
      <sub><code>npx typeui.sh pull mono</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/neon"><img src="https://www.typeui.sh/registry-examples/neon.png" alt="Neon" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/neon"><b>Neon</b></a><br />
      <sub><code>npx typeui.sh pull neon</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/neobrutalism"><img src="https://www.typeui.sh/registry-examples/neobrutalism.png" alt="Neobrutalism" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/neobrutalism"><b>Neobrutalism</b></a><br />
      <sub><code>npx typeui.sh pull neobrutalism</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/neumorphism"><img src="https://www.typeui.sh/registry-examples/neumorphism.png" alt="Neumorphism" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/neumorphism"><b>Neumorphism</b></a><br />
      <sub><code>npx typeui.sh pull neumorphism</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/pacman"><img src="https://www.typeui.sh/registry-examples/pacman.png" alt="Pacman" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/pacman"><b>Pacman</b></a><br />
      <sub><code>npx typeui.sh pull pacman</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/paper"><img src="https://www.typeui.sh/registry-examples/paper.png" alt="Paper" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/paper"><b>Paper</b></a><br />
      <sub><code>npx typeui.sh pull paper</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/perspective"><img src="https://www.typeui.sh/registry-examples/perspective.png" alt="Perspective" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/perspective"><b>Perspective</b></a><br />
      <sub><code>npx typeui.sh pull perspective</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/premium"><img src="https://www.typeui.sh/registry-examples/premium.png" alt="Premium" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/premium"><b>Premium</b></a><br />
      <sub><code>npx typeui.sh pull premium</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/professional"><img src="https://www.typeui.sh/registry-examples/professional.png" alt="Professional" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/professional"><b>Professional</b></a><br />
      <sub><code>npx typeui.sh pull professional</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/publication"><img src="https://www.typeui.sh/registry-examples/publication.png" alt="Publication" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/publication"><b>Publication</b></a><br />
      <sub><code>npx typeui.sh pull publication</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/refined"><img src="https://www.typeui.sh/registry-examples/refined.png" alt="Refined" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/refined"><b>Refined</b></a><br />
      <sub><code>npx typeui.sh pull refined</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/retro"><img src="https://www.typeui.sh/registry-examples/retro.png" alt="Retro" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/retro"><b>Retro</b></a><br />
      <sub><code>npx typeui.sh pull retro</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/riso"><img src="https://www.typeui.sh/registry-examples/riso.png" alt="Riso" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/riso"><b>Riso</b></a><br />
      <sub><code>npx typeui.sh pull riso</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/sega"><img src="https://www.typeui.sh/registry-examples/sega.png" alt="Sega" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/sega"><b>Sega</b></a><br />
      <sub><code>npx typeui.sh pull sega</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/shadcn"><img src="https://www.typeui.sh/registry-examples/shadcn.png" alt="Shadcn" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/shadcn"><b>Shadcn</b></a><br />
      <sub><code>npx typeui.sh pull shadcn</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/simple"><img src="https://www.typeui.sh/registry-examples/simple.png" alt="Simple" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/simple"><b>Simple</b></a><br />
      <sub><code>npx typeui.sh pull simple</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/sketch"><img src="https://www.typeui.sh/registry-examples/sketch.png" alt="Sketch" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/sketch"><b>Sketch</b></a><br />
      <sub><code>npx typeui.sh pull sketch</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/skeumorphism"><img src="https://www.typeui.sh/registry-examples/skeumorphism.png" alt="Skeumorphism" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/skeumorphism"><b>Skeumorphism</b></a><br />
      <sub><code>npx typeui.sh pull skeumorphism</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/sleek"><img src="https://www.typeui.sh/registry-examples/sleek.png" alt="Sleek" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/sleek"><b>Sleek</b></a><br />
      <sub><code>npx typeui.sh pull sleek</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/spacious"><img src="https://www.typeui.sh/registry-examples/spacious.png" alt="Spacious" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/spacious"><b>Spacious</b></a><br />
      <sub><code>npx typeui.sh pull spacious</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/storytelling"><img src="https://www.typeui.sh/registry-examples/storytelling.png" alt="Storytelling" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/storytelling"><b>Storytelling</b></a><br />
      <sub><code>npx typeui.sh pull storytelling</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/terracotta"><img src="https://www.typeui.sh/registry-examples/terracotta.png" alt="Terracotta" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/terracotta"><b>Terracotta</b></a><br />
      <sub><code>npx typeui.sh pull terracotta</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/tetris"><img src="https://www.typeui.sh/registry-examples/tetris.png" alt="Tetris" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/tetris"><b>Tetris</b></a><br />
      <sub><code>npx typeui.sh pull tetris</code></sub>
    </td>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/vibrant"><img src="https://www.typeui.sh/registry-examples/vibrant.png" alt="Vibrant" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/vibrant"><b>Vibrant</b></a><br />
      <sub><code>npx typeui.sh pull vibrant</code></sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="33%" valign="top">
      <a href="https://typeui.sh/design-skills/vintage"><img src="https://www.typeui.sh/registry-examples/vintage.png" alt="Vintage" width="260" /></a><br />
      <a href="https://typeui.sh/design-skills/vintage"><b>Vintage</b></a><br />
      <sub><code>npx typeui.sh pull vintage</code></sub>
    </td>
    <td align="center" width="33%"></td>
    <td align="center" width="33%"></td>
  </tr>
</table>

Usage

Pull a skill into your project

Use the typeui.sh CLI to pull any skill by its slug:

npx typeui.sh pull <slug>

The CLI will fetch the SKILL.md file from this registry and write it to your configured provider paths (e.g., .cursor/skills/, .claude/, etc.). The companion DESIGN.md remains in this repo alongside each skill for reference and maintenance.

Specify providers

Target specific agentic tools when pulling:

npx typeui.sh pull glassmorphism -p cursor,claude

Preview before writing

Use --dry-run to see what would be written without making changes:

npx typeui.sh pull glassmorphism --dry-run

Browse and pull interactively

List all available skills with preview links, then pull one:

npx typeui.sh list

Generate a custom skill

Run the interactive prompts to create your own design system skill:

npx typeui.sh generate

Registry Structure

Each skill lives in its own folder under skills/:

skills/
├── index.json          # Slug-keyed map for fast CLI lookups
├── glassmorphism/
│   ├── SKILL.md        # AI-agent instruction file
│   └── DESIGN.md       # Human-readable design companion
├── brutalism/
│   ├── SKILL.md
│   └── DESIGN.md
├── minimal/
│   ├── SKILL.md
│   └── DESIGN.md
└── ...

The index.json file maps each slug to its skill path:

{
  "glassmorphism": {
    "slug": "glassmorphism",
    "name": "Glassmorphism",
    "skillPath": "skills/glassmorphism/SKILL.md"
  }
}

When you run npx typeui.sh pull <slug>, the CLI reads this index, resolves the skill path, and fetches the corresponding SKILL.md file. DESIGN.md is stored next to each skill for human-facing documentation.

Contributing

Contributions are welcome! If you'd like to add a new design skill to the registry:

  1. Create a new folder under skills/ with your slug name
  2. Add a SKILL.md file following the existing format
  3. Add a companion DESIGN.md file in the same folder
  4. Add an entry to skills/index.json
  5. Submit a pull request

Please ensure your skill file includes all required sections: mission, brand, style foundations, component families, accessibility rules, writing tone, do/don't rules, and quality gates.

License

MIT License © Built and maintained by Bergside.

Sponsors

A huge thank you to the companies supporting our open-source work.

<table width="100%">
  <tr>
    <td align="center" width="33%">
      <a href="https://www.skybridge.tech/?ref=typeui.sh" target="_blank" rel="noopener noreferrer">
        <img src="https://github.com/user-attachments/assets/88c401ee-b19b-4b78-9a7e-325337dba529" alt="Skybridge" width="300" />
        <br /><b>Skybridge</b>
      </a>
    </td>
  </tr>
</table>

Want to see your logo here? Become a sponsor.

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@bergside/energetic/verified)](https://skillsafe.ai/skill/@bergside/energetic/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@bergside/energetic/installs)](https://skillsafe.ai/skill/@bergside/energetic/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@bergside/energetic/scan)](https://skillsafe.ai/skill/@bergside/energetic/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@bergside/energetic/eval)](https://skillsafe.ai/skill/@bergside/energetic/)