Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From agent-skills
Creates production-grade frontend interfaces with strong UX and visual craft. Handles components, pages, dashboards, forms, modals, and UI improvements.
npx claudepluginhub arvindand/agent-skills --plugin agent-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/agent-skills:ui-ux-designThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create functional, accessible, visually distinctive interfaces. Output is working code.
Guides creation of intentional, production-grade frontend interfaces covering design thinking, interaction patterns, motion, forms, layout, accessibility, and performance.
Generates distinctive, production-grade frontend code with bold aesthetics for web components, pages, or apps. Avoids generic AI designs.
Generates production-grade frontend UIs via design reasoning framework, style selection, anti-pattern avoidance, accessibility, and responsive standards for React/Vue/Svelte/HTML.
Share bugs, ideas, or general feedback.
Create functional, accessible, visually distinctive interfaces. Output is working code.
Activate automatically when:
Before coding, identify (internal reasoning):
Fetch implementation values from REFERENCES.md:
Produce working implementation with:
Run through checklist before delivering.
| Requirement | Standard |
|---|---|
| Contrast | 4.5:1 text, 3:1 UI components |
| Focus states | Visible outline on all interactive elements |
| Touch targets | Minimum 44×44px |
| Reduced motion | Respect prefers-reduced-motion |
| Labels | All inputs have associated labels |
| Empty states | Helpful message + clear action |
| Error states | Explain what happened + how to fix |
Pick an extreme and commit. Indecision produces generic output. Pick a clear conceptual direction — brutally minimal, maximalist, retro-futuristic, editorial, neubrutalist, organic, luxury/refined, industrial — and execute it with precision. Bold maximalism and refined minimalism both work; the failure mode is timid middle-ground.
See REFERENCES.md for characteristics of each direction.
| Style | Best For |
|---|---|
| Minimalism | Productivity, professional, portfolios |
| Glassmorphism | Dashboards, tech products |
| Neubrutalism | Creative, startups, distinctive brands |
| Editorial | Content sites, publications |
| Organic | Consumer apps, wellness, community |
| Dark Mode | User preference, low-light contexts |
Vary across generations. Never converge on the same display font (especially Inter, Space Grotesk, Roboto) or the same purple-on-white gradient that signals AI default output.
Avoid these markers of generic AI output:
Copy and track:
- [ ] Context assessed (problem, users, aesthetic direction)
- [ ] REFERENCES.md consulted for palette + fonts
- [ ] All interactive states implemented
- [ ] Loading and error states included
- [ ] Contrast meets WCAG AA
- [ ] Semantic HTML used
- [ ] Focus states visible
- [ ] Form inputs labeled
- [ ] prefers-reduced-motion respected
- [ ] Responsive breakpoints tested
- [ ] Empty states handled
| Issue | Action |
|---|---|
| User dislikes direction | Propose 2-3 alternatives from Aesthetic Directions |
| Looks too generic | Check Anti-Patterns, apply distinctive typography |
| Accessibility concerns | Verify contrast, focus states, semantic HTML |
| States incomplete | Walk through checklist systematically |
License: MIT - See LICENSE for complete terms Author: Arvind Menon