Ui ux design

Skill arvindand/agent-skills/skills/ui-ux-design

Reusable agent skills for Claude Code, GitHub Copilot, and other AI assistants. Dependency intelligence, GitHub ops, documentation lookup, UI/UX design patterns.

Install

npx -y skills add arvindand/agent-skills --skill ui-ux-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

15 stars15 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Create production-grade frontend interfaces with strong UX and visual craft. Use when building web components, pages, dashboards, forms, landing pages, modals, or any UI. Use when user says 'build a form', 'create a dashboard', 'design a component', 'make a landing page', or asks for UI/UX work. Use even when the user just says 'make this look better' or pastes screenshots/mockups without explicitly naming a design task.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

4.7 KB, as published. Nobody here has run it

UI/UX Design

Create functional, accessible, visually distinctive interfaces. Output is working code.

When to Use

Activate automatically when:

User requests UI components, pages, or applications
User mentions forms, dashboards, landing pages, modals
User asks to "design", "build", or "create" any interface
User wants to improve existing UI/UX

Workflow

Step 1: Assess Context

Before coding, identify (internal reasoning):

Problem being solved
Target users
Aesthetic direction (see REFERENCES.md)
Constraints (framework, brand, accessibility level)

Step 2: Consult References

Fetch implementation values from REFERENCES.md:

Color palette (with WCAG-compliant values)
Font pairing
Component patterns (button, input, card, etc.)
Spacing and typography tokens

Step 3: Generate Code

Produce working implementation with:

All interactive states (hover, focus, active, disabled, loading, error)
Semantic HTML (button, nav, main—not div soup)
Mobile-first responsive design
CSS variables for maintainability

Step 4: Verify

Run through checklist before delivering.

Output Requirements

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

Aesthetic Direction

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.

Anti-Patterns

Avoid these markers of generic AI output:

Purple/blue gradients on white
Inter/Roboto/system fonts everywhere
Cookie-cutter card layouts
Rounded rectangles with soft shadows on everything
Color-only meaning (no icons/text backup)
Removed focus outlines
Error messages without solutions

Checklist

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

Recovery

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