skills.rest
hookvibe
hookvibeOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography guidelines.

3|1|Updated Jan 13, 2026
Search Tags:#typography#react#tailwind#ui-ux#design-system#shadcn#color-palette
One-click install
npx skills add https://github.com/hookvibe/hookcode --skill ui-ux-pro-max-hookvibe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/hookvibe/hookcode/tree/main/.gemini/skills/ui-ux-pro-max
Command: npx skills add https://github.com/hookvibe/hookcode --skill ui-ux-pro-max-hookvibe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX design teams often struggle to maintain consistency across web and mobile apps. This Skill automates design guidance by generating design systems, color palettes, typography, and stack-specific best practices, empowering teams to ship cohesive interfaces faster.

Core Features & Use Cases

  • Generate a complete design system with color, typography, spacing, and component guidelines for React, Tailwind, shadcn, and more.
  • Retrieve domain-specific recommendations for UX patterns, accessibility considerations, and performance-conscious design.
  • Use Case: When starting a SaaS dashboard, generate a ready-to-implement design system and style guidelines that align with your tech stack.

Quick Start

Run the design system generator for your project: python3 .gemini/skills/ui-ux-pro-max/scripts/search.py "saas dashboard minimal dark" --design-system -p "MyProject" --persist

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

To generate a design system for React and Tailwind, run the provided Python search script with your project parameters. The script outputs cohesive color palettes, typography guidelines, and stack-specific best practices for immediate implementation.

What is the best way to maintain UI consistency across web and mobile apps?▼

The best way to maintain UI consistency is to generate a comprehensive design system enforcing cohesive color, spacing, and typography guidelines. This automates design guidance to help teams ship unified interfaces faster.

Can I use this to generate color palettes and typography guidelines for shadcn?▼

Yes, you can generate color palettes and typography guidelines specifically for shadcn. The skill provides stack-specific best practices and component guidelines tailored for shadcn implementations.

How do I get UX pattern recommendations for a SaaS dashboard?▼

To get UX pattern recommendations for a SaaS dashboard, execute the Python script with a descriptive query like "saas dashboard minimal dark". It retrieves domain-specific UX patterns, accessibility considerations, and performance-conscious design rules.

Do I need any dependencies to run the UI design system generator?▼

No external dependencies are required to run the UI design system generator. You only need Python installed to execute the deterministic scripts and generate your project's design guidelines.

Related Skills

Explore More Design & Creative Skills→
abonetoaboneto

speckit.git.initialize

Initialize a Git repository and apply an initial commit workflow.

Community
Intermediate
chriswesttchriswestt

frontend-theme

Apply design tokens, typography, and layout rules to frontend outputs.

Community
Advanced
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
dotrurudotruru

brand-guidelines

Apply brand color palettes and typography rules to artifacts.

Community
Basic