skills.rest
nomos-guild
nomos-guildOFFICIAL
Explore all skills by this author →
GitHub

add-chart

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

4|2|Updated Oct 26, 2025
Search Tags:#typescript#react#dashboard#governance#registry#chart#add-chart
One-click install
npx skills add https://github.com/nomos-guild/cgov --skill add-chart-nomos-guild
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-chart
Source: https://github.com/nomos-guild/cgov/tree/main/.claude/skills/add-chart
Command: npx skills add https://github.com/nomos-guild/cgov --skill add-chart-nomos-guild

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill scaffolds a complete dashboard chart component and registers it within the governance dashboard system.

Core Features & Use Cases

  • Creates a chart component file at src/components/dashboards/governance/charts/${ChartName}Chart.tsx with proper theming hooks, responsive container, and a loading skeleton.
  • Updates the CHART_REGISTRY and type definitions to register the new chart with default layouts and icons for the dashboard.
  • Provides i18n-ready titles and export hooks, plus sample usage for color customization and data handling.
  • Use case: Add a new VoterTurnout chart to visualize governance activity in the dashboard.

Quick Start

Use the add-chart skill to scaffold a new chart named VoterTurnout with a Bar chart and ensure it appears in the governance dashboard.

Frequently Asked Questions about add-chart

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

FAQPage Schema
How do I add a new chart component to a React governance dashboard?▼

Adding a new chart component to a React governance dashboard involves scaffolding the chart file with theming hooks and a responsive container, then registering it within the dashboard chart registry and updating type definitions.

What is a chart registry and how does it work in dashboard layout wiring?▼

A chart registry is a central mapping that registers dashboard charts with default layouts, icons, and type definitions, wiring them into the governance dashboard system for consistent and theme-aware dynamic imports.

Does the governance dashboard chart scaffolding process support i18n and Next.js patterns?▼

Yes, the chart scaffolding process supports i18n by providing ready titles and export hooks, and it requires understanding Next.js and React patterns for dynamic imports and dashboard layout wiring.

Can I customize the color and data handling when scaffolding a new dashboard chart?▼

Yes, you can customize colors and handle data when scaffolding a new dashboard chart because the skill provides sample usage for color customization and data handling within the generated component.

What Next.js patterns do I need to know to wire a theme-aware chart into a dashboard?▼

Wiring a theme-aware chart into a dashboard requires understanding Next.js and React dynamic imports, responsive containers, loading skeletons, and dashboard layout wiring to ensure consistent theme-aware integration.

Related Skills

Explore More Software Engineering Skills→
csim-sgcsim-sg

better-auth

Implement better-auth authentication for Cloudflare Workers with D1.

Community
Advanced
michaelsvanbeekmichaelsvanbeek
1

charts

Standardize Recharts data visualization design with design tokens and accessibility.

Community
Advanced
nomos-guildnomos-guild
4

add-dashboard

Scaffold a reusable dashboard module with chart registry, provider, grid, and side panel.

Official
Advanced
b33eepb33eep
57

standards-typescript

Enforce TypeScript coding standards across .ts, .tsx, and .jsx files.

Community
Basic