ui-ux-pro-max

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

38|2|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/WebDevPeterGriffin/The-VibeCode-Bible --skill ui-ux-pro-max-webdevpetergriffin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/WebDevPeterGriffin/The-VibeCode-Bible/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/WebDevPeterGriffin/The-VibeCode-Bible --skill ui-ux-pro-max-webdevpetergriffin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you design and implement UI/UX that looks professional and works reliably by using curated patterns, accessibility rules, color palettes, typography pairings, and responsive layout guidance.

Core Features & Use Cases

  • Design-system generation for product UI: Produces a complete recommendation from product/style/color/typography/landing inputs, including anti-patterns and key effects.
  • Accessibility-first UI review: Enforces practical checks like contrast, focus states, keyboard navigation, form labeling, and ARIA labeling.
  • Implementation-aware UI guidance: Provides stack-targeted suggestions across common stacks (defaulting to html-tailwind) for components and interaction behaviors.
  • Chart and landing structure support: Recommends appropriate chart types and landing page section patterns to improve comprehension and conversion.

Quick Start

Run the UI/UX design-system generator for a SaaS dashboard called "Project Name" by telling your AI: python3 skills/ui-ux-pro-max/scripts/search.py "saas dashboard" --design-system -p "Project Name" .

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 SaaS dashboard?

To generate a UI design system for a SaaS dashboard, run the search script with the design-system flag and your product name. This produces actionable UI patterns, color tokens, and typography pairings tailored for web and mobile product interfaces.

What is the best way to ensure accessibility in my landing page design?

The best way to ensure accessibility in landing page design is to apply contrast checks, focus states, keyboard navigation, and ARIA labeling. An accessibility-first UI review enforces these practical checks to meet prioritization rules for interface compliance.

How does chart and interaction design guidance work for web interfaces?

Chart and interaction design guidance works by recommending appropriate chart types and landing page section patterns to improve comprehension and conversion across web interfaces. It provides stack-targeted suggestions for interaction behaviors.

Can I use this UI UX guidance with html-tailwind?

Yes, you can use this UI UX guidance with html-tailwind. The implementation-aware UI guidance provides stack-targeted suggestions across common stacks, defaulting to html-tailwind for components and interaction behaviors.

What are common UI anti-patterns to avoid when building responsive layouts?

Common UI anti-patterns to avoid when building responsive layouts include failing contrast checks, missing focus states, and poor form labeling. The design-system generation output explicitly produces anti-pattern guidance to prevent these issues.