OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add ricocc/rico-skills --skill rico-ui-ux-themes
UI/UX design optimization toolkit with 20 built-in themes and custom theme generation. Applies design systems with color, typography, spacing optimization for any tech stack. Use when user says "rico optimize", "rico 优化设计", "rico use style", "rico 用风格", "rico theme","rico 应用主题", "rico 生成主题", "rico design".
npx skills add ricocc/rico-skills --skill rico-ui-ux-themes
UI/UX design optimization toolkit with 20 built-in themes and custom theme generation.
CRITICAL EXECUTION RULES:
Key Notes:
| Pattern | Trigger Examples |
|---|---|
| Full Flow | rico optimize, rico 优化网站设计 |
| Direct Apply | rico use Claude style, rico 用 Claude 风格 |
| Generate Theme | rico create theme: stripe.com |
| Natural Language | rico make it more vibrant |
All commands use rico prefix. Supports 4 patterns:
| Pattern | Trigger Examples | Brief Flow |
|---|---|---|
| Full Flow | rico optimize, rico 优化, rico 优化网站设计, rico improve this page design, rico 让页面更好看 | [Read Code] → [Analyze] → [Menu A/B/C/D] → [Select] → [Confirm] → [Output] |
| Direct Apply | rico use [theme-name] style, rico 用 [主题名] 风格, rico 用 Claude 风格优化, rico use Minimal Blue colors + Neo-Brutalist borders | [Load Theme] → [Preview] → [Confirm] → [Apply] |
| Generate Theme | rico create theme: [URL], rico 制作主题：[URL], rico 参考 [URL] 做主题 | [Fetch URL] → [Extract] → [Generate Doc] → [Save] → [Confirm Apply?] |
| Theme Management | rico list themes, rico 有哪些主题, rico show [theme-name], rico 看看 [主题名] | [List/Show] → No further steps unless apply |
Natural Language Support: e.g., "rico make it more vibrant" → Map to Full Flow or Direct Apply based on intent.
When user triggers "rico optimize", the workflow is:
IMPORTANT: Show the menu immediately after reading code. Do NOT ask "what do you want to do" or show welcome message.
Enter option (A/B/C/D):
User inputs: A
Confirmation Dialog:
User inputs: B
After theme selection:
User inputs: C
User inputs: 1
📋 Actions: • Fetch stripe.com design features • Analyze color, typography, spacing system • Generate theme file • Apply to current project
Confirm? (y/n)
User inputs: D
If option 2 (generate from project):
AI response:
User inputs: 1
AI response: Analyzing project design features... Generating theme file...
✅ Theme saved to: references/styles/my-brand.md
Apply to optimization? (y/n)
[URL] → [webReader fetch] → [Extract design] → [Generate 14-chapter doc] → [Save]
User Input: rico apply [theme-name] ↓ ┌──────────────────────────────────────────┐ │ 1. Load theme from references/styles/ │ │ 2. Detect theme mode (light/dark) │ │ 3. Switch project to theme's mode │ ← Key: Apply dark → switch to dark │ 4. Analyze code: 6-dimension check │ │ 5. Apply theme colors, spacing, etc. │ │ 6. Generate optimized code │ │ 7. Explain key decisions │ └──────────────────────────────────────────┘
rico use Minimal Blue colors + Neo-Brutalist borders
rico create theme: example.com User: Colors too dark → AI: Adjusting lighter... User: Larger border-radius → AI: Increasing to 12px...
[Read code] → [Analyze 6 dimensions] → [Show menu A/B/C/D] → [User selects] → [Confirm] → [Generate]
[Load claude.md] → [Show style preview] → [Confirm] → [Apply to code]
[Fetch stripe.com] → [Extract design] → [Generate doc] → [Save] → [Confirm] → [Apply?]
📋 Ready to Optimize: Spacing
Actions:
• Establish unified 4pt grid
• Adjust gaps and margins
• Optimize whitespace rhythm
Confirm? (y/n)📊 Project Analysis
Detected: SaaS / Enterprise App
Style: Professional, clean, data-driven
🎯 Recommended Themes:
• 6. Professional Blue ⭐
→ Style: Stable blue + clear hierarchy
→ Match: 95%
• 1. Claude
→ Style: Warm white + ocher orange
→ Match: 88%
• 8. Dashboard Clean
→ Style: Clean admin, data-focused
→ Match: 85%
• 7. Trust Finance
→ Style: Deep blue + gold
→ Match: 82%
• 2. Minimal Blue
→ Style: Dark BG + blue accent
→ Match: 78%
• Enter number to select
• Enter L to view all themes (built-in + user-created)
Enter:
Selected: 5. Agent Dark (Dark theme)
📋 Style Features:
• Deep black background + vibrant purple accent
• Modern & creative
• Best for: AI agents, creative tools
• Mode: Dark (single mode)
🔧 Actions:
• Apply dark background (#0A0A0B)
• Add purple accent (#A855F7)
• Optimize border-radius to 8px
Confirm? (y/n)📊 Project Type Detection
Detected: SaaS / Enterprise
(If incorrect, enter correct type)
🌐 Industry Reference Websites:
1. stripe.com
→ Style: Deep blue + gold accents, professional
→ Features: Minimal, whitespace, clear hierarchy
2. linear.app
→ Style: Dark BG + purple gradient, modern tech
→ Features: Refined interaction, subtle animation
3. notion.so
→ Style: White BG + minimal, content-first
→ Features: Clean, efficient, distraction-free
4. figma.com
→ Style: Colorful gradient + vibrant purple
→ Features: Creative, professional, collaborative
5. vercel.com
→ Style: B&W minimal + neon gradient
→ Features: Cool, modern, developer-friendly
• Enter number to select
• Enter URL to use custom website
• Enter n to skip
Enter:🎨 Custom Theme
1. Input URL
→ Example: apple.com
2. Generate from current project
→ Extract existing design
Enter option (1/2) or URL:📋 Actions:
• Analyze current project design features
• Extract color, typography, spacing system
• Generate theme file
Enter theme name: [my-brand]
Save location:
1. Current project
→ references/styles/my-brand.md
→ Project-only access
2. User global directory
→ ~/.rico/themes/my-brand.md
→ Available for all projects
Enter (1/2):
**Option D Notes:**
- Supports URL input or generate from current project
- When generating from project, ask for theme name and save location
- Save location options: project or global
---
## 6-Dimension Analysis Framework
For detailed guidelines, see `references/docs/`.
| Dimension | Check Points | Reference |
|-----------|--------------|-----------|
| **1. Color** | Contrast (WCAG AA 4.5:1), brand usage ≤10%, saturation, light/dark mode | color.md |
| **2. Typography** | Hierarchy, line-height, font weight, alignment | typography.md |
| **3. Spacing** | Grid system (4pt), whitespace, alignment | layout.md |
| **4. Border-radius** | Consistency, unified style | component.md |
| **5. Shadow** | Hierarchy, meaning, avoid generic | component.md |
| **6. Interaction** | 8 states (default/hover/focus/active/disabled/loading/error/success), feedback | motion.md |
### Quick Analysis Checklist
| Issue Type | Common Problems |
|------------|-----------------|
| Color | Low contrast, color abuse, washout on colored bg |
| Typography | Inconsistent sizes, line-height, mixed fonts |
| Spacing | No grid, cramped, misaligned |
| Border-radius | Inconsistent sizes, mixed styles |
| Shadow | Too heavy, meaningless, generic |
| Interaction | Missing states, weak feedback |
For complete audit methodology, see `references/docs/polish.md`.
## Design Anti-Patterns
Based on Impeccable design principles:
### Visual
- **DON'T** use gray text on colored backgrounds → use tinted shade
- **DON'T** use pure black (#000) or white (#fff) → always tint
- **DON'T** use "AI color palette" (cyan-on-dark, purple gradients)
- **DON'T** overuse brand colors → accent ≤10%
### Layout
- **DON'T** wrap everything in cards
- **DON'T** nest cards inside cards
- **DON'T** center everything → asymmetry feels more designed
### Typography
- **DON'T** use overused fonts (Inter, Roboto, Arial)
- **DON'T** use too many similar font sizes → muddy hierarchy
### Motion
- **DON'T** use bounce easing → feels dated
- **DON'T** animate layout properties → use transform only
- **DON'T** ignore prefers-reduced-motion
### The AI Slop Test
If someone says "AI made this" and it's immediately obvious → that's the problem.
Distinctive design makes people ask "how was this made?" not "which AI?"
---
## Built-in Themes
**Theme Sources:**
- Built-in: 20 themes stored in `references/styles/`
- User-created: Any `.md` file in `references/styles/` is automatically available
When user creates a new theme (Option D), it is automatically added to the theme list.
### Developer Tools
| Theme | Description | Best For |
|-------|------------|----------|
| Claude | Warm white + ocher orange, rational & warm | AI products, dev tools |
| Minimal Blue | Dark BG + blue accent, minimal | Code editors, assistants |
| Marketplace Dark | Dark + code aesthetics | Dev marketplaces |
| SaaS Dark | Monitoring dark, real-time | DevOps, monitoring |
| Agent Dark | Deep black + vibrant purple | AI agents, creative |
### Business & Enterprise
| Theme | Description | Best For |
|-------|------------|----------|
| Professional Blue | Stable blue + clear hierarchy | SaaS, B2B |
| Trust Finance | Deep blue + gold | Fintech, banking |
| Dashboard Clean | Clean admin, data-focused | Enterprise dashboards |
### Creative Design
| Theme | Description | Best For |
|-------|------------|----------|
| Retro Vibrant | High saturation + bold | Fashion, art |
| Creative Gallery | Image grid + visual first | Portfolios, galleries |
| Neo-Brutalist | Bold borders + solid shadows | Creative agencies |
| Creative Vitality | Vibrant orange + gradients | Creative studios |
### Media & Culture
| Theme | Description | Best For |
|-------|------------|----------|
| Radio Static | B&W + TV static | Podcasts, radio |
| Record Club | Vinyl aesthetic + warm | Music platforms |
### Commerce
| Theme | Description | Best For |
|-------|------------|----------|
| Vibrant Commerce | Orange-red + yellow | E-commerce, retail |
### Brand Styles
| Theme | Description | Best For |
|-------|------------|----------|
| Airbnb | Warm coral + whitespace | Travel, hospitality |
| Linear | Sleek dark + refined | Productivity tools |
| Notion | Clean minimal + content | Documentation |
| Duolingo | Playful bright + gamified | Education |
| Spotify | Dark + vibrant green | Music streaming |
---
## Theme Generation
### Workflow
### Reference Documents
Use these docs from `references/docs/` when generating themes:
- **themes-guide.md** - 14-chapter template for theme structure
- **color.md** - Color system guidelines
- **typography.md** - Typography rules
- **layout.md** - Spacing/grid system
- **component.md** - Component design standards
- **motion.md** - Animation principles
- **polish.md** - 6-dimension audit framework
### Generated Theme Structure (14 Chapters)
Every generated theme includes:
1. **Design Philosophy** (设计核心理念)
- Brand concept / Design philosophy
- Core keywords (3-5)
- Why this design?
2. **Color System + Usage Guidelines** (颜色系统 + 使用原则)
- Primary, background, text, accent colors
- When to use each color
- Usage proportion rules
- Common mistakes
3. **Interaction Philosophy** (交互理念)
- Animation principles
- Feedback mechanisms
- Transition timing
4. **Layout Principles** (布局原则)
- Spacing strategy (grid system)
- Whitespace principles
- Content max-width
5. **Component Design Decisions** (组件设计决策)
- Why this height/radius/color?
- Design rationale
6. **Application Scenarios** (应用场景)
- Suitable project types
- Adjustments for different scenarios
7. **Common Mistakes** (避免的误区)
- 5+ common errors
- Negative checklist
Plus 7 more chapters covering typography, spacing, shadows, components, animations, and use cases.
### Save Location
- Project: `references/styles/[theme-name].md`
- Global: `~/.rico/themes/[theme-name].md`
---
## Theme Application Workflow
**Theme Mode Application Rule:**
| Project Mode | Theme Mode | Action |
|--------------|------------|--------|
| Single (light/dark) | Dual (both) | Use only project's existing mode colors |
| Single (light/dark) | Single | Apply theme's defined mode |
| Dual (both) | Any | Apply theme's defined mode |
**Never force switch mode.** Theme's dual-mode is "supported", not "required".
### Analysis Dimensions
AI checks these design dimensions:
1. **Color** - Contrast ratios, saturation, brand color usage, light/dark theme support, tinted neutrals
2. **Typography** - Font size, line-height, weight, font family
3. **Spacing** - Grid system, whitespace, compactness
4. **Border Radius** - Size consistency, style unity
5. **Shadow** - Weight, consistency, meaningful
6. **Interaction** - Button/link states, animations, feedback
7. **Icons** - All original icons preserved (SVG, icon fonts, images)
8. **Gradients** - All gradient backgrounds preserved
---
## Design Reference Files
Located in `references/docs/`:
- **color.md** - Color design reference
- **component.md** - Component design reference
- **layout.md** - Layout design reference
- **motion.md** - Animation design reference
- **polish.md** - Design audit reference
- **themes-guide.md** - Theme generation prompt template
- **typography.md** - Typography design reference
---
### Mode Detection
| Project Mode | Theme Support | Action |
|--------------|---------------|--------|
| Dual-mode | Both defined | Generate CSS variables for both |
| Light-only | Any | Apply light mode only (don't auto-add dark) |
| Dark-only | Any | Apply dark mode only (don't auto-add light) |
**Note:** Only generate missing mode if user explicitly requests it. Don't auto-generate dark/light mode unless asked.
### Key Decisions to Explain
- Theme mode strategy
- Icon handling (preserve vs adapt)
- Gradient handling (preserve vs adapt)
- Impeccable principles applied
---
## Technical Stack Support
Auto-adapt to: React, Vue, Angular, HTML, Sass/SCSS, Tailwind, Next.js, Mini Programs
| Stack | Support | Handling |
|-------|---------|----------|
| React | Full | JSX, styled-components, CSS Modules |
| Vue | Full | Vue SFC, scoped styles |
| Angular | Full | Component styles |
| HTML/CSS | Full | CSS variables |
| Sass/SCSS | Full | Variables, mixins |
| Tailwind | Full | Theme config |
| Mini Programs | Full | rpx, custom components |
---
## Best Practices
### Choosing Theme
| Project Type | Recommended Themes |
|--------------|-------------------|
| Developer Tools | Claude, Minimal Blue, Marketplace Dark |
| AI Agents | Agent Dark, Creative Vitality |
| Enterprise | Professional Blue, Trust Finance |
| Creative Brands | Retro Vibrant, Neo-Brutalist |
| Audio/Music | Radio Static, Record Club, Spotify |
| E-commerce | Vibrant Commerce |
| Brand Style | Airbnb, Linear, Notion |
### Combining Themes
### Fine-tuning
---
## Output Format
Generated code includes:
1. **CSS Variables** - Complete system with OKLCH color space
2. **Component Styles** - Button, input, card, nav adapted to theme
3. **Responsive Design** - Mobile, tablet, desktop breakpoints
4. **Accessibility** - WCAG 2.1 AA compliant
5. **Code Comments** - Key design decisions explained
6. **Motion** - prefers-reduced-motion support
**Always include decision summary:**
- Theme mode strategy
- Icon/gradient handling rationale
- Impeccable principles applied
---
## Quick Examples
### User: rico optimize this website
### User: rico use Claude style
### User: rico create theme: stripe.com