ui
ui-stack
Claude Code Skill

AI-Generated UI, Remarkably Consistent

A configuration-driven design system skill for Claude Code. No more inconsistent padding, mismatched colors, or forgotten hover states.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/rashoodkhan/ui-stack/refs/heads/main/install.sh)"

Requires Claude Code, Python 3, jq, curl or wget

Everything Claude Code Needs to Build Consistent UI

A comprehensive set of AI-powered design system rules that activate automatically when you're working on frontend code with Claude.

  • 8px Spacing Grid

    Consistent gaps, padding, and margins across every component.

  • Color System

    Primary, accent, neutral, and semantic colors with the 60-30-10 rule.

  • Type Scale

    1.25 ratio scale with proper weights, line heights, and hierarchy.

  • Dark Mode

    Complete light/dark mappings, never pure black.

  • 5-State Interactions

    Every interactive element gets default, hover, active, focus, and disabled states.

  • Accessibility

    4.5:1 contrast, 44px touch targets, semantic HTML, keyboard navigation.

  • Micro-interactions

    Subtle animations that feel polished (150-300ms, respects prefers-reduced-motion).

  • Overlay System

    Modals, slide-overs, tooltips, dropdowns with proper z-index layering.

Interactive Configuration

Customize colors, fonts, and styling. Click "Apply" when done.

Primary Color (custom — #48A1E5)

Pick or type a hex color
Link textBadge

Accent Color (custom — #DBB706)

Pick or type a hex color
Featured

Neutral Color (slate)

Primary Font (Plus Jakarta Sans)

The quick brown fox

jumps over the lazy dog — Plus Jakarta Sans

Monospace Font (JetBrains Mono)

$1,234.56

ID: PRJ-2024-001 — JetBrains Mono

How to Install ui-stack for Claude Code

No complicated setup. Install the Claude Code skill and start building consistent UI immediately.

  1. 01

    Install the Skill

    Run the one-line installer. It downloads the skill files and launches a configuration dashboard.

  2. 02

    Configure Your Design

    Customize colors, fonts, and border radius in the browser-based UI. Changes regenerate the skill files.

  3. 03

    Build with Claude

    The skill activates automatically. Ask Claude to build UI and watch it follow your design system perfectly.

What's Inside

Structured reference files that Claude Code reads when building UI.

FileWhat it covers
SKILL.mdCore principles, quick-reference for spacing, color, type, buttons, forms
patterns.mdFull component patterns — cards, tables, empty states, toasts
colors.mdComplete color palette, semantic colors, dark mode implementation
typography.mdFont setup, type scale, line heights, RTL support
animations.mdMicro-interactions, transitions, motion preferences
overlays.mdModals, slide-overs, tooltips, dropdowns, alert dialogs

Built for Modern Stacks

Design tokens and patterns map directly to Tailwind utility classes.

Next.js
Tailwind CSS
shadcn/ui