How do I install the Uiux Design skill?

Run npx skillmds@latest add tomevault-io/uiux-design 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 Uiux 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 Uiux 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 Uiux Design free to use?

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

Who published Uiux Design?

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

Uiux Design by tomevault-io — Agent Skill

Name: Uiux Design
Author: tomevault-io

Uiux Design

UI/UX design system patterns — spacing scale, typography, color tokens, component states, responsive breakpoints, z-index, motion. Use when editing CSS modules, styled components, style directories, theme files, design tokens, tailwind config, or UI primitives. Use when this capability is needed.

tomevault-io a569e5c 2 files · 2.9 KB Updated Sep 17, 2026

File contents

Quick Reference

Spacing Scale (4px base)

xs=4  sm=8  md=16  lg=24  xl=32  2xl=48  3xl=64  4xl=80  5xl=96

Use ONLY these values. No magic numbers (13px, 27px, etc.)

Typography Scale

caption:  12/16  regular
bodySmall: 14/20  regular
body:     16/24  regular
h3:       20/28  semibold
h2:       24/32  semibold
h1:       30/38  bold
display:  36/44  bold

Color System

ALWAYS use semantic tokens, never primitives:

text.primary / text.secondary / text.disabled / text.inverse
surface.default / surface.raised / surface.overlay / surface.sunken
border.default / border.focus / border.error
action.primary / action.primaryHover / action.secondary / action.danger
feedback.success / feedback.warning / feedback.error / feedback.info

Component States (design ALL of these)

default → hover → focus → active → disabled
loading (skeleton / spinner)
error (inline message)
empty (illustration + CTA)

Responsive Breakpoints

sm: 640px    (phone landscape)
md: 768px    (tablet)
lg: 1024px   (laptop)
xl: 1280px   (desktop)
2xl: 1536px  (wide)

Design mobile-first. Stack at sm, side-by-side at md+.

Z-Index Scale

base: 0    dropdown: 100    sticky: 200    modal: 300    toast: 400    tooltip: 500

NEVER use arbitrary z-index values (z-index: 9999).

Motion

fast: 150ms    (micro-interactions: toggle, checkbox)
normal: 250ms  (panels, dropdowns)
slow: 400ms    (page transitions, modals)
easing: cubic-bezier(0.4, 0, 0.2, 1)

Respect prefers-reduced-motion: reduce — disable non-essential animation.

Contrast Requirements

Normal text (< 18px): 4.5:1 minimum
Large text (≥ 18px bold or ≥ 24px): 3:1 minimum
UI components (borders, icons, focus rings): 3:1 minimum

For detailed patterns, see references/ directory.

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

---name: uiux-designdescription: UI/UX design system patterns — spacing scale, typography, color tokens, component states, responsive breakpoints, z-index, motion. Use when editing CSS modules, styled components, style directories, theme files, design tokens, tailwind config, or UI primitives. Use when this capability is needed.---## Quick Reference### Spacing Scale (4px base)```xs=4 sm=8 md=16 lg=24 xl=32 2xl=48 3xl=64 4xl=80 5xl=96```Use ONLY these values. No magic numbers (13px, 27px, etc.)### Typography Scale```caption: 12/16 regularbodySmall: 14/20 regularbody: 16/24 regularh3: 20/28 semiboldh2: 24/32 semiboldh1: 30/38 bolddisplay: 36/44 bold```### Color SystemALWAYS use semantic tokens, never primitives:```text.primary / text.secondary / text.disabled / text.inversesurface.default / surface.raised / surface.overlay / surface.sunkenborder.default / border.focus / border.erroraction.primary / action.primaryHover / action.secondary / action.dangerfeedback.success / feedback.warning / feedback.error / feedback.info```### Component States (design ALL of these)```default → hover → focus → active → disabledloading (skeleton / spinner)error (inline message)empty (illustration + CTA)```### Responsive Breakpoints```sm: 640px (phone landscape)md: 768px (tablet)lg: 1024px (laptop)xl: 1280px (desktop)2xl: 1536px (wide)```Design mobile-first. Stack at sm, side-by-side at md+.### Z-Index Scale```base: 0 dropdown: 100 sticky: 200 modal: 300 toast: 400 tooltip: 500```NEVER use arbitrary z-index values (z-index: 9999).### Motion```fast: 150ms (micro-interactions: toggle, checkbox)normal: 250ms (panels, dropdowns)slow: 400ms (page transitions, modals)easing: cubic-bezier(0.4, 0, 0.2, 1)```Respect `prefers-reduced-motion: reduce` — disable non-essential animation.### Contrast Requirements- Normal text (< 18px): 4.5:1 minimum- Large text (≥ 18px bold or ≥ 24px): 3:1 minimum- UI components (borders, icons, focus rings): 3:1 minimumFor detailed patterns, see `references/` directory.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/surfertas) — claim your Tome and manage your conversions.

Frequently asked questions