Complete UI/UX system for Claude Code -- 152 agents, 70 plugins, 76 commands, 74 skills
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.
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.
| New Stack Component | LibreUIUX Provides |
|---|---|
| Skills | 74 specialized skills (accessibility, animation, design systems, etc.) |
| Agents | 152 task-specific agents (UI validator, design critic, responsive checker, etc.) |
| Commands | 76 slash commands for common UI/UX workflows |
| Plugins | 70 domain plugins (frontend, accessibility, design mastery, etc.) |
| Workflows | Beginner to advanced learning paths |
This isn't just a prompt library. It's infrastructure for the new way we build software with AI.
LibreUIUX-Claude-Code/
├── 70 Plugins # Domain-specific collections
├── 152 Agents # Task-specialized AI personas
├── 76 Commands # Slash commands for Claude Code
├── 74 Skills # Reusable capability modules
├── 3 Skill Levels # Beginner → Intermediate → Advanced
└── Templates # Ready-to-use configurations
| Category | Plugins | Description |
|---|---|---|
| Frontend & UI | design-mastery, frontend-mobile-development, accessibility-compliance | Core UI/UX development |
| Backend Integration | backend-development, api-scaffolding, database-design | Full-stack patterns |
| Quality & Testing | unit-testing, tdd-workflows, code-review-ai | Ensure production quality |
| DevOps & Deploy | cicd-automation, deployment-strategies, kubernetes-operations | Ship with confidence |
| Specialized | game-development, blockchain-web3, machine-learning-ops | Domain expertise |
| Component | When to Use | Example |
|---|---|---|
| Skills | Need domain knowledge applied to a task | api-design-principles - teaches REST best practices |
| Commands | Quick, repeatable actions | /ui-critique - get instant design feedback |
| Agents | Complex, multi-step work requiring expertise | frontend-developer - builds complete components |
Path 1: Just Want Better Prompts? (5 minutes)
# Browse the beginner prompts
cat beginner/prompts/modern-button.mdPath 2: Add Commands to Claude Code (10 minutes)
# Copy commands to your project or global config
cp -r .claude/commands/* ~/.claude/commands/Path 3: Use Specific Plugins (15 minutes)
# Example: Add design mastery to your project
cp plugins/design-mastery/agents/* your-project/.claude/agents/
cp plugins/design-mastery/skills/*/SKILL.md your-project/.claude/skills/Path 4: Full Installation (30 minutes)
# Clone and integrate everything
git clone https://github.com/HermeticOrmus/LibreUIUX-Claude-Code.git
# Follow the advanced setup guideDevelopers 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
"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.
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:
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
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
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
LibreUIUX-Claude-Code/
├── README.md # You are here
│
├── plugins/ # 68 domain-specific plugin collections
│ ├── 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
│ └── ... (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
│ └── checklist.md # Pre-request checklist
│
├── intermediate/ # Build systematic workflows
│ ├── README.md # Intermediate guide overview
│ ├── design-systems/ # Complete design system templates
│ ├── claude-md-templates/ # CLAUDE.md file templates
│ ├── component-libraries/ # Integration guides (Shadcn, Aceternity)
│ ├── workflows/ # Step-by-step workflows
│ └── examples/ # Real project examples
│
├── advanced/ # Pro-level automation
│ ├── README.md # Advanced guide overview
│ ├── mcp-servers/ # MCP server configurations
│ ├── slash-commands/ # Custom Claude Code commands
│ ├── automation/ # Automated workflows
│ └── examples/ # Production-level examples
│
├── resources/ # Curated resources
│ ├── component-libraries.md # Library comparisons & links
│ ├── inspiration/ # Design inspiration sources
│ ├── tools.md # Recommended tools
│ └── github-repos.md # Curated GitHub repositories
│
├── templates/ # Copy-paste templates
│ ├── CLAUDE.md # Template for project root
│ ├── design-brief.md # Design brief template
│ └── component-spec.md # Component specification template
│
└── .claude/ # Claude Code configuration
└── commands/ # Global slash commands
├── ui-modern.md
├── ui-critique.md
└── ui-responsive.md
Click to expand full plugin list
| Plugin | Focus Area |
|---|---|
| accessibility-compliance | WCAG, ARIA, screen readers |
| agent-orchestration | Multi-agent coordination |
| api-scaffolding | REST/GraphQL API design |
| api-testing-observability | API testing & monitoring |
| application-performance | Frontend/backend optimization |
| archetypal-alchemy | Design psychology patterns |
| arm-cortex-microcontrollers | Embedded systems |
| backend-api-security | Auth, validation, security |
| backend-development | Server architecture |
| blockchain-web3 | Smart contracts, DeFi |
| business-analytics | Data analysis, reporting |
| cicd-automation | CI/CD pipelines |
| cloud-infrastructure | AWS, GCP, Azure |
| codebase-cleanup | Refactoring, debt reduction |
| code-documentation | Docs generation |
| code-refactoring | Pattern improvement |
| code-review-ai | Automated review |
| comprehensive-review | Full codebase audits |
| content-marketing | SEO, content strategy |
| context-management | Claude context optimization |
| customer-sales-automation | CRM, automation |
| database-cloud-optimization | DB performance |
| database-design | Schema, modeling |
| database-migrations | Safe migrations |
| data-engineering | ETL, pipelines |
| data-validation-suite | Input validation |
| debugging-toolkit | Debug strategies |
| dependency-management | Package management |
| deployment-strategies | Blue-green, canary |
| deployment-validation | Deploy verification |
| design-mastery | UI/UX excellence |
| developer-essentials | Core dev workflows |
| distributed-debugging | Microservice debugging |
| documentation-generation | Auto-docs |
| error-debugging | Error analysis |
| error-diagnostics | Root cause analysis |
| framework-migration | Version upgrades |
| frontend-mobile-development | React, Vue, mobile |
| frontend-mobile-security | XSS, CSRF protection |
| full-stack-orchestration | End-to-end coordination |
| functional-programming | FP patterns |
| game-development | Game engines, graphics |
| git-pr-workflows | Git best practices |
| hr-legal-compliance | Privacy, GDPR |
| incident-response | Outage handling |
| javascript-typescript | JS/TS patterns |
| julia-development | Julia lang |
| jvm-languages | Java, Kotlin, Scala |
| kubernetes-operations | K8s management |
| llm-application-dev | AI/LLM apps |
| machine-learning-ops | MLOps |
| mcp-integrations | MCP server tools & browser DevTools |
| multi-platform-apps | Cross-platform |
| observability-monitoring | Logging, metrics |
| payment-processing | Stripe, payments |
| performance-testing-review | Load testing |
| python-development | Python patterns |
| quantitative-trading | Algo trading |
| security-compliance | Security audits |
| security-scanning | Vuln detection |
| seo-analysis-monitoring | SEO tracking |
| seo-content-creation | SEO writing |
| seo-technical-optimization | Technical SEO |
| shell-scripting | Bash, automation |
| systems-programming | Low-level dev |
| tdd-workflows | Test-driven dev |
| team-collaboration | Team processes |
| unit-testing | Testing strategies |
| vibe-coding | Rapid AI-assisted prototyping |
| web-scripting | Scraping, automation |
- Read Design Vocabulary
- Try 3 component prompts from beginner/prompts/
- Practice with the prompts to see before/after transformations
- Choose a design system template
- Create a CLAUDE.md file for your project
- Practice the iteration workflow
- Set up Chrome DevTools MCP
- Install custom slash commands
- Build your own component library
Think of these as the elegant mechanics of communicating with Claude. Each principle solves a specific problem in how AI interprets design intent.
-
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.
"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'tStarting without a design system- Every request becomes a negotiationAccepting 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.
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
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
- Shadcn UI - Copy-paste component collection
- v0.dev - AI UI generation for reference
- Chrome DevTools - Inspect and iterate live
- Mobbin - Mobile UI inspiration
- 21st.dev - Community components
- Aceternity - Premium components
- Chrome DevTools MCP - Claude Code integration
- Fancy Components - Advanced animations
- Motion Primitives - Animation library
📚 Full tools list with setup guides
This is a knowledge commons, not just a repository. Every contribution raises our collective understanding of UI/UX development with AI.
🎯 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.
-
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
-
Structure matters - Use beginner/intermediate/advanced appropriately
- Beginner: Immediate results, actionable templates
- Intermediate: Systematic workflows, design systems
- Advanced: Automation, deep patterns, production architectures
-
Include experiments - "Try this, watch for that, here's why it works"
- Actionable: Reader can test immediately
- Observable: Clear expected results
- Explainable: Mechanism revealed
-
Test everything - Run it with Claude Code first
- Prompts should work as written
- Examples should be copy-paste ready
- Results should be reproducible
-
Share knowledge, not secrets - Wonder emerges from understanding
- Explain mechanisms, don't mystify
- Reveal elegant solutions, don't gatekeep
- Build collective understanding
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.
MIT License - feel free to use this in your projects, commercial or otherwise.
If this helps you build better UIs with Claude Code, give us a star! It helps others discover these resources.
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.