| name | ui-ux-pro-max-skill |
| description | Use for UI/UX design intelligence in Codex: planning, building, reviewing, improving, or implementing web/mobile interfaces, landing pages, dashboards, design systems, components, accessibility, color palettes, typography, spacing, motion, charts, responsive layouts, and stack-specific frontend guidance. Provides searchable UI/UX Pro Max data with product patterns, 67 UI styles, 161 color palettes, 57 font pairings, UX guidelines, chart recommendations, and framework guidance. |
Version: 2.0.0
UI/UX Pro Max Skill
This is a Codex adapter for nextlevelbuilder/ui-ux-pro-max-skill. Use it when a task changes how an interface looks, feels, moves, responds, or is understood by users.
Core Workflow
- Analyze the user's product, audience, workflow, UI surface, brand tone, and implementation stack.
- Query the local UI/UX Pro Max data before making major design choices.
- Synthesize the results with the existing project design patterns and Codex frontend guidance.
- Implement or review the UI, then verify responsive layout, accessibility, contrast, interaction states, and visual polish.
Search Script
Resolve paths from this skill directory:
python3 src/ui-ux-pro-max/scripts/search.py "<query>" --design-system -p "<Project Name>"
python3 src/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> -n 3
python3 src/ui-ux-pro-max/scripts/search.py "<query>" --stack <stack> -n 3
Use --design-system first for new pages, new apps, landing pages, dashboards, or when style direction is unclear.
Use domain searches for focused detail:
| Domain | Use For |
|---|
product | Product category patterns and recommended style direction |
style | Visual style, effects, implementation keywords |
color | Product-aware palettes and semantic color choices |
typography | Font pairings and type mood |
landing | Landing page structure and conversion patterns |
chart | Data visualization choices |
ux | Accessibility, motion, layout, forms, navigation, feedback |
react | React and Next.js performance guidance |
web | Web and app interface accessibility details |
icons | Icon style and library suggestions |
google-fonts | Font discovery |
Available stacks include react, nextjs, vue, svelte, astro, swiftui, react-native, flutter, nuxtjs, nuxt-ui, html-tailwind, shadcn, jetpack-compose, threejs, angular, and laravel.
Useful References
- Upstream metadata:
skill.json
- Upstream README:
README.md
- Original Claude skill:
.claude/skills/ui-ux-pro-max/SKILL.md
- Search data and scripts:
src/ui-ux-pro-max/
- Codex platform template from upstream:
src/ui-ux-pro-max/templates/platforms/codex.json
Load those files only when needed. The README and original skill are large; prefer the search script for targeted results.
Quality Checks
Before final delivery for UI work, check:
- Text contrast, focus states, semantic labels, and keyboard navigation.
- Mobile layout at small widths and desktop layout at common breakpoints.
- Touch target sizes, hover/pressed/disabled/loading states, and error states.
- Stable dimensions for toolbars, cards, grids, charts, and media.
- Motion duration, reduced-motion behavior, and avoidance of layout shift.
- Consistent icon library, typography scale, spacing scale, and semantic color tokens.
