By name: fct-web-ui-ux description: 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.
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
- No emojis as icons (use SVG)
- Consistent icon set (Heroicons/Lucide)
- Hover states don't cause layout shift
- Use theme colors directly (bg-primary)
Interaction
- All clickable elements have
cursor-pointer - Transitions 150-300ms
- Focus states visible
Light/Dark Mode
- Light mode text contrast 4.5:1 minimum
- Glass elements visible in light mode
- Borders visible in both modes
Layout
- Responsive at 375px, 768px, 1024px, 1440px
- No horizontal scroll on mobile
- No content behind fixed elements
Accessibility
- All images have alt text
- Form inputs have labels
-
prefers-reduced-motionrespected