How do I install the UI UX Pro Max skill?

Run npx skillmds@latest add diegosouzapw/ui-ux-pro-max-13 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the UI UX Pro Max skill do?

Use when designing/reviewing UI or UX for web/mobile products, selecting style/color/typography/layout/animation/chart patterns, or generating stack-specific implementation guidance (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). It is listed under Design & Media on SkillMD.

Is UI UX Pro Max safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI UX Pro Max?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI UX Pro Max free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI UX Pro Max?

diegosouzapw (@diegosouzapw) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI UX Pro Max by diegosouzapw — Agent Skill

Name: UI UX Pro Max
Rating: 4.2 (5 reviews)
Author: diegosouzapw

UI/UX Pro Max - Design Intelligence

Design rules + searchable CLI for style, UX, color, typography, charts, landing patterns, and stack guidance.

When to Apply

New UI/page/component design
UI/UX review and fixes
Design system setup for a project
Stack-specific implementation guidance
Accessibility/performance sanity checks

Priority Order

Priority	Category	Impact	Domain
1	Accessibility	Critical	`ux`
2	Touch/Interaction	Critical	`ux`
3	Performance	High	`ux`
4	Layout/Responsive	High	`ux`
5	Typography/Color	Medium	`typography`, `color`
6	Animation	Medium	`ux`
7	Style Selection	Medium	`style`, `product`
8	Charts/Data	Low	`chart`

Fast Rule Set

Accessibility (critical)

color-contrast: >= 4.5:1 for normal text
focus-states: visible keyboard focus
alt-text: meaningful images only
aria-labels: icon-only controls must have labels
keyboard-nav: tab order matches visual order
form-labels: explicit labels, not placeholder-only

Touch/interaction (critical)

touch-target-size: >= 44x44px
hover-vs-tap: primary action must work on tap/click
loading-buttons: disable during async
error-feedback: field-local and explicit
cursor-pointer: interactive elements only

Performance (high)

image-optimization: WebP/AVIF + responsive srcset + lazy load
reduced-motion: honor prefers-reduced-motion
content-jumping: reserve async space

Layout/responsive (high)

viewport-meta: width=device-width, initial-scale=1
readable-font-size: mobile body >= 16px
horizontal-scroll: no unintentional overflow
z-index-management: explicit scale (10/20/30/50/...)

Typography/color (medium)

semantics-first: type hierarchy follows content roles, not visual decoration
line-height: body typically ~1.2-1.45 for sustained reading; adjust by face/x-height
line-length: prose target ~45-75 chars
font-pairing: heading/body personality alignment
glyph-integrity: true quotes/apostrophes/dashes/ellipsis; no faux styles
break-quality: avoid widows/orphans; monitor rivers/ladders in justified copy

Animation (medium)

duration-timing: 150-300ms micro interactions
transform-performance: prefer transform/opacity
loading-states: skeleton or spinner where wait exists

Style/chart (medium/low)

style-match: style must fit product + audience
consistency: one language across pages
no-emoji-icons: SVG icon sets only
chart-type: match data semantics
data-table: provide accessible tabular fallback

Workflow (Required)

Parse request: product type, keywords, industry, stack.
Run --design-system first.
Add domain searches only if needed.
Add stack guidance (html-tailwind default).
Synthesize and implement.

Commands

Prerequisite

python3 --version || python --version

Required first command

python3 skills/ui-ux-pro-max/scripts/search.py "<product> <industry> <keywords>" --design-system [-p "Project Name"]

Persist design system (recommended)

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" [--page "dashboard"]

Creates:

design-system/MASTER.md: project baseline
design-system/pages/<page>.md: page-level override

Retrieval rule:

Read design-system/MASTER.md
If design-system/pages/<page>.md exists, page file overrides master
If absent, master applies exclusively

Domain search

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Stack search (`html-tailwind` default)

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

Output format

python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

Domains

Domain	Purpose
`product`	Product-type recommendations
`style`	Visual language/effects
`typography`	Font pairings
`color`	Palette by product type
`landing`	Page structure + CTA strategy
`chart`	Chart type/library guidance
`ux`	UX patterns + anti-patterns
`react`	React/Next performance patterns
`web`	Accessibility + interface guidelines
`prompt`	Prompt/CSS keyword guidance

Stacks

Stack	Focus
`html-tailwind`	Utility-first responsive UI (default)
`react`	Hooks/state/render behavior
`nextjs`	Routing/SSR/images
`vue`	Composition API/Pinia/router
`svelte`	Runes/stores/SvelteKit
`swiftui`	View/state/nav/animation
`react-native`	Native components/lists/nav
`flutter`	Widgets/state/layout/theming
`shadcn`	shadcn/ui components + patterns
`jetpack-compose`	Composables/state/recomposition

Common UI Failure Rules

Icons/visuals

Rule	Required	Never
Icon source	SVG sets (Heroicons/Lucide/Simple Icons)	Emoji as UI icon
Hover behavior	Color/opacity transitions	Layout-shifting scale transforms
Brand logos	Official vectors	Guessed/inaccurate marks
Icon sizing	Consistent viewBox and dimensions	Mixed arbitrary sizes

Interaction

Rule	Required	Never
Click affordance	`cursor-pointer` on interactive elements	Default cursor on clickable cards
Feedback	Visible hover/focus/active state	No interaction feedback
Transition	~150-300ms	Instant or >500ms without reason

Light mode contrast

Rule	Required	Never
Transparent cards	Readable opacity (e.g. `bg-white/80`)	Low-opacity glass that kills contrast
Body text	High contrast (e.g. slate-900)	Light gray body text
Muted text	Still readable (>= slate-600 equivalent)	Gray-400 or lighter for body copy
Borders	Visible in light and dark	Near-invisible borders

Layout

Rule	Required	Never
Floating nav	Edge spacing (`top/left/right` offsets)	Hard pin to edges by default
Fixed header	Offset content by header height	Hidden content under navbar
Containers	Consistent max width scale	Random max-width per section

Pre-Delivery Checklist

Visual

No emoji icons
One coherent icon set
Brand logos verified
Hover states do not shift layout
Theme tokens used directly
Type roles mapped to semantics (display/head/body/meta/data)
No faux bold/italic/small-caps or stretched text

Interaction

Clickable elements indicate clickability
Hover/focus feedback present
Motion duration in expected range
Keyboard focus visible

Color/contrast

4.5:1 minimum for normal text
Glass/transparency readable in light mode
Borders visible in both modes
Tested light and dark mode

Layout/responsive

Edge spacing correct for floating/fixed UI
No hidden content behind fixed elements
Tested 375/768/1024/1440 widths
No horizontal mobile scroll

Accessibility

Meaningful image alt text
Form labels present
Color not sole state indicator
prefers-reduced-motion supported

UI UX Pro Max

File contents

UI/UX Pro Max - Design Intelligence

When to Apply

Priority Order

Fast Rule Set

Accessibility (critical)

Touch/interaction (critical)

Performance (high)

Layout/responsive (high)

Typography/color (medium)

Animation (medium)

Style/chart (medium/low)

Workflow (Required)

Commands

Prerequisite

Required first command

Persist design system (recommended)

Domain search

Stack search (`html-tailwind` default)

Output format

Domains

Stacks

Common UI Failure Rules

Icons/visuals

Interaction

Light mode contrast

Layout

Pre-Delivery Checklist

Visual

Interaction

Color/contrast

Layout/responsive

Accessibility

Frequently asked questions

UI UX Pro Max

File contents

UI/UX Pro Max - Design Intelligence

When to Apply

Priority Order

Fast Rule Set

Accessibility (critical)

Touch/interaction (critical)

Performance (high)

Layout/responsive (high)

Typography/color (medium)

Animation (medium)

Style/chart (medium/low)

Workflow (Required)

Commands

Prerequisite

Required first command

Persist design system (recommended)

Domain search

Stack search (html-tailwind default)

Output format

Domains

Stacks

Common UI Failure Rules

Icons/visuals

Interaction

Light mode contrast

Layout

Pre-Delivery Checklist

Visual

Interaction

Color/contrast

Layout/responsive

Accessibility

Related skills

Frequently asked questions

How do I install the UI UX Pro Max skill?

What does the UI UX Pro Max skill do?

Is UI UX Pro Max safe to use?

Which AI agents work with UI UX Pro Max?

Is UI UX Pro Max free to use?

Who published UI UX Pro Max?

Stack search (`html-tailwind` default)