Skip to content
OpenSmartRoute
Skillv1.0.0

prism-chart

Use when asked to implement a chart, select a visualization type, or build a data display component. Examples: "implement chart for time series", "best visualization for comparison data", "chart compo

by tonone-ai(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from tonone-ai/tonone (team/prism/skills/prism-chart/SKILL.md). Install upstream with npx skills add tonone-ai/tonone --skill prism-chart. Copyright stays with the author (MIT).

prism-chart — Chart & Visualization Selection

Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.

When to use

User needs a chart implementation, visualization type recommendation, or data display component.

Workflow

  1. Identify data type from user request (time series, comparison, distribution, composition, relationship, etc.)
  2. Search chart knowledge base:
    python3 -m prism_agent.uiux search --domain chart --query "{data_type}" --limit 3
  3. Evaluate results for: data volume threshold, accessibility grade, interaction level
  4. Output recommendation with library choice and accessibility fallback

Output format

┌─ Chart Recommendation — {data_type} ────────────────────────────────┐
│ Chart type:        {chart_type}                                      │
│ Library:           {library} (Chart.js / Recharts / D3 / Plotly)    │
│ Accessibility:     {grade} (AA / A / Below AA)                      │
│ Interaction level: {level} (static / hover / drill-down)            │
│ Data volume:       {threshold} (max recommended data points)        │
├─ Color guidance ────────────────────────────────────────────────────┤
│ {color_guidance}                                                     │
├─ Accessibility fallback ────────────────────────────────────────────┤
│ {fallback_description}                                               │
└──────────────────────────────────────────────────────────────────────┘

Anti-patterns

  • Never ignore data volume threshold — recommend aggregation if data exceeds it
  • Never skip accessibility fallback for charts graded below AA
  • Never choose a chart type based on visual appeal over data clarity
  • Never recommend a library without confirming it is compatible with the detected stack

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

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/tonone-ai-tonone-prism-chart/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.

tonone-ai-tonone-prism-chart.ocm.jsonjson
{
  "ocm": "1",
  "id": "tonone-ai-tonone-prism-chart",
  "kind": "skill",
  "name": "prism-chart",
  "description": "Use when asked to implement a chart, select a visualization type, or build a data display component. Examples: \"implement chart for time series\", \"best visualization for comparison data\", \"chart component for analytics\"",
  "publisher": "tonone-ai",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "data_analysis"
    ],
    "tags": [
      "skill-md",
      "engineering",
      "frontend",
      "chart",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Use when asked to implement a chart, select a visualization type, or build a data display component. Examples: \"implement chart for time series\", \"best visualization for comparison data\", \"chart component for analytics\""
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/tonone-ai/tonone",
      "path": "team/prism/skills/prism-chart/SKILL.md",
      "ref": "64caa639d941227719d912936fedede546983cee",
      "url": "https://github.com/tonone-ai/tonone/blob/64caa639d941227719d912936fedede546983cee/team/prism/skills/prism-chart/SKILL.md",
      "key": "tonone-ai/tonone/team/prism/skills/prism-chart/SKILL.md"
    },
    "compatibility": "Designed for Claude Code",
    "allowed_tools": [
      "Read,",
      "Bash,",
      "Glob,",
      "Grep"
    ],
    "license": "MIT"
  },
  "instructions": "# prism-chart — Chart & Visualization Selection\n\nFollow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.\n\n## When to use\n\nUser needs a chart implementation, visualization type recommendation, or data display component.\n\n## Workflow\n\n1. **Identify data type** from user request (time series, comparison, distribution, composition, relationship, etc.)\n2. **Search chart knowledge base:**\n   ```bash\n   python3 -m prism_agent.uiux search --domain chart --query \"{data_type}\" --limit 3\n   ```\n3. **Evaluate results** ",
  "cost": {
    "context_tokens": 533
  }
}

Fetch it by URL: GET /api/v1/registry/tonone-ai-tonone-prism-chart/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.