ui-ux-pro-max

Search a local database of UI styles, color palettes, typography, and UX guidelines to generate design systems.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill ui-ux-pro-max-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill ui-ux-pro-max-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing consistent styles, colors, fonts, and interaction patterns for a new UI is slow and error-prone, and design decisions often lack traceable reasoning. This Skill provides a searchable local database of UI/UX rules plus a design-system generator so every visual decision is grounded in curated data. ## Core Features & Use Cases - Design System Generation: Run a single query to get a complete recommendation covering layout pattern, style, color palette, typography, effects, and anti-patterns, with optional variance, motion, and density dials. - Domain Search: Query 12 domains (style, color, typography, chart, landing, product, ux, icons, gsap, react, web, google-fonts) via a BM25 search engine with auto-domain detection. - Stack Guidelines: Retrieve implementation rules for 22 stacks including React, Next.js, Vue, SwiftUI, Flutter, Tailwind, and shadcn/ui. - Use Case: When building a SaaS dashboard in Next.js, generate a persisted design system (MASTER.md plus per-page overrides), then pull accessibility and animation rules before delivery using the pre-delivery checklist. ## Quick Start Ask the AI to generate a design system for your product type and stack, for example: design a modern minimal dashboard UI for my Next.js analytics 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 tone. It searches product, style, color, landing, and typography domains in parallel and returns a pattern, palette, fonts, effects, and anti-patterns with reasoning.

What UI design data does the search tool cover?

The database includes 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 provides stack-specific guidelines for 22 frameworks including React, Next.js, Vue, SwiftUI, and Flutter.

Does the design system generator support React and Next.js?

Yes, React and Next.js are among the 22 supported stacks. Use the --stack flag with values like react or nextjs to retrieve implementation-specific guidelines covering topics such as rerender optimization, Suspense, and bundle splitting.

Can I save the generated design system for later sessions?

Yes, add --persist with --output-dir pointed at your project root. This creates a MASTER.md file as the global source of truth plus optional per-page override files, and existing files are skipped unless you pass --force.

What happens when a search returns zero results?

The tool suggests nearby vocabulary terms so you can retry with broader or reworded keywords. If still empty, fall back to the built-in priority rule table and state explicitly that the recommendation came from defaults, not a database match.

What are the requirements to run the UI search script?

The script requires Python 3 with no external dependencies; it uses only the standard library. Invoke it by full path with python, python3, or py -3 depending on your platform.