「考えるな」原則でReactコンポーネントをリファクタリングするClaude Codeのスキル

Claude Codeのための新しいコミュニティ製スキルが、Steve Krugの『Don't Make Me Think』のユーザビリティ原則をReactコンポーネントに適用します。このスキルはデザインシステム（shadcn/ui、MUI、Chakra、Mantine、Ant、またはカスタム）を自動検出し、新しく作り直す代わりに既存のプリミティブを使用します。

機能

このスキルはReactコンポーネントを取得し、以下のようにユーザビリティのためにリファクタリングします：

• ハッピートークや説明文を削除
• 主要なCTAを明確にする
• ローディング/空/エラー状態の行き詰まりを修正
• ラベルを簡潔にする（例：「名前を入力してください」→「名前」）
• 視覚的な階層とスキャン容易性を改善

作者は、Claude（およびほとんどのLLM）が技術的には機能するものの、散らかっていて冗長でスキャンしにくいUIを生成する傾向があるため、このスキルを構築しました。このスキルは、核となる情報だけが残るまで削除することを強制します。

インストール

npx skills add gashiartim/ux-enhancer

フレームワーク非依存

このスキルはデザインシステム（shadcn/ui、MUI、Chakra、Mantine、Ant、またはカスタム）を自動検出し、新しいコンポーネントを作成する代わりに既存のコンポーネントを使用します。

リポジトリとフィードバック

ソースコードは github.com/gashiartim/ux-enhancer で入手できます。作者はフィードバックとPRを歓迎しており、スキルが確実にトリガーされるか、説明の調整が必要かどうか関心を持っています。