Design knowledge as searchable local data: 79 styles, 192 palettes, 119 UX rules
nextlevelbuilder/ui-ux-pro-max-skill
v2.13.0, MIT, 129k stars, site uupm.cc. Instead of lecturing the model it ships structured catalogues the agent queries before writing code: 79 UI styles, 192 palettes with reasoning, 74 type pairings, 119 UX rules, 105 icon suggestions, 17 GSAP presets, 25 chart types, 22 stacks and 34 landing-page patterns.
Our takeIts sharpest self-description is that models can write CSS but lack a taste database. Ten rule categories are ordered by severity, with Accessibility and Touch & Interaction first as CRITICAL and Charts last — that ordering is the stance. The Design System Generator runs five parallel searches, and the repo states plainly: do not persist unverified output, so a generated design system has to be checked before it lands in your repo.
npx ui-ux-pro-max-cli init --ai claudeThe problem: models can write CSS, they lack a taste database
UI UX Pro Max (v2.13.0, MIT, 129,288 stars / 13,778 forks, site uupm.cc) turns design knowledge into searchable local data. It does not lecture the model; it ships structured catalogues the agent queries before writing code.
| Dataset | Scale | Search domain |
|---|---|---|
| UI styles | 79 searchable (50 active) | style |
| Colour palettes | 192, each with reasoning | color |
| Font pairings | 74 | typography |
| UX guidelines | 119 | ux |
| Icon recommendations | 105 | icons |
| GSAP presets | 17 | gsap |
| Chart types | 25 | chart |
| Stacks / platforms | 22 stacks · 19 platform targets | stack / web |
| Landing page structures | 34 patterns | landing |
Ten rule categories ordered by severity — that is the real contribution
Design rules are split into 10 categories, ranked by severity, each with a must-have column and an anti-pattern column. The ranking itself is a position statement.
| # | Category | Level | Must have | Anti-pattern |
|---|---|---|---|---|
| 1 | Accessibility | CRITICAL | Contrast 4.5:1, alt text, keyboard nav, aria-labels | Removing focus rings, icon-only buttons without labels |
| 2 | Touch & Interaction | CRITICAL | Min 44×44px, 8px+ spacing, loading feedback | Hover-only, instant 0ms state changes |
| 3 | Performance | HIGH | WebP/AVIF, lazy loading, reserved space CLS < 0.1 | Layout thrashing, cumulative layout shift |
| 4 | Style Selection | HIGH | Match product type, consistency, SVG icons | Mixing flat and skeuomorphic, emoji as icons |
| 5 | Layout & Responsive | HIGH | Mobile-first breakpoints, viewport meta, no horizontal scroll | Fixed px container widths, disabling zoom |
| 9 | Navigation Patterns | HIGH | Predictable back, bottom nav ≤5, deep linking | Overloaded nav, broken back behaviour |
| 6 | Typography & Color | MEDIUM | Base 16px, line-height 1.5, semantic colour tokens | Body text <12px, gray-on-gray, raw hex in components |
| 7 | Animation | MEDIUM | Context-aware timing, motion conveys meaning, spatial continuity | One duration for everything, animating width/height, no reduced-motion |
| 8 | Forms & Feedback | MEDIUM | Visible labels, errors near the field, progressive disclosure | Placeholder-only labels, errors only at the top |
| 10 | Charts & Data | LOW | Legends, tooltips, accessible colours | Relying on colour alone to convey meaning |
Putting Accessibility and Touch at 1 and 2 and Charts last tells the agent plainly that visual flourish ranks lowest. We borrowed that ordering directly.
Design System Generator: five parallel searches plus reasoning
The flagship feature turns one sentence of requirements into a complete design system. Internally it is four steps: user request → five parallel searches (product-type matching over 192 categories, style recommendations, palette selection, landing patterns, typography pairing) → reasoning engine (map product to UI category rules, rank styles with BM25, filter anti-patterns by industry, evaluate JSON decision rules) → output Pattern + Style + Colors + Typography + Effects + anti-patterns + a pre-delivery checklist.
# One sentence to a full design system (-p names the project, --persist writes it out)
python .../scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
# Three 1-10 sliders tune the output without changing the query
search.py "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8
# Targeted single-domain query
search.py "error summary validation" --domain uxThe emitted checklist is actionable: no emoji as icons (use Heroicons/Lucide SVG), cursor-pointer on every clickable element, light-mode body contrast ≥4.5:1, visible keyboard focus, prefers-reduced-motion respected, text and chips reflow without clipping, and responsive verified at 375/768/1024/1440.
The query contract is worth more than the data
SKILL.md defines how to search, and every line is stealable: pick the smallest search mode that fits (--design-system only for a new project or site-wide direction, a single --domain for a targeted bug, --stack only when the implementation stack is known); build each query around one dominant intent with 2–5 meaningful terms and one useful constraint (product, platform, interaction); verify the returned domain, the identity of the top result, and fit for the user's product and platform before applying it; retry exactly once with a narrower rewrite or explicit domain/stack when output is empty or off-topic; if that fails, state that no verified match was found and label any general guidance as a fallback.
The closing line is the whole thing: Do not persist unverified output. It is also honest about a limitation — omitting --domain triggers auto-detection, which can misroute overlapping terms ("font" matches both typography and google-fonts), so pass it explicitly when results look off.
For accessibility work it requires one observable outcome per search: query the semantic outcome first ("focus not obscured" --domain ux, "accessible authentication" --domain ux), then a component domain, and only then the implementation stack. A generic accessibility result is not accepted in place of a specific interaction or WCAG criterion. That is mature retrieval discipline.
Install and repo composition
npx ui-ux-pro-max-cli init --ai claudeBeyond the main skill the repo ships 6 sub-skills — design, ui-styling, design-system, brand, slides, banner-design — plus a full maintenance toolchain under scripts/ (validate-csv.py, refresh-google-fonts.py, refresh-icon-catalog.py, evaluate-relevance.py, smoke-domains.sh). The data is CSV with validators and smoke tests: taste maintained as a dataset with CI. That is the fundamental difference from a prompt collection.