jason904/ui-skill-lab/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:

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:

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.