Name: data-report
Author: sanghyunna

About

Imported from sanghyunna/readable-studio (plugins/_official/examples/data-report/SKILL.md). Install upstream with npx skills add sanghyunna/readable-studio --skill data-report. Copyright stays with the author.

【Template: Data Visualization Report】

Header: report title + time range + data source note.
KPI card grid: 3-5 of the most important metrics, each card showing the value + year-over-year change + a mini trend line.
Main chart area: at least 2 charts (bar / line / pie / scatter), using Chart.js or ECharts (via jsdelivr CDN), with data parsed from the user's input.
Chart containers must have a fixed height: wrap each <canvas> in a <div style="position:relative;height:NNNpx"> (~40px for KPI mini charts, ~240–280px for main charts). When Chart.js uses responsive:true, maintainAspectRatio:false without an explicit height on the parent container, it falls into a ResizeObserver infinite loop and the chart grows without bound until the browser hangs. Never set a height= attribute directly on the canvas as layout — that is only an initial value.
Data table: an excerpt of the user's raw data, using <table> with modern styling (zebra stripe, hover, sticky header).
Insight block: 3-5 text insights, each starting with an emoji, like a product weekly report.
A collapsible "Methodology" section at the bottom.
Restrained, professional color scheme: 1 primary color + a neutral scale, with a palette for charts.
Must parse the user's actual provided data — never fabricate it.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/sanghyunna-readable-studio-data-report/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

sanghyunna-readable-studio-data-report.ocm.jsonjson

{
  "ocm": "1",
  "id": "sanghyunna-readable-studio-data-report",
  "kind": "skill",
  "name": "data-report",
  "description": "Turns CSV, Excel, or JSON data into a polished visual report page.",
  "publisher": "sanghyunna",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "data_analysis"
    ],
    "tags": [
      "skill-md",
      "data",
      "report",
      "chart",
      "visualization",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Turns CSV, Excel, or JSON data into a polished visual report page."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/sanghyunna/readable-studio",
      "path": "plugins/_official/examples/data-report/SKILL.md",
      "ref": "98eb24a2d5593708f0348c7f41124b7f50085064",
      "url": "https://github.com/sanghyunna/readable-studio/blob/98eb24a2d5593708f0348c7f41124b7f50085064/plugins/_official/examples/data-report/SKILL.md",
      "key": "sanghyunna/readable-studio/plugins/_official/examples/data-report/SKILL.md"
    }
  },
  "instructions": "【Template: Data Visualization Report】\n- Header: report title + time range + data source note.\n- KPI card grid: 3-5 of the most important metrics, each card showing the value + year-over-year change + a mini trend line.\n- Main chart area: at least 2 charts (bar / line / pie / scatter), using Chart.js or ECharts (via jsdelivr CDN), with data parsed from the user's input.\n- **Chart containers must have a fixed height**: wrap each `<canvas>` in a `<div style=\"position:relative;height:NNNpx\">` (~40px for KPI mini charts, ~240–280px for main charts). When Chart.js uses `responsive:true, maintainAspe",
  "cost": {
    "context_tokens": 329
  }
}

Fetch it by URL: GET /api/v1/registry/sanghyunna-readable-studio-data-report/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.