ricocc/rico-skills/rico-ui-ux-themes

[User Input] → [Read Current Project Code] → [Analyze 6 Issues] → [Select Mode] → [Confirm] → [Output]

[Read Current Project] → [Analyze 6 Dimensions] → [Show Menu A/B/C/D] → [User Selects] → [Confirm] → [Output]

📋 6-Dimension Analysis Results
 
1. [⚠️] Color    - Contrast 3.2:1, below WCAG AA
2. [⚠️] Typography - Inter font, unclear hierarchy
3. [⚠️] Spacing  - Inconsistent, no grid system
4. [✓]  Border-radius - Unified style
5. [⚠️] Shadow   - Too heavy
6. [⚠️] Interaction - Missing hover/focus states
 
Select optimization mode:
- a: All (recommended)
- b: Issues only (1,2,3,5,6)
- Or directly input numbers: 1,3 (custom), 3 (single)
 
Enter (a/b or numbers):

📋 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