skills.rest
sudohakan
sudohakanCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems with styles, palettes, and font pairings for web and mobile apps.

Updated Aug 23, 2026
Search Tags:#accessibility#design system#ui/ux#tailwind css#web design#frontend development#mobile app design
One-click install
npx skills add https://github.com/sudohakan/claude-code-dotfiles --skill ui-ux-pro-max-sudohakan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/sudohakan/claude-code-dotfiles/tree/main/config/skills/ui-ux-pro-max
Command: npx skills add https://github.com/sudohakan/claude-code-dotfiles --skill ui-ux-pro-max-sudohakan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires csv, json, re, pathlib, datetime, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive UI/UX design intelligence, offering guidance on styles, palettes, typography, and best practices to create effective and aesthetically pleasing interfaces for web and mobile applications.

Core Features & Use Cases

  • Design System Generation: Creates a complete design system based on project requirements, including patterns, styles, colors, and typography.
  • Stack-Specific Guidelines: Offers implementation advice for various frontend stacks like React, Vue, and Tailwind CSS.
  • UX Best Practices: Provides critical guidelines for accessibility, performance, and interaction design.
  • Use Case: When starting a new SaaS dashboard project, use this Skill to generate a professional design system, select an appropriate color palette, and get recommendations for responsive layout and accessibility.

Quick Start

Generate a design system for a new e-commerce website.

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

To generate a design system, input your project requirements to receive comprehensive UI/UX guidelines covering 67 styles, 96 palettes, 57 font pairings, and responsive layout patterns for your application.

Does this UI/UX design tool work with Tailwind CSS and React?▼

Yes, this UI/UX design tool works with Tailwind CSS and React, providing stack-specific implementation guidelines across 13 frontend technology stacks to ensure accurate component design and code integration.

What's the best way to choose accessible color palettes and typography for a SaaS dashboard?▼

The best way to choose accessible palettes and typography is to leverage built-in UX best practices covering 96 color palettes and 57 font pairings, ensuring your SaaS dashboard meets critical accessibility standards.

Can I review and refactor existing frontend UI code for accessibility and interaction design?▼

Yes, you can review and refactor existing frontend UI code by applying actions like fix, improve, optimize, and check to validate your interface against accessibility, performance, and interaction design guidelines.

How do I select the right chart types for a data visualization component?▼

To select the right chart types for data visualization, reference the provided 25 chart type guidelines to match your specific data structure and user interaction requirements for optimal frontend rendering.

Why do I need shadcn/ui for component search during UI implementation?▼

You need shadcn/ui integration for component search to seamlessly discover, evaluate, and implement pre-built UI elements that align with your generated design system and frontend stack architecture.

Related Skills

Explore More Design & Creative Skills→
paulinghampaulingham
1

greenfield-scaffold

Orchestrate end-to-end greenfield project bootstrapping from product discovery to DevX setup.

Community
Advanced
AzamCodesAzamCodes

frontend-design

Design and implement production-grade frontend interfaces with bespoke typography and responsive layouts.

Community
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:ui-styling

Create and style user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
Nabole05Nabole05

blast-usability

Reduce cognitive load in web and mobile interfaces with accessibility guidance.

Community
Intermediate