skills.rest
s0nbuildtech287
s0nbuildtech287COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Searches a local database of UI styles, palettes, fonts, and UX guidelines to generate design systems.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing consistent styles, color palettes, typography, and UX patterns for a new web or mobile interface is slow and error-prone, and generic advice often ignores the target stack or product type. ## Core Features & Use Cases - Design System Generation: Runs a multi-domain search across product types, styles, colors, landing patterns, and typography to produce a complete design system with reasoning rules, anti-patterns, and a pre-delivery checklist. - Searchable Design Database: Provides BM25-based search over 84 styles, 192 color palettes, 74 font pairings, 98 UX guidelines, 104 icons, 16 GSAP motion presets, and 25 chart types across 22 technology stacks. - Persistence & Tuning Dials: Saves design systems as a MASTER.md plus per-page overrides, and tunes output with variance, motion, and density sliders. - Use Case: When building a fitness dashboard in Next.js, generate a full design system with palette, fonts, and motion presets, then query stack-specific guidelines before implementing components. ## Quick Start Ask the AI to generate a design system for your product type and stack, for example: design a modern minimal UI for my fitness tracking web app.

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 script with the --design-system flag and a query describing your product type, industry, and keywords. It searches product, style, color, landing, and typography domains in parallel and returns a pattern, palette, fonts, effects, and anti-patterns.

What design data does the UI/UX search tool include?▼

The database contains 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types. It also includes stack-specific guideline files for 22 frameworks.

Does the design search tool support my framework?▼

It supports 22 stacks including React, Next.js, Vue, Nuxt, Svelte, Astro, Angular, Laravel, SwiftUI, React Native, Flutter, Jetpack Compose, Tailwind, shadcn/ui, Three.js, JavaFX, WPF, WinUI, Avalonia, Uno Platform, and UWP. Pass the stack with the --stack flag.

What dependencies does the UI/UX search script require?▼

The script requires only Python 3 and uses no external packages. It implements BM25 ranking with the standard library and reads local CSV data files.

What should I do when a design search returns zero results?▼

Retry once with broader or differently worded keywords, such as separating product and style terms. If still empty, fall back to the built-in priority table and state explicitly that the recommendation came from defaults rather than a database match.

When should I not use this UI design skill?▼

Skip it for pure backend logic, API or database design, non-visual performance work, infrastructure, or DevOps tasks. It applies only when the task changes how something looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
ForgePlanForgePlan
3

project-agent-scaffold

Detect a project's technology stack and generate Claude Code agent proposals.

Official
Intermediate
musujmusuj

phase-5-design-system

Develops platform-independent design systems with React/Next.js and Flutter support.

Community
Advanced
letxbrace-droidletxbrace-droid

ios-hig-design

Apply Apple Human Interface Guidelines to iPhone interface design.

Community
Intermediate
Asymmetric-alAsymmetric-al
417

moai-library-shadcn

Install, compose, and customize shadcn/ui components with Tailwind CSS tokens.

Official
Intermediate