skills.rest
PhucMPham
PhucMPhamCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Provide UI/UX design guidance and implementation plans for frontend projects.

Updated Dec 25, 2025
One-click install
npx skills add https://github.com/PhucMPham/threejs-christmas-tree --skill ui-ux-pro-max-phucmpham
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/PhucMPham/threejs-christmas-tree/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/PhucMPham/threejs-christmas-tree --skill ui-ux-pro-max-phucmpham

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a searchable database of UI styles, color palettes, fonts, charts, and stack-specific guidelines to plan and implement delightful, accessible interfaces quickly.

Core Features & Use Cases

  • Centralized style guidance: 50 styles, 21 palettes, 50 font pairings, 20 chart types, plus stack guidelines.
  • Stack-aware recommendations: html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter.
  • UX best practices and accessibility guidelines baked in for faster, more accessible design decisions.

Quick Start

Quick Start: python3 .claude/skills/ui-ux-pro-max/scripts/search.py "analytics dashboard" --domain chart

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 design a UI quickly with consistent color palettes and typography?▼

Design consistent UI using pre-built color palettes and font pairings. This Skill provides 21 palettes and 50 font pairings plus 50 styles, enabling you to apply cohesive aesthetics across websites, dashboards, and apps without starting from scratch.

Can I get UI/UX guidance specific to React, Vue, or Next.js?▼

Yes. This Skill delivers stack-specific guidelines for React, Next.js, Vue, Svelte, SwiftUI, React Native, and Flutter, plus Tailwind and HTML, so recommendations align with your framework and tooling.

How do I choose the right chart type for an analytics dashboard?▼

This Skill includes 20 chart types with guidance for selecting the right visualization. Use the searchable database to find chart recommendations, then access implementation code ready for React, Vue, or your chosen stack.

Does this cover accessibility and responsive design?▼

Yes. Accessibility considerations and responsive behavior are core to every recommendation. The Skill includes design-system assets and implementation checklists ensuring your interface meets accessibility standards and works across devices.

What deliverables do I get for implementing a design?▼

You receive code-ready templates, implementation checklists, and design-system assets. These accelerate the handoff from design planning through component guidance to a production-ready, accessible interface.

Related Skills

Explore More Design & Creative Skills→
williamzujkowskiwilliamzujkowski
6

UX Wireframe Designer

Convert user stories into wireframes, user flows, and Mermaid diagrams.

Community
Advanced
Kin3XcKin3Xc

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Community
Advanced
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate
shuff57shuff57

ui-ux-pro-max

Generate searchable UI/UX design systems with styles, colors, typography, and guidelines.

Community
Advanced