skills.rest
LinXueyuanStdio
LinXueyuanStdioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generates UI/UX design-system recommendations for web and mobile interfaces.

2|Updated Jan 30, 2026
Search Tags:#typography#accessibility#design system#color palette#mcp#ui ux#react nextjs
One-click install
npx skills add https://github.com/LinXueyuanStdio/viben --skill ui-ux-pro-max-linxueyuanstdio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/LinXueyuanStdio/viben/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/LinXueyuanStdio/viben --skill ui-ux-pro-max-linxueyuanstdio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It helps you avoid inconsistent, inaccessible UI by providing vetted design-system guidance for layout, typography, color, interaction, and charts across common web and mobile stacks.

Core Features & Use Cases

  • Design system generation: Produces a complete recommendation (pattern, style, color palette, typography, effects, anti-patterns) from a single query.
  • Accessibility-first checks: Focuses on contrast, focus states, ARIA labeling, keyboard navigation, and reduced-motion considerations.
  • Stack-aware implementation guidance: Retrieves implementation guidelines for popular stacks like HTML+Tailwind or React/Next.js.
  • Persistence (Master + Overrides): Saves reusable project-level design rules and optional page-specific overrides for consistent multi-page delivery.

Quick Start

Run: python3 skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard fintech dark mode accessible" --design-system -p "My Fintech Dashboard".

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

Generate a UI design system for a React dashboard by executing the provided search script with interface parameters to return pattern, style, color palette, and typography recommendations tailored for React and Next.js stacks.

What is the best way to ensure color palette accessibility in web design?▼

Ensure color palette accessibility in web design by applying contrast checks, focus states, and ARIA labeling guidelines returned by the design system recommendations to meet accessibility-first standards.

Can I save and reuse design system rules across multiple pages?▼

Save and reuse design system rules across multiple pages by utilizing the persistence feature to write project-level design rules to Master files and optional page-specific overrides for consistent delivery.

Does the design system generator support Tailwind CSS implementation?▼

Yes, the design system generator supports Tailwind CSS implementation by retrieving stack-aware implementation guidelines for common web stacks like HTML and Tailwind alongside React and Next.js environments.

How do I avoid common anti-patterns when building a fintech admin panel?▼

Avoid common anti-patterns when building a fintech admin panel by requesting design system guidance that returns specific anti-pattern warnings, style recommendations, and interaction effects for your interface.

Related Skills

Explore More Design & Creative Skills→
hollandkevinthollandkevint
5

ui-ux-pro-max

Generate design systems with styles, color palettes, and typography.

Community
Advanced
ControlNetControlNet
9

ui-ux-pro-max

Generate design systems and UI/UX guidance for web and mobile interfaces.

Community
Advanced
vladolaruvladolaru
6

accessible-frontend-dev

Implement ARIA, keyboard, and focus management patterns for React and HTML components.

Community
Advanced
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate