Two custom skills that turn Claude from a code generator into a UX strategist and visual craftsperson.

🔄 v2 Update — March 2026

<aside> 🔥

Major update! Both skills have been rebuilt with better reference files. If you installed the previous version, delete the old skills and re-upload these new zip files. Here's what changed:

UX Designer:

• Added references/psychology-deep-dive.md — detailed cognitive science, Gestalt principles, animation timing with CSS values
• Added references/patterns-and-flows.md — onboarding patterns, auth flows, e-commerce, dashboards, cross-industry inspiration
• Microcopy section now hands off to the new ux-copywriter skill (available separately)
• Added NEVER rules to prevent common mistakes
• Skills now reference each other for seamless handoffs

UI Designer:

• Added references/design-tokens.md — full CSS custom property scales for spacing, color, typography, shadows, radii
• Added references/component-library.md — specs for buttons, inputs, cards, tables, modals, tooltips, toasts with sizing tables
• Added references/polish-and-craft.md — CSS code for animation easing, polish techniques, responsive patterns, accessibility contrast
• Added NEVER rules to prevent common mistakes
• Skills now reference each other for seamless handoffs </aside>

What's Inside

🎯 UX Designer Skill

Makes Claude think about the human first. It asks who the user is before building, applies psychology (cognitive load, Hick's Law, decision architecture), designs flows not just screens, and pushes back on bad UX decisions.

Includes 2 reference guides:

• Psychology Deep Dive — cognitive load, decision architecture, Gestalt principles, animation timing
• Patterns & Flows — onboarding, auth, e-commerce, dashboards, navigation, cross-industry patterns

🎨 UI Designer Skill

Turns Claude into a visual perfectionist. 8pt spacing grid, mathematical type scales, 60-30-10 color rule, consistent component sizing, dark mode done right, and all the polish details that separate amateur from professional.

Includes 3 reference guides:

• Design Tokens — complete CSS custom property scales for spacing, color, type, shadows, radii
• Component Library — specs for every common component with sizing tables and state definitions
• Polish & Craft — advanced CSS techniques, animation code, responsive patterns, accessibility

Both skills activate automatically: no slash command needed. The UX skill handles strategy and psychology, the UI skill handles visual craft. They now hand off to each other and to the new ux-copywriter skill.

💡 Tip: Remind Claude at the start of convos to use its design skills, it helps.