Agent skill

UI UX Pro Max

UI/UX design intelligence expert for web and mobile applications.

Install UI UX Pro Max

skills CLI

$ npx skills add shobcoder/shob --skill ui-ux-pro-max -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install shobcoder/shob ui-ux-pro-max --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/shobcoder/shob.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-ux-pro-max .claude/skills/ui-ux-pro-max && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "ui-ux-pro-max" agent skill from https://github.com/shobcoder/shob/tree/main/skills/ui-ux-pro-max into .claude/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/shobcoder/shob/tree/main/skills/ui-ux-pro-max

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add shobcoder/shob --skill ui-ux-pro-max -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install shobcoder/shob ui-ux-pro-max --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shobcoder/shob.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ui-ux-pro-max .agents/skills/ui-ux-pro-max && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ui-ux-pro-max" agent skill from https://github.com/shobcoder/shob/tree/main/skills/ui-ux-pro-max into .agents/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add shobcoder/shob --skill ui-ux-pro-max -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install shobcoder/shob ui-ux-pro-max --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shobcoder/shob.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ui-ux-pro-max .cursor/skills/ui-ux-pro-max && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ui-ux-pro-max" agent skill from https://github.com/shobcoder/shob/tree/main/skills/ui-ux-pro-max into .cursor/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/shobcoder/shob.git --path skills/ui-ux-pro-max

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add shobcoder/shob --skill ui-ux-pro-max -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install shobcoder/shob ui-ux-pro-max --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shobcoder/shob.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ui-ux-pro-max .gemini/skills/ui-ux-pro-max && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ui-ux-pro-max" agent skill from https://github.com/shobcoder/shob/tree/main/skills/ui-ux-pro-max into .gemini/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install shobcoder/shob ui-ux-pro-max

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add shobcoder/shob --skill ui-ux-pro-max -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/shobcoder/shob.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ui-ux-pro-max .github/skills/ui-ux-pro-max && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ui-ux-pro-max" agent skill from https://github.com/shobcoder/shob/tree/main/skills/ui-ux-pro-max into .github/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add shobcoder/shob --skill ui-ux-pro-max -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install shobcoder/shob ui-ux-pro-max --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shobcoder/shob.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ui-ux-pro-max .opencode/skills/ui-ux-pro-max && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ui-ux-pro-max" agent skill from https://github.com/shobcoder/shob/tree/main/skills/ui-ux-pro-max into .opencode/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ui-ux-pro-max
GitHub stars: 577
Token cost: ~3.7k tokens
SKILL.md length: 1,469 words
Files: 1
Skills in repo: 6
Repo updated: Sep 18, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

UI/UX design intelligence expert for web and mobile applications.

Works in 4 steps: Analyze User Requirements → Generate Design System → Implementation Guidelines → …
Designing interfaces
SKILL.md covers Workflow, Priority Rules, Quick Style Selector by… and Color Palettes by Industry, plus 2 more sections
Reaches fonts.googleapis.com

What it does

UI UX Pro Max is an agent skill from shobcoder/shob. UI/UX design intelligence expert for web and mobile applications. Use when designing interfaces, selecting color palettes, typography, visual styles, building landing pages, dashboards, or reviewing code for UX issues. Covers 50+ design styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 9 tech stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).

Its SKILL.md is about 3.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design, Typography and Theming and dark mode. It works with React, Flutter, Vue.js and Tailwind CSS. The repository describes itself as: Shob – an AI agent that delivers high-quality coding & automation work. The licence is MIT.

When your agent uses it

Designing interfaces
Selecting color palettes
Building landing pages
Reviewing code for UX issues

Example prompts

“/ui-ux-pro-max”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

Analyze User Requirements
Generate Design System
Implementation Guidelines
Pre-Delivery Verification

What it can do on your machine

Read from SKILL.md and the folder at commit 14831ba. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are css).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- fonts.googleapis.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI UX Pro Max loads about 3.7k tokens when it runs. Until then it costs about 108 tokens; SKILL.md has 1,469 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~108
When it runs · the whole SKILL.md, loaded when a task matches: ~3.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from shobcoder/shob at commit 14831ba, republished under its MIT licence (© shobcoder). 1,469 words, ~3,744 tokens.

Download SKILL.mdSave it as .claude/skills/ui-ux-pro-max/SKILL.md (or your agent's skills folder).

name: ui-ux-pro-max
description: UI/UX design intelligence expert for web and mobile applications. Use when designing interfaces, selecting color palettes, typography, visual styles, building landing pages, dashboards, or reviewing code for UX issues. Covers 50+ design styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 9 tech stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).

UI/UX Pro Max - Design Intelligence Expert

Comprehensive UI/UX design guide for web and mobile applications. Provides intelligent design recommendations based on product type, industry, and user requirements. Reference these guidelines when designing new UI, choosing colors and typography, reviewing code for UX issues, or implementing features.

Workflow

Step 1: Analyze User Requirements

Extract from user request:

Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
Style keywords: minimal, playful, professional, elegant, dark mode, etc.
Industry: healthcare, fintech, gaming, education, beauty, etc.
Tech stack: React, Vue, Next.js, Svelte, Flutter, or html-tailwind (default)

Step 2: Generate Design System

Consult the reference data below (and CSV files in data/) for:

Recommended patterns and section layouts
Primary visual style with effects
Color palette (primary, secondary, CTA, background, text)
Typography pairing (heading + body fonts with Google Fonts URL)
Key effects and anti-patterns to avoid

Step 3: Implementation Guidelines

Apply stack-specific best practices from the reference data:

HTML/Tailwind utilities, responsive breakpoints
React hooks, state management, performance patterns
Vue Composition API, Pinia state
Flutter widgets, themes, navigation
Accessibility requirements (WCAG compliance)

Step 4: Pre-Delivery Verification

Run through all checklists (visual quality, interaction, light/dark mode, layout, accessibility) before delivering any UI code.

Priority Rules

Priority	Category	Impact
1	Accessibility	CRITICAL - Color contrast 4.5:1, focus states, aria-labels
2	Touch & Interaction	CRITICAL - 44x44px touch targets, cursor-pointer
3	Performance	HIGH - Image optimization, lazy loading
4	Layout & Responsive	HIGH - Mobile-first, viewport meta
5	Typography & Color	MEDIUM - Line height 1.5-1.75, readable fonts
6	Animation	MEDIUM - 150-300ms duration, transform-only
7	Style Selection	MEDIUM - Match style to product type

Quick Style Selector by Product Type

Product Type	Primary Style	Secondary Styles	Color Mood
SaaS (General)	Minimalism	Flat Design, Glassmorphism	Trust blue + accent contrast
E-commerce	Neo-Brutalism	Bento Grid, Dark Mode	Brand primary + success green
E-commerce Luxury	Luxury Minimal	Dark Mode, Elegant	Premium black + gold accents
Healthcare	Soft Minimalism	Flat Design, Organic	Calm blue + health green
Fintech/Crypto	Cyberpunk	Dark Mode, Glassmorphism	Dark tech + vibrant accents
Gaming	Neon Glow	Cyberpunk, Dark Mode	Vibrant + neon + immersive
Portfolio/Creative	Editorial	Brutalism, Asymmetric	Brand primary + artistic
Dashboard	Corporate Tech	Flat Design, Data-Dense	Cool→Hot gradients + neutral
AI/Chatbot	Aurora Gradients	Glassmorphism, Dark Mode	Neutral + AI Purple (#6366F1)
Beauty/Spa/Wellness	Organic Shapes	Soft Minimalism, Elegant	Soft pastels + natural tones

Color Palettes by Industry

SaaS / Business

Role	Hex	Tailwind
Primary	#2563EB	blue-600
Secondary	#3B82F6	blue-500
CTA	#F97316	orange-500
Background	#F8FAFC	slate-50
Text	#1E293B	slate-800
Border	#E2E8F0	slate-200

E-commerce Luxury

Role	Hex	Tailwind
Primary	#1C1917	stone-900
Secondary	#44403C	stone-700
CTA	#CA8A04	yellow-600
Background	#FAFAF9	stone-50
Text	#0C0A09	stone-950
Border	#D6D3D1	stone-300

Healthcare

Role	Hex	Tailwind
Primary	#0891B2	cyan-600
Secondary	#22D3EE	cyan-400
CTA	#059669	emerald-600
Background	#ECFEFF	cyan-50
Text	#164E63	cyan-900
Border	#A5F3FC	cyan-200

Fintech / Crypto

Role	Hex	Tailwind
Primary	#F59E0B	amber-500
Secondary	#FBBF24	amber-400
CTA	#8B5CF6	violet-500
Background	#0F172A	slate-900
Text	#F8FAFC	slate-50
Border	#334155	slate-700

Gaming

Role	Hex	Tailwind
Primary	#7C3AED	violet-600
Secondary	#A78BFA	violet-400
CTA	#F43F5E	rose-500
Background	#0F0F23	custom-dark
Text	#E2E8F0	slate-200
Border	#4C1D95	violet-900

AI / Chatbot Platform

Role	Hex	Tailwind
Primary	#7C3AED	violet-600
Secondary	#A78BFA	violet-400
CTA	#06B6D4	cyan-500
Background	#FAF5FF	violet-50
Text	#1E1B4B	indigo-950
Border	#DDD6FE	violet-200

Beauty / Spa / Wellness

Role	Hex	Tailwind
Primary	#DB2777	pink-600
Secondary	#F472B6	pink-400
CTA	#059669	emerald-600
Background	#FDF2F8	pink-50
Text	#831843	pink-900
Border	#FBCFE8	pink-200

Typography Pairings

Professional / Corporate

Heading: Inter | Body: Inter

css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Best for: SaaS, dashboards, business apps

Elegant / Luxury

Heading: Playfair Display | Body: Lato

css

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');

Best for: Luxury brands, editorial, high-end e-commerce

Modern / Tech

Heading: Space Grotesk | Body: DM Sans

css

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

Best for: Tech startups, fintech, AI products

Friendly / Playful

Heading: Poppins | Body: Open Sans

css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

Best for: Education, consumer apps, lifestyle brands

Editorial / Creative

Heading: Fraunces | Body: Source Sans 3

css

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

Best for: Blogs, magazines, portfolios

Healthcare / Wellness

Heading: Outfit | Body: Nunito

css

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');

Best for: Healthcare, wellness, medical apps

Visual Styles Reference

Minimalism

Colors: Monochrome + 1 accent, high whitespace
Effects: Subtle shadows, clean borders, micro-interactions
Best For: SaaS, productivity, professional apps
Keywords: clean, simple, whitespace, subtle, elegant

Glassmorphism

Colors: Translucent layers, blur effects, gradient backgrounds
Effects: backdrop-blur, bg-white/10, soft shadows
Best For: Modern dashboards, music apps, portfolios
Keywords: glass, blur, translucent, frosted, layered

Neumorphism

Colors: Soft pastels, same-hue shadows (dark/light)
Effects: Inset shadows, extruded elements, soft depth
Best For: Control panels, calculators, music players
Keywords: soft, embossed, extruded, tactile, 3D-soft

Dark Mode

Colors: Dark backgrounds (#0F172A), light text, accent colors
Effects: Subtle borders, glows on focus, reduced eye strain
Best For: Developer tools, media apps, gaming
Keywords: dark, night, low-light, contrast, modern

Bento Grid

Colors: Card-based with distinct backgrounds per section
Effects: Grid layouts, varying card sizes, clear hierarchy
Best For: Feature showcases, portfolios, dashboards
Keywords: grid, cards, modular, organized, showcase

Aurora / Gradient Mesh

Colors: Multi-color gradients, mesh blending, vibrant
Effects: Animated gradients, color transitions, depth
Best For: AI products, creative tools, landing pages
Keywords: aurora, gradient, mesh, colorful, flowing

Brutalism

Colors: High contrast, raw colors, bold primaries
Effects: Heavy borders, raw typography, intentionally rough
Best For: Creative agencies, art portfolios, bold brands
Keywords: raw, bold, stark, unpolished, striking

Landing Page Patterns

Hero-Centric (Conversion Focus)

Sections: Hero > Social Proof > Features > CTA

Primary CTA above fold
Trust badges near CTA
Single focused message

Feature-Forward (Product Demo)

Sections: Hero > Feature Grid > How It Works > Pricing > CTA

Visual product demos
Benefits over features
Comparison tables for pricing

Story-Driven (Brand Building)

Sections: Hero > Problem > Solution > Journey > Team > CTA

Emotional connection first
Customer success stories
Brand narrative flow

Show full SKILL.md (595 more words)Show less

Sections: Hero > Logos > Testimonials > Case Studies > CTA

Client logos prominent
Video testimonials
Stats and numbers

Chart Type Selection

Data Type	Best Chart	When to Use
Trend Over Time	Line Chart	Time-series, growth, progress
Compare Categories	Bar Chart	Rankings, comparisons
Part-to-Whole	Donut Chart	Percentages, proportions (≤5 items)
Correlation	Scatter Plot	Relationships, patterns
Geographic	Choropleth Map	Regional data, locations
Funnel/Flow	Funnel Chart	Conversion, process stages
Performance	Gauge/Bullet	KPIs, targets
Hierarchical	Treemap	Nested categories, proportions

Chart Color Guidance:

Primary data: #2563EB (blue-600)
Success/Growth: #22C55E (green-500)
Warning/Alert: #F59E0B (amber-500)
Error/Decline: #EF4444 (red-500)
Neutral: #94A3B8 (slate-400)

For detailed chart data (25 chart types with library recommendations, accessibility notes, and interactive levels), see data/design-data.csv.

Accessibility Requirements (CRITICAL)

Color Contrast

Normal text: 4.5:1 minimum ratio
Large text (18px+): 3:1 minimum ratio
Interactive elements: Clear focus states

Touch Targets

Minimum size: 44x44px for touch devices
Spacing: 8px minimum between targets

Focus States

css

/* Always visible focus ring */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

Reduced Motion

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Form Labels

Every input MUST have associated label
Use <label for="id"> or aria-label
Error messages near the problem field

Common UX Anti-Patterns (AVOID)

Icons

NO: Using emojis as UI icons
YES: Use SVG icons (Heroicons, Lucide, Simple Icons)

Hover States

NO: Scale transforms that shift layout
YES: Color/opacity transitions only

Cursors

NO: Default cursor on clickable elements
YES: cursor-pointer on all interactive elements

Light Mode Glass

NO: bg-white/10 (too transparent, invisible)
YES: bg-white/80 or higher opacity

Z-Index

NO: Random z-index values (999, 9999)
YES: Defined scale: 10 (default), 20 (dropdown), 30 (modal), 50 (toast)

Animations

NO: Slow animations (>500ms) or layout-shifting
YES: 150-300ms duration, transform/opacity only

Stack-Specific Guidelines

HTML + Tailwind CSS

Use utility classes, avoid custom CSS
Responsive: sm:, md:, lg:, xl: breakpoints
Dark mode: dark: variant
Always include cursor-pointer on buttons/links

React

Use memo() for expensive components
Prefer useMemo/useCallback for stable references
Avoid inline functions in render
Use Suspense for code splitting

Next.js

Use next/image for automatic optimization
Implement dynamic imports for heavy components
Use next/font for optimized font loading
Leverage Server Components where possible

Vue 3

Use Composition API with <script setup>
Pinia for state management
defineProps with TypeScript
Lazy load routes with dynamic imports

Flutter

Use const constructors for static widgets
ListView.builder for long lists
Dispose controllers in dispose()
Use Theme.of(context) for consistent theming

SwiftUI

Use @State for local state, @StateObject for reference types
Prefer .task over .onAppear for async
Use LazyVStack for long lists
Support Dynamic Type for accessibility

For comprehensive stack-specific guidelines (99 rules across Flutter, SwiftUI, and more), see data/stack-guidelines.csv.

Response Style

When designing interfaces:

Present the design system first with all recommendations
Show color swatches with hex values and usage
Include Google Fonts import code ready to use
Provide code examples following stack best practices
Explain design decisions with reasoning

Pre-Delivery Checklist

Visual Quality

No emojis as icons (use SVG: Heroicons, Lucide, Simple Icons)
All icons from consistent icon set
Brand logos verified from official sources
Hover states don't cause layout shift

Interaction

All clickable elements have cursor-pointer
Hover states provide clear visual feedback
Transitions are smooth (150-300ms)
Focus states visible for keyboard navigation

Light/Dark Mode

Light mode text has sufficient contrast (4.5:1 minimum)
Glass/transparent elements visible in light mode
Borders visible in both modes

Layout

Floating elements have proper spacing from edges
No content hidden behind fixed navbars
Responsive at 375px, 768px, 1024px, 1440px
No horizontal scroll on mobile

Accessibility

All images have alt text
Form inputs have labels
Color is not the only indicator
prefers-reduced-motion respected

Pre-Implementation

Product type identified
Visual style selected
Color palette defined
Typography pairing chosen
Landing page pattern selected
Accessibility requirements noted
Tech stack guidelines reviewed

Files

Just SKILL.md in skills/ui-ux-pro-max of shobcoder/shob.

Open the folder on GitHubat commit 14831ba

Compare with similar skills

UI UX Pro Max next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI UX Pro Max compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
UI UX Pro Max this skillshobcoder/shob	577	—	~3.7k	Automated safety check: Pass	MIT	19 days ago
UI UX Pro Maxmajiayu000/spellbook	286	—	~442	Automated safety check: Pass	MIT	today
UI UX Pro Maxsaoudi-h/solar-icons	182	18 repos	~11k	Automated safety check: Notes	Custom licence	yesterday
UI UX Pro MaxOhh-889/skyroc	795	26 repos	~3.6k	Automated safety check: Notes	MIT	1 mo ago
Frontend Designavibebuilder/claude-prime	120	—	~2.1k	Automated safety check: Pass	MIT	4 mo ago
Design SystemWrongStack/WrongStack	368	—	~3.9k	Automated safety check: Pass	MIT	today

Similar skills

UI UX Pro Max
majiayu000/spellbook
A skill your agent uses when planning, building, designing, code review, refactor, fixing, improving, optimizing, enhancing, or checking UI/UX work.
286 GitHub stars~442 tokensUpdated today
Frontend & DesignAuto-check passed
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
182 GitHub starsUsed in 18 repos~11k tokens
Frontend & DesignAuto-check: notes
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence. An agent skill from Ohh-889/skyroc.
795 GitHub starsUsed in 26 repos~3.6k tokens
Frontend & DesignAuto-check: notes
Frontend Design
avibebuilder/claude-prime
Builds distinctive, production-grade UIs that avoid generic AI aesthetics.
120 GitHub stars~2.1k tokensUpdated 4 mo ago
Frontend & DesignAuto-check passed
Design System
WrongStack/WrongStack
Use this skill BEFORE writing or restyling ANY user-facing interface.
368 GitHub stars~3.9k tokensUpdated today
Frontend & DesignAuto-check passed
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
5.7k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed

Questions about UI UX Pro Max

What does UI UX Pro Max do?

UI/UX design intelligence expert for web and mobile applications. UI UX Pro Max is an agent skill from shobcoder/shob. UI/UX design intelligence expert for web and mobile applications.

When should I use UI UX Pro Max?

UI UX Pro Max fits situations like: designing interfaces; selecting color palettes; building landing pages; reviewing code for UX issues.

How do I install UI UX Pro Max in Claude Code?

Run `npx skills add shobcoder/shob --skill ui-ux-pro-max -a claude-code`. Or copy the skill folder (skills/ui-ux-pro-max in shobcoder/shob) into .claude/skills/ui-ux-pro-max in your project. Claude Code loads it when a task matches its description.

How do I install UI UX Pro Max in Codex?

Run `npx skills add shobcoder/shob --skill ui-ux-pro-max -a codex`. Or copy the skill folder (skills/ui-ux-pro-max in shobcoder/shob) into .agents/skills/ui-ux-pro-max in your project. Codex loads it when a task matches its description.

Can I use UI UX Pro Max in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shobcoder/shob --skill ui-ux-pro-max -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-ux-pro-max, .gemini/skills/ui-ux-pro-max, .github/skills/ui-ux-pro-max and .opencode/skills/ui-ux-pro-max in your project.

What does UI UX Pro Max need to run?

SKILL.md names no scripts, command-line tools or credentials: UI UX Pro Max is instructions for the agent only.

Does UI UX Pro Max access the network?

SKILL.md names 1 domain. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is UI UX Pro Max safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI UX Pro Max use?

UI UX Pro Max is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI UX Pro Max use?

About 3.7k tokens (SKILL.md is roughly 15k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI UX Pro Max?

Skills that share tags, products or a category with UI UX Pro Max: UI UX Pro Max (majiayu000/spellbook, 286 stars), UI UX Pro Max (saoudi-h/solar-icons, 182 stars), UI UX Pro Max (Ohh-889/skyroc, 795 stars) and Frontend Design (avibebuilder/claude-prime, 120 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI UX Pro Max?

shobcoder (a GitHub organization) maintains it in shobcoder/shob, which has 577 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on September 18, 2026.

Source: shobcoder/shob on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install UI UX Pro Max

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

UI/UX Pro Max - Design Intelligence Expert

Workflow

Step 1: Analyze User Requirements

Step 2: Generate Design System

Step 3: Implementation Guidelines

Step 4: Pre-Delivery Verification

Priority Rules

Quick Style Selector by Product Type

Color Palettes by Industry

SaaS / Business

E-commerce Luxury

Healthcare

Fintech / Crypto

Gaming

AI / Chatbot Platform

Beauty / Spa / Wellness

Typography Pairings

Professional / Corporate

Elegant / Luxury

Modern / Tech

Friendly / Playful

Editorial / Creative

Healthcare / Wellness

Visual Styles Reference

Minimalism

Glassmorphism

Neumorphism

Dark Mode

Bento Grid

Aurora / Gradient Mesh

Brutalism

Landing Page Patterns

Hero-Centric (Conversion Focus)

Feature-Forward (Product Demo)

Story-Driven (Brand Building)

Social Proof Heavy (Trust Building)

Chart Type Selection

Accessibility Requirements (CRITICAL)

Color Contrast

Touch Targets

Focus States

Reduced Motion

Form Labels

Common UX Anti-Patterns (AVOID)

Icons

Hover States

Cursors

Light Mode Glass

Z-Index

Animations

Stack-Specific Guidelines

HTML + Tailwind CSS

React

Next.js

Vue 3

Flutter

SwiftUI

Response Style

Pre-Delivery Checklist

Visual Quality

Interaction

Light/Dark Mode

Layout

Accessibility

Pre-Implementation