Contraintes avisées pour créer de meilleures interfaces avec les agents. À utiliser lors de la création de composants d'interface utilisateur, de la mise en œuvre d'animations, de la conception de mises en page, de la révision de l'accessibilité du frontend ou de l'utilisation de Tailwind CSS, motion/react ou de primitives accessibles telles que Radix/Base UI.
Installez rapidement le skill IA ui-design dans votre environnement de développement via la ligne de commande
Source : ckorhonen/claude-skills.
| Tailwind CSS | MUST use defaults (spacing, radius, shadows) before custom values | | Animation library | MUST use motion/react (formerly framer-motion) for JS animation | | CSS animation | SHOULD use tw-animate-css for entrance and micro-animations | | Class logic | MUST use cn utility (clsx + tailwind-merge) |
| Interactive primitives | MUST use accessible primitives (Base UI, React Aria, Radix) for keyboard/focus behavior | | Existing components | MUST use project's existing primitives first | | Consistency | NEVER mix primitive systems within the same interaction surface | | New primitives | SHOULD prefer Base UI if compatible with stack |
| Icon buttons | MUST add aria-label to icon-only buttons | | Custom behavior | NEVER rebuild keyboard or focus behavior by hand unless explicitly requested |
Champs et commandes stables pour les citations IA/recherche.
npx skills add https://github.com/ckorhonen/claude-skills --skill ui-designContraintes avisées pour créer de meilleures interfaces avec les agents. À utiliser lors de la création de composants d'interface utilisateur, de la mise en œuvre d'animations, de la conception de mises en page, de la révision de l'accessibilité du frontend ou de l'utilisation de Tailwind CSS, motion/react ou de primitives accessibles telles que Radix/Base UI. Source : ckorhonen/claude-skills.
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/ckorhonen/claude-skills --skill ui-design Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw
https://github.com/ckorhonen/claude-skills