# Robi's Design Best Practice Skill

A comprehensive UI/UX design skill for AI coding agents, teaching beautiful, accessible interface design principles.

[![Skills](https://img.shields.io/badge/skills.sh-install-blue)](https://skills.sh/)

## What This Skill Teaches

This skill provides AI agents with expert knowledge of modern UI/UX design principles, covering:

- **Color Theory** - HSL basics, low saturation palettes, dark mode adjustments, WCAG AAA contrast
- **Spacing Systems** - 4px-based spacing for visual consistency
- **Border Radius** - Concentric stacking formulas for nested elements
- **Icon Consistency** - Avoiding mixed weights and styles
- **Shadows & Dark Mode** - Using borders and color instead of shadows
- **Animation** - Smooth easings and micro-interactions
- **Layout Alternatives** - Beyond tables and cards
- **Design Inspiration** - Where to learn and develop taste

## Installation

Install this skill using the skills CLI:

```bash
npx skills add robimez/robi-design-best-practice
```

Or add the skill manually to your `.cursor/skills/` directory.

## Usage

Once installed, the AI agent will automatically reference these design principles when:

- Building UI components
- Reviewing designs
- Choosing colors or spacing
- Implementing animations
- Discussing layout options

### Example Prompts

```
"Create a card component following Robi's design principles"
"Review this UI for design best practices"
"Generate a low-saturation color palette for dark mode"
"Help me fix the spacing in this component"
```

## What's Included

### SKILL.md
Core design principles with:
- Quick reference checklist
- Color guidelines (HSL, WCAG, halation prevention)
- Spacing system (4px multiples)
- Border radius stacking
- Icon consistency rules
- Shadow alternatives for dark mode
- Animation and micro-interactions
- Layout alternatives
- Design inspiration resources

### examples.md
Comprehensive code examples featuring:
- Tailwind color palettes with low saturation
- Dark mode color adjustments
- WCAG AAA contrast examples
- Spacing utilities and patterns
- Border radius stacking code
- Icon usage with Phosphor Icons
- Animation examples (CSS & Framer Motion)
- Micro-interactions (buttons, inputs, checkboxes, toasts)
- Layout alternatives (Kanban, Bento, Timeline, Masonry)
- Complete component example combining all principles

## Key Principles

### Don't Do This
- Oversaturated "vibe code" colors that strain eyes
- Pure black (#000000) or pure white (#FFFFFF)
- Mixing icon weights (duotone, fill, regular, thin)
- Using shadows in dark mode
- Linear animations (y=x)
- Random spacing values

### Do This Instead
- Low saturation colors (aim for 20-40% saturation)
- Tinted blacks and whites to prevent halation
- Consistent icon weights with filled variants for active states
- Borders and color variations in dark mode
- Smooth cubic-bezier easings
- 4px-based spacing system

## Based On

This skill is derived from Robi's "Bespoke UI" presentation, covering essential design principles for modern web applications. The guidelines emphasize:

1. **Avoiding "purple internet" problem** - oversaturated UIs harm user experience
2. **Accessibility first** - WCAG AAA contrast standards
3. **Mathematical consistency** - 4px spacing system, concentric border radius
4. **Thoughtful dark mode** - desaturate and lighten colors, use borders not shadows
5. **Premium feel** - micro-interactions and smooth animations
6. **Learning from the best** - study Linear, Notion, Supabase

## Resources Referenced

- [kigen.design/color](https://kigen.design/color) - HSL color tools
- Design inspiration: Pinterest, Twitter, cosmos.so, Behance, Dribbble

## Contributing

Found an issue or want to improve this skill? Open an issue or pull request!

## License

MIT License - feel free to use and modify for your projects.

---

**Made by [@robimez](https://robi.work)** | Presented at Dagmawi Babi's Meetup