skills.rest
AincFh
AincFhCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems and component guidance for web and mobile UI.

Updated Dec 16, 2025
Search Tags:#typography#ui#accessibility#ux#design-system#color-palette
One-click install
npx skills add https://github.com/AincFh/my-anime-blog --skill ui-ux-pro-max-aincfh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/AincFh/my-anime-blog/tree/main/ui-ux-pro-max-skill-2.5.0/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/AincFh/my-anime-blog --skill ui-ux-pro-max-aincfh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enhance product UI quality by providing structured, scalable guidance across patterns, color systems, typography, and interaction design for both web and mobile apps.

Core Features & Use Cases

  • Pattern recommendations across 50+ styles and 161 color palettes to accelerate design decisions.
  • Design-system generation, component guidance, and accessibility considerations across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.
  • Use Case: Quickly scaffold pages, refactor components, and unify design language across multiple stacks.

Quick Start

Create a cohesive React web UI design system with glassmorphism, accessible color tokens, and typography guidelines.

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 cohesive design system for React and Tailwind?▼

To generate a cohesive React and Tailwind design system, apply structured guidance across color tokens, typography, and component patterns. This approach scaffolds accessible UI guidelines and unifies design language across multiple stacks like Next.js and shadcn/ui.

What's the best way to choose accessible color palettes for a mobile UI?▼

Choosing accessible color palettes for mobile UI involves selecting from structured pattern recommendations across 161 color combinations. This ensures your web and mobile interfaces maintain proper contrast and scalable design tokens.

Can I use this UI design guidance with SwiftUI and React Native?▼

Yes, UI design guidance applies directly to SwiftUI and React Native. It delivers component guidance and interaction design patterns specifically structured to align across mobile stacks including Flutter.

How do I refactor components to align with a new design language?▼

Refactoring components to align with a new design language requires applying structured interaction design and typography guidelines. This ensures your UI components match the targeted visual patterns and accessibility considerations.

Does this design intelligence support Vue and Svelte stacks?▼

Design intelligence supports Vue and Svelte stacks by providing component guidance and design-system generation. It aligns UI patterns and color systems across these frameworks alongside HTML/CSS environments.

When do I need structured typography guidelines for web design?▼

You need structured typography guidelines for web design when building new pages or unifying visual patterns across multiple stacks. This ensures scalable UI quality and consistent interaction design across your application.

Related Skills

Explore More Design & Creative Skills→
PingMe-NetworkPingMe-Network

extract

Extract reusable UI patterns, components, and design tokens into a centralized design system.

Official
Advanced
luiztrilhaluiztrilha

ui-ux-pro-max

Generate design systems with color palettes, typography, and UX guidelines.

Community
Advanced
civictechdccivictechdc
1

web-component-design

Design reusable UI components across React, Vue, and Svelte.

Official
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced