visual-skills

Name: visual-skills
Availability: InStock
Author: npc-live

Identify structured data semantics and render interactive HTML charts via ECharts.

168|13|Updated Mar 20, 2026

Search Tags:#automation #template #charts #visualization #data-analysis #echarts

Ready to run

npx skills add https://github.com/npc-live/clawfirm --skill visual-skills

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-skills
Source: https://github.com/npc-live/clawfirm/tree/main/app/assets/skills/visual-skills
Command: npx skills add https://github.com/npc-live/clawfirm --skill visual-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyzing and visualizing structured data is error-prone and inconsistent when relying on ad-hoc charts. This skill automatically interprets the data semantics and routes it to a stable visual template, producing consistent, production-quality charts.

Core Features & Use Cases

Semantic routing: detect data type (e.g., OHLCV, time series, correlation) and select the right chart template.
Template-based rendering: map the data into a fixed contract for Candlestick, Time Series, Donut, Bar, Heatmap, etc.
Single artifact output: output a standalone HTML chart that can be embedded or shared.

Quick Start

Load a dataset (CSV, JSON, or pasted table) and ask to render a production-quality interactive chart.

Frequently Asked Questions about visual-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I turn CSV or JSON data into an interactive chart automatically?▼

To turn CSV or JSON data into an interactive chart, this skill identifies the semantic data type and routes it to a fixed ECharts template, outputting a standalone HTML artifact for immediate rendering.

What is the best way to visualize OHLCV or time series data from a pasted table?▼

The best way to visualize OHLCV or time series data from a pasted table is using semantic routing, which automatically detects the financial or temporal structure and maps it to a production-quality Candlestick or Time Series chart template.

Does this data visualization approach support correlation or composition chart templates?▼

Yes, this data visualization approach supports correlation and composition chart templates. It detects data semantics and maps structured inputs to the correct visual format, including Heatmap for correlation and Donut for composition data.

Can I embed the generated ECharts visualization directly into a webpage?▼

Yes, you can embed the generated ECharts visualization directly into a webpage. The skill outputs a ready-to-render standalone HTML artifact via a templating engine using the ECharts CDN, which can be shared or embedded directly.

How do I generate a standalone HTML chart from structured data without manual configuration?▼

You generate a standalone HTML chart from structured data without manual configuration by loading your dataset and prompting the skill. It interprets data semantics, applies a fixed data contract, and renders the output automatically.

Are there limitations when using template-based rendering for data analysis?▼

A limitation of template-based rendering for data analysis is that charts rely on a fixed data contract and predefined ECharts templates. This ensures consistency but may restrict highly customized visual modifications outside the supported semantic routing templates.