skills.rest
Mar5929
Mar5929COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generate design systems with styles, palettes, and font pairings.

Updated Aug 27, 2026
Search Tags:#typography#accessibility#design system#ui/ux#color palette#frontend development#component design
One-click install
npx skills add https://github.com/Mar5929/claude-toolkit --skill ui-ux-pro-max-mar5929
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Mar5929/claude-toolkit/tree/main/config/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Mar5929/claude-toolkit --skill ui-ux-pro-max-mar5929

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive UI/UX design intelligence, offering guidance on styles, color palettes, typography, and accessibility to create professional and user-friendly interfaces.

Core Features & Use Cases

  • Design System Generation: Create a complete design system based on project requirements, including patterns, styles, colors, and typography.
  • UX Best Practices: Enforce accessibility, performance, and interaction guidelines.
  • Stack-Specific Guidance: Get implementation best practices for various frontend stacks like React, Vue, and HTML/Tailwind.
  • Use Case: When starting a new SaaS dashboard project, use this Skill to generate a professional design system, ensuring accessibility and optimal user experience from the start.

Quick Start

Generate a design system for a 'fintech dashboard' project.

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 web application?▼

Generate a design system by inputting project requirements like a 'fintech dashboard' to output matching UI styles, color palettes, typography, and component patterns. It leverages 67 styles and 57 font pairings to ensure professional, accessible interfaces.

Can I get UI/UX guidance for specific frontend stacks like React or Vue?▼

Yes, you can get UI/UX guidance for specific frontend stacks like React, Vue, and HTML/Tailwind. The Skill provides implementation best practices across 13 technology stacks, ensuring design intelligence applies directly to your chosen development environment.

Does this design intelligence tool integrate with shadcn/ui components?▼

Yes, this UI/UX design intelligence integrates with shadcn/ui for component search and examples. It helps you find and implement specific elements like buttons, forms, and charts while maintaining accessibility and performance guidelines.

What's the best way to ensure accessibility when designing mobile apps?▼

The best way to ensure accessibility when designing mobile apps is to apply the Skill's UX best practices, which enforce accessibility, performance, and interaction guidelines directly into your design system generation and component planning workflow.

How do I choose a color palette and font pairing for a SaaS dashboard?▼

To choose a color palette and font pairing for a SaaS dashboard, use the Skill's library of 96 color palettes and 57 font pairings. It matches your project requirements to generate a cohesive visual system tailored to your application.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
frankxaifrankxai
31

UI/UX Design Expert

Provide UI/UX design guidance covering WCAG 2.2 accessibility and design systems.

Community
Intermediate
congthang12312congthang12312

ui-styling

Integrate accessible shadcn/ui components with Tailwind tokens into React apps.

Community
Advanced
tincoppertincopper
10

ui-ux-pro-max

Generate UI/UX design systems with accessibility and stack-specific implementation guidance.

Community
Advanced