skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates design systems and UI/UX recommendations from a searchable database of styles, palettes, and guidelines.

Updated Mar 26, 2026
Search Tags:#typography#accessibility#responsive design#design system#color palette#ui design#ux guidelines
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ui-ux-pro-max-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/ui-ux-pro-max/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ui-ux-pro-max-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing the right visual style, color palette, typography, and interaction patterns for a web or mobile product is time-consuming and inconsistent without a structured reference. This Skill provides a searchable design intelligence database so every UI decision is grounded in documented rules and platform guidelines. ## Core Features & Use Cases - Design System Generation: Run a single CLI query to get a complete design system (pattern, style, colors, typography, effects) with reasoning and anti-patterns, optionally persisted as a Master file with per-page overrides. - Domain Search: Query 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks including React, Next.js, Vue, SwiftUI, Flutter, and Tailwind. - Priority-Based Review Checklist: Audit existing UI code against ranked rule categories covering accessibility, touch targets, performance, animation, forms, navigation, and charts. - Use Case: When asked to build a fintech dashboard, generate a design system with --design-system, then pull chart and UX rules to implement accessible data visualizations. ## Quick Start Ask the AI to generate a design system for your product type, for example: "Build a landing page for a beauty spa and recommend the style, colors, and fonts."

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 or mobile app?▼

Run the search script with the --design-system flag and a query describing your product type and industry. It returns a complete design system with pattern, style, colors, typography, effects, and anti-patterns to avoid.

What UI styles and color palettes are available for my product type?▼

The database includes 50+ styles such as glassmorphism, claymorphism, minimalism, brutalism, and neumorphism, plus 161 color palettes matched to 161 product types. Query the style or color domain with your product keywords to get recommendations.

Does this work with React, Tailwind, and shadcn/ui projects?▼

Yes, it covers 10 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and plain HTML/CSS. It also integrates with shadcn/ui MCP for component search and examples.

How do I review existing UI code for accessibility and UX issues?▼

Use the priority-ranked checklist in the Skill, starting with accessibility rules like 4.5:1 contrast, focus states, and aria labels, then touch targets, performance, and layout. You can also query the ux domain for specific topics like animation or forms.

Can I save the design system and reuse it across pages?▼

Yes, add the --persist flag to create a design-system/MASTER.md file as the global source of truth, plus per-page override files under design-system/pages/. Page-specific rules override the Master file when both exist.

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 only applies when a task changes how a feature looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
mohamednegm0mohamednegm0

ai-discoverability-audit

Audit brand representation across AI search and recommendation systems.

Community
Advanced
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
ils15ils15
10

web-ui-analysis

Analyze web interfaces for WCAG 2.1 compliance and Core Web Vitals.

Community
Advanced
idy-00idy-00

migrate-design-system

Maps design tokens between a token system and external design systems via role-based crosswalks.

Community
Intermediate