83.3K+Download
Skip to the usage guide
ui-ux-pro-maxby nextlevelbuilder

UI UX Pro Max Skill.

A Claude Code and Codex skill for UI design: uI/UX design intelligence for web, mobile, and desktop: layout, color, type, and UX rules.

  • Web & UI
  • UI code
Download OpenDesignView usage guide
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
Front matter and section headings read from the upstream file on 2026-09-14 · 15,922 characters in full

01 What it does

What the ui-ux-pro-max Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

UI/UX Pro Max is a searchable design intelligence skill for web, mobile, and desktop interfaces. It queries 79 styles (50 active), 192 product palettes with reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 technology stacks. Use it to design pages, choose color and typography, review UI for accessibility and consistency, implement navigation and animation, or improve usability.

It auto-detects stack from package.json, pubspec.yaml, or xcodeproj and generates a design system with optional persistence for cross-session retrieval. Three design dials (variance, motion, density) tune the output. The skill provides domain-specific searches for UX, color, typography, icons, GSAP, and stack-specific implementation guidance.

What it produces

  • Design system with pattern, style, colors, typography, effects, and anti-patterns in ASCII, markdown, or JSON format
  • design-system/project-slug/pages/page-name.md for page-specific overrides when --page is passed
  • Domain-specific results (UX guidelines, color palettes, font pairings, icons, GSAP presets, chart recommendations, stack implementation guidance)
See the example prompt ↗

How It Works

  1. 01
    Analyze Requirements

    Extract product type (SaaS, e-commerce, dashboard), target audience, style keywords (playful, minimal, dark mode), and detect stack from package.json, pubspec.yaml, xcodeproj, or app.json.

  2. 02
    Generate Design System

    Run search.py with --design-system for new pages or projects.

  3. 03
    Persist as Master Plus Overrides

    Add --persist and --output-dir pointed at project root to write design-system/project-slug/MASTER.md. Page-specific overrides go in pages/page-name.md.

  4. 04
    Supplement with Domain Searches

    Query a single domain (ux, color, typography, icons, gsap, chart, landing, google-fonts) with 2-5 meaningful terms and one constraint.

  5. 05
    Query Stack Guidelines

    Use --stack with the detected stack (react, nextjs, vue, swiftui, flutter, etc.) for implementation-specific guidance.

  6. 06
    Check pre-delivery Rules

    Before delivering app UI, read references/pro-rules.md and run through its canonical Pre-Delivery Checklist covering icon discipline, interaction feedback, light/dark contrast, safe-area layout, and accessibility for native/mobile app UI.

02 Find your fit

When to Use the ui-ux-pro-max Skill

Use the ui-ux-pro-max skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Designing new pages or creating and refactoring UI components
  • Choosing color, typography, spacing, or layout systems
  • Reviewing UI for UX, accessibility, or consistency
  • Implementing navigation, animation, or responsive behavior
  • Improving perceived quality and usability of an interface

Know the Boundaries

  • Pure backend logic, API or database design
  • Non-visual performance work, infrastructure, or DevOps
  • Non-visual scripts unless the task changes how something looks, feels, moves, or is interacted with

What to Provide

  • Product type and audienceSaaS, e-commerce, portfolio, dashboard, entertainment, tool, or productivity, plus age group and usage context (commute, leisure, work)
  • Style keywordsPlayful, vibrant, minimal, dark mode, content-first, immersive, or other adjectives describing the desired visual direction
  • Project name for persistencePass -p "Project Name" to --design-system to name the design-system subdirectory and MASTER.md file
  • Design dials (optional)Three 1-10 sliders: --variance (centered to bold/asymmetric), --motion (subtle to complex choreography), --density (spacious to dense/dashboard spacing scale)

03 Inside the skill

Rules the ui-ux-pro-max Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Accessibility First

    Priority 1 (CRITICAL). Ensure contrast 4.5:1, alt text, keyboard navigation, and aria-labels. Never remove focus rings or use icon-only buttons without labels.

  2. Touch Targets 44×44px Minimum

    Priority 2 (CRITICAL). Touch and interaction must have min size 44×44px, 8px+ spacing, and loading feedback. Avoid reliance on hover only and instant state changes (0ms).

  3. Retry Once on Empty Results

    If search returns 0 results, retry once with a narrower query or explicit domain/stack.

  4. Use Smallest Search Mode

    Choose --design-system for new project or page, one explicit --domain for targeted concern or component bug, --stack for known implementation stack.

  5. Never Assume a Stack

    Detect stack from package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json, or app.json. If nothing is detectable and stack guidance matters, ask the user.

  6. Invoke Search by Full Path

    Always run python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" with full path, not relative.

  7. Do Not Overwrite Master Without Authorization

    If design-system/project-slug/MASTER.md exists, --persist skips writing and leaves it untouched unless --force is passed.

  8. Query Semantic Outcome Before Stack

    For text-layout and compact-component bugs, search the semantic UX outcome first (orphan heading line balance, badge chip label wraps), then the detected stack for implementation.

04 Put it to work

Install ui-ux-pro-max in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add ui-ux-pro-max to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Generic skills CLI form for .claude/skills/ui-ux-pro-max/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Verify the returned domain, top result identity, and fit for the user's product and platform before applying search results
  • Retry once with a narrower rewrite or explicit domain/stack when output is empty or off-topic.
  • Read an existing MASTER.md before deciding whether --force is justified to regenerate it
  • For accessibility work, query one observable outcome at a time using explicit accessibility outcome terms and verify the result matches the specific interaction or WCAG criterion

In OpenDesign ui-ux-pro-max is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill file
.claude/skills/ui-ux-pro-max/SKILL.md Content checksum recorded at verification; commit 7f69fed
License
MIT From LICENSE.
Repository stars
127,450 GitHub snapshot taken 2026-09-14 for the whole nextlevelbuilder/ui-ux-pro-max-skill repository, which contains 7 skills in this catalog. Not a rating or usage count for ui-ux-pro-max.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to ApplyUse for UI structure, visual design, interaction, UX quality. Skip for backend, API, infrastructure.
  2. Rule Categories by Priority10 categories from Accessibility (CRITICAL) to Charts (LOW) with key checks and anti-patterns
  3. Running the search toolInvoke search.py by full path from skill directory. Requires Python 3.x, no external dependencies.
  4. Query ContractChoose smallest search mode. One dominant intent, 2-5 terms, verify domain/fit, retry once if empty.
  5. Step 1: Analyze User RequirementsExtract product type, audience, style keywords, and detect stack from package.json or equivalent.
  6. Step 2: Generate Design SystemUse --design-system for new pages/projects. Aggregates product/style/color/landing/typography matches.
  7. Step 2b: Persist Design SystemAdd --persist and --output-dir to write MASTER.md. Existing Master skipped unless --force authorized.
  8. Step 2c: Design DialsOptional 1-10 sliders for variance, motion, density to tune --design-system output.
  9. Step 3: Supplement with Detailed SearchesQuery product, style, color, typography, google-fonts, chart, ux, landing, icons, gsap, react, web domains.
  10. Step 4: Stack GuidelinesUse --stack with detected stack for implementation-specific guidance. 22 stacks available.
  11. If a search returns 0 resultsRetry once with narrower query. If still empty, fall back to priority table and tell user.
  12. Tips for Better ResultsOne intent, 2-5 terms per query. Retry once. Use --design-system for new, --domain for focused.
The Skill's Own Description
“UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.”

Front-matter description from SKILL.md. The full file is about 15,922 characters. Read the full file on GitHub.

06 Before you install

Questions About the ui-ux-pro-max Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What does the skill need to run?

The search script requires Python 3.x with no external dependencies. It must be invoked by its full path from the skill directory using python, python3, or py -3. The README contains install instructions if Python is missing.

How do I override the design system for a specific page?

Pass --page "page-name" when persisting to create design-system/project-slug/pages/page-name.md. When building that page, the agent reads MASTER.md first, then checks if pages/page-name.md exists. If it does, its rules override Master. Otherwise Master rules are used exclusively.

UI UX Pro Max

Run ui-ux-pro-max on a Real UI Design Task.

The ui-ux-pro-max skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max