SkillsAdd

smithery/arvindand

ui-ux-design

Create production-grade frontend interfaces with strong UX and visual craft.

Installation

$ npx skills add smithery/arvindand --skill ui-ux-design
View on skills.sh ↗ Website ↗

Summary

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

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from smithery/arvindand.

npx skills add smithery/arvindand
skill-crafting 0 github-navigator 0

Browse all from smithery/arvindand

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

LicenseMIT
Allowed toolsRead Write Edit

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,802 B
  • docs SUMMARY.md 308 B

History

  1. First recorded snapshot · 0 installs

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](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 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](REFERENCES.md#aesthetic-directions) 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