Skill: UI/UX (Cross-Cutting)
Purpose
This skill is used to handle style, interface, UX, UI for all project types. Uses UI/UX Builder search engine (built upon UI UX Pro Max Skill) with multiple search modes (BM25, Vector, Hybrid) to search for design intelligence from a database containing 57 UI styles, 95 color palettes, 56 font pairings, 24 chart types, 9+ page types, and 98 UX guidelines.
When to Use
- When creating or updating user interfaces
- When designing responsive layouts
- When ensuring accessibility (WCAG compliance)
- When creating component styles
- When optimizing user experience
- When finding appropriate color palettes, typography, or UI styles
Prerequisites
Python 3.x is required:
# Check if Python is installed
python3 --version || python --version
# macOS
brew install python3
# Ubuntu/Debian
sudo apt update && sudo apt install python3
# Windows
winget install Python.Python.3.12
Step-by-Step Process
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
html-tailwind
Step 2: Search Relevant Domains
Use scripts/search.py multiple times to gather comprehensive information. Search until you have enough context.
Search Mode Tips:
- Use BM25 (default) for simple keyword queries
- Use Vector mode (
--mode vector) for natural language queries or when you need semantic matches
- Use Hybrid mode (
--mode hybrid) for best overall results
Recommended search order:
Product - Get style recommendations for product type
python3 scripts/search.py "<product-type>" --domain product
# Or with semantic search:
python3 scripts/search.py "<product-type>" --domain product --mode vector
Style - Get detailed style guide (colors, effects, frameworks)
python3 scripts/search.py "<style-keywords>" --domain style
# For natural language queries:
python3 scripts/search.py "elegant dark theme for modern apps" --domain style --mode hybrid
Typography - Get font pairings with Google Fonts imports
python3 scripts/search.py "<typography-keywords>" --domain typography
Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
python3 scripts/search.py "<product-type>" --domain color
Landing - Get page structure (if landing page)
python3 scripts/search.py "<landing-keywords>" --domain landing
Chart - Get chart recommendations (if dashboard/analytics)
python3 scripts/search.py "<chart-type>" --domain chart
UX - Get best practices and anti-patterns
python3 scripts/search.py "animation" --domain ux
python3 scripts/search.py "accessibility" --domain ux
Design System - Get real-world brand design references (54 brands: Stripe, Vercel, Linear, etc.)
# Search by brand name
python3 scripts/search.py "stripe" --domain design-system
# Search by style/industry
python3 scripts/search.py "dark developer tools" --domain design-system --mode hybrid
# Then read the full DESIGN.md from knowledge/design-systems/<folder>/DESIGN.md
Stack - Get stack-specific guidelines (default: html-tailwind)
python3 scripts/search.py "<keyword>" --stack html-tailwind
# Or with semantic search:
python3 scripts/search.py "make layout responsive" --stack html-tailwind --mode vector
Step 3: Synthesize Search Results
Combine all search results to create a complete design system:
- Color palette from color search
- Typography from typography search
- UI style from style search
- UX guidelines from ux search
- Stack-specific patterns from stack search
Step 4: Implement Design
Implement UI following:
- Color palette found
- Typography pairings with Google Fonts
- UI style patterns
- Stack-specific best practices
- UX guidelines and accessibility rules
Step 5: Pre-Delivery Checklist
Before delivering UI code, verify:
Visual Quality:
Interaction:
Light/Dark Mode:
Layout:
Accessibility:
Required Input
- 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, html-tailwind (default)
- Target devices: Desktop, mobile, tablet
- Accessibility level: WCAG AA or AAA
Expected Output
- Complete design system with color palette, typography, and UI style
- Stack-specific implementation code
- Responsive and accessible UI components
- UX-optimized user flows
Search Reference
Available Domains
| Domain |
Use For |
Example Keywords |
product |
Product type recommendations |
SaaS, e-commerce, portfolio, healthcare, beauty, service |
style |
UI styles, colors, effects |
glassmorphism, minimalism, dark mode, brutalism |
typography |
Font pairings, Google Fonts |
elegant, playful, professional, modern |
color |
Color palettes by product type |
saas, ecommerce, healthcare, beauty, fintech, service |
landing |
Page structure, CTA strategies |
hero, hero-centric, testimonial, pricing, social-proof |
pages |
Page type templates (home, about, post, etc.) |
home, about, post, category, pricing, faq, contact, product |
chart |
Chart types, library recommendations |
trend, comparison, timeline, funnel, pie |
ux |
Best practices, anti-patterns |
animation, accessibility, z-index, loading |
prompt |
AI prompts, CSS keywords |
(style name) |
design-system |
Real-world brand design systems (54 brands) |
stripe, vercel, linear, dark developer, fintech premium |
Available Stacks
| Stack |
Focus |
html-tailwind |
Tailwind utilities, responsive, a11y (DEFAULT) |
react |
State, hooks, performance, patterns |
nextjs |
SSR, routing, images, API routes |
vue |
Composition API, Pinia, Vue Router |
svelte |
Runes, stores, SvelteKit |
swiftui |
Views, State, Navigation, Animation |
react-native |
Components, Navigation, Lists |
flutter |
Widgets, State, Layout, Theming |
Tone & Rules
Common Rules for Professional UI
Icons & Visual Elements:
- ✅ Use SVG icons (Heroicons, Lucide, Simple Icons)
- ✅ Use fixed viewBox (24x24) with w-6 h-6
- ✅ Stable hover states (color/opacity transitions, not scale transforms)
- ❌ NO emoji icons (🎨 🚀 ⚙️)
- ❌ NO incorrect brand logos
Interaction & Cursor:
- ✅ Add
cursor-pointer to all clickable/hoverable cards
- ✅ Provide visual feedback (color, shadow, border) on hover
- ✅ Use
transition-colors duration-200 (150-300ms)
- ❌ NO instant state changes or too slow (>500ms)
Light/Dark Mode Contrast:
- ✅ Glass card light mode:
bg-white/80 or higher
- ✅ Text contrast light:
#0F172A (slate-900) for text
- ✅ Muted text light:
#475569 (slate-600) minimum
- ✅ Border visibility:
border-gray-200 in light mode
- ❌ NO
bg-white/10 (too transparent)
- ❌ NO
#94A3B8 (slate-400) for body text
- ❌ NO
border-white/10 (invisible)
Layout & Spacing:
- ✅ Floating navbar:
top-4 left-4 right-4 spacing
- ✅ Content padding: Account for fixed navbar height
- ✅ Consistent max-width: Same
max-w-6xl or max-w-7xl
- ❌ NO navbar stuck to
top-0 left-0 right-0
- ❌ NO content hidden behind fixed elements
Code Style
- Default stack:
html-tailwind (unless specified)
- Mobile-first: Responsive design approach
- Accessibility: WCAG AA minimum
- Icons: Heroicons, Lucide, Simple Icons (SVG only)
- Transitions: 150-300ms for smooth interactions
Naming Conventions
- Tailwind: Use utility classes
- Components: Semantic naming
- CSS Variables: For theming
Limitations
- ❌ DO NOT use emoji as icons
- ❌ DO NOT hardcode colors (use variables or search results)
- ❌ DO NOT skip accessibility
- ❌ DO NOT create fixed-width layouts (unless necessary)
- ❌ DO NOT use inline styles (except dynamic values)
- ❌ DO NOT create non-responsive components
- ❌ DO NOT use scale transforms for hover (causes layout shift)
Available Scripts
scripts/search.py - Main search script for UI/UX Builder databasescripts/core.py - Core search engine (BM25, Vector, Hybrid)
Search Modes
UI/UX Builder supports multiple search algorithms for different use cases:
UI/UX Builder supports 3 search modes for different use cases:
BM25 (default) - Keyword-based search
- ✅ Fastest, zero dependencies
- ✅ Best for exact keyword matches
- ✅ Works out of the box
Vector - Semantic search
- ✅ Understands meaning and synonyms
- ✅ Better results (~15-20% improvement)
- ⚠️ Requires:
pip install sentence-transformers scikit-learn
Hybrid - Best of both worlds
- ✅ Combines BM25 + Vector
- ✅ Best results (~25% improvement)
- ⚠️ Requires:
pip install sentence-transformers scikit-learn
Usage:
# Search by domain (BM25 - default)
python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
# Search with Vector mode (semantic)
python3 scripts/search.py "<keyword>" --domain <domain> --mode vector
# Search with Hybrid mode (best results)
python3 scripts/search.py "<keyword>" --domain <domain> --mode hybrid
# Search by stack
python3 scripts/search.py "<keyword>" --stack <stack> [-n <max_results>] [--mode <mode>]
# Examples
python3 scripts/search.py "beauty spa wellness" --domain product
python3 scripts/search.py "elegant dark theme" --domain style --mode vector
python3 scripts/search.py "modern minimal design" --domain style --mode hybrid
python3 scripts/search.py "layout responsive" --stack html-tailwind
Note: If Vector/Hybrid mode is requested but dependencies are not installed, the system automatically falls back to BM25 mode with a warning message.
Multi-Page Website Package
When to Create Full Package vs Landing Page
Create Full Package when user requests:
- "Tạo website đầy đủ" / "Create complete website"
- "Tạo gói giao diện đầy đủ" / "Create full interface package"
- Multiple pages mentioned (home, about, contact, etc.)
- E-commerce site (needs product pages)
- Blog/content site (needs post and category pages)
Create Landing Page Only when user requests:
- "Tạo landing page" / "Create landing page"
- Single page conversion focus
- Marketing campaign page
- Product launch page
Default Page Set
When creating a complete website package (not specified), include these 9 pages:
- Home - Main homepage with hero, features, testimonials
- About - Company story, mission, team
- Post Details - Blog/article detail page
- Category - Blog/category listing page
- Pricing - Pricing plans and comparison
- FAQ - Frequently asked questions
- Contact - Contact form and information
- Product Category - E-commerce category listing (if applicable)
- Product Details - E-commerce product detail page (if applicable)
Multi-Page Workflow
Step 1: Search Design System (once for all pages)
# Product type
python3 scripts/search.py "<product-type>" --domain product
# Style
python3 scripts/search.py "<style-keywords>" --domain style
# Color palette
python3 scripts/search.py "<product-type>" --domain color
# Typography
python3 scripts/search.py "<typography-keywords>" --domain typography
Step 2: Search Each Page Type
# Home page
python3 scripts/search.py "home homepage" --domain pages
# Or with semantic search for better results:
python3 scripts/search.py "homepage with hero section" --domain pages --mode hybrid
# About page
python3 scripts/search.py "about company story" --domain pages
# Post details
python3 scripts/search.py "post article blog" --domain pages
# Category page
python3 scripts/search.py "category archive listing" --domain pages
# Pricing page
python3 scripts/search.py "pricing plans tiers" --domain pages
# FAQ page
python3 scripts/search.py "faq questions help" --domain pages
# Contact page
python3 scripts/search.py "contact get-in-touch" --domain pages
# Product category (if e-commerce)
python3 scripts/search.py "product-category shop catalog" --domain pages
# Product details (if e-commerce)
python3 scripts/search.py "product-detail single-product" --domain pages
Step 3: Create Shared Components First
Before individual pages, create:
- Header/Navigation - Consistent across all pages
- Footer - Consistent across all pages
- Button components - Primary, secondary, CTA styles
- Card components - For features, products, posts
- Form components - For contact, search
- Layout wrapper - Consistent spacing and max-width
Step 4: Implement Pages in Order
- Home - Establishes design system
- About - Uses same header/footer
- Category - Reuses card components
- Post Details - Uses category navigation
- Pricing - Standalone but consistent
- FAQ - Standalone but consistent
- Contact - Standalone but consistent
- Product Category (if e-commerce)
- Product Details (if e-commerce)
Step 5: Ensure Consistency
- ✅ Same color palette across all pages
- ✅ Same typography (heading + body fonts)
- ✅ Same spacing system
- ✅ Same navigation structure
- ✅ Same footer content
- ✅ Consistent button styles
- ✅ Consistent card styles
Code Organization
File Structure:
src/
├── components/
│ ├── shared/
│ │ ├── Header.tsx (or Header.html)
│ │ ├── Footer.tsx (or Footer.html)
│ │ ├── Button.tsx
│ │ └── Card.tsx
│ └── [page-specific components]
├── pages/
│ ├── index.html (or Home.tsx)
│ ├── about.html (or About.tsx)
│ ├── blog/
│ │ ├── [slug].html
│ │ └── category/[category].html
│ ├── pricing.html
│ ├── faq.html
│ ├── contact.html
│ └── products/ (if e-commerce)
│ ├── category/[category].html
│ └── [slug].html
└── styles/
└── globals.css (or tailwind.config.js)
Component Guidelines:
- Extract common patterns into reusable components
- One component per file
- Keep components under 200-300 lines
- Use props/variables for customization
See templates/page-types-guide.md for detailed page templates.
Available Templates
templates/responsive-design.md - Responsive checklisttemplates/accessibility-checklist.md - Accessibility checklisttemplates/pre-delivery-checklist.md - Pre-delivery verificationtemplates/page-types-guide.md - Multi-page website package guidetemplates/example-prompt-full-theme.md - Example prompts for creating full theme packagestemplates/prompt-template-full-theme.md - Prompt templates (copy-paste ready)
Examples
See examples/ directory for reference:
good-ux-patterns/ - Good patterns (high conversion, accessible)bad-ux-patterns/ - Patterns to avoid (confusing, inaccessible)
Example Workflows
Example 1: Landing Page Only
User request: "Create landing page for professional skincare service"
Agent should:
# 1. Search product type
python3 scripts/search.py "beauty spa wellness service" --domain product
# Or with semantic search for better results:
python3 scripts/search.py "professional skincare service business" --domain product --mode vector
# 2. Search style (based on industry: beauty, elegant)
python3 scripts/search.py "elegant minimal soft" --domain style
# Or with hybrid for best results:
python3 scripts/search.py "elegant minimal design for beauty services" --domain style --mode hybrid
# 3. Search typography
python3 scripts/search.py "elegant luxury" --domain typography
# 4. Search color palette
python3 scripts/search.py "beauty spa wellness" --domain color
# 5. Search landing page structure
python3 scripts/search.py "hero-centric social-proof" --domain landing
# 6. Search UX guidelines
python3 scripts/search.py "animation" --domain ux
python3 scripts/search.py "accessibility" --domain ux
# 7. Search stack guidelines (default: html-tailwind)
python3 scripts/search.py "layout responsive" --stack html-tailwind
Then: Synthesize all search results and implement the design.
Example 2: Complete Website Package
User request: "Tạo gói website đầy đủ cho dịch vụ chăm sóc da chuyên nghiệp"
Agent should:
# Step 1: Search design system (once for all pages)
# Use hybrid mode for better semantic understanding
python3 scripts/search.py "beauty spa wellness service" --domain product --mode hybrid
python3 scripts/search.py "elegant minimal soft design" --domain style --mode hybrid
python3 scripts/search.py "beauty spa wellness" --domain color
python3 scripts/search.py "elegant luxury typography" --domain typography --mode vector
# Step 2: Search each page type
python3 scripts/search.py "home homepage" --domain pages
python3 scripts/search.py "about company story" --domain pages
python3 scripts/search.py "post article blog" --domain pages
python3 scripts/search.py "category archive" --domain pages
python3 scripts/search.py "pricing plans" --domain pages
python3 scripts/search.py "faq questions" --domain pages
python3 scripts/search.py "contact" --domain pages
# Step 3: Search UX guidelines
python3 scripts/search.py "animation" --domain ux
python3 scripts/search.py "accessibility" --domain ux
# Step 4: Search stack guidelines
python3 scripts/search.py "layout responsive" --stack html-tailwind
# Or with semantic search:
python3 scripts/search.py "how to make layout responsive" --stack html-tailwind --mode vector
Then:
- Create shared components (Header, Footer, Button, Card)
- Implement pages in order: Home → About → Category → Post Details → Pricing → FAQ → Contact
- Ensure consistency across all pages
- Verify with pre-delivery checklist
Tips for Better Results
- Be specific with keywords - "healthcare SaaS dashboard" > "app"
- Use appropriate search mode:
- BM25 (default) for simple keyword queries
- Vector mode (
--mode vector) for natural language or when you need semantic matches
- Hybrid mode (
--mode hybrid) for best overall results
- Search multiple times - Different keywords reveal different insights
- Combine domains - Style + Typography + Color = Complete design system
- Always check UX - Search "animation", "z-index", "accessibility" for common issues
- Use stack flag - Get implementation-specific best practices
- Iterate - If first search doesn't match, try different keywords or switch search mode
- Split Into Multiple Files - For better maintainability:
- Separate components into individual files (e.g.,
Header.tsx, Footer.tsx)
- Extract reusable styles into dedicated files
- Keep each file focused and under 200-300 lines
Search Mode Selection Guide
Use BM25 when:
- You have clear, specific keywords
- Speed is priority
- Simple queries work well
Use Vector when:
- Natural language queries ("elegant dark theme for modern apps")
- Need to find synonyms or related terms
- Dataset > 500 records
Use Hybrid when:
- Need best possible results
- Mix of keyword and natural language queries
- Production use cases
Links to Other Skills
- documents: Use to document design system
- content-optimization: Use to optimize CTA placement and styling
- design-system: Use for real-world brand design references (Stripe, Vercel, Linear, etc.)
1---2name: ui-ux3description: Skill: UI/UX (Cross-Cutting)4---5# Skill: UI/UX (Cross-Cutting)67## Purpose89This skill is used to handle style, interface, UX, UI for all project types. Uses UI/UX Builder search engine (built upon [UI UX Pro Max Skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)) with multiple search modes (BM25, Vector, Hybrid) to search for design intelligence from a database containing 57 UI styles, 95 color palettes, 56 font pairings, 24 chart types, 9+ page types, and 98 UX guidelines.1011## When to Use1213- When creating or updating user interfaces14- When designing responsive layouts15- When ensuring accessibility (WCAG compliance)16- When creating component styles17- When optimizing user experience18- When finding appropriate color palettes, typography, or UI styles1920## Prerequisites2122**Python 3.x is required:**2324```bash25# Check if Python is installed26python3 --version || python --version2728# macOS29brew install python33031# Ubuntu/Debian32sudo apt update && sudo apt install python33334# Windows35winget install Python.Python.3.1236```3738## Step-by-Step Process3940### Step 1: Analyze User Requirements4142Extract key information from user request:43- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.44- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.45- **Industry**: healthcare, fintech, gaming, education, etc.46- **Stack**: React, Vue, Next.js, or default `html-tailwind`4748### Step 2: Search Relevant Domains4950Use `scripts/search.py` multiple times to gather comprehensive information. Search until you have enough context.5152**Search Mode Tips:**53- Use **BM25 (default)** for simple keyword queries54- Use **Vector mode** (`--mode vector`) for natural language queries or when you need semantic matches55- Use **Hybrid mode** (`--mode hybrid`) for best overall results5657**Recommended search order:**58591. **Product** - Get style recommendations for product type60 ```bash61 python3 scripts/search.py "<product-type>" --domain product62 # Or with semantic search:63 python3 scripts/search.py "<product-type>" --domain product --mode vector64 ```65662. **Style** - Get detailed style guide (colors, effects, frameworks)67 ```bash68 python3 scripts/search.py "<style-keywords>" --domain style69 # For natural language queries:70 python3 scripts/search.py "elegant dark theme for modern apps" --domain style --mode hybrid71 ```72733. **Typography** - Get font pairings with Google Fonts imports74 ```bash75 python3 scripts/search.py "<typography-keywords>" --domain typography76 ```77784. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)79 ```bash80 python3 scripts/search.py "<product-type>" --domain color81 ```82835. **Landing** - Get page structure (if landing page)84 ```bash85 python3 scripts/search.py "<landing-keywords>" --domain landing86 ```87886. **Chart** - Get chart recommendations (if dashboard/analytics)89 ```bash90 python3 scripts/search.py "<chart-type>" --domain chart91 ```92937. **UX** - Get best practices and anti-patterns94 ```bash95 python3 scripts/search.py "animation" --domain ux96 python3 scripts/search.py "accessibility" --domain ux97 ```98998. **Design System** - Get real-world brand design references (54 brands: Stripe, Vercel, Linear, etc.)100 ```bash101 # Search by brand name102 python3 scripts/search.py "stripe" --domain design-system103 # Search by style/industry104 python3 scripts/search.py "dark developer tools" --domain design-system --mode hybrid105 # Then read the full DESIGN.md from knowledge/design-systems/<folder>/DESIGN.md106 ```1071089. **Stack** - Get stack-specific guidelines (default: html-tailwind)109 ```bash110 python3 scripts/search.py "<keyword>" --stack html-tailwind111 # Or with semantic search:112 python3 scripts/search.py "make layout responsive" --stack html-tailwind --mode vector113 ```114115### Step 3: Synthesize Search Results116117Combine all search results to create a complete design system:118- Color palette from color search119- Typography from typography search120- UI style from style search121- UX guidelines from ux search122- Stack-specific patterns from stack search123124### Step 4: Implement Design125126Implement UI following:127- Color palette found128- Typography pairings with Google Fonts129- UI style patterns130- Stack-specific best practices131- UX guidelines and accessibility rules132133### Step 5: Pre-Delivery Checklist134135Before delivering UI code, verify:136137**Visual Quality:**138- [ ] No emojis used as icons (use SVG instead - Heroicons, Lucide, Simple Icons)139- [ ] All icons from consistent icon set140- [ ] Brand logos are correct (verified from Simple Icons)141- [ ] Hover states don't cause layout shift142143**Interaction:**144- [ ] All clickable elements have `cursor-pointer`145- [ ] Hover states provide clear visual feedback146- [ ] Transitions are smooth (150-300ms)147- [ ] Focus states visible for keyboard navigation148149**Light/Dark Mode:**150- [ ] Light mode text has sufficient contrast (4.5:1 minimum)151- [ ] Glass/transparent elements visible in light mode (`bg-white/80` not `bg-white/10`)152- [ ] Borders visible in both modes153- [ ] Test both modes before delivery154155**Layout:**156- [ ] Floating elements have proper spacing from edges157- [ ] No content hidden behind fixed navbars158- [ ] Responsive at 320px, 768px, 1024px, 1440px159- [ ] No horizontal scroll on mobile160161**Accessibility:**162- [ ] All images have alt text163- [ ] Form inputs have labels164- [ ] Color is not the only indicator165- [ ] `prefers-reduced-motion` respected166167## Required Input168169- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.170- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.171- **Industry**: healthcare, fintech, gaming, education, etc.172- **Stack**: React, Vue, Next.js, html-tailwind (default)173- **Target devices**: Desktop, mobile, tablet174- **Accessibility level**: WCAG AA or AAA175176## Expected Output177178- Complete design system with color palette, typography, and UI style179- Stack-specific implementation code180- Responsive and accessible UI components181- UX-optimized user flows182183## Search Reference184185### Available Domains186187| Domain | Use For | Example Keywords |188|--------|---------|------------------|189| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |190| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |191| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |192| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |193| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |194| `pages` | Page type templates (home, about, post, etc.) | home, about, post, category, pricing, faq, contact, product |195| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |196| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |197| `prompt` | AI prompts, CSS keywords | (style name) |198| `design-system` | Real-world brand design systems (54 brands) | stripe, vercel, linear, dark developer, fintech premium |199200### Available Stacks201202| Stack | Focus |203|-------|-------|204| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |205| `react` | State, hooks, performance, patterns |206| `nextjs` | SSR, routing, images, API routes |207| `vue` | Composition API, Pinia, Vue Router |208| `svelte` | Runes, stores, SvelteKit |209| `swiftui` | Views, State, Navigation, Animation |210| `react-native` | Components, Navigation, Lists |211| `flutter` | Widgets, State, Layout, Theming |212213## Tone & Rules214215### Common Rules for Professional UI216217**Icons & Visual Elements:**218- ✅ Use SVG icons (Heroicons, Lucide, Simple Icons)219- ✅ Use fixed viewBox (24x24) with w-6 h-6220- ✅ Stable hover states (color/opacity transitions, not scale transforms)221- ❌ NO emoji icons (🎨 🚀 ⚙️)222- ❌ NO incorrect brand logos223224**Interaction & Cursor:**225- ✅ Add `cursor-pointer` to all clickable/hoverable cards226- ✅ Provide visual feedback (color, shadow, border) on hover227- ✅ Use `transition-colors duration-200` (150-300ms)228- ❌ NO instant state changes or too slow (>500ms)229230**Light/Dark Mode Contrast:**231- ✅ Glass card light mode: `bg-white/80` or higher232- ✅ Text contrast light: `#0F172A` (slate-900) for text233- ✅ Muted text light: `#475569` (slate-600) minimum234- ✅ Border visibility: `border-gray-200` in light mode235- ❌ NO `bg-white/10` (too transparent)236- ❌ NO `#94A3B8` (slate-400) for body text237- ❌ NO `border-white/10` (invisible)238239**Layout & Spacing:**240- ✅ Floating navbar: `top-4 left-4 right-4` spacing241- ✅ Content padding: Account for fixed navbar height242- ✅ Consistent max-width: Same `max-w-6xl` or `max-w-7xl`243- ❌ NO navbar stuck to `top-0 left-0 right-0`244- ❌ NO content hidden behind fixed elements245246### Code Style247248- **Default stack**: `html-tailwind` (unless specified)249- **Mobile-first**: Responsive design approach250- **Accessibility**: WCAG AA minimum251- **Icons**: Heroicons, Lucide, Simple Icons (SVG only)252- **Transitions**: 150-300ms for smooth interactions253254### Naming Conventions255256- **Tailwind**: Use utility classes257- **Components**: Semantic naming258- **CSS Variables**: For theming259260### Limitations261262- ❌ DO NOT use emoji as icons263- ❌ DO NOT hardcode colors (use variables or search results)264- ❌ DO NOT skip accessibility265- ❌ DO NOT create fixed-width layouts (unless necessary)266- ❌ DO NOT use inline styles (except dynamic values)267- ❌ DO NOT create non-responsive components268- ❌ DO NOT use scale transforms for hover (causes layout shift)269270## Available Scripts271272- `scripts/search.py` - Main search script for UI/UX Builder database273- `scripts/core.py` - Core search engine (BM25, Vector, Hybrid)274275## Search Modes276277UI/UX Builder supports multiple search algorithms for different use cases:278279UI/UX Builder supports 3 search modes for different use cases:2802811. **BM25 (default)** - Keyword-based search282 - ✅ Fastest, zero dependencies283 - ✅ Best for exact keyword matches284 - ✅ Works out of the box2852862. **Vector** - Semantic search287 - ✅ Understands meaning and synonyms288 - ✅ Better results (~15-20% improvement)289 - ⚠️ Requires: `pip install sentence-transformers scikit-learn`2902913. **Hybrid** - Best of both worlds292 - ✅ Combines BM25 + Vector293 - ✅ Best results (~25% improvement)294 - ⚠️ Requires: `pip install sentence-transformers scikit-learn`295296**Usage:**297```bash298# Search by domain (BM25 - default)299python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]300301# Search with Vector mode (semantic)302python3 scripts/search.py "<keyword>" --domain <domain> --mode vector303304# Search with Hybrid mode (best results)305python3 scripts/search.py "<keyword>" --domain <domain> --mode hybrid306307# Search by stack308python3 scripts/search.py "<keyword>" --stack <stack> [-n <max_results>] [--mode <mode>]309310# Examples311python3 scripts/search.py "beauty spa wellness" --domain product312python3 scripts/search.py "elegant dark theme" --domain style --mode vector313python3 scripts/search.py "modern minimal design" --domain style --mode hybrid314python3 scripts/search.py "layout responsive" --stack html-tailwind315```316317**Note:** If Vector/Hybrid mode is requested but dependencies are not installed, the system automatically falls back to BM25 mode with a warning message.318319## Multi-Page Website Package320321### When to Create Full Package vs Landing Page322323**Create Full Package** when user requests:324- "Tạo website đầy đủ" / "Create complete website"325- "Tạo gói giao diện đầy đủ" / "Create full interface package"326- Multiple pages mentioned (home, about, contact, etc.)327- E-commerce site (needs product pages)328- Blog/content site (needs post and category pages)329330**Create Landing Page Only** when user requests:331- "Tạo landing page" / "Create landing page"332- Single page conversion focus333- Marketing campaign page334- Product launch page335336### Default Page Set337338When creating a complete website package (not specified), include these 9 pages:3393401. **Home** - Main homepage with hero, features, testimonials3412. **About** - Company story, mission, team3423. **Post Details** - Blog/article detail page3434. **Category** - Blog/category listing page3445. **Pricing** - Pricing plans and comparison3456. **FAQ** - Frequently asked questions3467. **Contact** - Contact form and information3478. **Product Category** - E-commerce category listing (if applicable)3489. **Product Details** - E-commerce product detail page (if applicable)349350### Multi-Page Workflow351352**Step 1: Search Design System** (once for all pages)353354```bash355# Product type356python3 scripts/search.py "<product-type>" --domain product357358# Style359python3 scripts/search.py "<style-keywords>" --domain style360361# Color palette362python3 scripts/search.py "<product-type>" --domain color363364# Typography365python3 scripts/search.py "<typography-keywords>" --domain typography366```367368**Step 2: Search Each Page Type**369370```bash371# Home page372python3 scripts/search.py "home homepage" --domain pages373# Or with semantic search for better results:374python3 scripts/search.py "homepage with hero section" --domain pages --mode hybrid375376# About page377python3 scripts/search.py "about company story" --domain pages378379# Post details380python3 scripts/search.py "post article blog" --domain pages381382# Category page383python3 scripts/search.py "category archive listing" --domain pages384385# Pricing page386python3 scripts/search.py "pricing plans tiers" --domain pages387388# FAQ page389python3 scripts/search.py "faq questions help" --domain pages390391# Contact page392python3 scripts/search.py "contact get-in-touch" --domain pages393394# Product category (if e-commerce)395python3 scripts/search.py "product-category shop catalog" --domain pages396397# Product details (if e-commerce)398python3 scripts/search.py "product-detail single-product" --domain pages399```400401**Step 3: Create Shared Components First**402403Before individual pages, create:404- **Header/Navigation** - Consistent across all pages405- **Footer** - Consistent across all pages406- **Button components** - Primary, secondary, CTA styles407- **Card components** - For features, products, posts408- **Form components** - For contact, search409- **Layout wrapper** - Consistent spacing and max-width410411**Step 4: Implement Pages in Order**4124131. **Home** - Establishes design system4142. **About** - Uses same header/footer4153. **Category** - Reuses card components4164. **Post Details** - Uses category navigation4175. **Pricing** - Standalone but consistent4186. **FAQ** - Standalone but consistent4197. **Contact** - Standalone but consistent4208. **Product Category** (if e-commerce)4219. **Product Details** (if e-commerce)422423**Step 5: Ensure Consistency**424425- ✅ Same color palette across all pages426- ✅ Same typography (heading + body fonts)427- ✅ Same spacing system428- ✅ Same navigation structure429- ✅ Same footer content430- ✅ Consistent button styles431- ✅ Consistent card styles432433### Code Organization434435**File Structure:**436```437src/438├── components/439│ ├── shared/440│ │ ├── Header.tsx (or Header.html)441│ │ ├── Footer.tsx (or Footer.html)442│ │ ├── Button.tsx443│ │ └── Card.tsx444│ └── [page-specific components]445├── pages/446│ ├── index.html (or Home.tsx)447│ ├── about.html (or About.tsx)448│ ├── blog/449│ │ ├── [slug].html450│ │ └── category/[category].html451│ ├── pricing.html452│ ├── faq.html453│ ├── contact.html454│ └── products/ (if e-commerce)455│ ├── category/[category].html456│ └── [slug].html457└── styles/458 └── globals.css (or tailwind.config.js)459```460461**Component Guidelines:**462- Extract common patterns into reusable components463- One component per file464- Keep components under 200-300 lines465- Use props/variables for customization466467See `templates/page-types-guide.md` for detailed page templates.468469## Available Templates470471- `templates/responsive-design.md` - Responsive checklist472- `templates/accessibility-checklist.md` - Accessibility checklist473- `templates/pre-delivery-checklist.md` - Pre-delivery verification474- `templates/page-types-guide.md` - Multi-page website package guide475- `templates/example-prompt-full-theme.md` - Example prompts for creating full theme packages476- `templates/prompt-template-full-theme.md` - Prompt templates (copy-paste ready)477478## Examples479480See `examples/` directory for reference:481- `good-ux-patterns/` - Good patterns (high conversion, accessible)482- `bad-ux-patterns/` - Patterns to avoid (confusing, inaccessible)483484## Example Workflows485486### Example 1: Landing Page Only487488**User request:** "Create landing page for professional skincare service"489490**Agent should:**491492```bash493# 1. Search product type494python3 scripts/search.py "beauty spa wellness service" --domain product495# Or with semantic search for better results:496python3 scripts/search.py "professional skincare service business" --domain product --mode vector497498# 2. Search style (based on industry: beauty, elegant)499python3 scripts/search.py "elegant minimal soft" --domain style500# Or with hybrid for best results:501python3 scripts/search.py "elegant minimal design for beauty services" --domain style --mode hybrid502503# 3. Search typography504python3 scripts/search.py "elegant luxury" --domain typography505506# 4. Search color palette507python3 scripts/search.py "beauty spa wellness" --domain color508509# 5. Search landing page structure510python3 scripts/search.py "hero-centric social-proof" --domain landing511512# 6. Search UX guidelines513python3 scripts/search.py "animation" --domain ux514python3 scripts/search.py "accessibility" --domain ux515516# 7. Search stack guidelines (default: html-tailwind)517python3 scripts/search.py "layout responsive" --stack html-tailwind518```519520**Then:** Synthesize all search results and implement the design.521522### Example 2: Complete Website Package523524**User request:** "Tạo gói website đầy đủ cho dịch vụ chăm sóc da chuyên nghiệp"525526**Agent should:**527528```bash529# Step 1: Search design system (once for all pages)530# Use hybrid mode for better semantic understanding531python3 scripts/search.py "beauty spa wellness service" --domain product --mode hybrid532python3 scripts/search.py "elegant minimal soft design" --domain style --mode hybrid533python3 scripts/search.py "beauty spa wellness" --domain color534python3 scripts/search.py "elegant luxury typography" --domain typography --mode vector535536# Step 2: Search each page type537python3 scripts/search.py "home homepage" --domain pages538python3 scripts/search.py "about company story" --domain pages539python3 scripts/search.py "post article blog" --domain pages540python3 scripts/search.py "category archive" --domain pages541python3 scripts/search.py "pricing plans" --domain pages542python3 scripts/search.py "faq questions" --domain pages543python3 scripts/search.py "contact" --domain pages544545# Step 3: Search UX guidelines546python3 scripts/search.py "animation" --domain ux547python3 scripts/search.py "accessibility" --domain ux548549# Step 4: Search stack guidelines550python3 scripts/search.py "layout responsive" --stack html-tailwind551# Or with semantic search:552python3 scripts/search.py "how to make layout responsive" --stack html-tailwind --mode vector553```554555**Then:**5561. Create shared components (Header, Footer, Button, Card)5572. Implement pages in order: Home → About → Category → Post Details → Pricing → FAQ → Contact5583. Ensure consistency across all pages5594. Verify with pre-delivery checklist560561## Tips for Better Results5625631. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"5642. **Use appropriate search mode:**565 - **BM25 (default)** for simple keyword queries566 - **Vector mode** (`--mode vector`) for natural language or when you need semantic matches567 - **Hybrid mode** (`--mode hybrid`) for best overall results5683. **Search multiple times** - Different keywords reveal different insights5694. **Combine domains** - Style + Typography + Color = Complete design system5705. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues5716. **Use stack flag** - Get implementation-specific best practices5727. **Iterate** - If first search doesn't match, try different keywords or switch search mode5738. **Split Into Multiple Files** - For better maintainability:574 - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)575 - Extract reusable styles into dedicated files576 - Keep each file focused and under 200-300 lines577578### Search Mode Selection Guide579580- **Use BM25 when:**581 - You have clear, specific keywords582 - Speed is priority583 - Simple queries work well584585- **Use Vector when:**586 - Natural language queries ("elegant dark theme for modern apps")587 - Need to find synonyms or related terms588 - Dataset > 500 records589590- **Use Hybrid when:**591 - Need best possible results592 - Mix of keyword and natural language queries593 - Production use cases594595## Links to Other Skills596597- **documents**: Use to document design system598- **content-optimization**: Use to optimize CTA placement and styling599- **design-system**: Use for real-world brand design references (Stripe, Vercel, Linear, etc.)
PolyXGO