ui-ux-pro-max

Search UI/UX design guidance across style, color, typography, and chart domains.

1|Updated Dec 10, 2025
One-click install
npx skills add https://github.com/hungtrandigital/splt --skill ui-ux-pro-max-hungtrandigital
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/hungtrandigital/splt/tree/main/0-agents/agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/hungtrandigital/splt --skill ui-ux-pro-max-hungtrandigital

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a searchable database of UI styles, color palettes, typography pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices to speed up design and implementation.

Core Features & Use Cases

  • Comprehensive design resources: 50 styles, 21 palettes, 50 font pairings, 20 chart types, and 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind).
  • Stack-oriented guidance: domain-specific best practices for multiple stacks (html-tailwind default; also React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter).
  • Structured design workflow: Analyze requirements → search domains (product, style, typography, color, landing, UX, prompt) → synthesize, build, and implement.

Quick Start

Provide a design brief (product type, style keywords, preferred stack). The Skill returns a design system blueprint: style tokens, color palettes, typography pairings, chart recommendations, and common UI patterns.

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 find the right UI style and color palette for my SaaS product?

Search the Skill's style and palette domains with your product type and design preferences. It returns curated style tokens, color palettes, and typography pairings matched to your requirements, eliminating manual research across multiple sources.

Can I get design guidance specific to my tech stack—React, Vue, Tailwind, or Flutter?

Yes. The Skill provides stack-aware best practices for eight frameworks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and HTML with Tailwind. Each stack receives domain-specific implementation guidance and UI patterns.

How do I choose the right chart type for my dashboard or data visualization?

Query the chart domain with your data structure and use case. The Skill recommends from 20 chart types with stack-specific implementation guidance, helping you match visualization to your data and framework.

What typography pairings work best for different product types?

Search the typography domain with your product category and design brief. The Skill surfaces 50 validated font pairings optimized for readability, brand fit, and stack implementation across SaaS, e-commerce, and portfolio sites.

Can I load my own design data or customize the design system database?

The Skill uses CSV-backed data loading, enabling you to load custom style, palette, typography, and chart data. Configure max results and formatting to tune outputs for your workflow and downstream agents.

Does this tool help with accessibility and UX guidelines in design systems?

Yes. The Skill searches UX and accessibility domains alongside style and color, returning guidelines for inclusive design, contrast ratios, and interaction patterns aligned to your stack and product type.