/rico-ui-ux-themes

name: rico-ui-ux-themes
description: |
  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".
license: MIT
metadata:
  author: RicoUI (@ricouii)
  version: 1.0.0
  user-invocable: true

rico-ui-ux-themes

UI/UX design optimization toolkit with 20 built-in themes and custom theme generation.

Workflow

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

**CRITICAL EXECUTION RULES:** 1. **NEVER** show welcome message or greeting 2. **ALWAYS** show selection menu A/B/C/D before execution 3. **ALWAYS** wait for user input after showing menu 4. **ALWAYS** confirm before making any changes 5. **NEVER** skip steps or auto-execute without user confirmation

**Key Notes:**

• Automatically read code from current working directory when triggered (e.g., "optimize this project/page/design"). No need to ask "which project".
• Language Rule: Detect from initial trigger (e.g., "rico 优化" = Chinese, "rico optimize" = English), then maintain consistent language throughout.
• Project mode detection: Only generate missing light/dark mode if explicitly requested; never force switch.
• Integration: Uses webReader (fetch URLs), Read/Write tools (code operations). All require confirmation.

4 Interaction Patterns

| 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 |

Triggers and Interaction Patterns

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.

Selection Menu (Full Flow)

When user triggers "rico optimize", the workflow is:

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

**IMPORTANT:** Show the menu immediately after reading code. Do NOT ask "what do you want to do" or show welcome message.

Show Selection Menu

• **A.** Optimize by design principles (no specific style)
• **B.** Select from built-in themes (20 themes)
• **C.** Generate theme from industry reference
• **D.** Custom theme (URL or from project)

Enter option (A/B/C/D):

---

Option A: Design Principles

User inputs: A

📋 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):

**Confirmation Dialog:**

📋 Ready to Optimize: Spacing

Actions:
• Establish unified 4pt grid
• Adjust gaps and margins
• Optimize whitespace rhythm

Confirm? (y/n)

---

Option B: Built-in Themes

User inputs: B

📊 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:

**After theme selection:**

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)

Option C: Industry Reference

User inputs: C

📊 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
   • Ent