Claude Code Skill Refactors React Components Using 'Don't Make Me Think' Principles

A new community-built skill for Claude Code applies Steve Krug's Don't Make Me Think usability principles to React components. The skill auto-detects your design system (shadcn/ui, MUI, Chakra, Mantine, Ant, or custom) and uses existing primitives instead of reinventing them.

What it does

The skill takes a React component and refactors it for usability by:

• Removing happy talk and instruction paragraphs
• Making the primary CTA obvious
• Fixing dead-end loading / empty / error states
• Tightening labels (e.g., "Please enter your first name" → "First name")
• Improving visual hierarchy and scanability

The author built it because Claude (and most LLMs) tend to generate UIs that are technically functional but cluttered, wordy, and hard to scan. This skill enforces cutting until only the signal remains.

Installation

npx skills add gashiartim/ux-enhancer

Framework agnostic

The skill automatically detects your design system — shadcn/ui, MUI, Chakra, Mantine, Ant, or custom — and uses your existing components rather than creating new ones.

Repo and feedback

Source code is available at github.com/gashiartim/ux-enhancer. The author welcomes feedback and PRs, and is curious if the skill triggers reliably or if the description needs tuning.