skills.rest
thesaifalitai
thesaifalitaiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generate design planning recommendations for visual style, color palettes, typography, and design systems.

8|1|Updated Feb 27, 2026
Search Tags:#typography#accessibility#tailwind#generate#design-system#color-palette#ui-style
One-click install
npx skills add https://github.com/thesaifalitai/claude-setup --skill ui-ux-pro-max-thesaifalitai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/thesaifalitai/claude-setup/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/thesaifalitai/claude-setup --skill ui-ux-pro-max-thesaifalitai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

ui-ux-pro-max solves the uncertainty and fragmentation during early-stage design by providing prioritized, research-backed recommendations for visual style, color palettes, typography, layout patterns, accessibility, and chart choices before any UI code is written. It centralizes discovery and decision-making so teams can pick a cohesive look-and-feel and design system that fits product goals and technical constraints.

Core Features & Use Cases

  • Comprehensive style discovery covering dozens of visual styles and prioritized recommendations for product type (landing pages, dashboards, SaaS, e-commerce).
  • Color palette and typography selection with accessible contrast guidance and recommended font pairings for web and mobile.
  • Rule-driven design system generation that combines BM25 CSV searches, reasoning rules, and stack-specific guidelines to output an ASCII or Markdown design system and persist a Master file with page-level overrides.
  • Stack-aware guidance across html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui for implementation-ready decisions.
  • Use case: Converge on a production-ready design direction for a fintech dashboard including colors, typography, card/button specs, and accessibility checklist.

Quick Start

Generate a complete design system for a SaaS dashboard named Serenity Spa focusing on minimalism, accessible colors, and responsive Tailwind implementation.

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 UI design system for a React or Next.js dashboard?▼

Generate a UI design system by producing prioritized visual style, typography, and color palette recommendations. The system outputs a hierarchical Markdown or ASCII file with stack-aware guidelines for React, Next.js, and Tailwind implementations.

Can I use Tailwind and shadcn/ui to select accessible color palettes and typography?▼

Yes, Tailwind and shadcn/ui are supported stacks for selecting accessible color palettes and typography. The system provides accessible contrast guidance and recommended font pairings specifically tailored for these web implementation environments.

What is the best way to plan visual styles for a SaaS or fintech product?▼

Plan visual styles for SaaS or fintech products by matching prioritized, research-backed style recommendations against product goals. This approach centralizes discovery to converge on a cohesive look-and-feel before writing any UI code.

Does this design planning approach support mobile frameworks like SwiftUI and Flutter?▼

Yes, the design planning approach supports mobile frameworks including SwiftUI and Flutter. It delivers stack-aware guidance and component planning decisions for both web and mobile product discovery across multiple frameworks.

How do I persist design system decisions with page-level overrides?▼

Persist design system decisions by assembling a hierarchical MASTER.md file and running included Python scripts. This process saves the generated design system and applies specific page-level overrides to the base configuration.

Related Skills

Explore More Design & Creative Skills→
AesopScottAesopScott
1

design-experience-plus-plus

Generate website and product surface designs using MAPS M8 Experience Design.

Community
Advanced
ms-moarms-moar

frontend-enhancer

Generate design assets and examples for modernizing web application styling.

Community
Intermediate
programadorisgodprogramadorisgod
1

ui-design-system

Audit React UI design systems for accessibility and token consistency.

Community
Advanced
Nir-BhayNir-Bhay
19

design-handoff-spec

Generate developer-ready UI component specifications from Figma annotations.

Community
Advanced