菜单
Create Datell visual reports, dashboards, KPI pages, and no-MCP standalone HTML through the frontend-design-report repository. Prefer the local Datell MCP runtime via datell_generate_chart when available, otherwise fall back to a polished standalone HTML report.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Search and install alias for frontend-design-report. Create Datell-style visual reports, dashboards, KPI summaries, and standalone no-MCP HTML reports with the same runtime contract as datell-visual-report-preview.
Create or review Datell custom skills that should output a visual report preview by composing full HTML and delegating the final render to callTool("generate_chart", ...). Use this when the goal is to make a skill behave like an Agent-generated report instead of returning plain text.
| name | datell-visual-report-preview |
| description | Create Datell visual reports, dashboards, KPI pages, and no-MCP standalone HTML through the frontend-design-report repository. Prefer the local Datell MCP runtime via datell_generate_chart when available, otherwise fall back to a polished standalone HTML report. |
| license | MIT |
| compatibility | Designed for Agent Skills compatible coding agents. If a Datell MCP runtime exposing datell_generate_chart is available, use it; otherwise generate standalone HTML directly. |
| metadata | {"author":"aiis2","track":"hybrid-skill","scope":"visual-report-only"} |
Use this skill when the user wants a visual report, dashboard, KPI summary page, or chart-heavy HTML deliverable.
This is the primary implementation skill in the frontend-design-report repository. The separate frontend-design-report alias skill resolves to the same report-generation workflow for repository-name discovery and installation.
Always inspect the current runtime before choosing the delivery path.
datell_generate_chart.Produce a complete HTML document, not a fragment.
<!doctype html>, <html>, <head>, and <body>.datell_generate_chart is available, call it with the final HTML and title.datell_generate_chart is not available, save the result as a named .html artifact when possible.html block containing the full document.When generating a Datell-style report, follow this order:
Do not start from chart code first. The report should be shaped by layout and cards before the engine is chosen.
When a Datell MCP runtime is available:
datell_generate_chart(html, title, theme?)When Datell MCP is not available:
Use the publishable markdown knowledge base instead of inventing a reduced subset from memory.
When MCP is unavailable, the fallback should become a static basic report rather than a partially interactive app shell.
window.__REPORT_EVENT_BUS__, filterChange, callTool(...), cross-card linkage, linked brushing, or card-to-card drilldown hooks.When MCP is unavailable, do not drop to a generic HTML dashboard. Mirror Datell's real report shell and card system in the standalone output.
report-container, report-header, report-title, report-timestamp, and report-content.grid-kpi for the KPI row and grid-charts for the main content area.report-zones, zone-kpi, zone-filter, and zone-content.card as the base wrapper, then layer specialized classes such as chart-card, kpi-card, and data-table patterns on top.Prefer concrete Datell card variants over anonymous div blocks.
kpi-card, kpi-bullet-card, kpi-ranked-list, kpi-traffic-light, kpi-risk-flag, kpi-two-period, kpi-multi.chart-card with card-subtitle, chart-footer, and a sized chart-container such as md, lg, or full.ranked-table, scorecard-table, heatmap-table, comparison-table, pivot-table.insight-callout, text-summary-card, metric-narrative, timeline-horizontal, timeline-dual-track, process-steps, comparison-twoCol, image-embed-card, cover-page, section-header, roadmap-card.zone-filter, filter-btn-group, filter-select, or filter-checkbox-group when the host can execute basic browser JavaScript and the task explicitly requires embedded controls. Do not use them in the no-MCP basic report path.Catalog integration rule:
Choose a Datell-style canonical layout ID before composing cards.
universal/dashboard-2col: the default for balanced KPI plus chart dashboards.universal/dashboard-3col: use for wide screens and high-density monitoring.universal/bento-grid: use when card importance is uneven and one or two hero cards should span more columns.universal/compact-dashboard: use for operational monitoring, realtime boards, and dense KPI plus small chart collections.universal/magazine-wide: use when the report needs a dominant main story with a supporting side rail.universal/print-a4: use for document-style exports and PDF-oriented reports.universal/mobile-first: use when the request explicitly targets narrow screens.finance/kpi-3col, ecommerce/gmv-overview, sales/daily-report, or operations/server-monitor in structure and card choice.ECharts and ApexCharts use the same Datell shell and card system. They should both live inside the same chart-card and chart-container structure.
Inline Datell's theme variables so the fallback report keeps the same visual grammar as the app shell.
--bg-body, --bg-card, --bg-card-alt, --text-main, --text-sub, --text-accent, --color-primary, --color-success, --color-warning, --color-danger, --border-table, --radius-card, --shadow-card, and --palette-color-1 through --palette-color-6.--bg-card or --bg-body, then keep --text-header high-contrast.palette-classic, palette-slate-dark, palette-editorial, and palette-cyberpunk.datell_generate_chart is available, prefer MCP runtime execution over a prompt-only draft.callTool(...) exist unless they are actually exposed by the current host.new ApexCharts(...) inside the chosen chart-card, and prefer window.__APEX_PALETTE__ when the host exposes it.echarts.init(...), and keep an explicit chart height.datell_generate_chart runtime and silently downgrade to prompt-only output.Use these public examples when you need a concrete no-MCP reference for layout choice, card combination, or README-facing showcase work.
universal/dashboard-2col.
universal/magazine-wide.
universal/bento-grid.See the visual report pattern guide for the recommended page structure, CSS skeleton, and chart bootstrapping pattern.
See the Datell knowledge index for the full publishable markdown index of layouts, palettes, and card components.
See the Datell design system playbook for reusable card families, layout families, palette presets, and domain-to-layout guidance.
See the Datell chart engine playbook for ECharts versus ApexCharts decision rules, shared card integration rules, and engine-specific initialization patterns.
See the no-MCP capability matrix for support tiers across KPI, chart, table, structure, finance, map, VTable, and filter families when MCP is unavailable.
See the real-sales example input and the matching standalone report example for a real-data no-MCP validation pack.