version: "1.0.1" name: ui-ux description: SFC patched skill. Use when "ui-ux" is relevant. source: nextlevelbuilder/ui-ux-pro-max-skill source_url: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill license: MIT

SFC v0.1 Required Fields

skeleton: "reference" triggers: commands: ["/ui-ux"] patterns: ["ui-ux"] inputs: required: [] optional: [] outputs: artifacts: ["SKILL.md"] failure_modes:

• symptom: "Missing required inputs or context"

recovery: "Provide the missing info and retry"

• symptom: "Unexpected tool/runtime failure"

recovery: "Rerun with minimal steps; escalate after 3 failures" verification: evidence_required: true how_to_verify: ["node .claude/scripts/sfc_lint.mjs <skill_dir>"] governance: constitution: "_meta/governance/SKILL_CONSTITUTION_v0.1.md" policy: "_meta/policies/DEFAULT_SKILL_POLICY.md"

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

Provide AI-assisted design intelligence for UI/UX decisions, enabling developers to create professional-grade interfaces without deep design expertise.

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

Search uses BM25 algorithm for relevance scoring:

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

Domain Detection

Auto-detects search domain from keywords:

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

Module 04: Methods & SOPs

SOP: Contract-Driven Design

Phase 1: Discover Style

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

Phase 2: Select Colors

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

Phase 3: Choose Typography

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

Phase 4: Generate Contract Use results to fill site-design.contract.yaml:

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

Phase 5: Run Builder

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

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