AI SummaryUI Skills is an opinionated constraint system for building accessible, performant interfaces with AI agents on Claude Code, covering stack choices, component patterns, interactions, and animation best practices.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "ui-skills" skill in my project. Please run this command in my terminal: # Install skill into the correct directory mkdir -p .claude/skills/ui-agent-constraints && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/ui-agent-constraints/SKILL.md "https://raw.githubusercontent.com/michaelshimeles/ui-agent-constraints/main/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Opinionated constraints for building better interfaces with agents.
UI Skills
When invoked, apply these opinionated constraints for building better interfaces.
How to use
• /ui-skills Apply these constraints to any UI work in this conversation. • /ui-skills <file> Review the file against all constraints below and output: • violations (quote the exact line/snippet) • why it matters (1 short sentence) • a concrete fix (code-level suggestion)
Stack
• MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested • MUST use motion/react (formerly framer-motion) when JavaScript animation is required • SHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS • MUST use cn utility (clsx + tailwind-merge) for class logic
Components
• MUST use accessible component primitives for anything with keyboard or focus behavior (Base UI, React Aria, Radix) • MUST use the project’s existing component primitives first • NEVER mix primitive systems within the same interaction surface • SHOULD prefer Base UI for new primitives if compatible with the stack • MUST add an aria-label to icon-only buttons • NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster