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.
1---2name: ui-ux-pro-max-skill3description: Version: 2.0.04---5Version: 2.0.067# UI/UX Pro Max Skill89This 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.1011## Core Workflow12131. Analyze the user's product, audience, workflow, UI surface, brand tone, and implementation stack.142. Query the local UI/UX Pro Max data before making major design choices.153. Synthesize the results with the existing project design patterns and Codex frontend guidance.164. Implement or review the UI, then verify responsive layout, accessibility, contrast, interaction states, and visual polish.1718## Search Script1920Resolve paths from this skill directory:2122```bash23python3 src/ui-ux-pro-max/scripts/search.py "<query>" --design-system -p "<Project Name>"24python3 src/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> -n 325python3 src/ui-ux-pro-max/scripts/search.py "<query>" --stack <stack> -n 326```2728Use `--design-system` first for new pages, new apps, landing pages, dashboards, or when style direction is unclear.2930Use domain searches for focused detail:3132| Domain | Use For |33| --- | --- |34| `product` | Product category patterns and recommended style direction |35| `style` | Visual style, effects, implementation keywords |36| `color` | Product-aware palettes and semantic color choices |37| `typography` | Font pairings and type mood |38| `landing` | Landing page structure and conversion patterns |39| `chart` | Data visualization choices |40| `ux` | Accessibility, motion, layout, forms, navigation, feedback |41| `react` | React and Next.js performance guidance |42| `web` | Web and app interface accessibility details |43| `icons` | Icon style and library suggestions |44| `google-fonts` | Font discovery |4546Available stacks include `react`, `nextjs`, `vue`, `svelte`, `astro`, `swiftui`, `react-native`, `flutter`, `nuxtjs`, `nuxt-ui`, `html-tailwind`, `shadcn`, `jetpack-compose`, `threejs`, `angular`, and `laravel`.4748## Useful References4950- Upstream metadata: `skill.json`51- Upstream README: `README.md`52- Original Claude skill: `.claude/skills/ui-ux-pro-max/SKILL.md`53- Search data and scripts: `src/ui-ux-pro-max/`54- Codex platform template from upstream: `src/ui-ux-pro-max/templates/platforms/codex.json`5556Load those files only when needed. The README and original skill are large; prefer the search script for targeted results.5758## Quality Checks5960Before final delivery for UI work, check:6162- Text contrast, focus states, semantic labels, and keyboard navigation.63- Mobile layout at small widths and desktop layout at common breakpoints.64- Touch target sizes, hover/pressed/disabled/loading states, and error states.65- Stable dimensions for toolbars, cards, grids, charts, and media.66- Motion duration, reduced-motion behavior, and avoidance of layout shift.67- Consistent icon library, typography scale, spacing scale, and semantic color tokens.
jason904