Ui Ux Pro Max
Ship accessible, performant user interfaces with opinionated palettes, typography, charts, and stack-specific implementation guidance before you code screens.
Overview
UI/UX Pro Max is an agent skill most often used in Build (also Validate and Ship) that delivers full UI/UX design intelligence—styles, palettes, typography, UX rules, charts, and accessible implementation guidance across
Install
npx skills add https://github.com/pixel-process-ug/superkit-agents --skill ui-ux-pro-maxWhat is this skill?
- Phase 1 requirements gathering with a hard stop to confirm scope before design recommendations
- Non-negotiable priority order: accessibility (WCAG 2.1 AA/AAA), then performance, then aesthetics
- Coverage spans styles, color palettes, typography, UX heuristics, chart selection, and multi-stack implementation
- Triggers on design, UI, UX, palettes, typography, accessibility, responsive design, and style guides
- Production-ready guidance filtered for contrast ratios and keyboard navigation compliance
- WCAG 2.1 AA minimum with AAA preferred
- 4.5:1 contrast for normal text and 3:1 for large text
Adoption & trust: 873 installs on skills.sh; 1 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a user-facing interface but lack a coherent, accessible, performant design system and keep guessing palettes, type, and chart choices.
Who is it for?
Solo builders or agents starting or refactoring web, mobile, or desktop UI who need enforced accessibility-first design decisions and stack-aware implementation notes.
Skip if: Teams that already have a locked design system and only need pixel-perfect Figma handoff, or backend-only APIs with no user interface.
When should I use this skill?
User needs full UI/UX design intelligence—styles, palettes, fonts, UX guidelines, chart selection, accessible performant implementation; triggers include design, UI, UX, color palette, typography, accessibility, responsi
What do I get? / Deliverables
After requirements are confirmed, you get prioritized, production-ready design and implementation guidance that respects WCAG and performance budgets before frontend work proceeds.
- Confirmed requirements brief
- Style, palette, and typography recommendations
- UX and chart guidance with accessibility-first implementation notes
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
User-facing interface work lives in Build; this skill is the canonical shelf for design intelligence that drives frontend implementation. Front-end surfaces, responsive layout, and visual systems are the primary deliverable—aligned with the frontend subphase.
Where it fits
Lock palette, type scale, and layout rules for a landing prototype before investing in full frontend build.
Choose component styles and chart types for a dashboard the agent will implement in your stack.
Re-check contrast ratios and interaction patterns against performance budgets before release.
Draft a lightweight style guide section for README or internal docs alongside the UI.
How it compares
Use as a structured design-intelligence workflow instead of ad-hoc chat requests for colors and fonts without accessibility gates.
Common Questions / FAQ
Who is ui-ux-pro-max for?
Solo and indie builders shipping SaaS, mobile, or extension UIs with Claude Code, Cursor, or similar agents who want opinionated, accessible design guidance—not generic aesthetic suggestions.
When should I use ui-ux-pro-max?
In Validate when scoping a prototype’s look-and-feel; in Build frontend when choosing styles, typography, and charts; and in Ship perf/accessibility passes when you need WCAG-aligned contrast and keyboard navigation checks before launch.
Is ui-ux-pro-max safe to install?
Review the Security Audits panel on this Prism page for install hash and audit status; the skill is procedural design guidance and does not inherently require trading keys or shell access.
SKILL.md
READMESKILL.md - Ui Ux Pro Max
# UI/UX Pro Max ## Overview A comprehensive UI/UX design intelligence system that combines visual design expertise with engineering rigor. This skill provides opinionated, production-ready guidance covering style selection, color palettes, typography, UX heuristics, data visualization, and multi-stack implementation. Every recommendation is filtered through a strict priority hierarchy that ensures accessibility and performance are never sacrificed for aesthetics. ## Phase 1: Requirements Gathering 1. Identify the product type and target audience 2. Determine platform(s) (web, mobile, desktop) 3. Assess existing brand guidelines or design system 4. Define accessibility requirements 5. Set performance budgets **STOP — Confirm requirements with user before making design recommendations.** ### Priority Hierarchy (Non-Negotiable Order) Do NOT skip or reorder these priorities. Accessibility always comes first. 1. **Accessibility** — WCAG 2.1 AA minimum, AAA preferred - Contrast ratio: 4.5:1 for normal text, 3:1 for large text - Keyboard navigation: all interactive elements focusable, visible focus ring - ARIA labels on all non-text controls - Screen reader announcements for dynamic content - Reduced motion: respect `prefers-reduced-motion` 2. **Touch Targets** — 44x44px minimum (Apple HIG / WCAG 2.5.5) - Spacing between targets: minimum 8px - Clickable area may exceed visual bounds via padding 3. **Performance** - Images: WebP with AVIF fallback, lazy loading below fold - CLS < 0.1, LCP < 2.5s, FID < 100ms - Font loading: `font-display: swap`, preload critical fonts - Bundle: code-split routes, tree-shake unused components 4. **Style** — Applied only after 1-3 are satisfied 5. **Layout** — Composition and spacing applied last ## Phase 2: Style Selection **STOP — Present style recommendation with rationale before proceeding to implementation.** ### Style Selection Decision Table | Context | Recommended Styles | Why | |---|---|---| | SaaS Dashboard | Minimalism, Swiss, Material 3 | Clean, data-focused, professional | | Portfolio | Brutalism, Maximalism, Glassmorphism | Expressive, memorable | | E-commerce | Clean, Material 3, Swiss | Trust, clarity, conversion | | Mobile App | Material 3, Neumorphism, Minimalism | Native feel, thumb-friendly | | Landing Page | Glassmorphism, Neo-Brutalism, Japandi | Visual impact, hero focus | | Enterprise/B2B | Swiss Design, Minimalism | Authority, information density | | Creative Agency | Maximalism, Brutalism, Cyberpunk | Uniqueness, portfolio showcase | | Health/Wellness | Japandi, Minimalism | Calming, trustworthy | | Finance | Swiss, Material 3 | Conservative, professional | | Kids/Family | Claymorphism, Maximalism | Playful, engaging | ### Style Reference (Key Categories) **Glass and Transparency:** - Glassmorphism: `backdrop-filter: blur(10px)`, semi-transparent backgrounds, subtle border - Frosted Glass: heavier blur (20px+), lower opacity, works on busy backgrounds - Acrylic (Fluent Design): noise texture overlay + blur **Minimal and Clean:** - Minimalism: maximum whitespace, single accent color, limited element count - Swiss Design: grid-based, Helvetica/Grotesk, asymmetric balance - Japandi: warm neutrals, organic shapes, hidden complexity **Bold and Expressive:** - Brutalism: raw, exposed structure, system fonts, harsh borders, no border-radius - Neo-Brutalism: brutalism + bright accent colors + drop shadows - Maximalism: layered textures, mixed fonts, dense information **Depth and Dimension:** - Neumorphism: soft inner/outer shadows o