luffy666code

Flint Chart MCP Skill — Development skill for Claude Code

Development community

Semantic chart generation MCP + Agent Skill for Vega-Lite, ECharts, and Chart.js — local rendering, PNG/SVG output, no Chrome or Puppeteer required.

How to install Flint Chart MCP Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open luffy666code/flint-chart-mcp-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Flint Chart MCP Skill does

Semantic chart generation MCP + Agent Skill for Vega-Lite, ECharts, and Chart.js — local rendering, PNG/SVG output, no Chrome or Puppeteer required.

Alternatives in Development

Add Chart — Renamed → /portaljs-add-chart 2.3k ★
Ian Handdrawn Ppt — 中文手绘技术 PPT 整页图像生成 Skill 21:9 封面 + 16:9 正文配图 PNG 输出 1.4k ★
Img To Component — /agent-input/how-it-works/2.png 이미지에 대해서 다음 작업 수행하라 395 ★

README

📊 Flint Chart MCP Skill

Semantic chart generation for AI agents — local, multi-backend, browser-free

[![Model Context Protocol](https://img.shields.io/badge/MCP-compatible-5C4EE5?logo=anthropic&logoColor=white)](https://modelcontextprotocol.io/) [![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18-339933?logo=node.js&logoColor=white)](https://nodejs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

**Turn compact semantic chart specs into PNG, SVG, or backend-native chart configurations.**

Vega-Lite · ECharts · Chart.js · MCP Tools · Agent Skill

✨ What this project is

This repository packages a **general-purpose Flint Chart MCP server + agent skill** for AI assistants and MCP-compatible clients.

Instead of asking an agent to write large ECharts / Vega-Lite / Chart.js configurations directly, the agent authors a compact semantic specification such as:

{
  "data": {
    "values": [
      { "category": "A", "value": 120 },
      { "category": "B", "value": 200 },
      { "category": "C", "value": 150 }
    ]
  },
  "semantic_types": {
    "category": "Category",
    "value": "Quantity"
  },
  "chart_spec": {
    "chartType": "Bar Chart",
    "encodings": {
      "x": { "field": "category" },
      "y": { "field": "value" }
    }
  },
  "backend": "echarts",
  "format": "png"
}

Flint handles chart assembly, layout, semantic formatting, backend compilation, and server-side rendering.

🚀 Highlights

Agent-friendly tool schema — visual channels such as x, y, color, size, row, and column are explicitly described so tool-calling models can generate reliable encodings.
Three rendering backends — Vega-Lite, ECharts, and Chart.js.
No browser required — no Chrome, Chromium, or Puppeteer is needed for st