How do I install the UI UX Design skill?

Run npx skillmds@latest add tomevault-io/ui-ux-design-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI UX Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI UX Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI UX Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI UX Design?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI UX Design by tomevault-io — Agent Skill

Name: UI UX Design
Author: tomevault-io

UI UX Design

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. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

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 Directions

Match to context. See REFERENCES.md 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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: ui-ux-design-2description: 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. Use when this capability is needed.---# UI/UX DesignCreate 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 ContextBefore 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 ReferencesFetch 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 CodeProduce 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: VerifyRun 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 DirectionsMatch 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-PatternsAvoid 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## ChecklistCopy 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---> Converted and distributed by [TomeVault](https://tomevault.io/claim/arvindand) — claim your Tome and manage your conversions.

Frequently asked questions