skills.rest
Ethiopian-Cursor-Community
Ethiopian-Cursor-CommunityOFFICIAL
Explore all skills by this author →
GitHub

robis-design-best-practice

Apply UI/UX design principles for accessible interfaces with WCAG AAA contrast.

3|Updated Jan 24, 2026
Search Tags:#ui#accessibility#design principles#color theory#animation#ux#spacing
One-click install
npx skills add https://github.com/Ethiopian-Cursor-Community/robis-design-best-practice --skill robis-design-best-practice
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: robis-design-best-practice
Source: https://github.com/Ethiopian-Cursor-Community/robis-design-best-practice/tree/main/robis-design-best-practice
Command: npx skills add https://github.com/Ethiopian-Cursor-Community/robis-design-best-practice --skill robis-design-best-practice

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides AI agents with expert knowledge of modern UI/UX design principles, ensuring the creation of beautiful, accessible, and user-friendly interfaces.

Core Features & Use Cases

  • Design Principle Guidance: Offers comprehensive rules for color theory, spacing, typography, and more.
  • Code Review & Generation: Assists in building UI components and reviewing designs against best practices.
  • Use Case: When building a new UI component, an AI agent can reference this Skill to ensure consistent spacing, appropriate color contrast for accessibility, and a harmonious visual hierarchy.

Quick Start

Apply Robi's UI design principles to create a new card component.

Frequently Asked Questions about robis-design-best-practice

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What UI design principles ensure accessible color contrast and spacing?▼

Accessible UI design principles enforce WCAG AAA contrast ratios using HSL color theory and apply 4px-based spacing systems. These rules prevent visual halation and establish a harmonious, accessible visual hierarchy for interface components.

How do I build a dark mode UI without relying on shadows?▼

Build dark mode UI by utilizing border stacking for depth instead of shadows. Dark mode strategies prioritize subtle borders over drop shadows to define component elevation and maintain visual clarity in low-light interfaces.

What is the best way to standardize border radius and icon consistency in UI components?▼

Standardize UI components by applying border radius stacking rules and maintaining strict icon consistency. This ensures uniform visual styling across all interface elements and simplifies component generation.

How does animation easing affect UI micro-interactions?▼

Animation easing controls the temporal flow of UI micro-interactions to create natural movement. Applying specific easing curves prevents robotic transitions and enhances the perceived responsiveness of user interface elements.

Can I use these UX design principles to review existing UI code?▼

Yes, you can use these UX design principles to review existing UI code. The guidelines assist in auditing designs against best practices for color contrast, spacing systems, and visual hierarchy.

Related Skills

Explore More Design & Creative Skills→
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
joshkellett87joshkellett87

ui-design-system

Generate design tokens and documentation for scalable UI systems.

Community
Advanced
lord-vinayaklord-vinayak

contrast-checker

Calculate color contrast ratios and evaluate WCAG 2.2 compliance.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic