Teach your AI agent beautiful, accessible UI/UX design principles
npx skills add Ethiopian-Cursor-Community/robis-design-best-practice
A Skill is a reusable capability for AI agents. Think of it as a plugin or extension that teaches your AI coding assistant how to perform specific tasks more effectively.
Skills provide procedural knowledge - step-by-step guidance, best practices, code patterns, and domain expertise - that helps agents accomplish tasks they wouldn't know how to do well on their own.
Skills work with popular AI coding agents including Cursor, Claude Code, Windsurf, Cline, GitHub Copilot, and many others. Browse and discover skills at skills.sh.
Today at Dagmawi Babi's Meetup, Robi taught us about good UI/UX design - covering color theory, spacing systems, dark mode handling, animations, and more.
Here's the thing: nowadays, agents are building more than we do.
Your AI agent writes your components, generates your styles, and builds your interfaces. But does it know about low saturation colors? Does it understand why pure black on white causes halation? Does it follow the 4px spacing system?
It doesn't - unless you teach it.
Everything Robi covered in his "Bespoke UI" presentation:
HSL basics, low saturation, WCAG AAA contrast, halation prevention
4px multiples for visual consistency across your UI
Concentric stacking formula for nested elements
Same weight, same size, filled for active states
Borders instead of shadows, desaturated colors
Smooth easings, micro-interactions for premium feel
npx skills add Ethiopian-Cursor-Community/robis-design-best-practiceWhen building designs, reference the skill with /:
/robis-design-best-practice create a card component following best practicesYour agent will now follow the design principles advised by Robi.
We used two skills from Anthropic to create this:
Skills building skills. That's the power of the ecosystem.