skills.rest
nghyane
nghyaneCOMMUNITY
Explore all skills by this author →
Website𝕏@nghyaneGitHub

chart-patterns

Defines SVG chart specifications for radar, grouped bar, and heatmap dashboard visualizations.

3|1|Updated Jan 12, 2026
Search Tags:#charts#react#dashboard#svg#heatmap#radar chart#bar chart
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill chart-patterns-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chart-patterns
Source: https://github.com/nghyane/VSTEP/tree/main/apps/frontend-v3/.agents/skills/chart-patterns
Command: npx skills add https://github.com/nghyane/VSTEP --skill chart-patterns-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent dashboard charts requires repeated decisions about scales, colors, and layout. This Skill provides ready-made SVG chart specifications so dashboard visualizations follow a uniform design system without re-deriving each pattern. ## Core Features & Use Cases - Spider/Radar Chart Spec: Four axes from SkillKey on a 0-10 scale, with two polygons comparing current scores (primary color) against target scores (destructive dashed). - Grouped Bar + Trend Line Spec: Test dates on the X axis, band scores 0-10 on the Y axis, four skill-colored bars per test, plus an overall average line and a dashed target line. - Heatmap Spec: A heatmap pattern for dashboard data density visualization. - Use Case: When adding a new score visualization to the learner dashboard, load this Skill to match the existing SpiderCard and ScoreTrend component conventions instead of inventing new styling. ## Quick Start Use the chart-patterns skill to create a spider chart component for the dashboard following the existing SVG specs.

Frequently Asked Questions about chart-patterns

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

FAQPage Schema
How do I create a radar chart for skill scores in React?▼

Use the spider chart spec with four axes derived from SkillKey on a 0-10 scale. Render two SVG polygons: one for current scores in the primary color and one for target scores as a dashed destructive-colored outline, following the SpiderCard component pattern.

How to build a grouped bar chart with an average trend line?▼

Place test dates on the X axis and band scores 0-10 on the Y axis. Render four bars per test using skill colors at 0.65 opacity, then overlay one line for the overall average in primary-dark and a dashed target line in the destructive color.

What chart types does this dashboard design system support?▼

The spec covers three SVG chart types: a spider/radar chart for skill comparison, a grouped bar chart with average and target trend lines for score history, and a heatmap for density visualization.

When should I use a spider chart versus a grouped bar chart?▼

Use the spider chart to compare current versus target scores across the four skills at a single point in time. Use the grouped bar chart to show score progression across multiple test dates with an overall average trend.

Related Skills

Explore More Software Engineering Skills→
stayconnectquickstayconnectquick

health

Aggregate code quality metrics into a 0-10 health score with trends.

Community
Intermediate
nomos-guildnomos-guild
4

add-chart

Scaffold a dashboard chart component and register it in the governance system.

Official
Advanced
echoVicechoVic
553

ui-designer/interaction-specification

Defines UI interaction specifications covering loading states, empty states, feedback, animations, and accessibility.

Community
Intermediate
dudqks0319-cpududqks0319-cpu

d3_visualization

Generate D3.js charts including bar, line, pie, donut, and scatter plots in HTML.

Community
Basic