# UI UX Pro Max Skill

> Version: 2.0.0

- Skill: `jason904/ui-ux-pro-max-skill` (Agent Skill, multi-file: 323 files)
- Install (CLI): `npx skillmds@latest add jason904/ui-ux-pro-max-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jason904/ui-ux-pro-max-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jason904 (https://skillmd.com/u/jason904)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jason904/ui-ux-pro-max-skill

---

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

1. Analyze the user's product, audience, workflow, UI surface, brand tone, and implementation stack.
2. Query the local UI/UX Pro Max data before making major design choices.
3. Synthesize the results with the existing project design patterns and Codex frontend guidance.
4. Implement or review the UI, then verify responsive layout, accessibility, contrast, interaction states, and visual polish.

## Search Script

Resolve paths from this skill directory:

```bash
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.