Unified design hub — routes to the right sub-skill for any visual/UI/UX task. Covers: component sourcing, aesthetics, composition, patterns, mobile, photos, canvas art, shadcn. Load this when doing any design work.
Instalación
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Unified design hub — routes to the right sub-skill for any visual/UI/UX task. Covers: component sourcing, aesthetics, composition, patterns, mobile, photos, canvas art, shadcn. Load this when doing any design work.
Design — Unified Routing Hub
One skill to load for any visual work. Routes to specialized sub-skills by task type.
Hierarchy: Obvious where to look first, 3 clear typographic levels
Contrast: ≥ 4.5:1 text, ≥ 3:1 UI elements
Touch targets: ≥ 44px with ≥ 8px gap
Fluid type: All text uses clamp(), no fixed px
Images verified: HEAD-checked, lazy-loaded, <img> for external
Hover states: No layout shift, 150–300ms transitions
Mobile tested: 375px, 390px, 768px, 1024px, 1440px
No scroll issues: overscroll-behavior: contain on scroll containers
Reduced motion: prefers-reduced-motion respected
No emojis: Use SVG icons (Lucide, Heroicons) for everything. Emojis are amateur hour — only acceptable for user-generated content or chat bubbles, never in designed UI.
Skill Overlap Report
Area
Primary Skill
Also In
Status
Color theory
ui-design
frontend-design (briefly)
✅ No conflict — ui-design = theory, frontend-design = application
Typography
ui-design (scale, pairing)
mobile-first (fluid clamp)
✅ Complementary
Component sourcing
component-craft
shadcn-ui
✅ component-craft = premium/animated, shadcn = foundation