Vincoli supponenti per costruire migliori interfacce con gli agenti. Da utilizzare durante la creazione di componenti dell'interfaccia utente, l'implementazione di animazioni, la progettazione di layout, la revisione dell'accessibilità del frontend o l'utilizzo di Tailwind CSS, motion/react o primitive accessibili come Radix/Base UI.
Installa rapidamente la skill AI ui-design nel tuo ambiente di sviluppo tramite riga di comando
Fonte: 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 |
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/ckorhonen/claude-skills --skill ui-designVincoli supponenti per costruire migliori interfacce con gli agenti. Da utilizzare durante la creazione di componenti dell'interfaccia utente, l'implementazione di animazioni, la progettazione di layout, la revisione dell'accessibilità del frontend o l'utilizzo di Tailwind CSS, motion/react o primitive accessibili come Radix/Base UI. Fonte: ckorhonen/claude-skills.
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/ckorhonen/claude-skills --skill ui-design Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
https://github.com/ckorhonen/claude-skills