UI/UX Pro Max Skill

Version: 1.0.0 Source: Fork from nextlevelbuilder/ui-ux-pro-max-skill License: MIT

Module 01: Skill Identity

Core Mission

Value Proposition

• 58+ UI styles with compatibility and performance ratings
• 95+ color palettes categorized by industry
• 56+ typography pairings with Google Fonts integration
• 24+ chart types with accessibility guidance
• 98+ UX guidelines for common anti-patterns

Applicable Scenarios

• Creating new website/app designs
• Filling

  site-design.contract.yaml

  for Builder system
• Choosing color schemes for specific industries
• Selecting typography for brand identity
• Evaluating UX compliance

Boundaries

• Does NOT generate code directly (use Builder for that)
• Does NOT make aesthetic judgments (provides options, user decides)
• Does NOT replace professional design review for production

Module 02: Capability Model

Module 03: Mental Models

BM25 Ranking

• TF-IDF weighting for term importance
• Document length normalization
• Query term frequency saturation

Domain Detection

• "color", "palette" → color domain
• "SaaS", "dashboard" → product domain
• "font", "typography" → typography domain

Module 04: Methods & SOPs

SOP: Contract-Driven Design

python scripts/search.py "modern SaaS dashboard" --domain style

python scripts/search.py "SaaS enterprise" --domain color

python scripts/search.py "professional tech" --domain typography

site-design.contract.yaml

tokens:
  colors:
    primary: "#3B82F6"      # From color search
    background: "#FFFFFF"
  typography:
    primary_font: "Inter"    # From typography search
    heading_font: "Poppins"

npx tsx builders/theme-factory/builder.ts <track-id>

Module 05: Execution Protocols

Pre-Checklist

• User has described target audience
• User has specified industry/domain
• User has indicated mood/tone preference

Decision Logic

IF industry specified → search color with industry keyword
ELIF mood specified → search style with mood keyword
ELSE → search product with general keyword

Quality Standards

• Always provide 3+ options for user choice
• Include accessibility ratings in recommendations
• Note performance implications for complex styles

Module 06: Output Structure

Style Recommendation Template

## Recommended Style: [Style Name]

**Why this style:**
- [Reason 1]
- [Reason 2]

**Colors:**
- Primary: [hex] - [usage]
- Background: [hex] - [usage]

**Typography:**
- Heading: [font name]
- Body: [font name]

**Performance:** [rating]
**Accessibility:** [rating]

Module 07: Templates & Prompts

Activation Prompt

Search UI/UX Pro Max for design recommendations:
- Industry: [specify]
- Style preference: [modern/classic/playful/professional]
- Color mood: [warm/cool/vibrant/muted]

Quick Start

# Find styles for SaaS
python scripts/search.py "SaaS modern" --domain style

# Find colors for healthcare
python scripts/search.py "healthcare trust" --domain color

# Find typography for tech startup
python scripts/search.py "startup tech" --domain typography

Module 08: Tools Access

Required Tools

• Python 3.x (no external dependencies)
• CSV data files in

  data/

  directory

Knowledge Assets

styles.csv

colors.csv

typography.csv

charts.csv

ux-guidelines.csv

icons.csv

Integration Points

• Builder system reads Contract, this Skill helps write Contract
• Assembler can trigger this Skill via keywords

Module 09: Evaluation & Scoring

Output Quality Metrics

• Relevance: Does recommendation match user intent?
• Completeness: Are all required fields covered?
• Actionability: Can user directly use in Contract?

Pass Criteria

• At least 1 relevant result per search
• Accessibility rating provided
• Performance impact noted

Module 10: Feedback & Evolution

Evolution Triggers

• New UI style trends emerge
• Framework compatibility changes
• User feedback on missing categories

Version History

Upstream Sync

# Check for updates
cd /tmp && git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
# Compare data/ directory