Agent skill

UI UX Pro Max

UI/UX design intelligence. An agent skill from Ohh-889/skyroc.

Install UI UX Pro Max

skills CLI

$ npx skills add Ohh-889/skyroc --skill ui-ux-pro-max -a claude-code

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

GitHub CLI

$ gh skill install Ohh-889/skyroc 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/Ohh-889/skyroc.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/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/Ohh-889/skyroc/tree/master/.claude/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/Ohh-889/skyroc/tree/master/.claude/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 Ohh-889/skyroc --skill ui-ux-pro-max -a codex

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

GitHub CLI

$ gh skill install Ohh-889/skyroc 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/Ohh-889/skyroc.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/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/Ohh-889/skyroc/tree/master/.claude/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 Ohh-889/skyroc --skill ui-ux-pro-max -a cursor

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

GitHub CLI

$ gh skill install Ohh-889/skyroc 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/Ohh-889/skyroc.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/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/Ohh-889/skyroc/tree/master/.claude/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/Ohh-889/skyroc.git --path .claude/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 Ohh-889/skyroc --skill ui-ux-pro-max -a gemini-cli

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

GitHub CLI

$ gh skill install Ohh-889/skyroc 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/Ohh-889/skyroc.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/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/Ohh-889/skyroc/tree/master/.claude/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 Ohh-889/skyroc 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 Ohh-889/skyroc --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/Ohh-889/skyroc.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/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/Ohh-889/skyroc/tree/master/.claude/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 Ohh-889/skyroc --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 Ohh-889/skyroc 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/Ohh-889/skyroc.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/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/Ohh-889/skyroc/tree/master/.claude/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: 795
Used in: 26 other repos
Token cost: ~3.6k tokens
SKILL.md length: 1,313 words
Files: 3
Skills in repo: 18
Repo updated: Sep 1, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

UI/UX design intelligence. An agent skill from Ohh-889/skyroc.

Works in 12 steps: Accessibility (CRITICAL) → Touch & Interaction (CRITICAL) → Performance (HIGH) → …
Tasks that involve Typography
SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 6 more sections
Calls python3, apt and python

What it does

UI UX Pro Max is an agent skill from Ohh-889/skyroc. UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism…

Its SKILL.md is about 3.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files.

It sits in Frontend & Design, covering Typography, UI design and Theming and dark mode. It works with Tailwind CSS, Svelte, Vue.js and shadcn/ui. The repository describes itself as: Skyroc 是一个基于 React 19 + TypeScript 的跨端前端工程化 monorepo：既提供开箱即用的 Web 中后台模板（Admin / RuoYi 对接版）和 Expo 移动端业务模板，也把请求、状态、日志、主题、双端 UI 组件库等能力沉淀为边界清晰的 workspace 包。 The licence is MIT.

When your agent uses it

Tasks that involve Typography
Tasks that involve UI design
Tasks that involve Theming and dark mode

Example prompts

“/ui-ux-pro-max”

Requirements

Python 3

Workflow steps

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

Accessibility (CRITICAL)
Touch & Interaction (CRITICAL)
Performance (HIGH)
Layout & Responsive (HIGH)
Typography & Color (MEDIUM)
Animation (MEDIUM)
Style Selection (MEDIUM)
Charts & Data (LOW)
Analyze User Requirements
Generate Design System (REQUIRED)
Supplement with Detailed Searches (as needed)
Stack Guidelines (Default: html-tailwind)

What it can do on your machine

Read from SKILL.md and the folder at commit 10ddd27. 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
Shell commands in SKILL.md call:
- python3
- apt
- python
- brew
- winget
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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.6k tokens when it runs. Until then it costs about 205 tokens; SKILL.md has 1,313 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

NoteRuns commands with sudoSKILL.md:111

sudo apt update && sudo apt install python3

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 Ohh-889/skyroc at commit 10ddd27, republished under its MIT licence (© Ohh-889). 1,313 words, ~3,594 tokens.

Download SKILL.mdSave it as .claude/skills/ui-ux-pro-max/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.

name: ui-ux-pro-max
description: UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.

When to Apply

Reference these guidelines when:

Designing new UI components or pages
Choosing color palettes and typography
Reviewing code for UX issues
Building landing pages or dashboards
Implementing accessibility requirements

Rule Categories by Priority

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`

Quick Reference

1. Accessibility (CRITICAL)

color-contrast - Minimum 4.5:1 ratio for normal text
focus-states - Visible focus rings on interactive elements
alt-text - Descriptive alt text for meaningful images
aria-labels - aria-label for icon-only buttons
keyboard-nav - Tab order matches visual order
form-labels - Use label with for attribute

2. Touch & Interaction (CRITICAL)

touch-target-size - Minimum 44x44px touch targets
hover-vs-tap - Use click/tap for primary interactions
loading-buttons - Disable button during async operations
error-feedback - Clear error messages near problem
cursor-pointer - Add cursor-pointer to clickable elements

3. Performance (HIGH)

image-optimization - Use WebP, srcset, lazy loading
reduced-motion - Check prefers-reduced-motion
content-jumping - Reserve space for async content

4. Layout & Responsive (HIGH)

viewport-meta - width=device-width initial-scale=1
readable-font-size - Minimum 16px body text on mobile
horizontal-scroll - Ensure content fits viewport width
z-index-management - Define z-index scale (10, 20, 30, 50)

5. Typography & Color (MEDIUM)

line-height - Use 1.5-1.75 for body text
line-length - Limit to 65-75 characters per line
font-pairing - Match heading/body font personalities

6. Animation (MEDIUM)

duration-timing - Use 150-300ms for micro-interactions
transform-performance - Use transform/opacity, not width/height
loading-states - Skeleton screens or spinners

7. Style Selection (MEDIUM)

style-match - Match style to product type
consistency - Use same style across all pages
no-emoji-icons - Use SVG icons, not emojis

8. Charts & Data (LOW)

chart-type - Match chart type to data type
color-guidance - Use accessible color palettes
data-table - Provide table alternative for accessibility

How to Use

Search specific domains using the CLI tool below.

Prerequisites

Check if Python is installed:

bash

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

bash

brew install python3

Ubuntu/Debian:

bash

sudo apt update && sudo apt install python3

Windows:

powershell

winget install Python.Python.3.12

How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

Step 1: Analyze User Requirements

Extract key information 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, etc.
Stack: React, Vue, Next.js, or default to html-tailwind

Step 2: Generate Design System (REQUIRED)

Always start with --design-system to get comprehensive recommendations with reasoning:

bash

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

This command:

Searches 5 domains in parallel (product, style, color, landing, typography)
Applies reasoning rules from ui-reasoning.csv to select best matches
Returns complete design system: pattern, style, colors, typography, effects
Includes anti-patterns to avoid

Example:

bash

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for hierarchical retrieval across sessions, add --persist:

bash

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

This creates:

design-system/MASTER.md — Global Source of Truth with all design rules
design-system/pages/ — Folder for page-specific overrides

With page-specific override:

bash

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

This also creates:

design-system/pages/dashboard.md — Page-specific deviations from Master

How hierarchical retrieval works:

When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/MASTER.md exclusively

Context-aware retrieval prompt:

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

Step 3: Supplement with Detailed Searches (as needed)

After getting the design system, use domain searches to get additional details:

bash

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

When to use detailed searches:

Need	Domain	Example
More style options	`style`	`--domain style "glassmorphism dark"`
Chart recommendations	`chart`	`--domain chart "real-time dashboard"`
UX best practices	`ux`	`--domain ux "animation accessibility"`
Alternative fonts	`typography`	`--domain typography "elegant luxury"`
Landing structure	`landing`	`--domain landing "hero social-proof"`

Step 4: Stack Guidelines (Default: html-tailwind)

Get implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind.

bash

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

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

Search Reference

Available Domains

Domain	Use For	Example Keywords
`product`	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty, service
`style`	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
`typography`	Font pairings, Google Fonts	elegant, playful, professional, modern
`color`	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech, service
`landing`	Page structure, CTA strategies	hero, hero-centric, testimonial, pricing, social-proof
`chart`	Chart types, library recommendations	trend, comparison, timeline, funnel, pie
`ux`	Best practices, anti-patterns	animation, accessibility, z-index, loading
`react`	React/Next.js performance	waterfall, bundle, suspense, memo, rerender, cache
`web`	Web interface guidelines	aria, focus, keyboard, semantic, virtualize
`prompt`	AI prompts, CSS keywords	(style name)

Available Stacks

Stack	Focus
`html-tailwind`	Tailwind utilities, responsive, a11y (DEFAULT)
`react`	State, hooks, performance, patterns
`nextjs`	SSR, routing, images, API routes
`vue`	Composition API, Pinia, Vue Router
`svelte`	Runes, stores, SvelteKit
`swiftui`	Views, State, Navigation, Animation
`react-native`	Components, Navigation, Lists
`flutter`	Widgets, State, Layout, Theming
`shadcn`	shadcn/ui components, theming, forms, patterns
`jetpack-compose`	Composables, Modifiers, State Hoisting, Recomposition

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

Example Workflow

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

Step 1: Analyze Requirements

Product type: Beauty/Spa service
Style keywords: elegant, professional, soft
Industry: Beauty/Wellness
Stack: html-tailwind (default)

Step 2: Generate Design System (REQUIRED)

bash

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.

Step 3: Supplement with Detailed Searches (as needed)

bash

# Get UX guidelines for animation and accessibility
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

Step 4: Stack Guidelines

bash

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

Then: Synthesize design system + detailed searches and implement the design.

Output Formats

The --design-system flag supports two output formats:

bash

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

Tips for Better Results

Be specific with keywords - "healthcare SaaS dashboard" > "app"
Search multiple times - Different keywords reveal different insights
Combine domains - Style + Typography + Color = Complete design system
Always check UX - Search "animation", "z-index", "accessibility" for common issues
Use stack flag - Get implementation-specific best practices
Iterate - If first search doesn't match, try different keywords

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Rule	Do	Don't
No emoji icons	Use SVG icons (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover states	Use color/opacity transitions on hover	Use scale transforms that shift layout
Correct brand logos	Research official SVG from Simple Icons	Guess or use incorrect logo paths
Consistent icon sizing	Use fixed viewBox (24x24) with w-6 h-6	Mix different icon sizes randomly

Interaction & Cursor

Rule	Do	Don't
Cursor pointer	Add `cursor-pointer` to all clickable/hoverable cards	Leave default cursor on interactive elements
Hover feedback	Provide visual feedback (color, shadow, border)	No indication element is interactive
Smooth transitions	Use `transition-colors duration-200`	Instant state changes or too slow (>500ms)

Light/Dark Mode Contrast

Rule	Do	Don't
Glass card light mode	Use `bg-white/80` or higher opacity	Use `bg-white/10` (too transparent)
Text contrast light	Use `#0F172A` (slate-900) for text	Use `#94A3B8` (slate-400) for body text
Muted text light	Use `#475569` (slate-600) minimum	Use gray-400 or lighter
Border visibility	Use `border-gray-200` in light mode	Use `border-white/10` (invisible)

Layout & Spacing

Rule	Do	Don't
Floating navbar	Add `top-4 left-4 right-4` spacing	Stick navbar to `top-0 left-0 right-0`
Content padding	Account for fixed navbar height	Let content hide behind fixed elements
Consistent max-width	Use same `max-w-6xl` or `max-w-7xl`	Mix different container widths

Pre-Delivery Checklist

Before delivering UI code, verify these items:

Visual Quality

No emojis used as icons (use SVG instead)
All icons from consistent icon set (Heroicons/Lucide)
Brand logos are correct (verified from Simple Icons)
Hover states don't cause layout shift
Use theme colors directly (bg-primary) not var() wrapper

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
Test both modes before delivery

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

Files

SKILL.md and 2 other files in .claude/skills/ui-ux-pro-max of Ohh-889/skyroc.

SKILL.md
data
scripts

Open the folder on GitHubat commit 10ddd27

Used in at least 25 other repositories

We found 51 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 26 other GitHub owners. This page covers the copy in Ohh-889/skyroc, which our catalogue first saw on October 7, 2026.

…and 1 more copy not listed here.

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 skillOhh-889/skyroc	795	26 repos	~3.6k	Automated safety check: Notes	MIT	1 mo ago
UI UX Pro Maxshobcoder/shob	576	—	~3.7k	Automated safety check: Pass	MIT	23 days ago
UI UX Pro Maxsaoudi-h/solar-icons	190	18 repos	~11k	Automated safety check: Notes	Custom licence	2 days ago
UI UX Pro Maxmajiayu000/spellbook	287	—	~442	Automated safety check: Pass	MIT	2 days ago
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar	5.7k	1 repos	~1.1k	Automated safety check: Pass	MIT	18 days ago
Ultimate UINeverSight/learn-skills.dev	217	1 repos	~4k	Automated safety check: Pass	MIT	yesterday

Similar skills

UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
576 GitHub stars~3.7k tokensUpdated 23 days ago
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.
190 GitHub starsUsed in 18 repos~11k tokens
Frontend & DesignAuto-check: notes
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.
287 GitHub stars~442 tokensUpdated 2 days ago
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
Ultimate UI
NeverSight/learn-skills.dev
A skill your agent uses when building user interfaces that need to look polished, modern, and intentional - not like AI-generated slop.
217 GitHub starsUsed in 1 repo~4k tokens
Frontend & DesignAuto-check passed
Tailwind CSS Patterns
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
162 GitHub starsUsed in 3 repos~1.6k tokens
Frontend & DesignAuto-check: notes

Questions about UI UX Pro Max

What does UI UX Pro Max do?

UI/UX design intelligence. An agent skill from Ohh-889/skyroc. UI UX Pro Max is an agent skill from Ohh-889/skyroc. UI/UX design intelligence.

When should I use UI UX Pro Max?

UI UX Pro Max fits situations like: tasks that involve Typography; tasks that involve UI design; tasks that involve Theming and dark mode.

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

Run `npx skills add Ohh-889/skyroc --skill ui-ux-pro-max -a claude-code`. Or copy the skill folder (.claude/skills/ui-ux-pro-max in Ohh-889/skyroc) 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 Ohh-889/skyroc --skill ui-ux-pro-max -a codex`. Or copy the skill folder (.claude/skills/ui-ux-pro-max in Ohh-889/skyroc) 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 Ohh-889/skyroc --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?

Going by SKILL.md and its folder, UI UX Pro Max needs the command-line tools its instructions call (python3, apt, python, brew and winget). Our summary lists: Python 3.

Does UI UX Pro Max access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. 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 notes only (runs commands with sudo), nothing it rates as a warning. 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.6k tokens (SKILL.md is roughly 14k 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 (shobcoder/shob, 576 stars), UI UX Pro Max (saoudi-h/solar-icons, 190 stars), UI UX Pro Max (majiayu000/spellbook, 287 stars) and UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k 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?

Ohh-889 (a GitHub user) maintains it in Ohh-889/skyroc, which has 795 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on September 1, 2026.

Source: Ohh-889/skyroc 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

Requirements

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

When to Apply

Rule Categories by Priority

Quick Reference

1. Accessibility (CRITICAL)

2. Touch & Interaction (CRITICAL)

3. Performance (HIGH)

4. Layout & Responsive (HIGH)

5. Typography & Color (MEDIUM)

6. Animation (MEDIUM)

7. Style Selection (MEDIUM)

8. Charts & Data (LOW)

How to Use

Prerequisites

How to Use This Skill

Step 1: Analyze User Requirements

Step 2: Generate Design System (REQUIRED)

Step 2b: Persist Design System (Master + Overrides Pattern)

Step 3: Supplement with Detailed Searches (as needed)

Step 4: Stack Guidelines (Default: html-tailwind)

Search Reference

Available Domains

Available Stacks

Example Workflow

Step 1: Analyze Requirements

Step 2: Generate Design System (REQUIRED)

Step 3: Supplement with Detailed Searches (as needed)

Step 4: Stack Guidelines

Output Formats

Tips for Better Results

Common Rules for Professional UI

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Visual Quality

Interaction

Light/Dark Mode

Layout

Accessibility

Files

Used in at least 25 other repositories

Compare with similar skills

Similar skills

More from Ohh-889/skyroc

Related

Questions about UI UX Pro Max