skills.rest
Jshengdev
JshengdevCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate complete design systems with color, typography, spacing, and component guidelines.

Updated Feb 20, 2026
Search Tags:#typography#design#ui#accessibility#ux#design-system#color-palette
One-click install
npx skills add https://github.com/Jshengdev/mks-site --skill ui-ux-pro-max-jshengdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Jshengdev/mks-site/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Jshengdev/mks-site --skill ui-ux-pro-max-jshengdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

The UI/UX planning and design process is often time-consuming and inconsistent across projects. This skill provides a centralized, data-driven design system guidance to accelerate decision-making and ensure cohesive, accessible UI across web and mobile platforms.

Core Features & Use Cases

  • 67 styles, 96 color palettes, 57 font pairings, 25 chart types, and 13 technology stacks are catalogued for quick reference to inform design decisions.
  • Plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code across dashboards, landing pages, admin panels, SaaS apps, portfolios, blogs, and mobile apps.
  • Example: generate a complete design system for a SaaS dashboard including color, typography, spacing, and component patterns, with accessibility considerations.

Quick Start

Provide a complete UI/UX design system for a SaaS dashboard, including color, typography, spacing, and component patterns.

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 complete design system for a SaaS dashboard?▼

To generate a complete SaaS dashboard design system, provide your project requirements to receive data-driven guidance covering color palettes, typography, spacing, and component patterns. This delivers cohesive UI/UX guidelines with accessibility considerations and design tokens for immediate implementation in code and design tools.

What is the best way to plan accessible typography and color palettes for mobile apps?▼

The best way to plan accessible typography and color palettes for mobile apps is to use data-driven design guidance that references catalogued font pairings and color combinations. This ensures your UI/UX design system meets accessibility standards while maintaining visual cohesion across your mobile application.

Can I create UI/UX design tokens for multiple page overrides in a web application?▼

Yes, you can create UI/UX design tokens for multiple page overrides by generating a master design system with optional page-specific configurations. This provides foundational color, typography, and spacing tokens that can be adapted for individual landing pages or admin panels without breaking consistency.

Does this design guidance cover component patterns and charts for admin panels?▼

Yes, this design guidance covers component patterns and charts for admin panels by referencing a catalogue of 25 chart types and 13 technology stacks. It delivers specific UI component guidelines and data visualization patterns suitable for complex admin panel interfaces.

How do I refactor and optimize existing UI/UX code across web platforms?▼

To refactor and optimize existing UI/UX code across web platforms, apply centralized design system guidelines to review, fix, and enhance your interfaces. This process aligns your dashboards, portfolios, and blogs with standardized color, typography, and spacing rules to improve overall accessibility and cohesion.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
WebDevPeterGriffinWebDevPeterGriffin
38

ui-ux-pro-max

Generate UI/UX design system recommendations for web and mobile interfaces.

Community
Advanced
NinaVerdeNinaVerde

Google Stitch MCP

Translate design references into Flutter UI code with Dart widgets.

Community
Intermediate
Jainam1673Jainam1673

ui-ux-pro-max

Extract UI/UX design patterns and guidelines from a centralized knowledge base.

Community
Advanced