arvindandarvindand/agent-skills/skills/ui-ux-design/SKILL.md

ui-ux-design

Skill17 starsChanged 13 days agoMITView on GitHub

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.

20 other projects use a version of this.

Adopted by

Most recently taken up by

jDxve/avengers-kittheir own version, first seen Nov 8, 2026
mblauberg/provenanttheir own version, first seen Nov 8, 2026
SWEStash/swe-workflow-skillstheir own version, first seen Nov 8, 2026
delorenj/skillstheir own version, first seen Nov 7, 2026
velonx/agent-skillstheir own version, first seen Nov 1, 2026
rogue-dev-studio/ai-agents-roguetheir own version, first seen Nov 1, 2026

Used with

Projects with it also use prd-generator and security-review.

Other files people use alongside this one.

dhzrxSkill
prd-generator
Generate comprehensive Product Requirements Documents with AI PM best practices for new features and products
Also in 3 projects that use this
SentrySkill
security-review
Finds exploitable application security vulnerabilities in code changes. Use for Warden security scans, appsec review, OWASP-style checks, authentication or authorization bugs, injection, XSS, SSRF, path traversal, secrets, unsafe crypto, webhook verification, open redirects, or sensitive data exposure.
Also in 3 projects that use this

Other versions20 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 20
EmeaAppGbb/spec2cloud★ 100same name
felvieira/claude-skills-fv★ 27same name
delorenj/skills★ 17same name
crgarcia12/Liliput★ 4same name
hahuyhungdev/ai-coding-config★ 3same name
alex-voloshin-dev/ai-skills★ 2same name
AntJanus/skillbox★ 2same name
rogue-dev-studio/ai-agents-rogue★ 2same name
augments-labs/sdlc-skills★ 1same name
hicay/claude-code-skills★ 1same name
10 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository5 other files it gives its agents.
- context7Skill
- github-navigatorSkill
- maven-toolsSkill
- release-reviewSkill
- skill-craftingSkill

The file

We split this skill into the rules it gives an agent

5 rules. 0 are common, 5 are distinctive, and 0 are very specific to this project.

0
Common
Most of the 17 edited versions we read keep these.
5
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Create functional, accessible, visually distinctive interfaces.
line 15
Distinctive:
Before coding, identify (internal reasoning):
line 30
Distinctive:
All interactive states (hover, focus, active, disabled, loading, error)
line 50
Distinctive:
Run through checklist before delivering.
line 57
Distinctive:
Avoid these markers of generic AI output:
line 90

“Common” is measured: kept by at least 6 in 10 of the 17 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free