skills.rest
dankofly
dankoflyCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX design systems with color palettes, typography, and component patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Provides a single, searchable source of truth for UI/UX decisions to eliminate inconsistent styles, slow design iterations, accessibility regressions, and unclear implementation guidance across web and mobile projects.

Core Features & Use Cases

  • Design system generation: Aggregates style, color, typography, layout, and component patterns with priority-based reasoning and anti-patterns.
  • Domain-specific guidance: Searchable recommendations for style, color palettes, typography, charts, landing patterns, and UX best practices tailored to websites, dashboards, e-commerce, SaaS, and mobile apps.
  • Implementation support: Stack-specific guidance and CLI scripts produce ascii or markdown outputs and include performance and accessibility considerations for html-tailwind, react, nextjs, shadcn, and more.
  • Use case: Produce a complete design system and implementation checklist for a SaaS dashboard to hand off to developers or to audit an existing product for accessibility and consistency.

Quick Start

Generate a full design system for a SaaS dashboard including recommended styles, accessible color palettes (hex), font pairings, component patterns, and Tailwind implementation notes.

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

Generate a complete UI/UX design system by aggregating style selections, accessible color palettes with hex codes, typography pairings, and component patterns tailored for SaaS dashboards. The output includes layout patterns, anti-patterns, and implementation guidance to ensure consistency across your product.

Can I get Tailwind implementation guidance for my web design system?▼

Yes, you can get Tailwind implementation guidance for your web design system. The system provides stack-specific CLI scripts and implementation notes for html-tailwind, ensuring your generated color palettes, typography, and component patterns translate directly into functional code.

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

The best way to choose accessible color palettes and typography is to generate domain-specific recommendations that include accessible color hex codes and font pairings. This approach ensures your mobile apps meet accessibility standards while maintaining a consistent visual style.

Does the design system generation support React and Next.js component patterns?▼

Yes, design system generation supports React and Next.js component patterns. It provides stack-specific guidance and CLI scripts for react, nextjs, and shadcn, delivering structured outputs that include component effects and accessibility considerations for these frameworks.

How do I audit an existing e-commerce storefront for accessibility and UI consistency?▼

Audit an existing e-commerce storefront by generating domain-specific UX best practices and accessibility reviews. This process identifies unclear implementation guidance, accessibility regressions, and inconsistent styles, providing structured recommendations to align your storefront with standard design patterns.

Related Skills

Explore More Design & Creative Skills→
tunneleventunneleven

c4flow:infra

Generate Infrastructure as Code configurations from a tech-stack.md file.

Community
Basic
vikingokftvikingokft

design-md

Extract Stitch project design metadata and generate a structured DESIGN.md file.

Official
Intermediate
Ritik-Sharma1Ritik-Sharma1

ui-visual-validator

Validate UI components and pages for design system compliance and accessibility.

Community
Advanced
lukebazelukebaze

ui-ux-pro-max

Generate structured UI/UX design systems for web and mobile products.

Community
Advanced