Home / Stacks / Design System Builder
🧩

Design System Builder

Everything to build a themeable, accessible component library — design tokens, headless primitives, styled components, and a Storybook workshop with motion

6 skills · Works with Claude Code, Codex, Cursor & more

🎨 Design
RARE

Design Tokens & Theming

Architect a design-token system — semantic color, typography, spacing, and radius scales as CSS variables with light/dark themes. Uses the Tailwind CSS 4 @theme directive for a single source of truth.

Community 1.6K
Scanned
design-tokens theming css-variables
mkdir -p ~/.claude/skills/design-tokens && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/design-tokens/SKILL.md -o ~/.claude/skills/design-tokens/SKILL.md
🎨 Design
RARE

Radix UI Primitives

Build accessible, headless UI with Radix Primitives. Composes dialogs, menus, popovers, and comboboxes with correct focus management and ARIA, then styles them with your own tokens and compound-component patterns.

Community 1.9K
Scanned
radix-ui accessibility headless-ui
mkdir -p ~/.claude/skills/radix-ui-design-system && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/design/radix-ui-design-system/SKILL.md -o ~/.claude/skills/radix-ui-design-system/SKILL.md
🎨 Design
RARE

Tailwind UI Components

Generate production-ready UI components using Tailwind CSS. Creates responsive layouts, interactive elements, dark mode variants, and accessible components following Tailwind best practices and design patterns.

Community 5.1K
Scanned
tailwind css ui-components
mkdir -p ~/.claude/skills/tailwind-components && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/frontend-component-build/SKILL.md -o ~/.claude/skills/tailwind-components/SKILL.md
⚙️ Engineering
RARE

Storybook Component Workshop

Set up and configure Storybook 9 for any framework with autodetection and best practices. Scaffolds stories, args/controls, interaction tests, a11y checks, and CI-ready component documentation.

Community 3.2K
Scanned
storybook component-testing design-system
mkdir -p ~/.claude/skills/storybook-config && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/storybook-config/SKILL.md -o ~/.claude/skills/storybook-config/SKILL.md
🎨 Design
RARE

Framer Motion Animations

Create fluid animations and transitions in React with Framer Motion. Generates layout animations, gesture interactions, scroll-triggered effects, page transitions, and complex orchestrated sequences.

Community 3.1K
Scanned
animation framer-motion react
mkdir -p ~/.claude/skills/framer-motion && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/framer-motion/SKILL.md

More Stacks

🤝

Agent Engineering Kit

Engineer reliable AI agents — build on the Claude Agent SDK, coordinate teams with multi-agent patterns, give them memory, and keep them safe with mechanical guardrails and evaluation
🕹️

AI Agent Frameworks

Pick the right framework and ship agents fast — type-safe Python with Pydantic AI, multi-agent orchestration with OpenAI Agents SDK, Agno, and CrewAI, TypeScript graphs with LangGraph.js, and typed workflows with Mastra
🤖

AI Builder Stack

Build AI-powered applications with RAG, multi-agent systems, prompt engineering, and MCP integrations

View all stacks →

Added to wishlist