UI UX Pro Max Skill

This skill provides a comprehensive design intelligence database and reasoning engine to ensure you output stunning, modern, and accessible user interfaces.

0. Corporate Identity Check (CRITICAL FIRST STEP)

Before initiating any UI/UX design, you MUST prompt the user and ask: "Do you have a Corporate Identity, Brand Guidelines, or Figma reference file I should use?"

If the user provides one:

Parse the guidelines to extract the Exact Primary, Secondary, and Accent Hex colors.
Extract the Official Brand Fonts (if any).
OVERRIDE the colors and typography generated by the Design System in Step 2 with these brand values.

1. Analyze User Requirements

When the user requests UI/UX work (e.g., "Build a landing page for my SaaS product"), extract:

Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
Style keywords: minimal, playful, professional, elegant, dark mode, etc.
Industry: healthcare, fintech, gaming, education, etc.
Stack: React, Vue, Next.js, or default to html-tailwind

2. Generate Design System (REQUIRED)

You must ALWAYS run the python design system generator before writing frontend code.

Run the following command exactly (replacing placeholders with the extracted requirements):

python3 /Users/michaelchang/.gemini/antigravity/playground/.agent/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system -p "Project Name"

Example:

python3 /Users/michaelchang/.gemini/antigravity/playground/.agent/skills/ui-ux-pro-max/scripts/search.py "fintech banking dark professional" --design-system -p "My Bank App"

What this does:

Searches 5 domains in parallel (product, style, color, landing, typography).
Applies 100 industry-specific reasoning rules.
Outputs a complete design system (pattern, colors, typography, effects).
Provides strict anti-patterns to avoid.

3. Supplement with Detailed Searches (Optional)

If you need more specific data after getting the design system, query the database directly:

python3 /Users/michaelchang/.gemini/antigravity/playground/.agent/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain>

Need	Domain	Example
More style options	`style`	`--domain style "glassmorphism"`
Chart recommendations	`chart`	`--domain chart "dashboard"`
UX best practices	`ux`	`--domain ux "accessibility"`
Alternative fonts	`typography`	`--domain typography "elegant"`

4. Execute with Pre-Delivery Checklist

Before completing the task, verify your generated UI code against this checklist:

No emojis used as icons - Use standard SVG icon libraries (Heroicons, Lucide).
cursor-pointer - Ensure this is applied to all clickable elements.
Smooth transitions - Apply hover transitions (150-300ms) to interactive elements.
Contrast ratios - Light mode text contrast must be at least 4.5:1.
No layout-shifting hovers - Hover states should not cause surrounding elements to move.
Focus states - Keyboard navigation focus states must be visible.