How do I install the UI UX Expert skill?

Run npx skillmds@latest add tomevault-io/ui-ux-expert 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 Expert 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 Expert?

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 Expert free to use?

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

Who published UI UX Expert?

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

UI UX Expert by tomevault-io — Agent Skill

Name: UI UX Expert
Author: tomevault-io

UI UX Expert

Expert UI/UX design and frontend development guidance. Use when designing interfaces, creating design systems, improving user experience, implementing accessible components, or building responsive layouts. Covers WCAG compliance, design patterns, and CSS/component best practices. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

UI/UX Expert

Design System Tokens

/* Spacing (8px grid) */
--space-1: 4px;  --space-2: 8px;  --space-4: 16px;  --space-6: 24px;

/* Typography */
--text-sm: 14px;  --text-base: 16px;  --text-lg: 18px;  --text-xl: 20px;

/* Touch targets */
--touch-min: 48px;  /* Android */
--touch-min-ios: 44px;  /* iOS */

Accessibility (WCAG 2.1 AA)

Element	Contrast Ratio
Normal text	4.5:1
Large text (>=18px)	3:1
UI components	3:1

Requirements:

All buttons: semantic labels/tooltips
All images: alt text or decorative marker
Touch targets: 48x48 minimum
Focus: visible indicators
Motion: respect prefers-reduced-motion

Responsive Breakpoints

--bp-sm: 640px;   /* Tablets */
--bp-md: 768px;   /* Small laptops */
--bp-lg: 1024px;  /* Desktops */
--bp-xl: 1280px;  /* Large screens */

Component Patterns

Buttons

Primary, Secondary, Ghost, Danger variants
sm/md/lg sizes
Loading state with spinner
Disabled state at 50% opacity

Forms

Labels above inputs
16px font (prevents iOS zoom)
Visible focus ring
Inline validation errors

Cards

Elevated (shadow), Outlined, Filled variants
Consistent padding (16px or 24px)
Clear visual hierarchy

Animation

--duration-fast: 150ms;
--duration-normal: 200ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

UX Heuristics

System status visibility (loading states)
Match real world (familiar language)
User control (undo, cancel options)
Consistency (follow platform conventions)
Error prevention (confirmations, constraints)
Recognition over recall (visible options)

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

---name: ui-ux-expertdescription: Expert UI/UX design and frontend development guidance. Use when designing interfaces, creating design systems, improving user experience, implementing accessible components, or building responsive layouts. Covers WCAG compliance, design patterns, and CSS/component best practices. Use when this capability is needed.---# UI/UX Expert## Design System Tokens```css/* Spacing (8px grid) */--space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px;/* Typography */--text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px;/* Touch targets */--touch-min: 48px; /* Android */--touch-min-ios: 44px; /* iOS */```## Accessibility (WCAG 2.1 AA)| Element | Contrast Ratio ||---------|---------------|| Normal text | 4.5:1 || Large text (>=18px) | 3:1 || UI components | 3:1 |**Requirements:**- All buttons: semantic labels/tooltips- All images: alt text or decorative marker- Touch targets: 48x48 minimum- Focus: visible indicators- Motion: respect prefers-reduced-motion## Responsive Breakpoints```css--bp-sm: 640px; /* Tablets */--bp-md: 768px; /* Small laptops */--bp-lg: 1024px; /* Desktops */--bp-xl: 1280px; /* Large screens */```## Component Patterns### Buttons- Primary, Secondary, Ghost, Danger variants- sm/md/lg sizes- Loading state with spinner- Disabled state at 50% opacity### Forms- Labels above inputs- 16px font (prevents iOS zoom)- Visible focus ring- Inline validation errors### Cards- Elevated (shadow), Outlined, Filled variants- Consistent padding (16px or 24px)- Clear visual hierarchy## Animation```css--duration-fast: 150ms;--duration-normal: 200ms;--ease-out: cubic-bezier(0, 0, 0.2, 1);/* Respect user preference */@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; }}```## UX Heuristics1. System status visibility (loading states)2. Match real world (familiar language)3. User control (undo, cancel options)4. Consistency (follow platform conventions)5. Error prevention (confirmations, constraints)6. Recognition over recall (visible options)---> Converted and distributed by [TomeVault](https://tomevault.io/claim/abbas133) — claim your Tome and manage your conversions.

Frequently asked questions