UI/UX Design Intelligence
Searchable database of UI styles, color palettes, font pairings, and UX guidelines. Generates complete design systems with reasoning.
Priority Rules
| Priority |
Category |
Impact |
| 1 |
Accessibility |
CRITICAL |
| 2 |
Touch & Interaction |
CRITICAL |
| 3 |
Performance |
HIGH |
| 4 |
Layout & Responsive |
HIGH |
| 5 |
Typography & Color |
MEDIUM |
| 6 |
Animation |
MEDIUM |
| 7 |
Style Selection |
MEDIUM |
| 8 |
Charts & Data |
LOW |
Quick Reference
Accessibility (CRITICAL)
color-contrast - Minimum 4.5:1 ratio for textfocus-states - Visible focus rings on interactive elementsalt-text - Descriptive alt text for imagesaria-labels - aria-label for icon-only buttonskeyboard-nav - Tab order matches visual order
Touch & Interaction (CRITICAL)
touch-target-size - Minimum 44x44px touch targetsloading-buttons - Disable button during async operationscursor-pointer - Add cursor-pointer to clickable elements
Performance (HIGH)
image-optimization - Use WebP, srcset, lazy loadingreduced-motion - Check prefers-reduced-motion
Layout & Responsive (HIGH)
readable-font-size - Minimum 16px body text on mobilez-index-management - Define z-index scale (10, 20, 30, 50)
Workflow
Step 1: Analyze Request
Extract from user request:
- Product type: SaaS, e-commerce, portfolio, dashboard, landing page
- Style keywords: minimal, playful, professional, elegant, dark mode
- Industry: healthcare, fintech, gaming, education
- Stack: React, Vue, Next.js, or default to
html-tailwind
Step 2: Generate Design System (REQUIRED)
uv run scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
Returns: pattern, style, colors, typography, effects, anti-patterns.
Example:
uv run scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Step 2b: Persist Design System (Optional)
Save for hierarchical retrieval across sessions:
uv run scripts/search.py "<query>" --design-system --persist -p "Project Name"
Creates:
design-system/MASTER.md — Global Source of Truthdesign-system/pages/ — Page-specific overrides
With page override:
uv run scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
Step 3: Detailed Searches (as needed)
uv run scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Need |
Domain |
Example |
| More style options |
style |
--domain style "glassmorphism dark" |
| Chart recommendations |
chart |
--domain chart "real-time dashboard" |
| UX best practices |
ux |
--domain ux "animation accessibility" |
| Alternative fonts |
typography |
--domain typography "elegant luxury" |
| Landing structure |
landing |
--domain landing "hero social-proof" |
Step 4: Stack Guidelines
uv run scripts/search.py "<keyword>" --stack html-tailwind
Stacks: html-tailwind (default), react, nextjs, astro, vue, nuxtjs, nuxt-ui, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
Search Reference
Domains
| Domain |
Use For |
product |
Product type recommendations |
style |
UI styles, colors, effects |
typography |
Font pairings, Google Fonts |
color |
Color palettes by product type |
landing |
Page structure, CTA strategies |
chart |
Chart types, library recommendations |
ux |
Best practices, anti-patterns |
react |
React/Next.js performance |
web |
Web interface guidelines |
Common Rules
Icons & Visual Elements
| Rule |
Do |
Don't |
| No emoji icons |
Use SVG (Heroicons, Lucide) |
Use emojis as UI icons |
| Stable hover states |
Use color/opacity transitions |
Use scale transforms |
| Consistent sizing |
Fixed viewBox (24x24) w-6 h-6 |
Mix icon sizes |
Interaction & Cursor
| Rule |
Do |
Don't |
| Cursor pointer |
Add cursor-pointer to clickable elements |
Leave default cursor |
| Hover feedback |
Visual feedback (color, shadow) |
No indication of interactivity |
| Smooth transitions |
transition-colors duration-200 |
Instant or >500ms |
Light/Dark Mode Contrast
| Rule |
Do |
Don't |
| Glass card light mode |
bg-white/80 or higher |
bg-white/10 |
| Text contrast light |
#0F172A (slate-900) |
#94A3B8 (slate-400) |
| Border visibility |
border-gray-200 light mode |
border-white/10 |
Layout & Spacing
| Rule |
Do |
Don't |
| Floating navbar |
top-4 left-4 right-4 spacing |
top-0 left-0 right-0 |
| Content padding |
Account for fixed navbar |
Content behind fixed elements |
| Consistent max-width |
Same max-w-6xl or max-w-7xl |
Mix container widths |
Pre-Delivery Checklist
Visual Quality
Interaction
Light/Dark Mode
Layout
Accessibility
1---2name: fct-web-ui-ux3description: UI/UX design intelligence for web and mobile across 13 stacks (React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, etc.). Use when building, designing, reviewing, or optimizing UI/UX for websites, dashboards, apps. Covers styles, palettes, fonts, accessibility, animation, layout.4---56# UI/UX Design Intelligence78Searchable database of UI styles, color palettes, font pairings, and UX guidelines. Generates complete design systems with reasoning.910## Priority Rules1112| Priority | Category | Impact |13|----------|----------|--------|14| 1 | Accessibility | CRITICAL |15| 2 | Touch & Interaction | CRITICAL |16| 3 | Performance | HIGH |17| 4 | Layout & Responsive | HIGH |18| 5 | Typography & Color | MEDIUM |19| 6 | Animation | MEDIUM |20| 7 | Style Selection | MEDIUM |21| 8 | Charts & Data | LOW |2223## Quick Reference2425### Accessibility (CRITICAL)26- `color-contrast` - Minimum 4.5:1 ratio for text27- `focus-states` - Visible focus rings on interactive elements28- `alt-text` - Descriptive alt text for images29- `aria-labels` - aria-label for icon-only buttons30- `keyboard-nav` - Tab order matches visual order3132### Touch & Interaction (CRITICAL)33- `touch-target-size` - Minimum 44x44px touch targets34- `loading-buttons` - Disable button during async operations35- `cursor-pointer` - Add cursor-pointer to clickable elements3637### Performance (HIGH)38- `image-optimization` - Use WebP, srcset, lazy loading39- `reduced-motion` - Check prefers-reduced-motion4041### Layout & Responsive (HIGH)42- `readable-font-size` - Minimum 16px body text on mobile43- `z-index-management` - Define z-index scale (10, 20, 30, 50)4445---4647## Workflow4849### Step 1: Analyze Request5051Extract from user request:52- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page53- **Style keywords**: minimal, playful, professional, elegant, dark mode54- **Industry**: healthcare, fintech, gaming, education55- **Stack**: React, Vue, Next.js, or default to `html-tailwind`5657### Step 2: Generate Design System (REQUIRED)5859```bash60uv run scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]61```6263Returns: pattern, style, colors, typography, effects, anti-patterns.6465**Example:**66```bash67uv run scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"68```6970### Step 2b: Persist Design System (Optional)7172Save for hierarchical retrieval across sessions:7374```bash75uv run scripts/search.py "<query>" --design-system --persist -p "Project Name"76```7778Creates:79- `design-system/MASTER.md` — Global Source of Truth80- `design-system/pages/` — Page-specific overrides8182With page override:83```bash84uv run scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"85```8687### Step 3: Detailed Searches (as needed)8889```bash90uv run scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]91```9293| Need | Domain | Example |94|------|--------|---------|95| More style options | `style` | `--domain style "glassmorphism dark"` |96| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |97| UX best practices | `ux` | `--domain ux "animation accessibility"` |98| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |99| Landing structure | `landing` | `--domain landing "hero social-proof"` |100101### Step 4: Stack Guidelines102103```bash104uv run scripts/search.py "<keyword>" --stack html-tailwind105```106107Stacks: `html-tailwind` (default), `react`, `nextjs`, `astro`, `vue`, `nuxtjs`, `nuxt-ui`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`108109---110111## Search Reference112113### Domains114115| Domain | Use For |116|--------|---------|117| `product` | Product type recommendations |118| `style` | UI styles, colors, effects |119| `typography` | Font pairings, Google Fonts |120| `color` | Color palettes by product type |121| `landing` | Page structure, CTA strategies |122| `chart` | Chart types, library recommendations |123| `ux` | Best practices, anti-patterns |124| `react` | React/Next.js performance |125| `web` | Web interface guidelines |126127---128129## Common Rules130131### Icons & Visual Elements132133| Rule | Do | Don't |134|------|----|----- |135| **No emoji icons** | Use SVG (Heroicons, Lucide) | Use emojis as UI icons |136| **Stable hover states** | Use color/opacity transitions | Use scale transforms |137| **Consistent sizing** | Fixed viewBox (24x24) w-6 h-6 | Mix icon sizes |138139### Interaction & Cursor140141| Rule | Do | Don't |142|------|----|----- |143| **Cursor pointer** | Add `cursor-pointer` to clickable elements | Leave default cursor |144| **Hover feedback** | Visual feedback (color, shadow) | No indication of interactivity |145| **Smooth transitions** | `transition-colors duration-200` | Instant or >500ms |146147### Light/Dark Mode Contrast148149| Rule | Do | Don't |150|------|----|----- |151| **Glass card light mode** | `bg-white/80` or higher | `bg-white/10` |152| **Text contrast light** | `#0F172A` (slate-900) | `#94A3B8` (slate-400) |153| **Border visibility** | `border-gray-200` light mode | `border-white/10` |154155### Layout & Spacing156157| Rule | Do | Don't |158|------|----|----- |159| **Floating navbar** | `top-4 left-4 right-4` spacing | `top-0 left-0 right-0` |160| **Content padding** | Account for fixed navbar | Content behind fixed elements |161| **Consistent max-width** | Same `max-w-6xl` or `max-w-7xl` | Mix container widths |162163---164165## Pre-Delivery Checklist166167### Visual Quality168- [ ] No emojis as icons (use SVG)169- [ ] Consistent icon set (Heroicons/Lucide)170- [ ] Hover states don't cause layout shift171- [ ] Use theme colors directly (bg-primary)172173### Interaction174- [ ] All clickable elements have `cursor-pointer`175- [ ] Transitions 150-300ms176- [ ] Focus states visible177178### Light/Dark Mode179- [ ] Light mode text contrast 4.5:1 minimum180- [ ] Glass elements visible in light mode181- [ ] Borders visible in both modes182183### Layout184- [ ] Responsive at 375px, 768px, 1024px, 1440px185- [ ] No horizontal scroll on mobile186- [ ] No content behind fixed elements187188### Accessibility189- [ ] All images have alt text190- [ ] Form inputs have labels191- [ ] `prefers-reduced-motion` respected
diegosouzapw