mcp-probe-kit 3.0.15 → 3.0.16

package/README.md

@@ -214,11 +214,16 @@ This mode performs 1-2 rounds of structured clarification before entering spec/f
 
 **Note**: `start_ui` automatically calls `ui_design_system` and `ui_search`, you don't need to call them separately.
 
-**Inspiration:**
-- [ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) - UI/UX design system philosophy
-- [json-render](https://github.com/vercel-labs/json-render) - JSON template rendering engine
-
-**Why use `sync_ui_data`?**
+**Inspiration:**
+- [ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) - UI/UX design system philosophy
+- [json-render](https://github.com/vercel-labs/json-render) - JSON template rendering engine
+
+**Skill Bridge for UI/PRD workflows:**
+- `start_ui` and `start_product` now include a Skill Bridge section in guidance and `structuredContent.metadata.skills`.
+- Recommended skill call order: `ui-ux-pro-max` → `interaction-design` → `frontend-design`.
+- If some skills are missing, workflow continues with MCP main plan and marks unavailable skills in metadata.
+
+**Why use `sync_ui_data`?**
 
 Our `start_ui` tool relies on a rich UI/UX database (colors, icons, charts, components, design patterns, etc.) to generate high-quality design systems and code. This data comes from npm package [uipro-cli](https://www.npmjs.com/package/uipro-cli), including:
 - 🎨 Color schemes (mainstream brand colors, color palettes)
@@ -227,12 +232,13 @@ Our `start_ui` tool relies on a rich UI/UX database (colors, icons, charts, comp
 - 🎯 Landing page templates (SaaS, e-commerce, government, etc.)
 - 📐 Design specifications (spacing, fonts, shadows, etc.)
 
-**Data Sync Strategy:**
-1. **Embedded Data**: Synced at build time, works offline
-2. **Cached Data**: Runtime updates to `~/.mcp-probe-kit/ui-ux-data/`
-3. **Manual Sync**: Use `sync_ui_data` to force update latest data
-
-This ensures `start_ui` can generate professional-grade UI code even offline.
+**Data Sync Strategy:**
+1. **Embedded Data**: Synced at build time, works offline
+2. **Background Auto Sync**: Downloads latest data to `~/.mcp-probe-kit/ui-ux-data/` without changing current session output
+3. **Next-Start Activation**: Newly downloaded data is applied on next process start (keeps current session deterministic)
+4. **Manual Sync**: Use `sync_ui_data` to force refresh cache immediately (still applies next start by default)
+
+This ensures `start_ui` can generate professional-grade UI code even offline.
 
 ### 🎤 Requirements Interview
 

package/build/lib/skill-bridge.d.ts

@@ -0,0 +1,31 @@
+export type SkillBridgeWorkflow = "start_ui" | "start_product";
+export interface SkillBridgeItem {
+    name: string;
+    role: string;
+    installed: boolean;
+    skillPath?: string;
+    expectedPaths: string[];
+}
+export interface SkillBridgeStatus {
+    workflow: SkillBridgeWorkflow;
+    generatedAt: string;
+    installedCount: number;
+    missingCount: number;
+    ready: boolean;
+    skills: SkillBridgeItem[];
+}
+export declare function detectSkillBridge(workflow: SkillBridgeWorkflow): SkillBridgeStatus;
+export declare function buildSkillHeaderNote(status: SkillBridgeStatus): string;
+export declare function buildSkillBridgePlanStep(status: SkillBridgeStatus): {
+    id: string;
+    tool: string;
+    action: string;
+    when: string;
+    args: {
+        order: string[];
+        available: string[];
+        missing: string[];
+    };
+    outputs: never[];
+};
+export declare function renderSkillBridgeSection(status: SkillBridgeStatus): string;

package/build/lib/skill-bridge.js

@@ -0,0 +1,100 @@
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+const SKILL_DEFINITIONS = [
+    {
+        name: "ui-ux-pro-max",
+        role: "设计系统与风格策略推荐",
+        appliesTo: ["start_ui", "start_product"],
+    },
+    {
+        name: "interaction-design",
+        role: "交互状态与流程约束",
+        appliesTo: ["start_ui", "start_product"],
+    },
+    {
+        name: "frontend-design",
+        role: "前端视觉与代码实现增强",
+        appliesTo: ["start_ui", "start_product"],
+    },
+];
+function buildSkillRoots() {
+    const fromEnv = (process.env.MCP_SKILLS_ROOTS || "")
+        .split(path.delimiter)
+        .map((item) => item.trim())
+        .filter(Boolean);
+    const home = os.homedir();
+    const defaults = [
+        path.join(home, ".agents", "skills"),
+        path.join(home, ".codex", "skills"),
+        path.join(home, ".codex", "skills", ".system"),
+    ];
+    return Array.from(new Set([...fromEnv, ...defaults]));
+}
+function resolveSkill(name, roots) {
+    const expectedPaths = roots.map((root) => path.join(root, name, "SKILL.md"));
+    const installedPath = expectedPaths.find((candidate) => fs.existsSync(candidate));
+    return {
+        name,
+        role: SKILL_DEFINITIONS.find((item) => item.name === name)?.role || "",
+        installed: Boolean(installedPath),
+        skillPath: installedPath,
+        expectedPaths,
+    };
+}
+export function detectSkillBridge(workflow) {
+    const roots = buildSkillRoots();
+    const selected = SKILL_DEFINITIONS.filter((item) => item.appliesTo.includes(workflow));
+    const skills = selected.map((item) => resolveSkill(item.name, roots));
+    const installedCount = skills.filter((item) => item.installed).length;
+    const missingCount = skills.length - installedCount;
+    return {
+        workflow,
+        generatedAt: new Date().toISOString(),
+        installedCount,
+        missingCount,
+        ready: missingCount === 0,
+        skills,
+    };
+}
+export function buildSkillHeaderNote(status) {
+    return `Skill Bridge: ${status.installedCount}/${status.skills.length} 可用`;
+}
+export function buildSkillBridgePlanStep(status) {
+    return {
+        id: "skill-bridge",
+        tool: "manual",
+        action: "invoke_skills",
+        when: "在宿主支持 skill 调用时优先执行",
+        args: {
+            order: status.skills.map((item) => item.name),
+            available: status.skills.filter((item) => item.installed).map((item) => item.name),
+            missing: status.skills.filter((item) => !item.installed).map((item) => item.name),
+        },
+        outputs: [],
+    };
+}
+export function renderSkillBridgeSection(status) {
+    const orderLines = status.skills
+        .map((item, index) => `${index + 1}. \`${item.name}\` - ${item.role}`)
+        .join("\n");
+    const stateLines = status.skills
+        .map((item) => `- ${item.name}: ${item.installed ? `已安装（${item.skillPath}）` : "未安装"}`)
+        .join("\n");
+    const conclusion = status.ready
+        ? "全部 skill 可用，建议按顺序调用后再执行 MCP 工具步骤。"
+        : "部分 skill 缺失：继续执行 MCP 主流程，不阻塞；安装缺失 skill 后下次运行可获得更高质量输出。";
+    return `## 🧩 Skill Bridge（UI/PRD 增强）
+
+按顺序调用（宿主支持时）：
+${orderLines}
+
+当前状态：
+${stateLines}
+
+${conclusion}
+
+---
+
+`;
+}

package/build/resources/ui-ux-data/charts.json

@@ -0,0 +1,302 @@
+[
+  {
+    "No": "1",
+    "Data Type": "Trend Over Time",
+    "Keywords": "trend, time-series, line, growth, timeline, progress",
+    "Best Chart Type": "Line Chart",
+    "Secondary Options": "Area Chart, Smooth Area",
+    "Color Guidance": "Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity",
+    "Performance Impact": "⚡ Excellent (optimized)",
+    "Accessibility Notes": "✓ Clear line patterns for colorblind users. Add pattern overlays.",
+    "Library Recommendation": "Chart.js, Recharts, ApexCharts",
+    "Interactive Level": "Hover + Zoom"
+  },
+  {
+    "No": "2",
+    "Data Type": "Compare Categories",
+    "Keywords": "compare, categories, bar, comparison, ranking",
+    "Best Chart Type": "Bar Chart (Horizontal or Vertical)",
+    "Secondary Options": "Column Chart, Grouped Bar",
+    "Color Guidance": "Each bar: distinct color. Category: grouped same color. Sorted: descending order",
+    "Performance Impact": "⚡ Excellent",
+    "Accessibility Notes": "✓ Easy to compare. Add value labels on bars for clarity.",
+    "Library Recommendation": "Chart.js, Recharts, D3.js",
+    "Interactive Level": "Hover + Sort"
+  },
+  {
+    "No": "3",
+    "Data Type": "Part-to-Whole",
+    "Keywords": "part-to-whole, pie, donut, percentage, proportion, share",
+    "Best Chart Type": "Pie Chart or Donut",
+    "Secondary Options": "Stacked Bar, Treemap",
+    "Color Guidance": "Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.",
+    "Performance Impact": "⚡ Good (limit 6 slices)",
+    "Accessibility Notes": "⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.",
+    "Library Recommendation": "Chart.js, Recharts, D3.js",
+    "Interactive Level": "Hover + Drill"
+  },
+  {
+    "No": "4",
+    "Data Type": "Correlation/Distribution",
+    "Keywords": "correlation, distribution, scatter, relationship, pattern",
+    "Best Chart Type": "Scatter Plot or Bubble Chart",
+    "Secondary Options": "Heat Map, Matrix",
+    "Color Guidance": "Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density",
+    "Performance Impact": "⚠ Moderate (many points)",
+    "Accessibility Notes": "⚠ Provide data table alternative. Use pattern + color distinction.",
+    "Library Recommendation": "D3.js, Plotly, Recharts",
+    "Interactive Level": "Hover + Brush"
+  },
+  {
+    "No": "5",
+    "Data Type": "Heatmap/Intensity",
+    "Keywords": "heatmap, heat-map, intensity, density, matrix",
+    "Best Chart Type": "Heat Map or Choropleth",
+    "Secondary Options": "Grid Heat Map, Bubble Heat",
+    "Color Guidance": "Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data",
+    "Performance Impact": "⚡ Excellent (color CSS)",
+    "Accessibility Notes": "⚠ Colorblind: Use pattern overlay. Provide numerical legend.",
+    "Library Recommendation": "D3.js, Plotly, ApexCharts",
+    "Interactive Level": "Hover + Zoom"
+  },
+  {
+    "No": "6",
+    "Data Type": "Geographic Data",
+    "Keywords": "geographic, map, location, region, geo, spatial",
+    "Best Chart Type": "Choropleth Map, Bubble Map",
+    "Secondary Options": "Geographic Heat Map",
+    "Color Guidance": "Regional: single color gradient or categorized colors. Legend: clear scale",
+    "Performance Impact": "⚠ Moderate (rendering)",
+    "Accessibility Notes": "⚠ Include text labels for regions. Provide data table alternative.",
+    "Library Recommendation": "D3.js, Mapbox, Leaflet",
+    "Interactive Level": "Pan + Zoom + Drill"
+  },
+  {
+    "No": "7",
+    "Data Type": "Funnel/Flow",
+    "Keywords": "funnel/flow",
+    "Best Chart Type": "Funnel Chart, Sankey",
+    "Secondary Options": "Waterfall (for flows)",
+    "Color Guidance": "Stages: gradient (starting color → ending color). Show conversion %",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "✓ Clear stage labels + percentages. Good for accessibility if labeled.",
+    "Library Recommendation": "D3.js, Recharts, Custom SVG",
+    "Interactive Level": "Hover + Drill"
+  },
+  {
+    "No": "8",
+    "Data Type": "Performance vs Target",
+    "Keywords": "performance-vs-target",
+    "Best Chart Type": "Gauge Chart or Bullet Chart",
+    "Secondary Options": "Dial, Thermometer",
+    "Color Guidance": "Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "✓ Add numerical value + percentage label beside gauge.",
+    "Library Recommendation": "D3.js, ApexCharts, Custom SVG",
+    "Interactive Level": "Hover"
+  },
+  {
+    "No": "9",
+    "Data Type": "Time-Series Forecast",
+    "Keywords": "time-series-forecast",
+    "Best Chart Type": "Line with Confidence Band",
+    "Secondary Options": "Ribbon Chart",
+    "Color Guidance": "Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "✓ Clearly distinguish actual vs forecast. Add legend.",
+    "Library Recommendation": "Chart.js, ApexCharts, Plotly",
+    "Interactive Level": "Hover + Toggle"
+  },
+  {
+    "No": "10",
+    "Data Type": "Anomaly Detection",
+    "Keywords": "anomaly-detection",
+    "Best Chart Type": "Line Chart with Highlights",
+    "Secondary Options": "Scatter with Alert",
+    "Color Guidance": "Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "✓ Circle/marker for anomalies. Add text alert annotation.",
+    "Library Recommendation": "D3.js, Plotly, ApexCharts",
+    "Interactive Level": "Hover + Alert"
+  },
+  {
+    "No": "11",
+    "Data Type": "Hierarchical/Nested Data",
+    "Keywords": "hierarchical/nested-data",
+    "Best Chart Type": "Treemap",
+    "Secondary Options": "Sunburst, Nested Donut, Icicle",
+    "Color Guidance": "Parent: distinct hues. Children: lighter shades. White borders 2-3px.",
+    "Performance Impact": "⚠ Moderate",
+    "Accessibility Notes": "⚠ Poor - provide table alternative. Label large areas.",
+    "Library Recommendation": "D3.js, Recharts, ApexCharts",
+    "Interactive Level": "Hover + Drilldown"
+  },
+  {
+    "No": "12",
+    "Data Type": "Flow/Process Data",
+    "Keywords": "flow/process-data",
+    "Best Chart Type": "Sankey Diagram",
+    "Secondary Options": "Alluvial, Chord Diagram",
+    "Color Guidance": "Gradient from source to target. Opacity 0.4-0.6 for flows.",
+    "Performance Impact": "⚠ Moderate",
+    "Accessibility Notes": "⚠ Poor - provide flow table alternative.",
+    "Library Recommendation": "D3.js (d3-sankey), Plotly",
+    "Interactive Level": "Hover + Drilldown"
+  },
+  {
+    "No": "13",
+    "Data Type": "Cumulative Changes",
+    "Keywords": "cumulative-changes",
+    "Best Chart Type": "Waterfall Chart",
+    "Secondary Options": "Stacked Bar, Cascade",
+    "Color Guidance": "Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "✓ Good - clear directional colors with labels.",
+    "Library Recommendation": "ApexCharts, Highcharts, Plotly",
+    "Interactive Level": "Hover"
+  },
+  {
+    "No": "14",
+    "Data Type": "Multi-Variable Comparison",
+    "Keywords": "multi-variable-comparison",
+    "Best Chart Type": "Radar/Spider Chart",
+    "Secondary Options": "Parallel Coordinates, Grouped Bar",
+    "Color Guidance": "Single: #0080FF 20% fill. Multiple: distinct colors per dataset.",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "⚠ Moderate - limit 5-8 axes. Add data table.",
+    "Library Recommendation": "Chart.js, Recharts, ApexCharts",
+    "Interactive Level": "Hover + Toggle"
+  },
+  {
+    "No": "15",
+    "Data Type": "Stock/Trading OHLC",
+    "Keywords": "stock/trading-ohlc",
+    "Best Chart Type": "Candlestick Chart",
+    "Secondary Options": "OHLC Bar, Heikin-Ashi",
+    "Color Guidance": "Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "⚠ Moderate - provide OHLC data table.",
+    "Library Recommendation": "Lightweight Charts (TradingView), ApexCharts",
+    "Interactive Level": "Real-time + Hover + Zoom"
+  },
+  {
+    "No": "16",
+    "Data Type": "Relationship/Connection Data",
+    "Keywords": "relationship/connection-data",
+    "Best Chart Type": "Network Graph",
+    "Secondary Options": "Hierarchical Tree, Adjacency Matrix",
+    "Color Guidance": "Node types: categorical colors. Edges: #90A4AE 60% opacity.",
+    "Performance Impact": "❌ Poor (500+ nodes struggles)",
+    "Accessibility Notes": "❌ Very Poor - provide adjacency list alternative.",
+    "Library Recommendation": "D3.js (d3-force), Vis.js, Cytoscape.js",
+    "Interactive Level": "Drilldown + Hover + Drag"
+  },
+  {
+    "No": "17",
+    "Data Type": "Distribution/Statistical",
+    "Keywords": "distribution/statistical",
+    "Best Chart Type": "Box Plot",
+    "Secondary Options": "Violin Plot, Beeswarm",
+    "Color Guidance": "Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.",
+    "Performance Impact": "⚡ Excellent",
+    "Accessibility Notes": "✓ Good - include stats table (min, Q1, median, Q3, max).",
+    "Library Recommendation": "Plotly, D3.js, Chart.js (plugin)",
+    "Interactive Level": "Hover"
+  },
+  {
+    "No": "18",
+    "Data Type": "Performance vs Target (Compact)",
+    "Keywords": "performance-vs-target-(compact)",
+    "Best Chart Type": "Bullet Chart",
+    "Secondary Options": "Gauge, Progress Bar",
+    "Color Guidance": "Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",
+    "Performance Impact": "⚡ Excellent",
+    "Accessibility Notes": "✓ Excellent - compact with clear values.",
+    "Library Recommendation": "D3.js, Plotly, Custom SVG",
+    "Interactive Level": "Hover"
+  },
+  {
+    "No": "19",
+    "Data Type": "Proportional/Percentage",
+    "Keywords": "proportional/percentage",
+    "Best Chart Type": "Waffle Chart",
+    "Secondary Options": "Pictogram, Stacked Bar 100%",
+    "Color Guidance": "10x10 grid. 3-5 categories max. 2-3px spacing between squares.",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "✓ Good - better than pie for accessibility.",
+    "Library Recommendation": "D3.js, React-Waffle, Custom CSS Grid",
+    "Interactive Level": "Hover"
+  },
+  {
+    "No": "20",
+    "Data Type": "Hierarchical Proportional",
+    "Keywords": "hierarchical-proportional",
+    "Best Chart Type": "Sunburst Chart",
+    "Secondary Options": "Treemap, Icicle, Circle Packing",
+    "Color Guidance": "Center to outer: darker to lighter. 15-20% lighter per level.",
+    "Performance Impact": "⚠ Moderate",
+    "Accessibility Notes": "⚠ Poor - provide hierarchy table alternative.",
+    "Library Recommendation": "D3.js (d3-hierarchy), Recharts, ApexCharts",
+    "Interactive Level": "Drilldown + Hover"
+  },
+  {
+    "No": "21",
+    "Data Type": "Root Cause Analysis",
+    "Keywords": "root cause, decomposition, tree, hierarchy, drill-down, ai-split",
+    "Best Chart Type": "Decomposition Tree",
+    "Secondary Options": "Decision Tree, Flow Chart",
+    "Color Guidance": "Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.",
+    "Performance Impact": "⚠ Moderate (calculation heavy)",
+    "Accessibility Notes": "✓ clear hierarchy. Allow keyboard navigation for nodes.",
+    "Library Recommendation": "Power BI (native), React-Flow, Custom D3.js",
+    "Interactive Level": "Drill + Expand"
+  },
+  {
+    "No": "22",
+    "Data Type": "3D Spatial Data",
+    "Keywords": "3d, spatial, immersive, terrain, molecular, volumetric",
+    "Best Chart Type": "3D Scatter/Surface Plot",
+    "Secondary Options": "Volumetric Rendering, Point Cloud",
+    "Color Guidance": "Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).",
+    "Performance Impact": "❌ Heavy (WebGL required)",
+    "Accessibility Notes": "❌ Poor - requires alternative 2D view or data table.",
+    "Library Recommendation": "Three.js, Deck.gl, Plotly 3D",
+    "Interactive Level": "Rotate + Zoom + VR"
+  },
+  {
+    "No": "23",
+    "Data Type": "Real-Time Streaming",
+    "Keywords": "streaming, real-time, ticker, live, velocity, pulse",
+    "Best Chart Type": "Streaming Area Chart",
+    "Secondary Options": "Ticker Tape, Moving Gauge",
+    "Color Guidance": "Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.",
+    "Performance Impact": "⚡ Optimized (canvas/webgl)",
+    "Accessibility Notes": "⚠ Flashing elements - provide pause button. High contrast.",
+    "Library Recommendation": "Smoothed D3.js",
+    "Interactive Level": "CanvasJS"
+  },
+  {
+    "No": "24",
+    "Data Type": "Sentiment/Emotion",
+    "Keywords": "sentiment, emotion, nlp, opinion, feeling",
+    "Best Chart Type": "Word Cloud with Sentiment",
+    "Secondary Options": "Sentiment Arc, Radar Chart",
+    "Color Guidance": "Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.",
+    "Performance Impact": "⚡ Good",
+    "Accessibility Notes": "⚠ Word clouds poor for screen readers. Use list view.",
+    "Library Recommendation": "D3-cloud, Highcharts, Nivo",
+    "Interactive Level": "Hover + Filter"
+  },
+  {
+    "No": "25",
+    "Data Type": "Process Mining",
+    "Keywords": "process, mining, variants, path, bottleneck, log",
+    "Best Chart Type": "Process Map / Graph",
+    "Secondary Options": "Directed Acyclic Graph (DAG), Petri Net",
+    "Color Guidance": "Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.",
+    "Performance Impact": "⚠ Moderate to Heavy",
+    "Accessibility Notes": "⚠ Complex graphs hard to navigate. Provide path summary.",
+    "Library Recommendation": "React-Flow, Cytoscape.js, Recharts",
+    "Interactive Level": "Drag + Node-Click"
+  }
+]