Purpose

Design and implement clean, production-ready UI that improves speed, clarity, and retention.

When to use

Use this skill for:

• dashboard redesigns
• mobile app screens
• landing pages
• onboarding flows
• component system cleanup
• generating graphics or UI assets for app use
• turning mockups into React, React Native, or Next.js code

Do not use this skill for:

• backend APIs
• database migrations
• auth logic with no interface changes

Workflow

1. Inspect the existing app structure, routing, and styling tokens.
2. Identify the screen, primary user goal, and top friction points.
3. Define design direction and hierarchy before changing code.
4. If available, generate a design-system recommendation with UI Pro Max:
   • python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<product + screen + intent>" --design-system --persist -p "<Project Name>" --page "<page-name>" -f markdown
5. If graphics are needed, follow references/image-workflow.md:
   • use focused prompts from references/image-prompts.md
   • generate assets with the configured image model (Nano Banana-compatible flow)
   • save assets in assets/ or product asset folders
6. Build reusable components, not one-off screen blobs.
7. Validate mobile-first behavior, contrast, spacing consistency, and interaction states.
8. Return:
   • UI plan
   • component structure
   • implementation code
   • short UX impact notes

Design rules

• Mobile first
• Clear hierarchy
• Minimal clutter
• Consistent spacing
• Reusable components
• Keep text compact
• Prefer accessible contrast
• Match the product design system if one exists
• Preserve established patterns when working inside an existing product

Output format

1. Summary of the UI goal
2. Proposed layout and UX changes
3. Asset needs, if any
4. Implementation plan
5. Code changes
6. UX impact notes