Agent Skills › markdown-viewer/skills › vega

vega

GitHub

用于生成基于Vega-Lite和Vega的数据驱动图表，支持统计可视化如柱状图、折线图等。提供语法规范、常见错误排查及输出格式指导。

vega/SKILL.md markdown-viewer/skills

Trigger Scenarios

需要创建数据可视化图表处理统计数据的图形展示

Install

npx skills add markdown-viewer/skills --skill vega -g -y

More Options

Non-standard path

npx skills add https://github.com/markdown-viewer/skills/tree/main/vega -g -y

Use without installing

npx skills use markdown-viewer/skills@vega

指定 Agent (Claude Code)

npx skills add markdown-viewer/skills --skill vega -a claude-code -g -y

安装 repo 全部 skill

npx skills add markdown-viewer/skills --all -g -y

预览 repo 内 skill

npx skills add markdown-viewer/skills --list

SKILL.md

Frontmatter

{
    "name": "vega",
    "metadata": {
        "author": "Vega is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome\/Edge\/Firefox\/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https:\/\/docu.md"
    },
    "description": "Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds."
}

Vega / Vega-Lite Visualizer

Quick Start: Structure data as array of objects → Choose mark type (bar/line/point/area/arc/rect) → Map encodings (x, y, color, size) to fields → Set data types (quantitative/nominal/ordinal/temporal) → Wrap in ```vega-lite or ```vega fence. Always include $schema, use valid JSON with double quotes, field names are case-sensitive. Use Vega-Lite for 90% of charts; Vega only for radar, word cloud, force-directed.

Critical Syntax Rules

Rule 1: Always Include Schema

"$schema": "https://vega.github.io/schema/vega-lite/v5.json"

Rule 2: Valid JSON Only

❌ {field: "x",}     → Trailing comma, unquoted key
✅ {"field": "x"}    → Proper JSON

Rule 3: Field Names Must Match Data

❌ "field": "Category"  when data has "category"
✅ "field": "category"  → Case-sensitive match

Rule 4: Type Must Be Valid

✅ quantitative | nominal | ordinal | temporal
❌ numeric | string | date

Common Pitfalls

Issue	Solution
Chart not rendering	Check JSON validity, verify `$schema`
Data not showing	Field names must match exactly
Wrong chart type	Match mark to data structure
Colors not visible	Check color scale contrast
Dual-axis issues	Add `resolve: {scale: {y: "independent"}}`