skills.rest
joaoguirunas
joaoguirunasCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates design system recommendations and searches UI/UX guidelines via a BM25-based CLI.

3|3|Updated Apr 23, 2026
Search Tags:#typography#accessibility#frontend#design system#color palette#ui ux#bm25 search
One-click install
npx skills add https://github.com/joaoguirunas/team-os --skill ui-ux-pro-max-joaoguirunas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/joaoguirunas/team-os/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/joaoguirunas/team-os --skill ui-ux-pro-max-joaoguirunas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing the right style, color palette, typography, and UX patterns for a new web or mobile interface is slow and inconsistent without a reference. This Skill provides a searchable design database and a design system generator so every UI decision is grounded in documented guidelines. ## Core Features & Use Cases - Design System Generation: Run the search CLI with --design-system to get a complete recommendation covering pattern, style, colors, typography, effects, and anti-patterns, with optional persistence to a design-system/MASTER.md plus per-page override files. - Domain Search: Query 12 domains (style, color, typography, chart, landing, product, ux, icons, react, web, google-fonts, prompt) and 16 stack-specific guideline files (React, Next.js, SwiftUI, Flutter, Tailwind, and more) using a BM25 ranking engine. - UX Rule Checklists: Apply a priority-ordered rule catalog covering accessibility, touch targets, performance, animation, forms, navigation, and charts for UI reviews and fixes. - Use Case: When asked to build a fintech dashboard, run the design system generator to get a matched style, color tokens, and font pairing, then query the ux and chart domains for accessibility and data-visualization rules before writing code. ## Quick Start Ask the AI to generate a design system for your product, for example: run the ui-ux-pro-max search script with your product type and the --design-system flag to get recommended styles, colors, and typography.

Frequently Asked Questions about ui-ux-pro-max

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design system for a new web app?▼

Run the search.py script with your product type and the --design-system flag, optionally adding -p for a project name. It searches product, style, color, landing, and typography domains in parallel and returns a complete recommendation with pattern, colors, fonts, and anti-patterns.

How do I search UI/UX guidelines by topic?▼

Use the search script with a keyword and the --domain flag, choosing from style, color, typography, chart, landing, product, ux, icons, react, web, or google-fonts. Results are ranked by a BM25 algorithm over CSV datasets, and you can limit output with -n.

Does it support framework-specific guidance like React or SwiftUI?▼

Yes, it includes stack-specific guideline files for 16 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn. Query them through the stack search to get do/don't rules with code examples and severity levels.

Can I save the design system for use across sessions?▼

Yes, add the --persist flag to write a design-system/MASTER.md file as the global source of truth. Use --page to create per-page override files under design-system/pages/ that take priority over the master rules for that page.

What are the requirements to run the search tool?▼

The tool requires Python 3 and uses only the standard library, so no pip installs are needed. The SKILL.md includes install commands for macOS, Ubuntu/Debian, and Windows if Python is missing.

When should I not use this UI/UX design skill?▼

Skip it for pure backend logic, API or database design, infrastructure work, and non-visual automation scripts. It is intended only for tasks that change how an interface looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
EliasOulkadiEliasOulkadi
110

ui-ux-pro-max

Generate UI/UX design systems with patterns, palettes, typography, and charts.

Community
Advanced
supercent-iosupercent-io

frontend-design-system

Generate design tokens, layout rules, motion guidance, and accessibility checklists for frontend development.

Official
Advanced
zinohomezinohome

accessibility-auditor

Audits and implements web accessibility following WCAG 2.1 guidelines with ARIA patterns.

Community
Intermediate
apexradiusapexradius

design-system

Generate CSS custom properties and a component library from a brand name.

Official
Intermediate