claude-ui

Claude Code, specialized for world-class UI/UX.

claude-ui injects a 200+ rule UI Constitution into every Claude session and installs 44 slash-command skills that give Claude deep, production-grade knowledge of component patterns, design systems, and UI quality standards. The result: output that looks like it came from a top-tier product team — not a generic AI.

# One-time global install
npm install -g claude-ui

# Start a UI-focused Claude session (run inside any project)
claude-ui

Or without installing:

npx claude-ui

The Problem

Standard Claude Code produces UI that is technically correct but visually and experientially mediocre:

• Generic gray cards with no hierarchy
• No hover, focus, or loading states
• Emoji icons instead of SVGs
• No empty states for lists and tables
• <select multiple> instead of a chip-based combobox
• opacity-0.5 for disabled elements (wrong)
• No dark mode
• text-gray-400 on white (fails WCAG AA)
• "Submit" on buttons, "Something went wrong" for errors
• Charts with hardcoded hex colors that break in dark mode
• <textarea> for rich text fields

These aren't rare edge cases — they are what AI produces by default, every session.

claude-ui fixes this at the root. The UI Constitution is injected before every task. The 44 skills encode production-grade patterns so Claude generates the right component the first time.

How It Works

When you run claude-ui inside a project:

1. Bootstraps ~/.claude-ui/ on first run — stores the UI Constitution and skills locally
2. Installs 44 skills globally to ~/.claude/commands/ — available as /claude-ui-* slash commands in any Claude session
3. Detects your stack — reads package.json and logs detected frameworks (Next.js, Tailwind, shadcn/ui, Framer Motion, Vue, Svelte)
4. Injects the UI Constitution into the project's CLAUDE.md — prepended with markers so it can be cleanly removed
5. Launches Claude with your existing flags
6. Restores CLAUDE.md exactly to its previous state when the session ends — nothing left behind

A separate claude session in another terminal is completely unaffected.

Requirements

• Node.js 18+
• Claude Code CLI — install with npm install -g @anthropic-ai/claude-code

Usage

claude-ui                      # Start a UI-focused Claude session
claude-ui -d                   # Pass --dangerously-skip-permissions to Claude
claude-ui --update             # Update all 44 skills to the latest version
claude-ui --list               # List all installed skills
claude-ui --version            # Show version
claude-ui --help               # Show help

The UI Constitution

The UI Constitution is a 200+ rule document injected into every session. It covers:

Hard Rules

• Icons: SVG only — Lucide React, Heroicons, Tabler. Never emoji.
• Components: shadcn/ui + Radix UI as the base. Never reinvent buttons, modals, or dropdowns.
• Spacing: 4px grid. All values must be multiples of 4.
• Contrast: WCAG AA minimum. text-gray-400 on white is banned — it fails at 3.3:1.
• Dark mode: Required for all developer-facing tools. Every color class needs a dark: pair.
• States: Every interactive element ships with hover, focus-visible, active, disabled, loading, error, and empty states.
• Typography: Semantic scale only. font-size: 14px on body text is banned.
• Tailwind v4: CSS-first @theme {} pattern. No tailwind.config.js in v4 projects.

Active Checks (run after every component)

After writing any .tsx file, Claude automatically checks:

• Contrast: Are text/background class pairs WCAG AA compliant?
• Dark mode: Do neutral color classes have dark: pairs?
• Interactive states: Do buttons have hover:, focus-visible:, active:, disabled: prefixes?
• Structural debt: CRS score, arbitrary Tailwind values, "use client" density

Design Inspiration

Linear · Apple · Vercel · Stripe · Raycast · Notion · Loom · Figma · PhonePe · Flipkart

44 Skills

Skills are slash commands available inside any claude-ui session. Invoke them like /claude-ui-auth in the Claude chat.

Generate & Build

| Skill | What it does | |---|---| | /claude-ui-component | Scaffold a polished, accessible component with all states (hover, focus, loading, error, empty, disabled) | | /claude-ui-landing | Build a production-grade landing page — hero, feature grid, social proof, CTA, footer | | /claude-ui-auth | All four auth screens: login, register, forgot password, reset password — OAuth buttons with brand-compliant SVG icons, password strength bar, security-safe error messages | | /claude-ui-pricing | Conversion-optimized SaaS pricing page — billing toggle, highlighted popular plan, per-plan CTA copy rules ("Start free trial" not "Get started"), feature comparison table | | /claude-ui-nav | Accessible navigation — active state via usePathname(), mobile hamburger + Sheet drawer, aria-current="page", breadcrumbs, nested collapsible items | | /claude-ui-dashboard | Turns a list of metrics into a proper information hierarchy — KPI cards, charts, tables — with ASCII layout wireframe and responsive output | | /claude-ui-form | Generates a validation-wired form from an existing Zod schema — correct field types, accessible labels, inline errors, submit states | | /claude-ui-modal | Correct dialog for every use case — AlertDialog for destructive, Dialog for forms/preview, Sheet for large forms — with canonical button order and unsaved-change guards | | /claude-ui-toast | Complete Sonner setup — provider in layout, typed wrapper, four canonical patterns: success, error, promise, undo (5-second destructive recovery) | | /claude-ui-table | Fully-typed TanStack Table — correct ColumnDef<T>[], sort/filter/pagination, cell renderers per field type (Date, currency, enum→Badge), server-side variant with URL state | | /claude-ui-chart | Production-ready shadcn chart — picks correct type for your data shape (time-series→Line, parts-of-whole→Donut, category→Bar), ChartConfig with CSS variable tokens, loading skeleton, empty state | | /claude-ui-search | Complete command palette — ⌘K shortcut, grouped results, character-match highlighting, 300ms debounced async search, loading state, mobile bottom-Sheet fallback | | /claude-ui-drag | Accessible drag-and-drop with dnd-kit — PointerSensor for mouse+touch, keyboard reorder, ARIA live announcements, DragOverlay (no layout shift), Kanban board variant | | /claude-ui-upload | DropZone with drag-and-drop, per-file progress bars (XHR, not fetch), image preview, multi-file queue, avatar variant, UploadThing/S3/Server Action integration | | /claude-ui-otp | OTP/2FA input — auto-advance on digit entry, backspace to previous cell, paste fills all cells, autoComplete="one-time-code", maxLength={2} trick for re-entry | | /claude-ui-richtext | Tiptap rich text editor — toolbar with all marks, bubble menu on selection, image upload, placeholder CSS, immediatelyRender: false SSR fix, React Hook Form integration | | /claude-ui-wizard | Multi-step wizard — useWizard state machine, per-step Zod validation, URL-synced navigation, horizontal/vertical/minimal progress indicators | | /claude-ui-filter | URL-synchronized filter system — field-type-aware controls (search, checkbox group, date range), active filter chips, mobile filter sheet with pending state | | /claude-ui-empty | Context-aware empty states — entity-specific copy and icons, CTA, tone matching (orders=transactional, messages=warm) | | /claude-ui-loading | Dimension-matched loading skeletons — mirrors exact avatar sizes, text widths, and layout so there's no shift when data loads | | /claude-ui-routes | App Router error.tsx, not-found.tsx, loading.tsx boundaries — design-system-aware, with retry logic and contextual copy | | /claude-ui-extract | Reconstruct UI from a screenshot or URL — produces clean component code matching your design system | | /claude-ui-motion | Polished animations with Framer Motion — entrance, exit, layout transitions, stagger lists, page transitions, prefers-reduced-motion support |

Audit & Quality

| Skill | What it does | |---|---| | /claude-ui-preflight | Runs all 7 quality dimensions in one pass — contrast, dark mode, states, constitution, content states, copy quality, structural health — returns a single "Ready to ship" or "Blocked" verdict with scores | | /claude-ui-audit | 9-dimension UX audit — journey clarity, visual hierarchy, contrast, interactive states, loading/error/empty coverage, copy quality, mobile, dark mode | | /claude-ui-contrast | Audits Tailwind text/bg class pairs for WCAG AA failures — resolves hex values, reports actual ratios, generates specific fix suggestions | | /claude-ui-darkmode | Audits components for missing dark: Tailwind variants — classifies gaps by severity (Critical/Major/Minor), generates dark palette fixes | | /claude-ui-states | Audits interactive elements for missing hover:, focus-visible:, active:, disabled: prefixes — fix mode applies Critical and Major gaps automatically | | /claude-ui-copy | Audits all UI text for UX writing quality — flags "Submit", "Error occurred", "Loading..." with domain-specific rewrites | | /claude-ui-antipatterns | Scans against the 20 anti-patterns in the UI Constitution — emoji icons, inline layout styles, too-slow animations, missing max-width, opacity-50 for disabled — with line-level fixes | | /claude-ui-regression | Compares a component before and after a change — reports only what got worse: removed hover states, lost dark mode variants, dropped ARIA attributes | | /claude-ui-debt | CRS structural debt score — prop drilling, logic-in-JSX, "use client" density, token drift, arbitrary value count |

Design System

| Skill | What it does | |---|---| | /claude-ui-palette | Generate an intentional color system — primary, semantic tokens, dark variants, contrast-verified pairings | | /claude-ui-tokens | Extracts hardcoded colors/spacing from source code, clusters by frequency, generates @theme {} token definitions | | /claude-ui-typography | Complete type system — next/font loading chain, CSS variables, semantic scale (display → caption), fluid clamp() for headings, CVA Typography component | | /claude-ui-snapshot | Scans the codebase once and writes a DESIGN.md design system memory file — colors, spacing, component inventory, patterns | | /claude-ui-conform | Scans codebase visual DNA and locks patterns before generating new UI — prevents inconsistency | | /claude-ui-v4 | Detects Tailwind v3 vs v4, audits for v3 syntax in v4 projects, generates exact migration diff | | /claude-ui-rtl | Scans for directional Tailwind classes that break RTL layouts — maps ml-→ms-, pl-→ps-, text-left→text-start, flags directional icons |

Planning & Workflow

| Skill | What it does | |---|---| | /claude-ui-plan | Converts a feature brief into a structured implementation plan — component reuse inventory, build order, size estimates, clarifying questions | | /claude-ui-wireframe | Sketches ASCII layout wireframes for confirmation before writing any code | | /claude-ui-feature | Generates a complete feature slice — types → hooks → components → barrel — from a brief | | /claude-ui-stories | Generates CSF 3.0 Storybook stories from real project fixture/MSW data — not placeholder values | | /claude-ui-test | Generates convention-aware Vitest + RTL tests for any component |

Why It's Different

Most AI UI has the same 10 bugs. This fixes them all.

| Default Claude | claude-ui | |---|---| | Emoji icons (🚀 Launch) | SVG only — Lucide React, sized correctly | | No interactive states | hover + focus-visible + active + disabled on every element | | text-gray-400 on white | Contrast-verified — minimum 4.5:1 for body text | | No dark mode | Dark mode variants on every neutral color class | | <select multiple> | Chip-based combobox — shadcn Command + Popover | | <textarea> for rich text | Tiptap editor with toolbar, bubble menu, image upload | | Generic "Something went wrong" | "We couldn't process your payment — try a different card" | | "Submit" buttons | "Place order", "Save changes", "Send message" | | Charts with hex colors | hsl(var(--chart-1)) — adapts to light/dark automatically | | Empty <div> on no data | Entity-specific empty state with icon, copy, and CTA |

Stays in sync, never stale

Skills are versioned with the package. Run claude-ui --update to pull the latest patterns for any project. The CLAUDE.md injection is always the current version — no manual file editing.

Zero dependencies

The CLI uses only Node.js built-ins (fs, path, os, child_process). No node_modules, no lock file issues, no supply chain risk beyond the package itself.

Doesn't touch your project permanently

claude-ui prepends the UI Constitution to your CLAUDE.md using markers. When the session ends (or on SIGINT/SIGTERM), it removes the injection and restores CLAUDE.md exactly as it was. If no CLAUDE.md existed, the file is deleted. Nothing is left behind.

Configuration

Skills are installed to ~/.claude/commands/ and the UI Constitution is stored in ~/.claude-ui/. Both are plain Markdown files you can read and review at any time.

# See all installed skills
ls ~/.claude/commands/

# Review the UI Constitution
cat ~/.claude-ui/CLAUDE.md

# Update to latest after upgrading the package
claude-ui --update

Contributing

See CONTRIBUTING.md. PRs welcome for:

• New skills (/claude-ui-<name>) — must follow the skill template
• UI Constitution improvements — new hard rules, updated anti-patterns, better design references
• CLI enhancements — stack detection, new flags, better error messages

Security

claude-ui does not collect telemetry, send analytics, or make network requests beyond launching the claude CLI. See SECURITY.md for the vulnerability reporting policy.

License

MIT — vamsivarma27