UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
Comprehensive design guide for web, mobile, and desktop applications.
Install UI UX Pro Max
$ npx skills add futureboard/futureboard-studio --skill ui-ux-pro-max -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install futureboard/futureboard-studio ui-ux-pro-max --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/futureboard/futureboard-studio.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/ui-ux-pro-max .claude/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.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/
Install the "ui-ux-pro-max" agent skill from https://github.com/futureboard/futureboard-studio/tree/main/.cursor/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 install https://github.com/futureboard/futureboard-studio/tree/main/.cursor/skills/ui-ux-pro-maxType 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.
$ npx skills add futureboard/futureboard-studio --skill ui-ux-pro-max -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install futureboard/futureboard-studio ui-ux-pro-max --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/futureboard/futureboard-studio.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/ui-ux-pro-max .agents/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/futureboard/futureboard-studio/tree/main/.cursor/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.
$ npx skills add futureboard/futureboard-studio --skill ui-ux-pro-max -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install futureboard/futureboard-studio ui-ux-pro-max --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/futureboard/futureboard-studio.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/ui-ux-pro-max .cursor/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/futureboard/futureboard-studio/tree/main/.cursor/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 https://github.com/futureboard/futureboard-studio.git --path .cursor/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.
$ npx skills add futureboard/futureboard-studio --skill ui-ux-pro-max -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install futureboard/futureboard-studio ui-ux-pro-max --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/futureboard/futureboard-studio.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/ui-ux-pro-max .gemini/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.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/
Install the "ui-ux-pro-max" agent skill from https://github.com/futureboard/futureboard-studio/tree/main/.cursor/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.
$ gh skill install futureboard/futureboard-studio ui-ux-pro-maxInstalls 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).
$ npx skills add futureboard/futureboard-studio --skill ui-ux-pro-max -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/futureboard/futureboard-studio.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/ui-ux-pro-max .github/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.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/
Install the "ui-ux-pro-max" agent skill from https://github.com/futureboard/futureboard-studio/tree/main/.cursor/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.
$ npx skills add futureboard/futureboard-studio --skill ui-ux-pro-max -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install futureboard/futureboard-studio ui-ux-pro-max --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/futureboard/futureboard-studio.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/ui-ux-pro-max .opencode/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/futureboard/futureboard-studio/tree/main/.cursor/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
- 109
- Token cost
- ~5.6k tokens
- SKILL.md length
- 2,364 words
- Files
- 44 (incl. scripts)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Comprehensive design guide for web, mobile, and desktop applications.
- Works in 8 steps: Analyze User Requirements → Generate Design System (REQUIRED) → Supplement with Detailed Searches (as… → …
- Tasks that involve UI design
- SKILL.md covers How to Use This Skill, Search Reference, Example Workflow and Output Formats, plus 3 more sections
- Calls python3 and python
What it does
UI UX Pro Max is an agent skill from futureboard/futureboard-studio. Comprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks.
Its SKILL.md is about 5.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 45 other files, including scripts.
It sits in Frontend & Design, covering UI design, Theming and dark mode and Typography. It works with Python, React, Rust and TypeScript. The repository describes itself as: An open-source digital audio workstation with Native GPUI, React WebUI, Rust DSP, and native plugin hosting. The licence is MIT.
When your agent uses it
- Tasks that involve UI design
- Tasks that involve Theming and dark mode
- Tasks that involve Typography
Example prompts
- “/ui-ux-pro-max”
Requirements
- Python 3
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit d67e98f. 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
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
python3python
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
python.org
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 5.6k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 2,364 words of instructions outside code blocks.
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); the scripts in this folder are not scanned.
SKILL.md
The full file from futureboard/futureboard-studio at commit d67e98f, republished under its MIT licence (© futureboard). 2,364 words, ~5,603 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-ux-pro-max/SKILL.md (or your agent's skills folder). This skill also uses 43 other files; get the full folder from GitHub.- name
- ui-ux-pro-max
- description
- Comprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks.
ui-ux-pro-max
Comprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. Searchable database with priority-based recommendations.
Prerequisites
The bundled scripts require Python 3 (standard library only — no third-party packages, no network access). Check if it is available:
python3 --version || python --versionIf Python is not installed, do not install it yourself. Stop and ask the user to install Python 3 using their preferred method (e.g. from python.org or their OS package manager), then continue once it is available. Never run package-manager or system-modifying commands (sudo, brew, apt, winget, etc.) on the user's machine for this skill.
If the user prefers not to install Python, skip the CLI searches and rely on the Quick Reference sections above.
Note: On Windows, use
pythoninstead ofpython3to run scripts (e.g.,python scripts/search.pyinstead ofpython3 scripts/search.py).
How to Use This Skill
Use this skill when the user requests any of the following:
| Scenario | Trigger Examples | Start From |
|---|---|---|
| New project / page | "做一个 landing page"、"Build a dashboard" | Step 1 → Step 2 (design system) |
| New component | "Create a pricing card"、"Add a modal" | Step 3 (domain search: style, ux) |
| Choose style / color / font | "What style fits a fintech app?"、"推荐配色" | Step 2 (design system) |
| Review existing UI | "Review this page for UX issues"、"检查无障碍" | Quick Reference checklist above |
| Fix a UI bug | "Button hover is broken"、"Layout shifts on load" | Quick Reference → relevant section |
| Improve / optimize | "Make this faster"、"Improve mobile experience" | Step 3 (domain search: ux, react) |
| Implement dark mode | "Add dark mode support" | Step 3 (domain: style "dark mode") |
| Add charts / data viz | "Add an analytics dashboard chart" | Step 3 (domain: chart) |
| Stack best practices | "React performance tips"、"SwiftUI navigation" | Step 4 (stack search) |
Follow this workflow:
Step 1: Analyze User Requirements
Extract key information from user request:
- Product type: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
- Target audience: C-end consumer users; consider age group, usage context (commute, leisure, work)
- Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
- Stack: whatever the user is actually building with — infer it from the project
(package.json, existing files, explicit request) or ask. Then load its rules with
--stack <name>(see "Available Stacks"). Do not assume React Native. - Platform: web or native app. Several sections below are scoped to App UI (iOS/Android/React Native/Flutter) and do not apply to desktop-web work — safe areas, haptics, bottom nav and Dynamic Type are mobile-only concerns.
Step 2: Generate Design System (REQUIRED)
Always start with --design-system to get comprehensive recommendations with reasoning:
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]This command:
- Searches domains in parallel (product, style, color, landing, typography)
- Applies reasoning rules from
ui-reasoning.csvto select best matches - Returns complete design system: pattern, style, colors, typography, effects
- Includes anti-patterns to avoid
Example:
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:
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 rulesdesign-system/pages/— Folder for page-specific overrides
With page-specific override:
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.mdexclusively
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 2c: Design Dials (optional)
Three optional 1-10 sliders that tune --design-system output without changing your query. Add any combination of them to the same command:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --variance <1-10> --motion <1-10> --density <1-10>| Dial | Low (1-3) | Mid (4-7) | High (8-10) |
|---|---|---|---|
--variance | Centered / minimal (biases toward Minimalism-style categories) | Balanced / modern | Bold / asymmetric (biases toward Brutalism, Bento Grids) |
--motion | Subtle micro-interactions | Standard scroll/stagger motion | Complex choreography (pin, Flip, SplitText) |
--density | Spacious (24-96px spacing scale) | Standard (16-64px, current default) | Dense/dashboard (8-32px spacing scale) |
--motionattaches a ready-to-use GSAP snippet (with framework notes, Do/Don't, and performance notes) pulled from--domain gsap, matched to the resolved tier (Subtle/Standard/Complex).--densityoverrides the--space-*CSS variable table in the ASCII/markdown/MASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).
Example:
python3 skills/ui-ux-pro-max/scripts/search.py "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8 -p "Ops Console"Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]When to use detailed searches:
| Need | Domain | Example |
|---|---|---|
| Product type patterns | product | --domain product "entertainment social" |
| More style options | style | --domain style "glassmorphism dark" |
| Color palettes | color | --domain color "entertainment vibrant" |
| Font pairings | typography | --domain typography "playful modern" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Landing structure | landing | --domain landing "hero social-proof" |
| React Native perf | react | --domain react "rerender memo list" |
| App interface a11y | web | --domain web "accessibilityLabel touch safe-areas" |
| Icon suggestions | icons | --domain icons "navigation arrows" |
| Individual Google Fonts | google-fonts | --domain google-fonts "variable sans serif" |
| GSAP animation snippets | gsap | --domain gsap "scroll reveal stagger" |
Step 4: Stack Guidelines
Get implementation-specific best practices for the user's stack:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <stack>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 |
gsap | GSAP animation skeletons by intensity tier | scroll reveal, stagger, magnetic cursor, page transition |
react | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
web | App interface guidelines (iOS/Android/React Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |
icons | Icon recommendations with import code | arrow, navigation, lucide, phosphor |
google-fonts | Individual Google Fonts lookup | sans serif, monospace, japanese, variable font, popular |
Available Stacks
react, nextjs, vue, svelte, astro, swiftui, react-native, flutter, nuxtjs, nuxt-ui, html-tailwind, shadcn, jetpack-compose, threejs, angular, laravel, javafx, wpf, winui, avalonia, uno, uwp
JavaFX enterprise examples:
python3 skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
python3 skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafxExample Workflow
User request: "Make an AI search homepage。"
Step 1: Analyze Requirements
- Product type: Tool (AI search engine)
- Target audience: C-end users looking for fast, intelligent search
- Style keywords: modern, minimal, content-first, dark mode
- Stack: React Native
Step 2: Generate Design System (REQUIRED)
python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
Step 3: Supplement with Detailed Searches (as needed)
# Get style options for a modern tool product
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
# Get UX best practices for search interaction and loading
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain uxStep 4: Stack Guidelines
python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-nativeThen: Synthesize design system + detailed searches and implement the design.
Output Formats
The --design-system flag supports two output formats:
# 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 markdownTips for Better Results
Query Strategy
- Use multi-dimensional keywords — combine product + industry + tone + density:
"entertainment social vibrant content-dense"not just"app" - Try different keywords for the same need:
"playful neon"→"vibrant dark"→"content-first minimal" - Use
--design-systemfirst for full recommendations, then--domainto deep-dive any dimension you're unsure about - Add
--stack <stack>for implementation-specific guidance when the target stack is known
Common Sticking Points
| Problem | What to Do |
|---|---|
| Can't decide on style/color | Re-run --design-system with different keywords |
| Dark mode contrast issues | Quick Reference §6: color-dark-mode + color-accessible-pairs |
| Animations feel unnatural | Quick Reference §7: spring-physics + easing + exit-faster-than-enter |
| Form UX is poor | Quick Reference §8: inline-validation + error-clarity + focus-management |
| Navigation feels confusing | Quick Reference §9: nav-hierarchy + bottom-nav-limit + back-behavior |
| Layout breaks on small screens | Quick Reference §5: mobile-first + breakpoint-consistency |
| Performance / jank | Quick Reference §3: virtualize-lists + main-thread-budget + debounce-throttle |
Pre-Delivery Checklist
- Run
--domain ux "animation accessibility z-index loading"as a UX validation pass before implementation - Run through Quick Reference §1–§3 (CRITICAL + HIGH) as a final review
- Test on 375px (small phone) and landscape orientation
- Verify behavior with reduced-motion enabled and Dynamic Type at largest size
- Check dark mode contrast independently (don't assume light mode values work)
- Confirm all touch targets ≥44pt and no content hidden behind safe areas
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional: Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.
Show full SKILL.md (1,060 more words)Show less
Icons & Visual Elements
- 默认图标库使用 Phosphor (
@phosphor-icons/react)。src/ui-ux-pro-max/data/icons.csv中列出的只是常用推荐图标，不是完整集合。 - 当推荐表中找不到合适的图标时：
- 优先继续从 Phosphor 的完整图标集中选择任何语义更贴切的图标；
- 如果 Phosphor 也没有理想选项，可以使用 Heroicons (
@heroicons/react) 作为备选，注意保持风格一致（线性/填充、笔画粗细、圆角风格）。
| Rule | Standard | Avoid | Why It Matters |
|---|---|---|---|
| No Emoji as Structural Icons | Use vector-based icons (e.g., Phosphor @phosphor-icons/react, Heroicons @heroicons/react, react-native-vector-icons, @expo/vector-icons). | Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls. | Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens. |
| Vector-Only Assets | Use SVG or platform vector icons that scale cleanly and support theming. | Raster PNG icons that blur or pixelate. | Ensures scalability, crisp rendering, and dark/light mode adaptability. |
| Stable Interaction States | Use color, opacity, or elevation transitions for press states without changing layout bounds. | Layout-shifting transforms that move surrounding content or trigger visual jitter. | Prevents unstable interactions and preserves smooth motion/perceived quality on mobile. |
| Correct Brand Logos | Use official brand assets and follow their usage guidelines (spacing, color, clear space). | Guessing logo paths, recoloring unofficially, or modifying proportions. | Prevents brand misuse and ensures legal/platform compliance. |
| Consistent Icon Sizing | Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg). | Mixing arbitrary values like 20pt / 24pt / 28pt randomly. | Maintains rhythm and visual hierarchy across the interface. |
| Stroke Consistency | Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px). | Mixing thick and thin stroke styles arbitrarily. | Inconsistent strokes reduce perceived polish and cohesion. |
| Filled vs Outline Discipline | Use one icon style per hierarchy level. | Mixing filled and outline icons at the same hierarchy level. | Maintains semantic clarity and stylistic coherence. |
| Touch Target Minimum | Minimum 44×44pt interactive area (use hitSlop if icon is smaller). | Small icons without expanded tap area. | Meets accessibility and platform usability standards. |
| Icon Alignment | Align icons to text baseline and maintain consistent padding. | Misaligned icons or inconsistent spacing around them. | Prevents subtle visual imbalance that reduces perceived quality. |
| Icon Contrast | Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs. | Low-contrast icons that blend into the background. | Ensures accessibility in both light and dark modes. |
Interaction (App)
| Rule | Do | Don't |
|---|---|---|
| Tap feedback | Provide clear pressed feedback (ripple/opacity/elevation) within 80-150ms | No visual response on tap |
| Animation timing | Keep micro-interactions around 150-300ms with platform-native easing | Instant transitions or slow animations (>500ms) |
| Accessibility focus | Ensure screen reader focus order matches visual order and labels are descriptive | Unlabeled controls or confusing focus traversal |
| Disabled state clarity | Use disabled semantics (disabled/native disabled props), reduced emphasis, and no tap action | Controls that look tappable but do nothing |
| Touch target minimum | Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller | Tiny tap targets or icon-only hit areas without padding |
| Gesture conflict prevention | Keep one primary gesture per region and avoid nested tap/drag conflicts | Overlapping gestures causing accidental actions |
| Semantic native controls | Prefer native interactive primitives (Button, Pressable, platform equivalents) with proper accessibility roles | Generic containers used as primary controls without semantics |
Light/Dark Mode Contrast
| Rule | Do | Don't |
|---|---|---|
| Surface readability (light) | Keep cards/surfaces clearly separated from background with sufficient opacity/elevation | Overly transparent surfaces that blur hierarchy |
| Text contrast (light) | Maintain body text contrast >=4.5:1 against light surfaces | Low-contrast gray body text |
| Text contrast (dark) | Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces | Dark mode text that blends into background |
| Border and divider visibility | Ensure separators are visible in both themes (not just light mode) | Theme-specific borders disappearing in one mode |
| State contrast parity | Keep pressed/focused/disabled states equally distinguishable in light and dark themes | Defining interaction states for one theme only |
| Token-driven theming | Use semantic color tokens mapped per theme across app surfaces/text/icons | Hardcoded per-screen hex values |
| Scrim and modal legibility | Use a modal scrim strong enough to isolate foreground content (typically 40-60% black) | Weak scrim that leaves background visually competing |
Layout & Spacing
| Rule | Do | Don't |
|---|---|---|
| Safe-area compliance | Respect top/bottom safe areas for all fixed headers, tab bars, and CTA bars | Placing fixed UI under notch, status bar, or gesture area |
| System bar clearance | Add spacing for status/navigation bars and gesture home indicator | Let tappable content collide with OS chrome |
| Consistent content width | Keep predictable content width per device class (phone/tablet) | Mixing arbitrary widths between screens |
| 8dp spacing rhythm | Use a consistent 4/8dp spacing system for padding/gaps/section spacing | Random spacing increments with no rhythm |
| Readable text measure | Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets) | Full-width long text that hurts readability |
| Section spacing hierarchy | Define clear vertical rhythm tiers (e.g., 16/24/32/48) by hierarchy | Similar UI levels with inconsistent spacing |
| Adaptive gutters by breakpoint | Increase horizontal insets on larger widths and in landscape | Same narrow gutter on all device sizes/orientations |
| Scroll and fixed element coexistence | Add bottom/top content insets so lists are not hidden behind fixed bars | Scroll content obscured by sticky headers/footers |
Pre-Delivery Checklist
Before delivering UI code, verify these items: Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter).
Visual Quality
- No emojis used as icons (use SVG instead)
- All icons come from a consistent icon family and style
- Official brand assets are used with correct proportions and clear space
- Pressed-state visuals do not shift layout bounds or cause jitter
- Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)
Interaction
- All tappable elements provide clear pressed feedback (ripple/opacity/elevation)
- Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
- Micro-interaction timing stays in the 150-300ms range with native-feeling easing
- Disabled states are visually clear and non-interactive
- Screen reader focus order matches visual order, and interactive labels are descriptive
- Gesture regions avoid nested/conflicting interactions (tap/drag/back-swipe conflicts)
Light/Dark Mode
- Primary text contrast >=4.5:1 in both light and dark mode
- Secondary text contrast >=3:1 in both light and dark mode
- Dividers/borders and interaction states are distinguishable in both modes
- Modal/drawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)
- Both themes are tested before delivery (not inferred from a single theme)
Layout
- Safe areas are respected for headers, tab bars, and bottom CTA bars
- Scroll content is not hidden behind fixed/sticky bars
- Verified on small phone, large phone, and tablet (portrait + landscape)
- Horizontal insets/gutters adapt correctly by device size and orientation
- 4/8dp spacing rhythm is maintained across component, section, and page levels
- Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)
Accessibility
- All meaningful images/icons have accessibility labels
- Form fields have labels, hints, and clear error messages
- Color is not the only indicator
- Reduced motion and dynamic text size are supported without layout breakage
- Accessibility traits/roles/states (selected, disabled, expanded) are announced correctly
© futureboard, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 43 other files (scripts) in .cursor/skills/ui-ux-pro-max of futureboard/futureboard-studio.
- SKILL.md
- data/app-interface.csv
- data/charts.csv
- data/colors.csv
- data/google-fonts.csv
- data/icons.csv
- data/landing.csv
- data/motion.csv
- data/products.csv
- data/react-performance.csv
- data/stacks/angular.csv
- data/stacks/astro.csv
- data/stacks/avalonia.csv
- data/stacks/flutter.csv
- data/stacks/html-tailwind.csv
- data/stacks/javafx.csv
- data/stacks/jetpack-compose.csv
- data/stacks/laravel.csv
- data/stacks/nextjs.csv
- … and 25 more
Open the folder on GitHubat commit d67e98f
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI UX Pro Max this skillfutureboard/futureboard-studio | 109 | — | ~5.6k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxsaoudi-h/solar-icons | 190 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Tidyfactor StylerTidyFactor/Styler | 118 | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| UI UX Pro Maxshobcoder/shob | 576 | — | ~3.7k | Automated safety check: Pass | MIT | |
| UI UX Pro Max SkillJason904/ui-skill-lab | 144 | — | ~865 | Automated safety check: Pass | MIT | |
| UI UX Pro Maxmajiayu000/spellbook | 287 | — | ~442 | Automated safety check: Pass | MIT |
Similar skills
Tidyfactor Styler
TidyFactor/Styler
Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL).
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
UI UX Pro Max Skill
Jason904/ui-skill-lab
A skill your agent uses for UI/UX design intelligence in Codex: planning, building, reviewing, improving, or implementing web/mobile interfaces, landing pages, dashboards, design systems…
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.
Ss Learn
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
Related
Categories
Questions about UI UX Pro Max
What does UI UX Pro Max do?
Comprehensive design guide for web, mobile, and desktop applications. UI UX Pro Max is an agent skill from futureboard/futureboard-studio. Comprehensive design guide for web, mobile, and desktop applications.
When should I use UI UX Pro Max?
UI UX Pro Max fits situations like: tasks that involve UI design; tasks that involve Theming and dark mode; tasks that involve Typography.
How do I install UI UX Pro Max in Claude Code?
Run `npx skills add futureboard/futureboard-studio --skill ui-ux-pro-max -a claude-code`. Or copy the skill folder (.cursor/skills/ui-ux-pro-max in futureboard/futureboard-studio) 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 futureboard/futureboard-studio --skill ui-ux-pro-max -a codex`. Or copy the skill folder (.cursor/skills/ui-ux-pro-max in futureboard/futureboard-studio) 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 futureboard/futureboard-studio --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 and python). Our summary lists: Python 3.
Does UI UX Pro Max access the network?
SKILL.md names 1 domain. As links in the text: python.org. 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
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 5.6k tokens (SKILL.md is roughly 22k 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 (saoudi-h/solar-icons, 190 stars), Tidyfactor Styler (TidyFactor/Styler, 118 stars), UI UX Pro Max (shobcoder/shob, 576 stars) and UI UX Pro Max Skill (Jason904/ui-skill-lab, 144 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?
futureboard (a GitHub organization) maintains it in futureboard/futureboard-studio, which has 109 GitHub stars. The repository was last updated on October 7, 2026.
Source: futureboard/futureboard-studio on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.