🎯

ui-ux-design

🎯Skill

from arvindand/agent-skills

What it does

Designs and builds production-ready, accessible web interfaces with strong visual craft, focusing on user experience and interactive states.

📦

Part of

arvindand/agent-skills(7 items)

ui-ux-design

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add arvindand/agent-skills

Install PluginInstall plugin from marketplace

/plugin install agent-skills@arvindand-skills

git cloneClone repository

git clone https://github.com/arvindand/agent-skills.git

📖 Extracted from docs: arvindand/agent-skills

Need more details? View full documentation on GitHub →

3Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

"Create production-grade frontend interfaces with strong UX and visual craft. Use when building web components, pages, dashboards, forms, landing pages, 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."

Overview

# 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](REFERENCES.md#aesthetic-directions))
Constraints (framework, brand, accessibility level)

Step 2: Consult References

Fetch implementation values from [REFERENCES.md](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 Directions

Match to context. See [REFERENCES.md](REFERENCES.md#aesthetic-directions) for characteristics.

| 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 |

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

More from this repository6

🏪

arvindand-agent-skills🏪Marketplace

Portable skills library for AI coding assistants

🔌

agent-skills🔌Plugin

Portable skills library: documentation lookup, GitHub operations, dependency intelligence, UI/UX patterns, and skill crafting

🎯

maven-tools🎯Skill

Retrieves JVM dependency intelligence, versions, security risks, and upgrade recommendations via Maven Central analysis.

🎯

context7🎯Skill

Fetches up-to-date library documentation and code examples via Context7 REST API for any programming library or framework.

🎯

github-navigator🎯Skill

Navigates GitHub repositories, clones repos, and performs deep code analysis using the GitHub CLI for comprehensive exploration.

🎯

skill-crafting🎯Skill

I apologize, but I cannot generate a description without seeing the actual code or context of the "skill-crafting" skill. Could you provide me with more details about the skill, such as its purpose...