ui-ux-pro-max

Stars10

Forks1

UpdatedMay 30, 2026 at 06:06

Senior UI/UX craft pass for web frontends. Use when the user asks to upgrade, polish, redesign, or "make it premium/pro" — applies design-token systems, visual hierarchy, spacing rhythm, accessible color/contrast, motion restraint, and responsive layout. Best for React/Tailwind/CSS projects.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

KpG782

KpG782/3D_Portfolio

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	ui-ux-pro-max
description	Senior UI/UX craft pass for web frontends. Use when the user asks to upgrade, polish, redesign, or "make it premium/pro" — applies design-token systems, visual hierarchy, spacing rhythm, accessible color/contrast, motion restraint, and responsive layout. Best for React/Tailwind/CSS projects.

UI/UX Pro Max

A disciplined senior-designer pass over a web UI. Goal: make it look intentional, premium, and accessible — never decorated for its own sake.

When to use

Invoke when the user wants to "upgrade the UI/UX", "make it pro/premium", "redesign", or polish an existing interface.

Method (work in this order)

Audit first, change second. Read the actual components and global styles. List concrete problems (hardcoded colors, inconsistent spacing, weak hierarchy, poor contrast, no focus states) before editing. Show the audit to the user.
Establish a token system. Define color, spacing, radius, shadow, and type scale ONCE (CSS variables / Tailwind theme). Never hardcode the same hex in ten components. Light and dark must both derive from tokens.
Hierarchy & rhythm.
- One clear focal point per section; size/weight/color reinforce it.
- Consistent vertical rhythm (a spacing scale: 4/8/12/16/24/32/48/64).
- Max line length ~70ch for body text; generous line-height (1.5–1.7).
Color & contrast. Body text ≥ 4.5:1, large text ≥ 3:1 (WCAG AA). Use a restrained palette: 1 brand + neutrals + 1–2 accents. Gradients are a seasoning, not a main course.
Components, not snowflakes. Buttons, cards, chips, inputs should be reusable classes/components with consistent padding, radius, and states (hover/active/focus/disabled).
Motion with restraint. Short (150–350ms), eased, purposeful. Always honor prefers-reduced-motion.
Responsive & touch. Test mental models at 360px, 768px, 1280px. Tap targets ≥ 44px. No horizontal overflow.
Accessibility is non-negotiable. Visible :focus-visible rings, semantic landmarks, alt/aria-label, labels tied to inputs, skip link.

Definition of done

No duplicated hardcoded colors; everything flows from tokens.
Consistent spacing/type scale across sections.
AA contrast, visible focus, reduced-motion respected.
Build passes; nothing regressed. Show before/after notes.

More from this repository

same repository

brainstorming

KpG782/3D_Portfolio

Diverge then converge on ideas before building. Use when the user wants options, concepts, directions, or "ideas for X" — generates multiple distinct approaches, pressure-tests them against goals/constraints, then recommends one with rationale. Pairs well with ui-ux-pro-max and goal.

2026-05-3010

context-7

KpG782/3D_Portfolio

Verify code against current, real library documentation before using an API. Use when working with a specific library/framework version and you must not guess APIs. Encourages checking official docs/types for the installed version. NOTE - the real Context7 is an MCP server; see setup notes below to enable live doc lookup.

2026-05-3010

frontend-design

KpG782/3D_Portfolio

Translate a design intent into clean, idiomatic frontend code. Use when building or refactoring UI components — enforces composition, design tokens, responsive layout, accessibility, and matching the surrounding codebase's conventions. For React/Vue/Tailwind/CSS work.

2026-05-3010

goal

KpG782/3D_Portfolio

Clarify and pursue a goal end-to-end. Use when the user states an outcome they want achieved ("make my portfolio showcase me as X", "get this shippable"). Restates the goal, defines success criteria, plans steps, executes, and verifies the goal was actually met.

2026-05-3010

impeccable

KpG782/3D_Portfolio

A rigorous correctness-and-detail finishing pass. Use when the user wants work to be "impeccable", flawless, production-grade, or polished to a high standard — verifies builds/lints/tests pass, hunts edge cases, checks accessibility and consistency, and refuses to claim done without proof.

2026-05-3010

taste

KpG782/3D_Portfolio

Apply restrained design taste to a UI. Use when the user wants the interface to feel tasteful, elegant, minimal, or "not overdesigned" — favors simplicity, whitespace, a tight palette, subtle motion, and removing decoration that doesn't earn its place.

2026-05-3010

name	ui-ux-pro-max
description	Senior UI/UX craft pass for web frontends. Use when the user asks to upgrade, polish, redesign, or "make it premium/pro" — applies design-token systems, visual hierarchy, spacing rhythm, accessible color/contrast, motion restraint, and responsive layout. Best for React/Tailwind/CSS projects.

UI/UX Pro Max

A disciplined senior-designer pass over a web UI. Goal: make it look intentional, premium, and accessible — never decorated for its own sake.

When to use

Invoke when the user wants to "upgrade the UI/UX", "make it pro/premium", "redesign", or polish an existing interface.

Method (work in this order)

Audit first, change second. Read the actual components and global styles. List concrete problems (hardcoded colors, inconsistent spacing, weak hierarchy, poor contrast, no focus states) before editing. Show the audit to the user.
Establish a token system. Define color, spacing, radius, shadow, and type scale ONCE (CSS variables / Tailwind theme). Never hardcode the same hex in ten components. Light and dark must both derive from tokens.
Hierarchy & rhythm.
- One clear focal point per section; size/weight/color reinforce it.
- Consistent vertical rhythm (a spacing scale: 4/8/12/16/24/32/48/64).
- Max line length ~70ch for body text; generous line-height (1.5–1.7).
Color & contrast. Body text ≥ 4.5:1, large text ≥ 3:1 (WCAG AA). Use a restrained palette: 1 brand + neutrals + 1–2 accents. Gradients are a seasoning, not a main course.
Components, not snowflakes. Buttons, cards, chips, inputs should be reusable classes/components with consistent padding, radius, and states (hover/active/focus/disabled).
Motion with restraint. Short (150–350ms), eased, purposeful. Always honor prefers-reduced-motion.
Responsive & touch. Test mental models at 360px, 768px, 1280px. Tap targets ≥ 44px. No horizontal overflow.
Accessibility is non-negotiable. Visible :focus-visible rings, semantic landmarks, alt/aria-label, labels tied to inputs, skip link.

Definition of done

No duplicated hardcoded colors; everything flows from tokens.
Consistent spacing/type scale across sections.
AA contrast, visible focus, reduced-motion respected.
Build passes; nothing regressed. Show before/after notes.