Design System Skills for Claude Code, Codex & AI Agents

These skills help an agent create, document and apply a design system so new screens stay consistent. Options include design guides, token extraction, shadcn/ui work, and theme generation.

21 skills

Explore Design System skills

2 skills
A light shadcn/ui component showcase with forms, navigation, charts, payout settings, and a chat interface.
Free
Web & UI

shadcn/ui

The official shadcn/ui skill for AI agents. Find, add, compose, customize, and debug UI components using your project configuration, current component docs, and the shadcn CLI.

128KStars11.4KForks
Repository last pushed

React composition patterns that scale.

  • react
  • components
33.9KStars3KForks
Repository last pushed

Related topics

Related guides

How to choose Design System skills

Extract a system from what you already have before inventing a new one; use the design guide skills when the goal is giving agents a written reference to follow.

  • Write a DESIGN.md that agents follow on every screen
  • Extract color, type and spacing tokens from an existing app
  • Set up shadcn/ui with a consistent theme