Skip to main content

:::warning AUTO-GENERATED — do not edit This page is generated from the MCP server snapshot content/guide-mcp.json. Edit the source MCP server (not this file), then run npm run generate. :::

Add a chart

When to use: You need a visualization (line/bar/area) of a data series.

Prerequisites​

  • The series data is available from a validated endpoint.

Steps​

Step 1: Confirm this chart has its OWN dedicated endpoint returning ONLY this chart's series — one endpoint per chart/visual.​

Tools: get_endpoint_details, validate_endpoint

Step 2: Get the ChartCard template and its dependency.​

Tools: get_component_template, get_shadcn_components

Step 3: Get the chart color palette from tokens (do not pick your own colors).​

Tools: get_design_tokens

Step 4: Bind the chart to a TanStack Query result.​

Step 5: ALWAYS render a <Skeleton> loading state while the query is pending (never a bare spinner or blank).​

Tools: get_shadcn_components

Step 6: Create a co-located .test.tsx next to the component covering loading, empty, and data states.​

Step 7: Append this component to the checklist so unchecked items are tracked.​

Step 8: Run the quality gate.​

Full recipe definition​

The complete machine-readable recipe as returned by the MCP server:

{
  "id": "add-chart",
  "title": "Add a chart",
  "when": "You need a visualization (line/bar/area) of a data series.",
  "prerequisites": [
    "The series data is available from a validated endpoint."
  ],
  "steps": [
    {
      "action": "Confirm this chart has its OWN dedicated endpoint returning ONLY this chart's series — one endpoint per chart/visual.",
      "tools": [
        "get_endpoint_details",
        "validate_endpoint"
      ],
      "note": "Never reuse a batch endpoint that returns data for several charts. If one does not exist, discover/validate the single-series endpoint before writing the chart."
    },
    {
      "action": "Get the ChartCard template and its dependency.",
      "tools": [
        "get_component_template",
        "get_shadcn_components"
      ],
      "note": "name='ChartCard' (Recharts wrapper). Install chart deps as instructed."
    },
    {
      "action": "Get the chart color palette from tokens (do not pick your own colors).",
      "tools": [
        "get_design_tokens"
      ],
      "note": "category='colors' → use the chart palette entries only."
    },
    {
      "action": "Bind the chart to a TanStack Query result.",
      "files": [
        "src/components/{feature}/{name}Chart.tsx"
      ]
    },
    {
      "action": "ALWAYS render a `<Skeleton>` loading state while the query is pending (never a bare spinner or blank).",
      "tools": [
        "get_shadcn_components"
      ],
      "files": [
        "src/components/{feature}/{name}Chart.tsx"
      ],
      "note": "npx shadcn@latest add skeleton. Show <Skeleton> for isLoading and a typed empty/error state otherwise."
    },
    {
      "action": "Create a co-located `.test.tsx` next to the component covering loading, empty, and data states.",
      "files": [
        "src/components/{feature}/{name}Chart.test.tsx"
      ],
      "note": "Same folder as the component. Test the Skeleton renders while loading and the series renders once data resolves."
    },
    {
      "action": "Append this component to the checklist so unchecked items are tracked.",
      "files": [
        "COMPONENT_CHECKLIST.md"
      ],
      "note": "Add a `- [ ] {name}Chart — Skeleton + test` line; check items off only once the Skeleton and test exist."
    },
    {
      "action": "Run the quality gate.",
      "note": "npm run verify"
    }
  ],
  "filesToCreate": [
    "src/components/{feature}/{name}Chart.tsx",
    "src/components/{feature}/{name}Chart.test.tsx",
    "COMPONENT_CHECKLIST.md"
  ],
  "validation": [
    "`npm run verify` passes.",
    "Colors are token values, verifiable via `validate_colors`.",
    "A `<Skeleton>` loading state and a co-located `.test.tsx` exist for the chart."
  ],
  "doneCriteria": [
    "verify green",
    "No hardcoded hex colors.",
    "each chart is backed by a dedicated endpoint returning ONLY that chart's series",
    "The chart ships with a `<Skeleton>` loading state and a co-located `.test.tsx`, and is listed in COMPONENT_CHECKLIST.md."
  ],
  "commonMistakes": [
    "Choosing arbitrary hex colors.",
    "Faking the data array.",
    "fetching data for multiple charts in one call",
    "Shipping a chart with no Skeleton loading state or no co-located test."
  ],
  "relatedRecipes": [
    "add-kpi-page",
    "add-data-table"
  ]
}