[Frontend] Frontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks. Triggers on ui design, ux design, design system, color palette, typography, glassmorphism, claymorphism, neumorphism, bento grid, font pairing, ui-ux-pro-max, stunning interface, beautiful ui.
allowed-tools
NONE
[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI may ask user whether to skip.
Quick Summary
Goal: Provide searchable UI/UX design intelligence -- 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks.
Workflow:
Analyze — Extract product type, style keywords, industry, and stack from user request
Stack Guidelines — Get stack-specific best practices (default: html-tailwind)
Implement — Synthesize search results into cohesive design and code
Key Rules:
No emojis as UI icons (use SVG: Heroicons, Lucide, Simple Icons)
All clickable elements need cursor-pointer and hover feedback
Light mode text must have 4.5:1 minimum contrast ratio
Test both light/dark modes and responsive breakpoints before delivery
UI/UX Pro Max - Design Intelligence
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
Prerequisites
Check if Python is installed:
python3 --version || python --version
If Python is not installed, install it based on user's OS:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
How to Use This Skill
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyze User Requirements
Extract key information from user request:
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
Step 2: Search Relevant Domains
Use search.py multiple times to gather comprehensive information. Search until you have enough context.
