ui-ux

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

Capability	Description	Proficiency
Style Discovery	Find UI styles matching requirements	High
Color Recommendation	Suggest palettes by industry/mood	High
Typography Pairing	Match fonts for heading/body	High
Chart Selection	Choose visualization types for data	Medium
UX Audit	Identify anti-patterns and issues	Medium
Stack Guidelines	Framework-specific best practices	Medium

---

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

Asset	File	Records
Styles	styles.csv	58
Colors	colors.csv	95
Typography	typography.csv	56
Charts	charts.csv	24
UX Guidelines	ux-guidelines.csv	98
Icons	icons.csv	100

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

Version	Date	Changes
1.0.0	2026-01-14	Initial fork from UI UX Pro Max

Upstream Sync

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