LibreUIUX Claude Code

Complete UI/UX system for Claude Code -- 71 plugins, 152 agents, 76 commands, 74 skills, 3 hooks

Skills, Agents, Commands, and Workflows for Modern UI/UX Development with Claude Code

Stop getting the same outdated, Bootstrap-era designs. This repository provides a comprehensive, layered approach to dramatically improve the UI/UX components Claude Code generates for your projects.

The New Programming Paradigm

In December 2025, Andrej Karpathy observed that programming is being "dramatically refactored":

"I've never felt this much behind as a programmer. The profession is being dramatically refactored."

"New vocabulary: agents, subagents, their prompts, contexts, memory, modes, permissions, tools, plugins, skills, hooks, MCP, LSP, slash commands, workflows, IDE integrations..."

He described Claude Code as "the first convincing demonstration of what an LLM Agent looks like" - a "little spirit/ghost that lives on your computer."

LibreUIUX provides the skills, agents, commands, and workflows for this new paradigm - focused on UI/UX development.

Where LibreUIUX Fits

This isn't just a prompt library. It's infrastructure for the new way we build software with AI.

What's Included

LibreUIUX-Claude-Code/
├── 71 Plugins         # Installable from the libreuiux marketplace
├── 152 Agents         # Task-specialized AI personas (93 distinct)
├── 76 Commands        # Slash commands for Claude Code (65 distinct)
├── 74 Skills          # Reusable capability modules
├── 3 Hooks            # Optional, in the libreuiux-hooks plugin
├── 3 Skill Levels     # Beginner → Intermediate → Advanced
└── Templates          # Ready-to-use configurations

Plugin Categories

Skills vs Commands vs Agents

Quick Start

Install from Claude Code

/plugin marketplace add HermeticOrmus/LibreUIUX-Claude-Code
/plugin install design-mastery@libreuiux

Install any other plugin the same way (/plugin install accessibility-compliance@libreuiux), or browse them all with /plugin. The same thing from a terminal:

claude plugin marketplace add HermeticOrmus/LibreUIUX-Claude-Code
claude plugin install design-mastery@libreuiux

From a clone, ./setup.sh installs every plugin through the Claude Code CLI (./setup.sh --list to see them, --only design-mastery,accessibility-compliance for a subset, --scope project for one project, --uninstall to remove them). The optional hooks are one more plugin: /plugin install libreuiux-hooks@libreuiux. Restart Claude Code after installing.

To drop a LibreUIUX CLAUDE.md template and config into a project instead, run ./bootstrap.sh from inside that project (this was setup.sh before 2.0.0).

Install in Grok Build

Grok Build loads the same plugin folders. Add the marketplace and install a plugin from a terminal:

grok plugin marketplace add HermeticOrmus/LibreUIUX-Claude-Code
grok plugin install design-mastery@LibreUIUX-Claude-Code

Or install one plugin straight from its folder, with no marketplace:

grok plugin install HermeticOrmus/LibreUIUX-Claude-Code#plugins/design-mastery

From a clone, ./setup.sh --grok installs every plugin through the grok CLI; --only, --list, and --uninstall work the same way. Grok Build uninstalls plugins by name only, and 66 plugin names here are also in claude-code-game-development (both packs take them from wshobson/agents), as is design-mastery in design-mastery-claude-code. If you install more than one of these packs, remove one with ./setup.sh --grok --uninstall rather than grok plugin uninstall <name>, which can take the other pack's copy. The libreuiux-hooks plugin uses a hook format Grok Build supports, but it has not been verified in a live Grok session yet.

Migrating from 1.x

Version 2.0.0 renames the marketplace from claude-code-workflows to libreuiux. The old name is also the name of wshobson/agents, so anyone with that marketplace installed could not add this one. The plugins keep their names.

1. Run /plugin marketplace list (or claude plugin marketplace list in a terminal) and check which repository claude-code-workflows points to.
2. Only if it points to HermeticOrmus/LibreUIUX-Claude-Code, remove it: /plugin marketplace remove claude-code-workflows. If it points to wshobson/agents, leave it alone.
3. Add this repository again: /plugin marketplace add HermeticOrmus/LibreUIUX-Claude-Code, then reinstall what you use as <plugin>@libreuiux.

Prefer the dedicated walkthrough: QUICK_START.md (about 5 minutes).

Installation Paths

Path 1: Drop-in CLAUDE.md (fastest — recommended)

cd your-project
curl -fsSL https://raw.githubusercontent.com/HermeticOrmus/LibreUIUX-Claude-Code/main/templates/CLAUDE.modern-webapp.md -o CLAUDE.md
claude

Path 2: Just want better prompts? (5 minutes)

# Browse beginner prompts after cloning
git clone --depth 1 https://github.com/HermeticOrmus/LibreUIUX-Claude-Code.git
cat LibreUIUX-Claude-Code/beginner/prompts/modern-button.md

Path 3: Add commands to Claude Code (10 minutes)

cp -r .claude/commands/* ~/.claude/commands/

Path 4: Use a specific plugin (15 minutes)

# Example: design mastery
mkdir -p your-project/.claude/agents your-project/.claude/skills
cp plugins/design-mastery/agents/* your-project/.claude/agents/
# copy individual skill folders as needed from plugins/design-mastery/skills/

Path 5: Full installation

git clone https://github.com/HermeticOrmus/LibreUIUX-Claude-Code.git
cd LibreUIUX-Claude-Code
# see QUICK_START.md and beginner/README.md

Contributions: see CONTRIBUTING.md. License: MIT.

The Problem

Developers using Claude Code face these challenges:

• Repetitive Designs: Claude generates similar-looking components regardless of project context
• Outdated Aesthetics: Components resemble old Bootstrap-era designs (2015-2018)
• Poor Responsiveness: Generated layouts don't adapt well to different screen sizes
• Generic Feel: Lack of modern design patterns, animations, and interactions
• Inconsistent Results: Same prompts produce varying quality across sessions

Real Developer Experiences

"No matter what I try, the UI components generated with Claude Code look outdated. They often resemble older Bootstrap-era designs and are not responsive."

"I've tried custom commands, design agents, detailed prompting, even Claude Opus... nothing consistently works."

The core issue: Claude Code needs specific, structured guidance to generate modern UI/UX.

📝 Field Notes from the Trenches

I spent two weeks fighting this. "Make it modern." "Use better colors." "Improve the spacing." Every request felt like rolling dice.

Then I tried: "Create a button with bg-blue-600, hover:bg-blue-700, px-6 py-3, rounded-lg, shadow-md."

Perfect. First try. Every time.

Here's what clicked: Claude understands design systems perfectly—Tailwind's scale, spacing units, color tokens. When you speak that precise language instead of vague aesthetics, you're giving coordinates instead of directions.

Try this: Compare "make it look better" vs "change shadow-md to shadow-lg and p-4 to p-6"

Watch for: The second request gives you exactly what you want, immediately.

This works because: You're leveraging Claude's systematic understanding instead of fighting it. That's what this entire repository teaches—the elegant mechanics of communicating design intent precisely.

🎨 The Solution: Layered Approach

Here's what's beautiful about this repository's approach: instead of one-size-fits-all advice, we've built a progressive learning system. Start where you are, grow as you need.

This repository provides solutions for all skill levels:

🟢 Beginner Level

Goal: Get better results immediately with minimal setup

• Ready-to-use prompts for modern UI components
• Component request templates with proper specificity
• Design vocabulary guide - speak the language of modern UI/UX
• Quick-start checklist for every UI task

👉 Start Here: Beginner Guide

🟡 Intermediate Level

Goal: Build systematic workflows for consistent results

• Design system templates (color schemes, typography, spacing)
• Custom CLAUDE.md configurations for your projects
• Component library integrations (Shadcn, Aceternity, etc.)
• Iteration workflows using browser tools
• Before/After examples with detailed breakdowns

👉 Level Up: Intermediate Techniques

🔴 Advanced/Pro Level

Goal: Create a powerful, automated UI/UX development environment

• MCP Server setups (Chrome DevTools integration)
• Custom slash commands for Claude Code
• Automated design systems
• AI-assisted design critique workflows
• Production-ready component architectures

👉 Master Level: Advanced Solutions

Repository Structure

LibreUIUX-Claude-Code/
├── README.md                          # You are here
│
├── plugins/                           # 71 installable plugins
│   ├── design-mastery/               # UI/UX design expertise
│   │   ├── agents/                   # Specialized AI agents
│   │   ├── commands/                 # Slash commands
│   │   └── skills/                   # Reusable skill modules
│   ├── accessibility-compliance/     # WCAG, ARIA, a11y testing
│   ├── frontend-mobile-development/  # React, Vue, React Native, etc.
│   ├── backend-development/          # APIs, databases, architecture
│   ├── cicd-automation/              # Deployment, pipelines, DevOps
│   ├── libreuiux-hooks/              # Optional hooks (session context, secrets, a11y hints)
│   └── ... (65 more plugins)         # See full list below
│
├── beginner/                          # Start here if new
│   ├── README.md                      # Beginner guide overview
│   ├── design-vocabulary.md           # Learn the language of modern UI
│   ├── prompts/                       # Ready-to-use prompt templates (button, card, form, nav)
│   └── checklist.md                   # Pre-request checklist
│
├── intermediate/                      # Build systematic workflows
│   ├── README.md                      # Intermediate guide overview
│   ├── design-systems/                # Design system template (modern web app)
│   └── workflows/                     # Iteration workflow
│
├── advanced/                          # Pro-level automation
│   └── README.md                      # Advanced guide overview
│
├── resources/                         # Curated resources
│   ├── component-libraries.md         # Library comparisons & links
│   ├── tools.md                       # Recommended tools
│   └── github-repos.md                # Curated GitHub repositories
│
├── templates/                         # Copy-paste CLAUDE.md templates
│   ├── CLAUDE.md                      # Template for project root
│   ├── CLAUDE.minimal.md
│   ├── CLAUDE.mobile-first.md
│   ├── CLAUDE.modern-webapp.md
│   └── CLAUDE.saas-platform.md
│
├── hooks/                             # Original hook scripts (use the libreuiux-hooks plugin)
├── demo/                              # Demo page and checklist
├── setup.sh                           # Install the plugins through the Claude Code CLI
├── bootstrap.sh                       # Add a CLAUDE.md template and config to a project
├── NOTICE.md                          # Credit and license for the wshobson/agents plugins
├── pantry/                            # Research and the Menu of open work (pantry/MENU.md)
│
└── .claude/                           # Claude Code configuration for this repo
    ├── agents/
    │   └── synthesis-master.md
    └── commands/                      # Slash commands (copy to ~/.claude/commands to use elsewhere)
        ├── ui-modern.md
        ├── ui-critique.md
        ├── ui-responsive.md
        ├── ui-review.md
        └── ui-synth.md

All 71 Plugins

🎓 Learning Path

Week 1: Fundamentals

1. Read Design Vocabulary
2. Try 3 component prompts from beginner/prompts/
3. Practice with the prompts to see before/after transformations

Week 2: Systems Thinking

1. Choose a design system template
2. Create a CLAUDE.md file for your project
3. Practice the iteration workflow

Week 3+: Advanced Techniques

1. Set up Chrome DevTools MCP
2. Install custom slash commands
3. Build your own component library

🔑 Key Principles

Think of these as the elegant mechanics of communicating with Claude. Each principle solves a specific problem in how AI interprets design intent.

✅ Do This

• Be specific: "glassmorphism card with backdrop-blur-md, subtle border, 12px padding"

  • Why it works: Precision eliminates ambiguity. Claude executes specifications, not aesthetics.

• Reference examples: "Like the pricing card on https://ui.shadcn.com"

  • Why it works: Concrete references create shared understanding instantly.

• Use design systems: Define colors, spacing, typography upfront

  • Why it works: Systems are languages. Speak once, benefit everywhere.

• Iterate with context: Use browser inspector to show exact issues

  • Why it works: "Change shadow-md to shadow-xl" beats "make it pop" every time.

• Think mobile-first: Always specify responsive behavior

  • Why it works: Mobile constraints force clarity. Clarity scales up beautifully.

❌ Don't Do This

• "Make it look modern" - No shared definition of "modern"
• "Improve the design" - Improvement in which dimension? Contrast? Spacing? Hierarchy?
• "Make it sleek and beautiful" - Aesthetics are subjective, specifications aren't
• Starting without a design system - Every request becomes a negotiation
• Accepting first output without iteration - Quality emerges through refinement

💛 Gold Hat Note Topic: Systematic Communication

This isn't just about getting better UI from Claude. It's about all of us raising collective understanding of how to communicate design intent to AI systems.

When you discover a phrasing that works perfectly, share it in discussions. When you find a design pattern that Claude executes flawlessly, document it. When you notice responsive breakpoint strategies that consistently work, tell the community.

Your breakthrough today becomes someone else's breakthrough tomorrow. Share what you discover. Document your insights. Help others see the patterns.

The craft grows when knowledge flows.

🎯 Real-World Success Stories

Case Study 1: SaaS Dashboard

Before: Generic Bootstrap table with blue buttons After: Modern data table with shadcn/ui, smooth animations, glassmorphism Key: Used design system template + specific component references 📁 See full case study

Case Study 2: E-commerce Product Page

Before: Basic grid layout, no visual hierarchy After: Bento grid with motion primitives, responsive images, micro-interactions Key: Mobile-first approach + browser inspection workflow 📁 See full case study

🛠️ Recommended Tools

Essential

• Shadcn UI - Copy-paste component collection
• v0.dev - AI UI generation for reference
• Chrome DevTools - Inspect and iterate live

Intermediate

• Mobbin - Mobile UI inspiration
• 21st.dev - Community components
• Aceternity - Premium components

Advanced

• Chrome DevTools MCP - Claude Code integration
• Fancy Components - Advanced animations
• Motion Primitives - Animation library

📚 Full tools list with setup guides

Feedback

Starred this? Tell us what worked and what is missing: open a feedback issue. Every piece of feedback gets an answer, and changes that come from it are credited in the release notes. For questions and open-ended ideas, use GitHub Discussions.

Cracks we found and sealed: LEDGER.md.

Contribute

• Take an item from the Menu: each one has a Done-when anyone can check. Open items are [menu] issues.
• New here? Start with the good first issues.
• Use a form: feedback, routing miss when Claude picks the wrong agent or skill, or plugin proposal for a new plugin, agent, skill or command.
• Show what you built in Discussions, Show and tell.
• The plugin layout and the commands to test a change locally are in CONTRIBUTING.md.

🤝 Contributing

This is a knowledge commons, not just a repository. Every contribution raises our collective understanding of UI/UX development with AI.

What We Need

🎯 Prompt Discoveries

• Found a phrasing that consistently works? Share it.
• Discovered a component pattern Claude executes perfectly? Document it.
• Figured out how to explain responsive behavior clearly? PR it.

📝 Real-World Examples

• Built something beautiful? Show the before/after with exact prompts.
• Solved a tricky design problem? Write up your breakthrough.
• Found an elegant solution? Share the mechanism.

🐛 Issues & Improvements

• Documentation unclear? Tell us where precision is missing.
• Example didn't work? Help us understand what broke.
• Better approach exists? Show us the elegant way.

💡 Pattern Recognition

• Notice Claude responding better to certain structures? Document the pattern.
• See connections between different techniques? Map them.
• Discover why something works? Explain the mechanism.

Contribution Guidelines

1. Follow the voice - Read VOICE_GUIDE.md first

   • Technical precision (45%) + Wonder (30%) + Playfulness (20%) + Encouragement (5%)
   • Show genuine awe at elegant mechanics, not mystical reverence

2. Structure matters - Use beginner/intermediate/advanced appropriately

   • Beginner: Immediate results, actionable templates
   • Intermediate: Systematic workflows, design systems
   • Advanced: Automation, deep patterns, production architectures

3. Include experiments - "Try this, watch for that, here's why it works"

   • Actionable: Reader can test immediately
   • Observable: Clear expected results
   • Explainable: Mechanism revealed

4. Test everything - Run it with Claude Code first

   • Prompts should work as written
   • Examples should be copy-paste ready
   • Results should be reproducible

5. Share knowledge, not secrets - Wonder emerges from understanding

   • Explain mechanisms, don't mystify
   • Reveal elegant solutions, don't gatekeep
   • Build collective understanding

Review Process

PRs are reviewed for:

• ✅ Technical accuracy (precision is non-negotiable)
• ✅ Voice consistency (see VOICE_GUIDE.md)
• ✅ Actionable value (can readers try it now?)
• ✅ Community benefit (raises collective understanding?)

💛 Gold Hat Note Topic: Community Knowledge Building

Every contribution here isn't just helping individual developers—it's mapping the territory of human-AI collaboration in design.

When you share a discovery, you're not just solving your problem. You're potentially unlocking dozens of projects, teaching hundreds of developers, and advancing our collective craft.

That prompt template you perfected? Someone will use it to ship their startup. That design pattern you documented? A student will learn from it. That mechanism you explained? It'll spark someone else's breakthrough.

Share generously. Document clearly. Explain thoroughly.

The craft grows when knowledge flows.

📖 Additional Resources

Official Documentation

• Claude Code Docs
• Anthropic Prompt Engineering

Community

• Reddit: r/ClaudeAI
• Discord: Claude Developers

Design Systems

• Material Design 3
• Apple Human Interface Guidelines
• Tailwind CSS

📜 License

MIT License — free to use in your projects, commercial or otherwise. See CONTRIBUTING.md if you want to improve the commons.

The plugins derived from wshobson/agents keep their original MIT copyright (Copyright (c) 2024 Seth Hobson). NOTICE.md lists them and reproduces the upstream license.

⭐ Star This Repo

If this helps you build better UIs with Claude Code, give us a star! It helps others discover these resources.

Acknowledgments

66 of the 71 plugins here derive from wshobson/agents by Seth Hobson, the Claude Code plugin marketplace this repository was forked from, released under the MIT License. The engineering plugins (backend, testing, DevOps, security, languages, and more), their agents, commands, and skills are his work and that of the wshobson/agents contributors, including Ryan Snodgrass. LibreUIUX adds the UI/UX layer on top: design-mastery, archetypal-alchemy, mcp-integrations, vibe-coding, libreuiux-hooks, the learning paths, and the templates. NOTICE.md has the full list and the upstream license.

Attribution & Inspiration

The framing of this repository was inspired by Andrej Karpathy's observations about the transformation of programming in the AI era:

Key Sources:

• LLMs as a New Computing Platform (2025 Year in Review) - Karpathy's comprehensive analysis of how LLMs are becoming a new computing paradigm
• X/Twitter Thread on the New Vocabulary - The December 2025 post describing "agents, subagents, prompts, contexts, memory, modes, permissions, tools, plugins, skills, hooks, MCP, LSP, slash commands, workflows"

On Claude Code specifically:

"Claude Code is the first convincing demonstration of what an LLM Agent looks like... a little spirit/ghost that lives on your computer, can inspect files, use a browser, can be told to 'just fix all the build errors', or 'write tests for this file'."

This repository aims to provide the specialized UI/UX infrastructure - skills, agents, commands, and workflows - that Karpathy describes as the new developer toolkit.

Built by developers, for developers. Building the new programming paradigm, one component at a time.

Part of the Libre Open-Source Stack for Claude Code

This repository is part of a growing family of open-source toolkits for Claude Code.

Libre suite — comprehensive plugin bundles

• LibreArch-Claude-Code — Software architecture and system design
• LibreCopy-Claude-Code — Technical writing and documentation engineering
• LibreDevOps-Claude-Code — DevOps engineering and infrastructure automation
• LibreEmbed-Claude-Code — Embedded systems, firmware, and IoT development
• LibreFinTech-Claude-Code — Financial technology development
• LibreGEO-Claude-Code — AI-search optimization (ChatGPT, Perplexity, Gemini, Google AI Overviews)
• LibreGameDev-Claude-Code — Game development across Godot, Unity, Unreal
• LibreMLOps-Claude-Code — ML engineering and AI operations
• LibreMobileDev-Claude-Code — Mobile app development (Flutter, React Native, native iOS, native Android)
• LibreSecOps-Claude-Code — Security operations
• LibreSessionFlow-Claude-Code — Session lifecycle: handoff, pickup, absorb, explore, close

Skills mini-repos — single CLAUDE.md drop-ins

• vibe-engineer-skills — Direct AI codegen well: hypothesis before help, scoped prompts, validate before accepting
• markdown-discipline-skills — Strip AI-slop from markdown (no em dashes, no marketing fluff)
• shell-safety-skills — set -euo pipefail discipline plus 15 failure-mode examples
• commit-standard-skills — Ormus Commit Standard v1.0 plus commit-msg hook and commitlint
• unwoke-skills — Strip AI theater (ten sins to eliminate, symmetric engagement)
• python-conventions-skills — Modern Python 3.11+ (types, pathlib, async, ruff, mypy, uv)
• typescript-conventions-skills — TypeScript strict mode, discriminated unions, Result types
• hermetic-laws-skills — Seven Hermetic Principles applied to engineering
• riper-workflow-skills — Research / Innovate / Plan / Execute / Review systematic dev
• six-day-cycle-skills — Sustainable shipping cadence with mandatory rest
• token-optimization-skills — Claude Code token and context optimization
• osint-skills — OSINT research methodology (multi-wave investigative spiral)
• calcinate-skills — Stage 1 of the Magnum Opus (burn project bloat)
• claude-md-overhaul-skills — Audit CLAUDE.md and MEMORY.md against caps
• session-handoff-skills — Session handoff and pickup discipline
• naming-skills — Product naming methodology (mine the brand's vocabulary)
• magnum-opus-skills — Seven-stage alchemy applied to project transformation
• mem-search-skills — Search claude-mem cross-session memory: search, filter, fetch
• hypothesis-debugging-skills — Hypothesis-driven debugging: reproduce, isolate, test, fix
• vibe-proof-skills — Security hardening for vibe-coded full-stack apps
• tdd-skills — Test-driven development (Red-Green-Refactor) for JS/TS and Python
• mars-skills — Production-readiness audit: the five mortal sins of vibe-coded MVPs
• git-workflow-skills — Clean git workflow: branch, atomic commits, reviewable PRs
• code-review-skills — Domain-aware code review: classify the code, then focus
• code-comprehension-skills — Understand an unfamiliar codebase fast
• dx-audit-skills — Audit developer experience: docs, onboarding, tooling friction
• setup-env-skills — Set up a project's development environment
• automate-skills — Turn repetitive tasks into reliable automation scripts
• quick-fix-skills — Fast troubleshooting for common issues
• prime-context-skills — Prime project context at the start of a session
• auto-docs-skills — Generate and maintain project documentation
• learning-skills — Learn any technology: roadmaps, explanations, practice, cheatsheets, comparisons
• linux-sysadmin-skills — Linux system administration: security, performance, diagnostics, monitoring, maintenance

Template source

• andrej-karpathy-skills — the canonical single-file CLAUDE.md pattern (fork of jiayuan_jy's original)

Star the family, not just one — that's how the suite stays coherent.