skills.rest
binfen1
binfen1COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Plan and deliver UI/UX design systems for web and mobile projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to maintain consistency and speed across web and mobile interfaces. ui-ux-pro-max provides a centralized design intelligence resource with styles, palettes, fonts, product types, guidelines, and chart patterns to streamline decisions and ensure design quality.

Core Features & Use Cases

  • 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 tech stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS).
  • Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code.
  • Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app.
  • Elements: button, modal, navbar, sidebar, card, table, form, and chart.
  • Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design.
  • Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient.
  • Integrations: shadcn/ui MCP for component search and examples.

Quick Start

Generate a complete UI/UX design system for a web dashboard SaaS 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 build a comprehensive UI/UX design system for a web and mobile project?▼

To build a UI/UX design system, leverage centralized style, color, typography, and component resources to plan cross-platform patterns. This provides structured guidelines including color palettes, font pairings, spacing, and platform-adaptive recommendations for web and mobile interfaces.

What font pairings and color palettes work best for a SaaS dashboard?▼

For a SaaS dashboard, utilize 161 color palettes and 57 font pairings tailored to your chosen style. Applying these structured typography and color system resources ensures visual consistency and accessibility across your interface components.

Can I use this design system approach with React, Next.js, and SwiftUI?▼

Yes, this design system approach supports 10 tech stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and HTML/CSS. It delivers platform-adaptive component patterns and specific guidelines for each framework.

How do I refactor UI components to follow styles like glassmorphism or bento grid?▼

To refactor UI components for styles like glassmorphism or bento grid, apply the corresponding layout, shadow, and gradient guidelines from the design system. This ensures elements like buttons, modals, and cards adhere to the selected visual style.

Does this design intelligence resource include accessibility guidelines and interaction states?▼

Yes, the design intelligence resource includes 99 UX guidelines covering accessibility, interaction states, and animation. It ensures your interface components meet structured accessibility requirements across web and mobile platforms.

What is the best way to establish a consistent cross-platform design system?▼

The best way to establish a cross-platform design system is to centralize decisions on typography, color, and spacing using a master file with per-page overrides. This maintains consistency and speed across all web and mobile interfaces.

Related Skills

Explore More Design & Creative Skills→
djkloopdjkloop

ui-ux-pro-max

Generate UI/UX design systems with style, color, typography, and accessibility guidance.

Community
Advanced
daymadedaymade
1.3k

ui-designer

Extract color palettes, typography, spacing, and component styles from reference UI images.

Community
Advanced
andrewle9510andrewle9510

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Community
Advanced
josecontijoseconti
12

Klytos CSS Classes

Define design tokens and CSS classes for consistent Klytos UI styling.

Community
Advanced