mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-07-03 12:32:30 +08:00
6a6167691a
PR #296 (feat/emil-motion-principles) independently registers a "motion" domain key in CSV_CONFIG/detect_domain for motion-principles.csv (37 design-principle rows). Both PRs adding the same dict key would cause one to silently overwrite the other's domain registration if merged independently, per the automated review on this PR. The two domains are complementary, not duplicate (design principles vs. ready-to-use GSAP code snippets), so this renames this PR's domain from "motion" to "gsap" - a more precise name given every row is GSAP-specific implementation code. The --motion CLI dial and its "Subtle/Standard/ Complex" tiers are unaffected (unrelated to the domain key; only the `--domain gsap` search endpoint and its internal lookup changed). No regressions: --design-system output with no dials set remains byte-identical to before this feature. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
275 lines
13 KiB
Python
275 lines
13 KiB
Python
#!/usr/bin/env python3
|
|
# -*- coding: utf-8 -*-
|
|
"""
|
|
UI/UX Pro Max Core - BM25 search engine for UI/UX style guides
|
|
"""
|
|
|
|
import csv
|
|
import re
|
|
from pathlib import Path
|
|
from math import log
|
|
from collections import defaultdict
|
|
|
|
# ============ CONFIGURATION ============
|
|
DATA_DIR = Path(__file__).parent.parent / "data"
|
|
MAX_RESULTS = 3
|
|
|
|
CSV_CONFIG = {
|
|
"style": {
|
|
"file": "styles.csv",
|
|
"search_cols": ["Style Category", "Keywords", "Best For", "Type", "AI Prompt Keywords"],
|
|
"output_cols": ["Style Category", "Type", "Keywords", "Primary Colors", "Effects & Animation", "Best For", "Light Mode ✓", "Dark Mode ✓", "Performance", "Accessibility", "Framework Compatibility", "Complexity", "AI Prompt Keywords", "CSS/Technical Keywords", "Implementation Checklist", "Design System Variables"]
|
|
},
|
|
"color": {
|
|
"file": "colors.csv",
|
|
"search_cols": ["Product Type", "Notes"],
|
|
"output_cols": ["Product Type", "Primary", "On Primary", "Secondary", "On Secondary", "Accent", "On Accent", "Background", "Foreground", "Card", "Card Foreground", "Muted", "Muted Foreground", "Border", "Destructive", "On Destructive", "Ring", "Notes"]
|
|
},
|
|
"chart": {
|
|
"file": "charts.csv",
|
|
"search_cols": ["Data Type", "Keywords", "Best Chart Type", "When to Use", "When NOT to Use", "Accessibility Notes"],
|
|
"output_cols": ["Data Type", "Keywords", "Best Chart Type", "Secondary Options", "When to Use", "When NOT to Use", "Data Volume Threshold", "Color Guidance", "Accessibility Grade", "Accessibility Notes", "A11y Fallback", "Library Recommendation", "Interactive Level"]
|
|
},
|
|
"landing": {
|
|
"file": "landing.csv",
|
|
"search_cols": ["Pattern Name", "Keywords", "Conversion Optimization", "Section Order"],
|
|
"output_cols": ["Pattern Name", "Keywords", "Section Order", "Primary CTA Placement", "Color Strategy", "Conversion Optimization"]
|
|
},
|
|
"product": {
|
|
"file": "products.csv",
|
|
"search_cols": ["Product Type", "Keywords", "Primary Style Recommendation", "Key Considerations"],
|
|
"output_cols": ["Product Type", "Keywords", "Primary Style Recommendation", "Secondary Styles", "Landing Page Pattern", "Dashboard Style (if applicable)", "Color Palette Focus"]
|
|
},
|
|
"ux": {
|
|
"file": "ux-guidelines.csv",
|
|
"search_cols": ["Category", "Issue", "Description", "Platform"],
|
|
"output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
|
|
},
|
|
"typography": {
|
|
"file": "typography.csv",
|
|
"search_cols": ["Font Pairing Name", "Category", "Mood/Style Keywords", "Best For", "Heading Font", "Body Font"],
|
|
"output_cols": ["Font Pairing Name", "Category", "Heading Font", "Body Font", "Mood/Style Keywords", "Best For", "Google Fonts URL", "CSS Import", "Tailwind Config", "Notes"]
|
|
},
|
|
"icons": {
|
|
"file": "icons.csv",
|
|
"search_cols": ["Category", "Icon Name", "Keywords", "Best For"],
|
|
"output_cols": ["Category", "Icon Name", "Keywords", "Library", "Import Code", "Usage", "Best For", "Style"]
|
|
},
|
|
"gsap": {
|
|
"file": "motion.csv",
|
|
"search_cols": ["Category", "Intensity Tier", "Keywords", "Trigger"],
|
|
"output_cols": ["Category", "Intensity Tier", "Trigger", "Duration", "Easing", "GSAP Snippet", "Framework Notes", "Do", "Don't", "Performance Notes"]
|
|
},
|
|
"react": {
|
|
"file": "react-performance.csv",
|
|
"search_cols": ["Category", "Issue", "Keywords", "Description"],
|
|
"output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
|
|
},
|
|
"web": {
|
|
"file": "app-interface.csv",
|
|
"search_cols": ["Category", "Issue", "Keywords", "Description"],
|
|
"output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
|
|
},
|
|
"google-fonts": {
|
|
"file": "google-fonts.csv",
|
|
"search_cols": ["Family", "Category", "Stroke", "Classifications", "Keywords", "Subsets", "Designers"],
|
|
"output_cols": ["Family", "Category", "Stroke", "Classifications", "Styles", "Variable Axes", "Subsets", "Designers", "Popularity Rank", "Google Fonts URL"]
|
|
}
|
|
}
|
|
|
|
STACK_CONFIG = {
|
|
"react": {"file": "stacks/react.csv"},
|
|
"nextjs": {"file": "stacks/nextjs.csv"},
|
|
"vue": {"file": "stacks/vue.csv"},
|
|
"svelte": {"file": "stacks/svelte.csv"},
|
|
"astro": {"file": "stacks/astro.csv"},
|
|
"swiftui": {"file": "stacks/swiftui.csv"},
|
|
"react-native": {"file": "stacks/react-native.csv"},
|
|
"flutter": {"file": "stacks/flutter.csv"},
|
|
"nuxtjs": {"file": "stacks/nuxtjs.csv"},
|
|
"nuxt-ui": {"file": "stacks/nuxt-ui.csv"},
|
|
"html-tailwind": {"file": "stacks/html-tailwind.csv"},
|
|
"shadcn": {"file": "stacks/shadcn.csv"},
|
|
"jetpack-compose": {"file": "stacks/jetpack-compose.csv"},
|
|
"threejs": {"file": "stacks/threejs.csv"},
|
|
"angular": {"file": "stacks/angular.csv"},
|
|
"laravel": {"file": "stacks/laravel.csv"},
|
|
"javafx": {"file": "stacks/javafx.csv"},
|
|
"wpf": {"file": "stacks/wpf.csv"},
|
|
"winui": {"file": "stacks/winui.csv"},
|
|
"avalonia": {"file": "stacks/avalonia.csv"},
|
|
"uno": {"file": "stacks/uno.csv"},
|
|
"uwp": {"file": "stacks/uwp.csv"},
|
|
}
|
|
|
|
# Common columns for all stacks
|
|
_STACK_COLS = {
|
|
"search_cols": ["Category", "Guideline", "Description", "Do", "Don't"],
|
|
"output_cols": ["Category", "Guideline", "Description", "Do", "Don't", "Code Good", "Code Bad", "Severity", "Docs URL"]
|
|
}
|
|
|
|
AVAILABLE_STACKS = list(STACK_CONFIG.keys())
|
|
|
|
|
|
# ============ BM25 IMPLEMENTATION ============
|
|
class BM25:
|
|
"""BM25 ranking algorithm for text search"""
|
|
|
|
def __init__(self, k1=1.5, b=0.75):
|
|
self.k1 = k1
|
|
self.b = b
|
|
self.corpus = []
|
|
self.doc_lengths = []
|
|
self.avgdl = 0
|
|
self.idf = {}
|
|
self.doc_freqs = defaultdict(int)
|
|
self.N = 0
|
|
|
|
def tokenize(self, text):
|
|
"""Lowercase, split, remove punctuation, filter short words"""
|
|
text = re.sub(r'[^\w\s]', ' ', str(text).lower())
|
|
return [w for w in text.split() if len(w) >= 2]
|
|
|
|
def fit(self, documents):
|
|
"""Build BM25 index from documents"""
|
|
self.corpus = [self.tokenize(doc) for doc in documents]
|
|
self.N = len(self.corpus)
|
|
if self.N == 0:
|
|
return
|
|
self.doc_lengths = [len(doc) for doc in self.corpus]
|
|
self.avgdl = sum(self.doc_lengths) / self.N
|
|
|
|
for doc in self.corpus:
|
|
seen = set()
|
|
for word in doc:
|
|
if word not in seen:
|
|
self.doc_freqs[word] += 1
|
|
seen.add(word)
|
|
|
|
for word, freq in self.doc_freqs.items():
|
|
self.idf[word] = log((self.N - freq + 0.5) / (freq + 0.5) + 1)
|
|
|
|
def score(self, query):
|
|
"""Score all documents against query"""
|
|
query_tokens = self.tokenize(query)
|
|
scores = []
|
|
|
|
for idx, doc in enumerate(self.corpus):
|
|
score = 0
|
|
doc_len = self.doc_lengths[idx]
|
|
term_freqs = defaultdict(int)
|
|
for word in doc:
|
|
term_freqs[word] += 1
|
|
|
|
for token in query_tokens:
|
|
if token in self.idf:
|
|
tf = term_freqs[token]
|
|
idf = self.idf[token]
|
|
numerator = tf * (self.k1 + 1)
|
|
denominator = tf + self.k1 * (1 - self.b + self.b * doc_len / self.avgdl)
|
|
score += idf * numerator / denominator
|
|
|
|
scores.append((idx, score))
|
|
|
|
return sorted(scores, key=lambda x: x[1], reverse=True)
|
|
|
|
|
|
# ============ SEARCH FUNCTIONS ============
|
|
def _load_csv(filepath):
|
|
"""Load CSV and return list of dicts"""
|
|
with open(filepath, 'r', encoding='utf-8') as f:
|
|
return list(csv.DictReader(f))
|
|
|
|
|
|
def _search_csv(filepath, search_cols, output_cols, query, max_results):
|
|
"""Core search function using BM25"""
|
|
if not filepath.exists():
|
|
return []
|
|
|
|
data = _load_csv(filepath)
|
|
|
|
# Build documents from search columns
|
|
documents = [" ".join(str(row.get(col, "")) for col in search_cols) for row in data]
|
|
|
|
# BM25 search
|
|
bm25 = BM25()
|
|
bm25.fit(documents)
|
|
ranked = bm25.score(query)
|
|
|
|
# Get top results with score > 0
|
|
results = []
|
|
for idx, score in ranked[:max_results]:
|
|
if score > 0:
|
|
row = data[idx]
|
|
results.append({col: row.get(col, "") for col in output_cols if col in row})
|
|
|
|
return results
|
|
|
|
|
|
def detect_domain(query):
|
|
"""Auto-detect the most relevant domain from query"""
|
|
query_lower = query.lower()
|
|
|
|
domain_keywords = {
|
|
"color": ["color", "palette", "hex", "#", "rgb", "token", "semantic", "accent", "destructive", "muted", "foreground"],
|
|
"chart": ["chart", "graph", "visualization", "trend", "bar", "pie", "scatter", "heatmap", "funnel"],
|
|
"landing": ["landing", "page", "cta", "conversion", "hero", "testimonial", "pricing", "section"],
|
|
"product": ["saas", "ecommerce", "e-commerce", "fintech", "healthcare", "gaming", "portfolio", "crypto", "dashboard", "fitness", "restaurant", "hotel", "travel", "music", "education", "learning", "legal", "insurance", "medical", "beauty", "pharmacy", "dental", "pet", "dating", "wedding", "recipe", "delivery", "ride", "booking", "calendar", "timer", "tracker", "diary", "note", "chat", "messenger", "crm", "invoice", "parking", "transit", "vpn", "alarm", "weather", "sleep", "meditation", "fasting", "habit", "grocery", "meme", "wardrobe", "plant care", "reading", "flashcard", "puzzle", "trivia", "arcade", "photography", "streaming", "podcast", "newsletter", "marketplace", "freelancer", "coworking", "airline", "museum", "theater", "church", "non-profit", "charity", "kindergarten", "daycare", "senior care", "veterinary", "florist", "bakery", "brewery", "construction", "automotive", "real estate", "logistics", "agriculture", "coding bootcamp"],
|
|
"style": ["style", "design", "ui", "minimalism", "glassmorphism", "neumorphism", "brutalism", "dark mode", "flat", "aurora", "prompt", "css", "implementation", "variable", "checklist", "tailwind"],
|
|
"ux": ["ux", "usability", "accessibility", "wcag", "touch", "scroll", "animation", "keyboard", "navigation", "mobile"],
|
|
"typography": ["font pairing", "typography pairing", "heading font", "body font"],
|
|
"google-fonts": ["google font", "font family", "font weight", "font style", "variable font", "noto", "font for", "find font", "font subset", "font language", "monospace font", "serif font", "sans serif font", "display font", "handwriting font", "font", "typography", "serif", "sans"],
|
|
"icons": ["icon", "icons", "lucide", "heroicons", "symbol", "glyph", "pictogram", "svg icon"],
|
|
"gsap": ["gsap", "quickto", "scrolltrigger", "stagger", "magnetic cursor", "parallax", "page transition", "scroll reveal", "scroll-triggered", "scrollytelling", "flip plugin", "splittext", "shimmer", "skeleton loader"],
|
|
"react": ["react", "next.js", "nextjs", "suspense", "memo", "usecallback", "useeffect", "rerender", "bundle", "waterfall", "barrel", "dynamic import", "rsc", "server component"],
|
|
"web": ["aria", "focus", "outline", "semantic", "virtualize", "autocomplete", "form", "input type", "preconnect"]
|
|
}
|
|
|
|
scores = {domain: sum(1 for kw in keywords if re.search(r'\b' + re.escape(kw) + r'\b', query_lower)) for domain, keywords in domain_keywords.items()}
|
|
best = max(scores, key=scores.get)
|
|
return best if scores[best] > 0 else "style"
|
|
|
|
|
|
def search(query, domain=None, max_results=MAX_RESULTS):
|
|
"""Main search function with auto-domain detection"""
|
|
if domain is None:
|
|
domain = detect_domain(query)
|
|
|
|
config = CSV_CONFIG.get(domain, CSV_CONFIG["style"])
|
|
filepath = DATA_DIR / config["file"]
|
|
|
|
if not filepath.exists():
|
|
return {"error": f"File not found: {filepath}", "domain": domain}
|
|
|
|
results = _search_csv(filepath, config["search_cols"], config["output_cols"], query, max_results)
|
|
|
|
return {
|
|
"domain": domain,
|
|
"query": query,
|
|
"file": config["file"],
|
|
"count": len(results),
|
|
"results": results
|
|
}
|
|
|
|
|
|
def search_stack(query, stack, max_results=MAX_RESULTS):
|
|
"""Search stack-specific guidelines"""
|
|
if stack not in STACK_CONFIG:
|
|
return {"error": f"Unknown stack: {stack}. Available: {', '.join(AVAILABLE_STACKS)}"}
|
|
|
|
filepath = DATA_DIR / STACK_CONFIG[stack]["file"]
|
|
|
|
if not filepath.exists():
|
|
return {"error": f"Stack file not found: {filepath}", "stack": stack}
|
|
|
|
results = _search_csv(filepath, _STACK_COLS["search_cols"], _STACK_COLS["output_cols"], query, max_results)
|
|
|
|
return {
|
|
"domain": "stack",
|
|
"stack": stack,
|
|
"query": query,
|
|
"file": STACK_CONFIG[stack]["file"],
|
|
"count": len(results),
|
|
"results": results
|
|
}
|