Escolher biblioteca de gráficos com Claude Code

Comece pelo risco de produto

Escolher biblioteca de gráficos com Claude Code não é pedir ao Claude Code uma tela mais bonita. O objetivo é melhorar uma interface real sem quebrar conversão, leitura, acessibilidade ou layout móvel. Em produção, estados vazios, carregamento, erros, foco de teclado, textos longos, anúncios, blocos de código e CTA importam muito.

Leia também claude code dashboard development, claude code data visualization, claude code accessibility. As referências oficiais são Claude Code docs, Recharts, Chart.js, D3, WCAG 2.2. O pedido ao Claude Code deve conter objetivo, limites, use case, pitfall e verificação.

Prompt recomendado

Implemente esta melhoria com a menor mudança segura.
Respeite componentes, tokens de design e rotas existentes.
Cubra use case, pitfall, acessibilidade, mobile e estados de erro.
Retorne código copiável e uma review checklist.

Use case checklist

1. Landing pages e artigos onde o leitor precisa ver o próximo passo.
2. Dashboards SaaS com carregamento, vazio, erro e sucesso.
3. Compra, cadastro e consulta onde o botão principal precisa continuar claro.
4. Revisão em equipe, com código e critérios gerados por Claude Code.

Código de implementação

npm i recharts chart.js react-chartjs-2 d3
npm i -D @types/d3

"use client";

import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

type Point = {
  date: string;
  revenue: number | null;
  orders: number;
};

const money = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

function normalize(points: Point[]) {
  return points
    .filter((point) => Number.isFinite(Date.parse(point.date)))
    .sort((a, b) => Date.parse(a.date) - Date.parse(b.date))
    .map((point) => ({
      ...point,
      label: new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(
        new Date(point.date),
      ),
      revenue: point.revenue ?? 0,
      orders: Number.isFinite(point.orders) ? point.orders : 0,
    }));
}

export function RevenueChart({ data }: { data: Point[] }) {
  const rows = normalize(data);

  if (rows.length === 0) {
    return <p role="status">No chart data yet. Check the date range or filters.</p>;
  }

  return (
    <figure aria-labelledby="revenue-chart-title">
      <h2 id="revenue-chart-title">Revenue trend</h2>
      <ResponsiveContainer width="100%" height={320}>
        <LineChart data={rows} margin={{ top: 16, right: 24, bottom: 8, left: 8 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis tickFormatter={(value) => money.format(Number(value))} />
          <Tooltip formatter={(value) => money.format(Number(value))} />
          <Line type="monotone" dataKey="revenue" stroke="#2563eb" strokeWidth={3} dot={false} />
        </LineChart>
      </ResponsiveContainer>
      <figcaption>Data is sorted by date and null revenue is rendered as zero.</figcaption>
    </figure>
  );
}

Pitfall checklist

• Otimizar só para screenshot pode piorar o fluxo real.
• Depender apenas de cor ou movimento prejudica acessibilidade.
• Não testar em 375px pode criar rolagem horizontal.
• Ignorar dados vazios, rótulos longos e rede lenta gera bugs.
• Mudanças sem relação aumentam o custo de revisão.

Verificação

Peça uma segunda passada apenas de review. Claude Code deve listar arquivos alterados, riscos, checagens de navegador e testes manuais. Depois revise no mobile, confirme ausência de overflow, rolagem do bloco de código, CTA visível e foco claro.

Monetização

Esse trabalho afeta anúncios, cards de produto, links de consulta, preços e formulários. Para aplicar em um repositório real, a página de treinamento e consultoria Claude Code transforma isso em processo repetível.

Nota de teste prático

Testei em três etapas: implementação, review e verificação mobile. O diff ficou menor e os problemas de layout e acessibilidade apareceram antes do deploy.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.