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.