--- version: "1.0.0" evaluation: programmatic agent: claude-code model: claude-sonnet-4-6 snapshot: python312-uv origin: url: "https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max" source_host: "skills.sh" source_title: "UI/UX Pro Max - Design Intelligence" imported_at: "2026-05-01T00:00:00Z" imported_by: "skill-to-runbook-converter@1.0.0" attribution: collection_or_org: "nextlevelbuilder" skill_name: "ui-ux-pro-max" confidence: "high" --- # UI/UX Pro Max - Design Intelligence — Agent Runbook ## Objective Apply comprehensive UI/UX design intelligence to web and mobile applications by leveraging a curated database of 50+ styles, 161 color palettes, 57 font pairings, 161 product type patterns, 99 UX guidelines, and 25 chart types across 10 technology stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). The agent must analyze user requirements, generate a complete design system, and implement or review UI code using priority-ranked rules for accessibility, touch interaction, performance, and responsive layout. All design decisions must be surfaced with explicit reasoning and documented in the required output files. --- ## REQUIRED OUTPUT FILES (MANDATORY) **All files must be written to `/app/results`. Task is NOT complete until every file exists and is non-empty.** | File | Description | |------|-------------| | `/app/results/design_system.md` | Generated design system: chosen style, color palette, typography, spacing, and component guidance | | `/app/results/ux_review.md` | UX review report with priority-ranked rule violations and recommendations | | `/app/results/component_specs.md` | Component-level specifications for buttons, modals, forms, tables, cards, and charts | | `/app/results/summary.md` | Executive summary with design decisions, stack used, and any issues | | `/app/results/validation_report.json` | Structured validation results with stages, results, and `overall_passed` | --- ## Parameters | Parameter | Value | Description | |-----------|-------|-------------| | Results directory | `/app/results` | Output directory for all generated files | | Target stack | *(required — e.g. `react`, `nextjs`, `vue`, `svelte`, `tailwind`)* | Technology stack for implementation guidance | | Product type | *(required — e.g. `saas`, `dashboard`, `landing-page`, `e-commerce`)* | Product type for design system selection | | Style preference | *(optional — e.g. `glassmorphism`, `minimalism`, `neumorphism`)* | Preferred UI style; agent selects best-fit if omitted | | Mode | *(optional — `light` or `dark`, default `light`)* | Light or dark mode preference | | Search tool path | `python3 src/ui-ux-pro-max/scripts/search.py` | Path to the skill's search script (if available locally) | --- ## Dependencies | Dependency | Type | Required | Description | |------------|------|----------|-------------| | `python3` | CLI | Yes | Run design system search scripts | | `bash` | Shell | Yes | Execute search and setup commands | | `nextlevelbuilder/ui-ux-pro-max-skill` | GitHub repo | Recommended | Source of design data and search scripts | --- ## Step 1: Environment Setup Verify the environment and clone the skill repository if the search scripts are needed. ```bash # Verify Python 3 is available python3 --version || { echo "ERROR: python3 not found"; exit 1; } # Create output directory mkdir -p /app/results # Clone or update the skill repo (required for search scripts) if [ ! -d "/app/results/work/ui-ux-pro-max-skill" ]; then git clone --depth=1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git \ /app/results/work/ui-ux-pro-max-skill fi SKILL_ROOT="/app/results/work/ui-ux-pro-max-skill" SEARCH_CMD="python3 $SKILL_ROOT/src/ui-ux-pro-max/scripts/search.py" echo "Environment ready" echo "Search command: $SEARCH_CMD" ``` Confirm the search script is functional: ```bash $SEARCH_CMD "saas" --domain product -n 3 2>/dev/null || echo "Search script unavailable — proceed with embedded rules" ``` --- ## Step 2: Analyze User Requirements Identify which design triggers apply to the current task. Use the following criteria to determine invocation level: ### Must Invoke This Skill When: - Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App) - Creating or refactoring UI components (buttons, modals, forms, tables, charts) - Choosing color schemes, typography systems, spacing, or layout systems - Reviewing UI code for UX, accessibility, or visual consistency - Implementing navigation structures, animations, or responsive behavior - Making product-level design decisions (style, information hierarchy, brand) - Improving perceived quality, clarity, or usability of interfaces ### Recommended When: - UI looks "not professional enough" but the reason is unclear - Receiving feedback on usability or user experience - Pre-launch UI quality optimization - Aligning cross-platform design (Web / iOS / Android) - Building design systems or reusable component libraries ### Skip When: - Pure backend logic development - API or database design only - Performance optimization unrelated to the interface - Infrastructure or DevOps work - Non-visual scripts or automation tasks **Decision rule**: If the task will change how a feature **looks, feels, moves, or is interacted with**, invoke this skill. Write your determination to `/app/results/summary.md` (initial section). --- ## Step 3: Iterate on Design System Generation (max 3 rounds) Generate a complete design system by querying the search tool for style, color, typography, and product-type recommendations. Combine results into a coherent design system document. ### Step 3a: Product Type Query ```bash # Query product type patterns $SEARCH_CMD "$PRODUCT_TYPE" --domain product -n 5 ``` Expected output: recommended styles, color approaches, component priorities for the product type. ### Step 3b: Style Selection ```bash # Query style details (use the style returned from product query or user preference) $SEARCH_CMD "$STYLE_PREFERENCE" --domain style -n 3 ``` ### Step 3c: Typography ```bash # Query font pairings for the style $SEARCH_CMD "$STYLE_PREFERENCE" --domain typography -n 3 ``` ### Step 3d: Color Palette ```bash # Query color palettes for product type $SEARCH_CMD "$PRODUCT_TYPE" --domain color -n 5 ``` ### Step 3e: Stack-Specific Guidelines ```bash # Query stack-specific best practices $SEARCH_CMD "$TARGET_STACK" --domain stack -n 5 2>/dev/null || \ echo "Stack domain not available — apply embedded React/Next.js rules" ``` After each query round, evaluate whether the design system is complete. Repeat up to **max 3 rounds** if results are insufficient or contradictory. Write the consolidated design system to `/app/results/design_system.md` using this structure: ```markdown # Design System — on ## Chosen Style - Name: