skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates design systems and searches UI/UX rules via a BM25 Python CLI.

Updated Aug 2, 2026
Search Tags:#typography#accessibility#design system#color palette#design review#ui ux#bm25 search
One-click install
npx skills add https://github.com/leonardoacosta/agents --skill ui-ux-pro-max-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/leonardoacosta/agents/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/leonardoacosta/agents --skill ui-ux-pro-max-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Choosing styles, colors, typography, and layouts for web and mobile interfaces is slow and inconsistent without a structured reference, and UI reviews often miss accessibility, interaction, and performance issues. ## Core Features & Use Cases - Design System Generation: Run the search CLI with --design-system to get a recommended pattern, style, color palette, typography, effects, and anti-patterns for a product type, with optional persistence to design-system/MASTER.md and per-page overrides. - Domain-Specific Search: Query 11 domains (style, color, chart, landing, product, ux, typography, icons, react, web, google-fonts) backed by CSV data and a BM25 ranking engine. - Rule-Based UI Review: Triage UI problems into 10 rule categories (accessibility, interaction, performance, layout, animation, forms, navigation, charts, and more) with 161 rules in reference files plus a pre-delivery professional checklist. - Use Case: When asked to build a fintech dashboard, generate a design system with matching colors and fonts, then verify the result against the Top 10 rules and the professional UI checklist before delivery. ## Quick Start Ask the AI to use the ui-ux-pro-max skill to generate a design system for your product type, for example by running the search script with your keywords and the --design-system flag.

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 project?▼

Run the search script with your product type and keywords plus the --design-system flag, for example python3 scripts/search.py "fintech crypto" --design-system. Add --persist to save a MASTER.md file and --page to create page-specific overrides under design-system/.

What design domains can I search with the CLI?▼

The CLI supports 11 domains: style, color, chart, landing, product, ux, typography, icons, react, web, and google-fonts. Use --domain with a keyword query, or omit it and the tool auto-detects the most relevant domain from your query.

Does the skill support React Native and mobile app design?▼

Yes, it includes stack-specific guidelines via --stack react-native and covers mobile concerns like 44x44pt touch targets, safe areas, and dynamic type. The rules also reference Apple HIG and Material Design standards.

How do I review an existing UI for UX problems?▼

Start with the Top 10 rules in SKILL.md, then follow the triage tree to the matching reference file, such as rules-accessibility.md for contrast issues or rules-performance.md for layout shift. Before delivery, check references/professional-ui-checklist.md.

When should I not use this skill?▼

Skip it for pure backend logic, API or database design, non-UI performance work, infrastructure, and non-visual scripts. It applies only when a task changes how a feature looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
TriNgo0108TriNgo0108

ui-ux-pro-max

Generate design systems with color palettes, fonts, and stack-specific guidelines.

Community
Advanced
jason23452jason23452

design-md-reference

Generate implementation-ready DESIGN.md design system contracts from approved UI artifacts and references.

Community
Advanced
NVIDIA-AI-IOTNVIDIA-AI-IOT
46

jetson-validate-image

Validates Jetson BSP image integrity and functionality after flashing via static checks and on-target tests.

Official
Advanced
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced