ECharts Design System Initializer

Constraint: Only use this skill when the user explicitly mentions "Pencil" and "ECharts" or when orchestrating a Pencil design system initialization task for charts.

When to use this skill

Use this skill when you need to initialize a chart/design system based on ECharts specifications in a .pen file: set up chart theme colors and create placeholder frames for chart types (line, bar, pie, etc.).

How to use this skill

This skill outputs a PENCIL_PLAN. The Agent then calls Pencil MCP tools in order: open_document, set_variables, batch_design, optionally get_screenshot.

Step 1: Initialize Variables (set_variables)

Use mcp__pencil__set_variables to register ECharts-related design tokens (chart theme colors, font). Follow .pen file schema.

Chart colors (palette)

• echarts-color-1: #5470c6