{"id":"bfdff8e7-ebbb-436c-a9a3-1bf1099deb0e","shortId":"rRcjM9","kind":"skill","title":"ui-ux-design","tagline":"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","description":"# UI/UX Design\n\nCreate functional, accessible, visually distinctive interfaces. Output is working code.\n\n## When to Use\n\n**Activate automatically when:**\n\n- User requests UI components, pages, or applications\n- User mentions forms, dashboards, landing pages, modals\n- User asks to \"design\", \"build\", or \"create\" any interface\n- User wants to improve existing UI/UX\n\n## Workflow\n\n### Step 1: Assess Context\n\nBefore coding, identify (internal reasoning):\n\n- Problem being solved\n- Target users\n- Aesthetic direction (see [REFERENCES.md](REFERENCES.md#aesthetic-directions))\n- Constraints (framework, brand, accessibility level)\n\n### Step 2: Consult References\n\nFetch implementation values from [REFERENCES.md](REFERENCES.md):\n\n- Color palette (with WCAG-compliant values)\n- Font pairing\n- Component patterns (button, input, card, etc.)\n- Spacing and typography tokens\n\n### Step 3: Generate Code\n\nProduce working implementation with:\n\n- All interactive states (hover, focus, active, disabled, loading, error)\n- Semantic HTML (button, nav, main—not div soup)\n- Mobile-first responsive design\n- CSS variables for maintainability\n\n### Step 4: Verify\n\nRun through checklist before delivering.\n\n## Output Requirements\n\n| Requirement | Standard |\n|-------------|----------|\n| Contrast | 4.5:1 text, 3:1 UI components |\n| Focus states | Visible outline on all interactive elements |\n| Touch targets | Minimum 44×44px |\n| Reduced motion | Respect `prefers-reduced-motion` |\n| Labels | All inputs have associated labels |\n| Empty states | Helpful message + clear action |\n| Error states | Explain what happened + how to fix |\n\n## Aesthetic Direction\n\n**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.\n\nSee [REFERENCES.md](REFERENCES.md#aesthetic-directions) for characteristics of each direction.\n\n| Style | Best For |\n|-------|----------|\n| Minimalism | Productivity, professional, portfolios |\n| Glassmorphism | Dashboards, tech products |\n| Neubrutalism | Creative, startups, distinctive brands |\n| Editorial | Content sites, publications |\n| Organic | Consumer apps, wellness, community |\n| Dark Mode | User preference, low-light contexts |\n\nVary 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.\n\n## Anti-Patterns\n\nAvoid these markers of generic AI output:\n\n- Purple/blue gradients on white\n- Inter/Roboto/system fonts everywhere\n- Cookie-cutter card layouts\n- Rounded rectangles with soft shadows on everything\n- Color-only meaning (no icons/text backup)\n- Removed focus outlines\n- Error messages without solutions\n\n## Checklist\n\nCopy and track:\n\n```\n- [ ] Context assessed (problem, users, aesthetic direction)\n- [ ] REFERENCES.md consulted for palette + fonts\n- [ ] All interactive states implemented\n- [ ] Loading and error states included\n- [ ] Contrast meets WCAG AA\n- [ ] Semantic HTML used\n- [ ] Focus states visible\n- [ ] Form inputs labeled\n- [ ] prefers-reduced-motion respected\n- [ ] Responsive breakpoints tested\n- [ ] Empty states handled\n```\n\n## Recovery\n\n| Issue | Action |\n|-------|--------|\n| User dislikes direction | Propose 2-3 alternatives from Aesthetic Directions |\n| Looks too generic | Check Anti-Patterns, apply distinctive typography |\n| Accessibility concerns | Verify contrast, focus states, semantic HTML |\n| States incomplete | Walk through checklist systematically |\n\n---\n\n> **License:** MIT - See LICENSE for complete terms\n> **Author:** Arvind Menon","tags":["design","agent","skills","arvindand","agent-skills","ai-agents","ai-tools","claude-code","developer-tools","github-copilot","llm","mcp"],"capabilities":["skill","source-arvindand","skill-ui-ux-design","topic-agent-skills","topic-ai-agents","topic-ai-tools","topic-claude-code","topic-developer-tools","topic-github-copilot","topic-llm","topic-mcp","topic-opencode","topic-skills"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/arvindand/agent-skills/ui-ux-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add arvindand/agent-skills","source_repo":"https://github.com/arvindand/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.456","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 12 github stars · SKILL.md body (3,785 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:10.952Z","embedding":null,"createdAt":"2026-04-23T13:04:11.765Z","updatedAt":"2026-05-18T19:07:10.952Z","lastSeenAt":"2026-05-18T19:07:10.952Z","tsv":"'-3':466 '1':99,202,205 '2':126,465 '3':155,204 '4':189 '4.5':201 '44':219 '44px':220 'aa':437 'access':54,123,481 'across':340 'action':239,460 'activ':65,167 'aesthet':112,118,248,299,418,469 'aesthetic-direct':117,298 'ai':364,375 'altern':467 'anti':368,476 'anti-pattern':367,475 'app':328 'appli':478 'applic':74 'arvind':503 'ask':49,83 'assess':100,415 'associ':232 'author':502 'automat':66 'avoid':370 'backup':402 'best':307 'bold':280 'brand':122,321 'breakpoint':453 'brutal':264 'build':19,35,86 'button':146,173 'card':148,387 'characterist':302 'check':474 'checklist':193,410,493 'clear':238,261 'code':61,103,157 'color':135,397 'color-on':396 'commit':254 'communiti':330 'complet':500 'compliant':140 'compon':21,43,71,144,207 'conceptu':262 'concern':482 'constraint':120 'consult':127,421 'consum':327 'content':323 'context':101,338,414 'contrast':200,434,484 'converg':343 'cooki':385 'cookie-cutt':384 'copi':411 'craft':16 'creat':5,38,52,88 'creativ':318 'css':184 'cutter':386 'dark':331 'dashboard':23,40,78,314 'default':365 'deliv':195 'design':4,41,51,85,183 'direct':113,119,249,263,300,305,419,463,470 'disabl':168 'dislik':462 'display':347 'distinct':56,320,479 'div':177 'editori':270,322 'element':215 'empti':234,455 'error':170,240,406,431 'especi':349 'etc':149 'everyth':395 'everywher':383 'execut':276 'exist':95 'explain':242 'extrem':252 'failur':288 'fetch':129 'first':181 'fix':247 'focus':166,208,404,441,485 'font':142,348,382,424 'form':24,37,77,444 'framework':121 'frontend':9 'function':53 'futurist':269 'generat':156,341 'generic':257,374,473 'glassmorph':313 'grade':8 'gradient':361,378 'grotesk':352 'ground':294 'handl':457 'happen':244 'help':236 'hover':165 'html':172,439,488 'icons/text':401 'identifi':104 'implement':130,160,428 'improv':94 'includ':433 'incomplet':490 'indecis':255 'industri':274 'input':147,230,445 'inter':350 'inter/roboto/system':381 'interact':163,214,426 'interfac':10,57,90 'intern':105 'issu':459 'label':228,233,446 'land':25,46,79 'layout':388 'level':124 'licens':495,498 'light':337 'load':169,429 'look':471 'low':336 'low-light':335 'luxury/refined':273 'main':175 'maintain':187 'make':44 'marker':372 'maxim':281 'maximalist':266 'mean':399 'meet':435 'menon':504 'mention':76 'messag':237,407 'middl':293 'middle-ground':292 'minim':265,284,309 'minimum':218 'mit':496 'mobil':180 'mobile-first':179 'modal':27,81 'mode':289,332 'motion':222,227,450 'nav':174 'neubrut':317 'neubrutalist':271 'never':342 'organ':272,326 'outlin':211,405 'output':58,196,258,366,376 'page':22,26,47,72,80 'pair':143 'palett':136,423 'pattern':145,369,477 'pick':250,259 'portfolio':312 'precis':279 'prefer':225,334,448 'prefers-reduced-mot':224,447 'problem':107,416 'produc':158,256 'product':7,310,316 'production-grad':6 'profession':311 'propos':464 'public':325 'purpl':358 'purple-on-whit':357 'purple/blue':377 'reason':106 'recoveri':458 'rectangl':390 'reduc':221,226,449 'refer':128 'references.md':115,116,133,134,296,297,420 'refin':283 'remov':403 'request':69 'requir':197,198 'respect':223,451 'respons':182,452 'retro':268 'retro-futurist':267 'roboto':353 'round':389 'run':191 'say':34 'see':114,295,497 'semant':171,438,487 'shadow':393 'signal':363 'site':324 'skill' 'skill-ui-ux-design' 'soft':392 'solut':409 'solv':109 'soup':178 'source-arvindand' 'space':150,351 'standard':199 'startup':319 'state':164,209,235,241,427,432,442,456,486,489 'step':98,125,154,188 'strong':12 'style':306 'systemat':494 'target':110,217 'tech':315 'term':501 'test':454 'text':203 'timid':291 'token':153 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-tools' 'topic-claude-code' 'topic-developer-tools' 'topic-github-copilot' 'topic-llm' 'topic-mcp' 'topic-opencode' 'topic-skills' 'touch':216 'track':413 'typographi':152,480 'ui':2,30,70,206 'ui-ux-design':1 'ui/ux':50,96 'use':17,31,64,440 'user':33,68,75,82,91,111,333,417,461 'ux':3,13 'valu':131,141 'vari':339 'variabl':185 'verifi':190,483 'visibl':210,443 'visual':15,55 'walk':491 'want':92 'wcag':139,436 'wcag-compli':138 'web':20 'well':329 'white':360,380 'without':408 'work':60,159,286 'workflow':97","prices":[{"id":"780b749a-7ddc-4eda-bf4c-2ee56d3c0e19","listingId":"bfdff8e7-ebbb-436c-a9a3-1bf1099deb0e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"arvindand","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-04-23T13:04:11.765Z"}],"sources":[{"listingId":"bfdff8e7-ebbb-436c-a9a3-1bf1099deb0e","source":"github","sourceId":"arvindand/agent-skills/ui-ux-design","sourceUrl":"https://github.com/arvindand/agent-skills/tree/main/skills/ui-ux-design","isPrimary":false,"firstSeenAt":"2026-04-23T13:04:11.765Z","lastSeenAt":"2026-05-18T19:07:10.952Z"}],"details":{"listingId":"bfdff8e7-ebbb-436c-a9a3-1bf1099deb0e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"arvindand","slug":"ui-ux-design","github":{"repo":"arvindand/agent-skills","stars":12,"topics":["agent-skills","ai-agents","ai-tools","claude-code","developer-tools","github-copilot","llm","mcp","opencode","skills"],"license":"mit","html_url":"https://github.com/arvindand/agent-skills","pushed_at":"2026-05-12T21:27:46Z","description":"Reusable agent skills for Claude Code, GitHub Copilot, and other AI assistants. Dependency intelligence, GitHub ops, documentation lookup, UI/UX design patterns.","skill_md_sha":"68d642744e5e295985c76f20769c211190f6bd3f","skill_md_path":"skills/ui-ux-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/arvindand/agent-skills/tree/main/skills/ui-ux-design"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"ui-ux-design","description":"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."},"skills_sh_url":"https://skills.sh/arvindand/agent-skills/ui-ux-design"},"updatedAt":"2026-05-18T19:07:10.952Z"}}