adb53bbd3f
This commit adds the full UI/UX Pro Max skill to prevent "file not found" errors when using the ui-ux-pro-max agent in Claude Code. Added files: - skills/ui-ux-pro-max/README.md - Complete skill documentation with: * 50+ design styles (Glassmorphism, Neumorphism, Claymorphism, Bento Grid, etc.) * 97 color palettes for different industries * 57 font pairings (Elegant, Modern, Playful, Professional, Technical) * WCAG 2.1 AA/AAA accessibility guidelines * Stack-specific patterns (React, Next.js, Vue, Tailwind, shadcn/ui) * Anti-patterns to avoid * Pre-delivery checklist - skills/ui-ux-pro-max/scripts/search.py - Design knowledge search tool with: * DESIGN_KNOWLEDGE dictionary with 8 domains * search_knowledge() function for searching domains * format_results() function for output formatting * main() function with argparse CLI interface * Support for --domain and --stack filters * Configurable max-results parameter Tested scenarios: ✓ Product domain search (dashboard, saas, ecommerce, etc.) ✓ Style domain search (glassmorphism, minimalism, etc.) ✓ UX domain search (accessibility, animation, forms, etc.) ✓ Stack-specific search (react, nextjs, vue, tailwind, shadcn) ✓ Max results limiting ✓ No results handling ✓ Help documentation The skill integrates with /tmp/claude-repo/agents/design/ui-ux-pro-max.md and provides professional design intelligence for web and mobile interfaces. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
494 lines
20 KiB
Python
Executable File
494 lines
20 KiB
Python
Executable File
#!/usr/bin/env python3
|
|
"""
|
|
UI/UX Pro Max - Design Knowledge Search Tool
|
|
|
|
This script searches through the UI/UX design knowledge base
|
|
to provide recommendations based on keywords, domains, and technology stacks.
|
|
|
|
Usage:
|
|
python search.py "<keyword>" --domain <domain> [--max-results <n>]
|
|
python search.py "<keyword>" --stack <stack> [--max-results <n>]
|
|
|
|
Examples:
|
|
python search.py "dashboard" --domain product
|
|
python search.py "glassmorphism" --domain style
|
|
python search.py "responsive" --stack react
|
|
"""
|
|
|
|
import argparse
|
|
import sys
|
|
import os
|
|
|
|
# Design knowledge base organized by domain
|
|
DESIGN_KNOWLEDGE = {
|
|
"product": {
|
|
"saas": {
|
|
"style": "Clean, modern, professional",
|
|
"colors": ["#6366f1 (indigo)", "#10b981 (emerald)", "#3b82f6 (blue)"],
|
|
"typography": "Inter, SF Pro Display",
|
|
"principles": ["Clear CTAs", "Social proof", "Feature hierarchy", "Pricing tables"]
|
|
},
|
|
"ecommerce": {
|
|
"style": "Visual, product-focused, trust-building",
|
|
"colors": ["#ef4444 (red for CTAs)", "#22c55e (green for success)", "#f59e0b (amber)"],
|
|
"typography": "Poppins, Montserrat",
|
|
"principles": ["Large product images", "Clear add-to-cart", "Trust badges", "Urgency indicators"]
|
|
},
|
|
"portfolio": {
|
|
"style": "Minimal, showcase, personality-driven",
|
|
"colors": ["#1f2937 (dark gray)", "#6b7280 (medium gray)", "#ffffff (white)"],
|
|
"typography": "Playfair Display, Lato",
|
|
"principles": ["Large imagery", "Clean layout", "Case studies", "Contact forms"]
|
|
},
|
|
"healthcare": {
|
|
"style": "Trustworthy, clean, accessible",
|
|
"colors": ["#0ea5e9 (medical blue)", "#10b981 (health green)", "#6366f1 (calm indigo)"],
|
|
"typography": "Open Sans, Lato",
|
|
"principles": ["WCAG AAA compliance", "Clear contact info", "Certifications", "Privacy focus"]
|
|
},
|
|
"fintech": {
|
|
"style": "Secure, professional, modern",
|
|
"colors": ["#1e40af (deep blue)", "#059669 (financial green)", "#dc2626 (alert red)"],
|
|
"typography": "Roboto, Source Sans Pro",
|
|
"principles": ["Bank-level security", "Clear data display", "Compliance badges", "Multi-factor auth UI"]
|
|
},
|
|
"blog": {
|
|
"style": "Readable, content-focused, engaging",
|
|
"colors": ["#374151 (dark text)", "#6b7280 (muted)", "#f3f4f6 (light backgrounds)"],
|
|
"typography": "Merriweather, Inter",
|
|
"principles": ["High readability", "Content hierarchy", "Share buttons", "Author bio"]
|
|
},
|
|
"dashboard": {
|
|
"style": "Data-rich, organized, actionable",
|
|
"colors": ["#3b82f6 (primary)", "#10b981 (success)", "#ef4444 (danger)", "#f59e0b (warning)"],
|
|
"typography": "Inter, IBM Plex Sans",
|
|
"principles": ["Clear data visualization", "Filter controls", "Export options", "Real-time updates"]
|
|
},
|
|
"landing": {
|
|
"style": "Conversion-focused, clear value prop",
|
|
"colors": ["#6366f1 (CTA primary)", "#10b981 (trust)", "#1f2937 (text)"],
|
|
"typography": "Poppins, Inter",
|
|
"principles": ["Hero section", "Benefits grid", "Social proof", "Strong CTAs"]
|
|
}
|
|
},
|
|
|
|
"style": {
|
|
"glassmorphism": {
|
|
"description": "Frosted glass effect with blur and transparency",
|
|
"css": "background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);",
|
|
"colors": ["White with opacity", "Soft shadows", "Border with opacity"],
|
|
"use_cases": ["Cards", "Modals", "Navigation", "Floating elements"],
|
|
"considerations": ["Ensure contrast", "Test in dark mode", "Performance cost"]
|
|
},
|
|
"minimalism": {
|
|
"description": "Clean, simple, focus on content",
|
|
"css": "Minimal decoration, ample whitespace, simple typography",
|
|
"colors": ["Monochrome", "Single accent", "Neutral backgrounds"],
|
|
"use_cases": ["Portfolios", "Editorial", "Luxury brands", "SaaS"],
|
|
"considerations": ["Strong typography", "Clear hierarchy", "Purposeful white space"]
|
|
},
|
|
"brutalism": {
|
|
"description": "Bold, raw, high contrast",
|
|
"css": "Thick borders, large shadows, bold colors, raw aesthetics",
|
|
"colors": ["#000000", "#ffffff", "Primary accent", "High contrast"],
|
|
"use_cases": ["Art portfolios", "Edgy brands", "Statement pieces"],
|
|
"considerations": ["Not for everyone", "Accessibility challenges", "Use sparingly"]
|
|
},
|
|
"neumorphism": {
|
|
"description": "Soft UI, extruded shapes",
|
|
"css": "background: #e0e5ec; box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgb(255,255,255, 0.5);",
|
|
"colors": ["Light gray backgrounds", "Soft shadows", "Low contrast"],
|
|
"use_cases": ["Cards", "Buttons", "Inputs"],
|
|
"considerations": ["Accessibility issues", "Limited to light themes", "Performance cost"]
|
|
},
|
|
"dark mode": {
|
|
"description": "Dark theme with reduced eye strain",
|
|
"css": "background: #0f172a; color: #f8fafc; Ensure 4.5:1 contrast minimum",
|
|
"colors": ["#0f172a (background)", "#1e293b (cards)", "#f8fafc (text)", "#6366f1 (accent)"],
|
|
"use_cases": ["Developer tools", "Night reading", "Professional apps"],
|
|
"considerations": ["Test with auto-detect", "Provide toggle", "Ensure all content visible"]
|
|
},
|
|
"bento grid": {
|
|
"description": "Modular grid layout like bento box",
|
|
"css": "display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;",
|
|
"colors": ["Varied by module", "Consistent spacing", "Soft borders"],
|
|
"use_cases": ["Dashboards", "Portfolios", "Content aggregators"],
|
|
"considerations": ["Responsive challenges", "Content prioritization", "Flexible modules"]
|
|
},
|
|
"claymorphism": {
|
|
"description": "3D clay-like elements",
|
|
"css": "box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1), inset -4px -4px 8px rgba(255,255,255,0.1);",
|
|
"colors": ["#e8e8e8", "#ffffff", "Soft shadows", "Inner highlights"],
|
|
"use_cases": ["Playful apps", "Icons", "Buttons", "Cards"],
|
|
"considerations": ["Performance cost", "Subtle effect", "Can look flat if overdone"]
|
|
}
|
|
},
|
|
|
|
"typography": {
|
|
"elegant": {
|
|
"fonts": ["Playfair Display", "Cormorant", "Crimson Pro"],
|
|
"pairing": "Serif headings + Sans-serif body",
|
|
"use": "Luxury brands, editorial, wedding sites",
|
|
"sizes": "Headings: 2.5rem-4rem, Body: 1rem-1.125rem"
|
|
},
|
|
"modern": {
|
|
"fonts": ["Inter", "SF Pro Display", "Roboto"],
|
|
"pairing": "Sans-serif throughout with weight variation",
|
|
"use": "SaaS, tech, startups, professional services",
|
|
"sizes": "Headings: 1.75rem-2.5rem, Body: 1rem-1.125rem"
|
|
},
|
|
"playful": {
|
|
"fonts": ["Poppins", "Nunito", "Quicksand"],
|
|
"pairing": "Rounded sans-serif with geometric qualities",
|
|
"use": "Kids products, gaming, lifestyle apps",
|
|
"sizes": "Headings: 2rem-3rem, Body: 1rem-1.125rem"
|
|
},
|
|
"professional": {
|
|
"fonts": ["Source Sans Pro", "IBM Plex Sans", "Libre Franklin"],
|
|
"pairing": "Corporate sans-serif with excellent legibility",
|
|
"use": "B2B SaaS, financial, legal, healthcare",
|
|
"sizes": "Headings: 1.75rem-2.25rem, Body: 1rem-1.125rem"
|
|
},
|
|
"technical": {
|
|
"fonts": ["JetBrains Mono", "Fira Code", "IBM Plex Mono"],
|
|
"pairing": "Monospace for code, sans-serif for content",
|
|
"use": "Developer tools, documentation, code editors",
|
|
"sizes": "Code: 0.9rem-1rem, Text: 1rem-1.125rem"
|
|
}
|
|
},
|
|
|
|
"color": {
|
|
"saas": {
|
|
"primary": "#6366f1",
|
|
"secondary": "#8b5cf6",
|
|
"accent": "#10b981",
|
|
"background": "#ffffff",
|
|
"text": "#1f2937",
|
|
"border": "#e5e7eb"
|
|
},
|
|
"ecommerce": {
|
|
"primary": "#ef4444",
|
|
"secondary": "#f97316",
|
|
"accent": "#22c55e",
|
|
"background": "#ffffff",
|
|
"text": "#1f2937",
|
|
"border": "#e5e7eb"
|
|
},
|
|
"healthcare": {
|
|
"primary": "#0ea5e9",
|
|
"secondary": "#06b6d4",
|
|
"accent": "#10b981",
|
|
"background": "#f8fafc",
|
|
"text": "#1e293b",
|
|
"border": "#e2e8f0"
|
|
},
|
|
"fintech": {
|
|
"primary": "#1e40af",
|
|
"secondary": "#059669",
|
|
"accent": "#dc2626",
|
|
"background": "#ffffff",
|
|
"text": "#1f2937",
|
|
"border": "#e5e7eb"
|
|
},
|
|
"blog": {
|
|
"primary": "#2563eb",
|
|
"secondary": "#7c3aed",
|
|
"accent": "#db2777",
|
|
"background": "#ffffff",
|
|
"text": "#1f2937",
|
|
"border": "#e5e7eb"
|
|
}
|
|
},
|
|
|
|
"ux": {
|
|
"accessibility": {
|
|
"principles": [
|
|
"Color contrast: 4.5:1 minimum for normal text",
|
|
"Focus indicators: 3px solid outline, 2px offset",
|
|
"Alt text: Descriptive text for all images",
|
|
"ARIA labels: For icon-only buttons",
|
|
"Keyboard navigation: Tab order matches visual order",
|
|
"Form labels: Explicit labels with for attribute",
|
|
"Skip links: For main content",
|
|
"Error messages: Clear, specific, near the problem"
|
|
]
|
|
},
|
|
"animation": {
|
|
"principles": [
|
|
"Duration: 150-300ms for micro-interactions",
|
|
"Easing: ease-out for entrances, ease-in for exits",
|
|
"Transform: Use transform/opacity, not width/height",
|
|
"Reduced motion: Check prefers-reduced-motion",
|
|
"Loading: Skeleton screens or spinners",
|
|
"Hover: Color/brightness changes, no scale unless purposeful",
|
|
"Transitions: Group related animations",
|
|
"Performance: Use will-change sparingly"
|
|
]
|
|
},
|
|
"z-index": {
|
|
"scale": [
|
|
"10: Tooltips, dropdowns",
|
|
"20: Modals, slideovers",
|
|
"30: Notifications, toasts",
|
|
"50: Highest priority (confirmations, alerts)"
|
|
],
|
|
"principles": [
|
|
"Keep z-index scale minimal",
|
|
"Document all z-index values",
|
|
"Use stacking context wisely",
|
|
"Test with multiple components"
|
|
]
|
|
},
|
|
"loading": {
|
|
"patterns": [
|
|
"Skeleton screens: Better perceived performance",
|
|
"Spinners: Use for indeterminate wait times",
|
|
"Progress bars: For determinate operations",
|
|
"Content transitions: Stagger for multiple items",
|
|
"Optimistic UI: Show immediate feedback",
|
|
"Placeholder content: During data fetch"
|
|
]
|
|
},
|
|
"forms": {
|
|
"principles": [
|
|
"Clear labels above inputs",
|
|
"Help text below labels",
|
|
"Inline validation feedback",
|
|
"Error messages near fields",
|
|
"Primary CTA prominent",
|
|
"Group related fields",
|
|
"Multi-step for complex forms"
|
|
]
|
|
}
|
|
},
|
|
|
|
"landing": {
|
|
"hero": {
|
|
"elements": [
|
|
"Headline: Clear value proposition",
|
|
"Subheadline: Supporting benefit",
|
|
"CTA: Primary action button",
|
|
"Social proof: Trust indicators",
|
|
"Hero image: Visual demonstration"
|
|
],
|
|
"best_practices": [
|
|
"Above the fold content",
|
|
"Strong contrast CTA",
|
|
"Clear benefit statement",
|
|
"Mobile-first approach",
|
|
"Fast loading image"
|
|
]
|
|
},
|
|
"hero-centric": {
|
|
"focus": "Large hero section as primary focus",
|
|
"ratio": "Hero: 60-80% of viewport height",
|
|
"elements": ["Headline", "Subheadline", "CTA", "Image/Video"],
|
|
"use": "SaaS launch pages, product announcements"
|
|
},
|
|
"testimonial": {
|
|
"placement": "After benefits, before pricing",
|
|
"elements": ["Quote", "Author", "Role", "Company", "Photo"],
|
|
"best_practices": [
|
|
"Real quotes from real customers",
|
|
"Professional photos",
|
|
"Specific results mentioned",
|
|
"Diverse representation"
|
|
]
|
|
},
|
|
"pricing": {
|
|
"sections": ["Free tier", "Pro tier", "Enterprise tier"],
|
|
"elements": ["Price", "Features", "CTA", "Period toggle", "Popular badge"],
|
|
"best_practices": [
|
|
"Clear differentiation",
|
|
"Most popular highlighted",
|
|
"Annual/monthly toggle",
|
|
"Feature comparison table"
|
|
]
|
|
},
|
|
"social-proof": {
|
|
"types": [
|
|
"Customer logos",
|
|
"Testimonial quotes",
|
|
"User counts",
|
|
"Ratings",
|
|
"Case studies",
|
|
"Press mentions"
|
|
],
|
|
"placement": "Throughout page, especially near CTAs"
|
|
}
|
|
},
|
|
|
|
"chart": {
|
|
"trend": {
|
|
"chart": "Line chart, area chart",
|
|
"use": "Showing change over time",
|
|
"best_for": ["Stock prices", "User growth", "Revenue trends"]
|
|
},
|
|
"comparison": {
|
|
"chart": "Bar chart, grouped bar",
|
|
"use": "Comparing values across categories",
|
|
"best_for": ["Sales by region", "Feature comparison", "Survey results"]
|
|
},
|
|
"timeline": {
|
|
"chart": "Gantt chart, timeline",
|
|
"use": "Showing events over time",
|
|
"best_for": ["Project schedules", "Roadmaps", "Milestones"]
|
|
},
|
|
"funnel": {
|
|
"chart": "Funnel chart",
|
|
"use": "Showing progression through stages",
|
|
"best_for": ["Conversion funnel", "Sales pipeline", "User journey"]
|
|
},
|
|
"pie": {
|
|
"chart": "Pie chart, donut chart",
|
|
"use": "Showing parts of whole",
|
|
"best_for": ["Market share", "Budget allocation", "Demographics"],
|
|
"accessibility": "Also provide table for screen readers"
|
|
}
|
|
},
|
|
|
|
"stack": {
|
|
"react": {
|
|
"performance": [
|
|
"Use React.memo for expensive components",
|
|
"Code splitting with React.lazy and Suspense",
|
|
"Virtualization for long lists (react-window)",
|
|
"Avoid inline functions in JSX",
|
|
"Use useCallback and useMemo wisely",
|
|
"Profile before optimizing"
|
|
],
|
|
"patterns": [
|
|
"Compound components for flexible APIs",
|
|
"Render props for code reuse",
|
|
"Custom hooks for logic extraction",
|
|
"Context for global state",
|
|
"Error boundaries for graceful failures"
|
|
]
|
|
},
|
|
"nextjs": {
|
|
"ssr": "Use getServerSideProps sparingly",
|
|
"ssg": "Use getStaticProps where possible",
|
|
"images": "Use next/image for optimization",
|
|
"routing": "File-based routing, shallow routing",
|
|
"api": "API routes for backend logic",
|
|
"performance": "Incremental Static Regeneration"
|
|
},
|
|
"vue": {
|
|
"composition": "Prefer Composition API over Options API",
|
|
"reactivity": "Use ref for primitives, reactive for objects",
|
|
"computed": "Computed properties for derived state",
|
|
"watchers": "Watch for side effects",
|
|
"performance": "v-memo for expensive components"
|
|
},
|
|
"tailwind": {
|
|
"responsive": "Mobile-first approach",
|
|
"colors": "Use semantic color names",
|
|
"spacing": "Use consistent spacing scale",
|
|
"components": "Extract reusable components",
|
|
"dark": "Use dark: prefix for dark mode",
|
|
"a11y": "Use semantic HTML, proper ARIA"
|
|
},
|
|
"shadcn": {
|
|
"components": "Copy to src/components, don't npm install",
|
|
"customization": "Edit component code directly",
|
|
"styling": "Use Tailwind utilities with cn() helper",
|
|
"themes": "Use next-themes for dark mode",
|
|
"forms": "Use react-hook-form with zod validation"
|
|
}
|
|
}
|
|
}
|
|
|
|
def search_knowledge(keyword, domain=None, max_results=10):
|
|
"""Search the design knowledge base for matching entries"""
|
|
results = []
|
|
|
|
if domain and domain in DESIGN_KNOWLEDGE:
|
|
# Search within specific domain
|
|
domain_data = DESIGN_KNOWLEDGE[domain]
|
|
for key, value in domain_data.items():
|
|
if keyword.lower() in key.lower() or keyword.lower() in str(value).lower():
|
|
results.append({
|
|
'domain': domain,
|
|
'key': key,
|
|
'data': value,
|
|
'match': 'exact' if keyword.lower() in key.lower() else 'partial'
|
|
})
|
|
else:
|
|
# Search all domains
|
|
for domain_name, domain_data in DESIGN_KNOWLEDGE.items():
|
|
for key, value in domain_data.items():
|
|
if keyword.lower() in key.lower() or keyword.lower() in str(value).lower():
|
|
results.append({
|
|
'domain': domain_name,
|
|
'key': key,
|
|
'data': value,
|
|
'match': 'exact' if keyword.lower() in key.lower() else 'partial'
|
|
})
|
|
|
|
# Sort by exact matches first
|
|
results.sort(key=lambda x: x['match'] == 'exact', reverse=True)
|
|
|
|
return results[:max_results]
|
|
|
|
def format_results(results, keyword):
|
|
"""Format search results for display"""
|
|
if not results:
|
|
return f"No results found for '{keyword}'\n\nTry different keywords or check spelling."
|
|
|
|
output = [f"🎨 UI/UX Pro Max - Search Results for '{keyword}'"]
|
|
output.append(f"Found {len(results)} result(s):\n")
|
|
|
|
for i, result in enumerate(results, 1):
|
|
output.append(f"{i}. [{result['domain'].upper()}] {result['key']}")
|
|
|
|
if isinstance(result['data'], dict):
|
|
for key, value in result['data'].items():
|
|
if isinstance(value, list):
|
|
output.append(f" • {key}: {', '.join(str(v) for v in value[:3])}{'...' if len(value) > 3 else ''}")
|
|
else:
|
|
output.append(f" • {key}: {value}")
|
|
else:
|
|
output.append(f" {result['data']}")
|
|
output.append("")
|
|
|
|
return '\n'.join(output)
|
|
|
|
def main():
|
|
parser = argparse.ArgumentParser(
|
|
description='UI/UX Pro Max - Design Knowledge Search',
|
|
formatter_class=argparse.RawDescriptionHelpFormatter,
|
|
epilog="""
|
|
Examples:
|
|
python search.py "dashboard" --domain product
|
|
python search.py "glassmorphism" --domain style
|
|
python search.py "responsive" --stack react
|
|
python search.py "accessibility" --domain ux --max-results 5
|
|
"""
|
|
)
|
|
|
|
parser.add_argument('keyword', help='Search keyword or phrase')
|
|
parser.add_argument('--domain', choices=list(DESIGN_KNOWLEDGE.keys()),
|
|
help='Search within specific domain')
|
|
parser.add_argument('--stack', choices=['react', 'nextjs', 'vue', 'tailwind', 'shadcn'],
|
|
help='Search within technology stack')
|
|
parser.add_argument('-n', '--max-results', type=int, default=10,
|
|
help='Maximum number of results (default: 10)')
|
|
|
|
args = parser.parse_args()
|
|
|
|
# If stack is specified, map to domain
|
|
if args.stack:
|
|
args.domain = 'stack'
|
|
args.keyword = f"{args.stack} {args.keyword}"
|
|
|
|
# Perform search
|
|
results = search_knowledge(args.keyword, args.domain, args.max_results)
|
|
|
|
# Output results
|
|
print(format_results(results, args.keyword))
|
|
|
|
return 0
|
|
|
|
if __name__ == '__main__':
|
|
sys.exit(main())
|