partme-ai/pencil-ui-design-system-echarts
skills/pencil-skills/pencil-ui-design-system-echarts/SKILL.md
Initialize ECharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with ECharts, needs to set up chart color palette and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other ECharts chart types.
$ install --global
skillsauthnpx skillsauth add partme-ai/full-stack-skills pencil-ui-design-system-echartsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 9:03 AM55.1s6 files scanned
SKILL.md
- name:
- pencil-ui-design-system-echarts
- description:
- Initialize ECharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with ECharts, needs to set up chart color palette and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other ECharts chart types.
- license:
- Complete terms in LICENSE.txt
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:
- The user wants to initialize ECharts chart theme tokens (colors, axis, text) in a Pencil .pen file
- The user needs placeholder frames for ECharts chart types (Line, Bar, Pie, Scatter, Radar, Gauge)
- The user mentions "Pencil" together with "ECharts" or chart visualization components
- An orchestrator skill (pencil-ui-designer) routes an ECharts initialization request
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:#5470c6echarts-color-2:#91cc75echarts-color-3:#fac858echarts-color-4:#ee6666echarts-color-5:#73c0de
Axis / grid / text
echarts-axis-line-color:#6e7079echarts-split-line-color:#e0e6f1echarts-text-color:#6e7079echarts-font-size:12px
Fill from ECharts theme docs if more tokens are needed.
Step 2: Create Component Overview Structure (batch_design)
Use mcp__pencil__batch_design to create a "Charts Overview" frame with placeholder sections for chart types (data-viz components):
- Basic Charts (基础图表)
- Line, Bar, Pie, Scatter, Radar, Gauge
- Complex Charts (复杂图表)
- Candlestick, Heatmap, Tree, Treemap, Sunburst, Parallel, Sankey, Funnel, PictorialBar
- Containers (容器)
- Chart container placeholder, Legend placeholder, Grid placeholder
Organize frames using Auto Layout. Keep each batch_design call to maximum 25 operations.
Example: Initialize ECharts Variables
{
"name": "set_variables",
"arguments": {
"filePath": "designs/dashboard.pen",
"replace": false,
"variables": {
"echarts-color-1": "#5470c6",
"echarts-color-2": "#91cc75",
"echarts-color-3": "#fac858",
"echarts-color-4": "#ee6666",
"echarts-axis-line-color": "#6e7079",
"echarts-text-color": "#6e7079",
"echarts-font-size": "12px"
}
}
}
Best Practices
- Verify token values against ECharts theme documentation.
- Use
set_variableswithreplace: falseunless a full reset is requested. - Chart "components" here are placeholder frames for layout; actual chart config is code-side.
- Keep each
batch_designcall to maximum 25 operations.
Keywords
pencil, echarts, chart, design system, init, variables, data visualization
References
references/contract.md– Design tokens and chart type naming.references/official.md– Link to official documentation.references/examples.md– Example PENCIL_PLAN.references/components.md– Chart type specifications.
Related Skills
partme-ai/uniapp-project
development
VerifiedTrustedCommunity
Provides per-component and per-API examples with cross-platform compatibility details for uni-app, covering built-in components, uni-ui components, and APIs (network, storage, device, UI, navigation, media). Use when the user needs official uni-app components or APIs, wants per-component examples with doc links, or needs platform compatibility checks.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-project-creator
tools
VerifiedTrustedCommunity
Creates new uni-app projects via the official CLI or HBuilderX with Vue 2/Vue 3 template selection, manifest.json and pages.json configuration, and directory structure setup. Use when the user wants to scaffold a new uni-app project, initialize project files with a single command, or set up the development environment.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-plugin
tools
VerifiedTrustedCommunity
Browses, installs, configures, and manages plugins from the uni-app plugin market (ext.dcloud.net.cn) including component plugins, API plugins, and template plugins with dependency handling. Use when the user needs to find and install uni-app plugins, configure plugin settings, manage plugin dependencies, or integrate third-party components.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-native-plugin
tools
VerifiedTrustedCommunity
Develops native Android and iOS plugins for uni-app including module creation, JavaScript-to-native communication, and plugin packaging for distribution. Use when the user needs to build custom native modules, extend uni-app with native capabilities (camera, Bluetooth, sensors), or create publishable native plugins.
456SKILL.mdUpdated Jun 4, 2026