skills.rest
botPhU
botPhUCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Analyze UI/UX requirements and generate stack-aligned design plans.

Updated Dec 5, 2025
Search Tags:#typography#design#ui#layout#ux#palette#frontend-tooling
One-click install
npx skills add https://github.com/botPhU/project-An-English-speaking-practice-platform-supported-by-AI --skill ui-ux-pro-max-botphu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/botPhU/project-An-English-speaking-practice-platform-supported-by-AI/tree/main/.agent/skills/ui-ux-pro-max
Command: npx skills add https://github.com/botPhU/project-An-English-speaking-practice-platform-supported-by-AI --skill ui-ux-pro-max-botphu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of translating design intents into actionable UI/UX guidance.

Core Features & Use Cases

  • Comprehensive design guidance: Access a searchable database of 50 font pairings, 21 color palettes, 20 chart types, and 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui) to inform UI decisions.
  • Stack-aware recommendations: Provide framework- and library-specific patterns for components, navigation, and responsive layouts.
  • Use Case: When planning a SaaS admin panel, generate a cohesive style system, component catalog, and a responsive layout plan tailored to the chosen stack.

Quick Start

Analyze user requirements (product type, target platform, preferred stacks, accessibility goals) and request a design plan from the UI/UX Pro Max skill. For example: "Create a responsive dashboard UI for a fintech SaaS using React and Tailwind with accessible color contrast."

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 plan a responsive dashboard UI for React and Tailwind?▼

Yes, it provides stack-aware recommendations for React Native and Flutter mobile app design. It analyzes your mobile app requirements and surfaces framework-specific component patterns, navigation structures, and responsive layouts tailored to your chosen mobile stack.

Can I get color palette and typography recommendations for a SaaS admin panel?▼

Yes, you can get color palette and typography recommendations for a SaaS admin panel by providing your product type and accessibility goals. The skill queries 21 color palettes and 50 font pairings to generate a cohesive style system.

Does this UI design skill provide accessible color contrast guidance?▼

Yes, this UI design skill provides accessible color contrast guidance by incorporating accessibility considerations into its structured workflow. You define accessibility goals upfront, and it factors those constraints into the generated color palette and style system recommendations.

What is the best way to generate a component catalog for Next.js and shadcn/ui?▼

The best way to generate a component catalog for Next.js and shadcn/ui is to define your product requirements and request a design plan. The skill performs domain-specific searches and outputs a stack-aligned component catalog and style system tailored to shadcn/ui.

How does this approach handle design planning for Svelte or SwiftUI stacks?▼

This approach handles design planning for Svelte or SwiftUI by performing domain-specific searches and returning stack-aware implementation patterns. It enforces a structured workflow that analyzes your requirements and outputs design plans aligned to your specific framework.

Related Skills

Explore More Design & Creative Skills→
kirvinkirvin

ui-ux-pro-max

Generate design systems for web and mobile applications across multiple technology stacks.

Community
Advanced
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced
jubalmjubalm
1

shadcn/ui Customization & Theming

Configure CSS variable-based theming for shadcn/ui components with Tailwind.

Community
Advanced
GenEducationGenEducation

ui-ux-pro-max

Generates UI/UX recommendations for web and mobile interfaces including accessibility review and responsive layout.

Official
Advanced