@agentskillkit/agent-skills 1.0.1 → 3.2.2

package/.agent/skills/studio/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: studio
+description: >-
+  AI-powered design intelligence with 50+ styles, 97 color palettes, 57 font pairings,
+  and anti-AI-slop design system generation. Triggers on: design system, UI design,
+  color palette, typography, style guide. Coordinates with: frontend-specialist, design-system.
+metadata:
+  category: "design"
+  triggers: "design system, UI design, color palette, typography, style guide"
+  success_metrics: "design system generated, styles matched"
+  coordinates_with: "frontend-specialist, design-system"
+---
+
+# Studio - Design Intelligence Skill
+
+> Comprehensive design database with 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks.
+
+---
+
+## 🎯 Purpose
+
+Generate design systems, color palettes, and typography recommendations based on product type, industry, and style preferences. **Searchable database with priority-based recommendations.**
+
+---
+
+## 📂 Skill Structure
+
+```
+studio/
+├── SKILL.md           # This file (entry point)
+├── data/              # CSV databases
+│   ├── colors.csv     # 97 color palettes
+│   ├── styles.csv     # 50+ design styles
+│   ├── typography.csv # 57 font pairings
+│   ├── ux-guidelines.csv
+│   ├── charts.csv
+│   └── ...
+└── scripts-js/        # Search & generation
+    ├── search.js      # Main search CLI
+    ├── design_system.js
+    └── core.js
+```
+
+---
+
+## 🔧 Quick Reference
+
+### Generate Design System
+
+```bash
+node .agent/skills/studio/scripts-js/search.js "<query>" --design-system [-p "Project Name"]
+```
+
+### Search Specific Category
+
+```bash
+# Colors
+node .agent/skills/studio/scripts-js/search.js "fintech dark" --category colors
+
+# Styles  
+node .agent/skills/studio/scripts-js/search.js "minimal professional" --category styles
+
+# Typography
+node .agent/skills/studio/scripts-js/search.js "modern tech" --category typography
+```
+
+---
+
+## 📊 Database Contents
+
+| Category | Count | Description |
+|----------|-------|-------------|
+| **Styles** | 50+ | Design aesthetics (minimal, playful, elegant...) |
+| **Colors** | 97 | Curated palettes with hex codes |
+| **Typography** | 57 | Font pairings (heading + body) |
+| **UX Guidelines** | 99 | Best practices and patterns |
+| **Charts** | 25 | Data visualization types |
+| **Stacks** | 9 | Technology implementations |
+
+---
+
+## 🤖 Meta-Agents Integration
+
+| Phase | Agent | Action |
+| ----- | ----- | ------ |
+| **Design Planning** | `learner` | Analyze past successful design patterns |
+| **Style Selection** | `critic` | Arbitrate conflicting design choices |
+| **Post-Design** | `learner` | Log design decisions for future reference |
+| **Accessibility** | `assessor` | Evaluate accessibility and UX risks |
+
+---
+
+## 🔗 Related
+
+| Item | Type | Purpose |
+|------|------|---------|
+| `/studio` | Workflow | User-facing command |
+| `frontend-specialist` | Agent | Uses this skill for UI work |
+| `design-system` | Skill | Companion skill |
+
+---
+
+## 📖 References
+
+For detailed documentation, see:
+- `data/` - Raw CSV databases
+- `scripts-js/` - Search implementation

package/.agent/{.shared/ui-ux-pro-max → skills/studio}/data/styles.csv

@@ -19,22 +19,22 @@ STT,Style Category,Type,Keywords,Primary Colors,Secondary Colors,Effects & Anima
 18,Zero Interface,General,"Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient","Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8","Subtle feedback: light green, light red, minimal UI elements, soft accents","Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions","Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences","Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control",✓ Full,✓ Full,⚡ Excellent,✓ Excellent,✓ High,✓ High,"Tailwind 10/10, Custom 10/10",2020s AI-Era,Low
 19,Soft UI Evolution,General,"Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid","Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy","Better combinations, accessible secondary, supporting with improved contrast, modern accents","Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA","Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid","Extreme minimalism, critical performance, systems without modern OS",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA+,✓ High,✓ High,"Tailwind 9/10, MUI 9/10, Chakra 9/10",2020s Modern,Medium
 20,Hero-Centric Design,Landing Page,"Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual","Brand primary color, white/light backgrounds for contrast, accent color for CTA","Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)","Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect","SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies","Complex navigation, multi-page experiences, data-heavy applications",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
-21,Conversion-Optimized,Landing Page,"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ Full (mobile-optimized),✓ Very High
-22,Feature-Rich Showcase,Landing Page,"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✓ High
-23,Minimal & Direct,Landing Page,"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
-24,Social Proof-Focused,Landing Page,"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ High
-25,Interactive Product Demo,Landing Page,"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences",✓ Full,✓ Full,⚠ Good (video/interactive),✓ WCAG AA,✓ Good,✓ Very High
-26,Trust & Authority,Landing Page,"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
-27,Storytelling-Driven,Landing Page,"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software",✓ Full,✓ Full,⚠ Moderate (animations),✓ WCAG AA,✓ Good,✓ High
-28,Data-Dense Dashboard,BI/Analytics,"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
-29,Heat Map & Heatmap Style,BI/Analytics,"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets",✓ Full,✓ Full (with adjustments),⚡ Excellent,⚠ Colorblind considerations,◐ Medium,✗ Not applicable
-30,Executive Dashboard,BI/Analytics,"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✗ Low (not mobile-optimized),✗ Not applicable
-31,Real-Time Monitoring,BI/Analytics,"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards",✓ Full,✓ Full,⚡ Good (real-time load),✓ WCAG AA,◐ Medium,✗ Not applicable
-32,Drill-Down Analytics,BI/Analytics,"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable
-33,Comparative Analysis Dashboard,BI/Analytics,"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
-34,Predictive Analytics,BI/Analytics,"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards",✓ Full,✓ Full,⚠ Good (computation),✓ WCAG AA,◐ Medium,✗ Not applicable
-35,User Behavior Analytics,BI/Analytics,"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✗ Not applicable
-36,Financial Dashboard,BI/Analytics,"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✗ Low,✗ Not applicable
+21,Conversion-Optimized,Landing Page,"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ Full (mobile-optimized),✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
+22,Feature-Rich Showcase,Landing Page,"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
+23,Minimal & Direct,Landing Page,"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Low
+24,Social Proof-Focused,Landing Page,"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
+25,Interactive Product Demo,Landing Page,"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences",✓ Full,✓ Full,⚠ Good (video/interactive),✓ WCAG AA,✓ Good,✓ Very High,"Tailwind 10/10, React 10/10",2020s Modern,Medium
+26,Trust & Authority,Landing Page,"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
+27,Storytelling-Driven,Landing Page,"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software",✓ Full,✓ Full,⚠ Moderate (animations),✓ WCAG AA,✓ Good,✓ High,"GSAP 10/10, Framer Motion 10/10",2020s Modern,High
+28,Data-Dense Dashboard,BI/Analytics,"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 10/10, Chart.js 9/10",2020s Modern,Medium
+29,Heat Map & Heatmap Style,BI/Analytics,"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets",✓ Full,✓ Full (with adjustments),⚡ Excellent,⚠ Colorblind considerations,◐ Medium,✗ Not applicable,"D3.js 10/10, Recharts 9/10",2020s Modern,Medium
+30,Executive Dashboard,BI/Analytics,"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✗ Low (not mobile-optimized),✗ Not applicable,"Recharts 10/10, D3.js 9/10",2020s Modern,Medium
+31,Real-Time Monitoring,BI/Analytics,"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards",✓ Full,✓ Full,⚡ Good (real-time load),✓ WCAG AA,◐ Medium,✗ Not applicable,"Socket.io 10/10, Chart.js 9/10",2020s Modern,Medium
+32,Drill-Down Analytics,BI/Analytics,"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 10/10, D3.js 9/10",2020s Modern,Medium
+33,Comparative Analysis Dashboard,BI/Analytics,"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 10/10, Chart.js 9/10",2020s Modern,Medium
+34,Predictive Analytics,BI/Analytics,"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards",✓ Full,✓ Full,⚠ Good (computation),✓ WCAG AA,◐ Medium,✗ Not applicable,"D3.js 10/10, TensorFlow.js 8/10",2020s AI-Era,High
+35,User Behavior Analytics,BI/Analytics,"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✗ Not applicable,"Recharts 10/10, Amplitude 9/10",2020s Modern,Medium
+36,Financial Dashboard,BI/Analytics,"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✗ Low,✗ Not applicable,"Recharts 10/10, D3.js 10/10",2020s Modern,High
 37,Sales Intelligence Dashboard,BI/Analytics,"Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy","Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)","Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors","Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights","CRM dashboards, sales management, opportunity tracking, performance management, quota planning","Marketing analytics, customer support metrics, HR dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10",2020s Modern,Medium
 38,Neubrutalism,General,"Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z","#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)","Limited accent colors, high contrast combinations, no gradients allowed","box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography","Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs","Luxury brands, finance, healthcare, conservative industries (too playful)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 8/10",2020s Modern,Low
 39,Bento Box Grid,General,"Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards","Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary","Subtle gradients, shadow variations, accent highlights for interactive cards","grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions","Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS","Dense data tables, text-heavy content, real-time monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS Grid 10/10",2020s Apple,Low

package/.agent/skills/studio/scripts-js/core.js

@@ -0,0 +1,344 @@
+/**
+ * Studio Core - BM25 Search Engine
+ * ==================================
+ * JavaScript port of core.py
+ * BM25 ranking algorithm for UI/UX style guides
+ */
+
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { existsSync } from 'fs';
+import { loadCSV } from './utils/csv-loader.js';
+import { tokenize, buildDocument, extractColumns } from './utils/text-utils.js';
+import { LRUCache, clearSearchCache, getCacheStats } from './utils/search-cache.js';
+
+// Global search cache
+const searchCache = new LRUCache(50, 5 * 60 * 1000); // 50 entries, 5 min TTL
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// ============ CONFIGURATION ============
+export const DATA_DIR = join(__dirname, '..', 'data'); // scripts-js -> studio -> data
+export const MAX_RESULTS = 3;
+
+// CSV Configuration - exact port from Python
+export const CSV_CONFIG = {
+    style: {
+        file: 'styles.csv',
+        search_cols: ['Style Category', 'Keywords', 'Best For', 'Type'],
+        output_cols: ['Style Category', 'Type', 'Keywords', 'Primary Colors', 'Effects & Animation', 'Best For', 'Performance', 'Accessibility', 'Framework Compatibility', 'Complexity']
+    },
+    prompt: {
+        file: 'prompts.csv',
+        search_cols: ['Style Category', 'AI Prompt Keywords (Copy-Paste Ready)', 'CSS/Technical Keywords'],
+        output_cols: ['Style Category', 'AI Prompt Keywords (Copy-Paste Ready)', 'CSS/Technical Keywords', 'Implementation Checklist']
+    },
+    color: {
+        file: 'colors.csv',
+        search_cols: ['Product Type', 'Keywords', 'Notes'],
+        output_cols: ['Product Type', 'Keywords', 'Primary (Hex)', 'Secondary (Hex)', 'CTA (Hex)', 'Background (Hex)', 'Text (Hex)', 'Border (Hex)', 'Notes']
+    },
+    chart: {
+        file: 'charts.csv',
+        search_cols: ['Data Type', 'Keywords', 'Best Chart Type', 'Accessibility Notes'],
+        output_cols: ['Data Type', 'Keywords', 'Best Chart Type', 'Secondary Options', 'Color Guidance', 'Accessibility Notes', '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']
+    },
+    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: 'web-interface.csv',
+        search_cols: ['Category', 'Issue', 'Keywords', 'Description'],
+        output_cols: ['Category', 'Issue', 'Platform', 'Description', 'Do', "Don't", 'Code Example Good', 'Code Example Bad', 'Severity']
+    }
+};
+
+export const STACK_CONFIG = {
+    'html-tailwind': { file: 'stacks/html-tailwind.csv' },
+    'react': { file: 'stacks/react.csv' },
+    'nextjs': { file: 'stacks/nextjs.csv' },
+    'vue': { file: 'stacks/vue.csv' },
+    'nuxtjs': { file: 'stacks/nuxtjs.csv' },
+    'nuxt-ui': { file: 'stacks/nuxt-ui.csv' },
+    'svelte': { file: 'stacks/svelte.csv' },
+    'swiftui': { file: 'stacks/swiftui.csv' },
+    'react-native': { file: 'stacks/react-native.csv' },
+    'flutter': { file: 'stacks/flutter.csv' },
+    'shadcn': { file: 'stacks/shadcn.csv' },
+    'jetpack-compose': { file: 'stacks/jetpack-compose.csv' }
+};
+
+const 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']
+};
+
+export const AVAILABLE_STACKS = Object.keys(STACK_CONFIG);
+
+// ============ BM25 IMPLEMENTATION ============
+
+/**
+ * BM25 ranking algorithm for text search
+ * Port of Python implementation with exact same behavior
+ */
+export class BM25 {
+    constructor(k1 = 1.5, b = 0.75) {
+        this.k1 = k1;
+        this.b = b;
+        this.corpus = [];
+        this.docLengths = [];
+        this.avgdl = 0;
+        this.idf = {};
+        this.docFreqs = new Map();
+        this.N = 0;
+    }
+
+    /**
+     * Build BM25 index from documents
+     * @param {string[]} documents - Array of document strings
+     */
+    fit(documents) {
+        // Tokenize all documents
+        this.corpus = documents.map(doc => tokenize(doc));
+        this.N = this.corpus.length;
+
+        if (this.N === 0) return;
+
+        // Calculate document lengths and average
+        this.docLengths = this.corpus.map(doc => doc.length);
+        this.avgdl = this.docLengths.reduce((sum, len) => sum + len, 0) / this.N;
+
+        // Calculate document frequencies
+        this.docFreqs.clear();
+        for (const doc of this.corpus) {
+            const seen = new Set();
+            for (const word of doc) {
+                if (!seen.has(word)) {
+                    this.docFreqs.set(word, (this.docFreqs.get(word) || 0) + 1);
+                    seen.add(word);
+                }
+            }
+        }
+
+        // Calculate IDF scores
+        // Python: log((N - freq + 0.5) / (freq + 0.5) + 1)
+        this.idf = {};
+        for (const [word, freq] of this.docFreqs.entries()) {
+            this.idf[word] = Math.log((this.N - freq + 0.5) / (freq + 0.5) + 1);
+        }
+    }
+
+    /**
+     * Score all documents against query
+     * @param {string} query - Search query
+     * @returns {Array<[number, number]>} Array of [index, score] sorted by score desc
+     */
+    score(query) {
+        const queryTokens = tokenize(query);
+        const scores = [];
+
+        for (let idx = 0; idx < this.corpus.length; idx++) {
+            const doc = this.corpus[idx];
+            const docLen = this.docLengths[idx];
+
+            // Count term frequencies in this document
+            const termFreqs = new Map();
+            for (const word of doc) {
+                termFreqs.set(word, (termFreqs.get(word) || 0) + 1);
+            }
+
+            // Calculate BM25 score
+            let score = 0;
+            for (const token of queryTokens) {
+                if (token in this.idf) {
+                    const tf = termFreqs.get(token) || 0;
+                    const idf = this.idf[token];
+                    const numerator = tf * (this.k1 + 1);
+                    const denominator = tf + this.k1 * (1 - this.b + this.b * docLen / this.avgdl);
+                    score += idf * numerator / denominator;
+                }
+            }
+
+            scores.push([idx, score]);
+        }
+
+        // Sort by score descending
+        return scores.sort((a, b) => b[1] - a[1]);
+    }
+}
+
+// ============ SEARCH FUNCTIONS ============
+
+/**
+ * Core search function using BM25
+ * @param {string} filepath - Full path to CSV file
+ * @param {string[]} searchCols - Columns to search in
+ * @param {string[]} outputCols - Columns to return
+ * @param {string} query - Search query
+ * @param {number} maxResults - Maximum results to return
+ * @returns {Promise<Object[]>} Search results
+ */
+async function searchCSV(filepath, searchCols, outputCols, query, maxResults) {
+    // filepath is just the filename, loadCSV will add DATA_DIR
+    const data = await loadCSV(filepath);
+    if (data.length === 0) return [];
+
+    // Build documents from search columns
+    const documents = data.map(row => buildDocument(row, searchCols));
+
+    // BM25 search
+    const bm25 = new BM25();
+    bm25.fit(documents);
+    const ranked = bm25.score(query);
+
+    // Get top results with score > 0
+    const results = [];
+    for (const [idx, score] of ranked.slice(0, maxResults)) {
+        if (score > 0) {
+            const row = data[idx];
+            results.push(extractColumns(row, outputCols));
+        }
+    }
+
+    return results;
+}
+
+/**
+ * Auto-detect the most relevant domain from query
+ * @param {string} query - Search query
+ * @returns {string} Detected domain
+ */
+export function detectDomain(query) {
+    const queryLower = query.toLowerCase();
+
+    const domainKeywords = {
+        color: ['color', 'palette', 'hex', '#', 'rgb'],
+        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'],
+        prompt: ['prompt', 'css', 'implementation', 'variable', 'checklist', 'tailwind'],
+        style: ['style', 'design', 'ui', 'minimalism', 'glassmorphism', 'neumorphism', 'brutalism', 'dark mode', 'flat', 'aurora'],
+        ux: ['ux', 'usability', 'accessibility', 'wcag', 'touch', 'scroll', 'animation', 'keyboard', 'navigation', 'mobile'],
+        typography: ['font', 'typography', 'heading', 'serif', 'sans'],
+        icons: ['icon', 'icons', 'lucide', 'heroicons', 'symbol', 'glyph', 'pictogram', 'svg icon'],
+        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']
+    };
+
+    // Count keyword matches for each domain
+    const scores = {};
+    for (const [domain, keywords] of Object.entries(domainKeywords)) {
+        scores[domain] = keywords.filter(kw => queryLower.includes(kw)).length;
+    }
+
+    // Find domain with highest score
+    let bestDomain = 'style';
+    let bestScore = 0;
+    for (const [domain, score] of Object.entries(scores)) {
+        if (score > bestScore) {
+            bestScore = score;
+            bestDomain = domain;
+        }
+    }
+
+    return bestScore > 0 ? bestDomain : 'style';
+}
+
+/**
+ * Main search function with auto-domain detection and caching
+ * @param {string} query - Search query
+ * @param {string|null} domain - Domain to search (auto-detect if null)
+ * @param {number} maxResults - Maximum results
+ * @param {Object} options - Additional options
+ * @param {boolean} options.useCache - Whether to use cache (default: true)
+ * @returns {Promise<Object>} Search results with metadata
+ */
+export async function search(query, domain = null, maxResults = MAX_RESULTS, options = {}) {
+    const { useCache = true } = options;
+    
+    if (domain === null) {
+        domain = detectDomain(query);
+    }
+
+    // Check cache first (if enabled)
+    const cacheKey = LRUCache.generateKey(query, domain, maxResults);
+    if (useCache) {
+        const cached = searchCache.get(cacheKey);
+        if (cached !== undefined) {
+            return cached;
+        }
+    }
+
+    const config = CSV_CONFIG[domain] || CSV_CONFIG.style;
+    // Pass just the filename - loadCSV handles DATA_DIR
+    const results = await searchCSV(config.file, config.search_cols, config.output_cols, query, maxResults);
+
+    const result = {
+        domain,
+        query,
+        file: config.file,
+        count: results.length,
+        results,
+        cached: false
+    };
+
+    // Store in cache (if enabled)
+    if (useCache) {
+        searchCache.set(cacheKey, { ...result, cached: true });
+    }
+
+    return result;
+}
+
+/**
+ * Search stack-specific guidelines
+ * @param {string} query - Search query
+ * @param {string} stack - Stack name
+ * @param {number} maxResults - Maximum results
+ * @returns {Promise<Object>} Search results with metadata
+ */
+export async function searchStack(query, stack, maxResults = MAX_RESULTS) {
+    if (!STACK_CONFIG[stack]) {
+        return { error: `Unknown stack: ${stack}. Available: ${AVAILABLE_STACKS.join(', ')}` };
+    }
+
+    // Pass just the filename - loadCSV handles DATA_DIR
+    const results = await searchCSV(STACK_CONFIG[stack].file, STACK_COLS.search_cols, STACK_COLS.output_cols, query, maxResults);
+
+    return {
+        domain: 'stack',
+        stack,
+        query,
+        file: STACK_CONFIG[stack].file,
+        count: results.length,
+        results
+    };
+}