Passo-a-passo detalhado do skill, referenciando as fases cognitivas:
1SENSE — Analisar dados e objetivo
```python
import pandas as pd
df = pd.read_csv("data.csv")
print(df.dtypes) # identificar tipos de dados
print(df.describe()) # distribuição de valores numéricos
print(df.nunique()) # cardinalidade de categóricas
```
2CONTEXTUALIZE — Selecionar tipo de gráfico
| Objetivo | Tipo de Gráfico |
|---------|----------------|
| Comparar categorias | Bar chart (horizontal se labels longas) |
| Mostrar evolução temporal | Line chart / Area chart |
| Distribuição | Histogram / Box plot |
| Correlação entre 2 variáveis | Scatter plot |
| Proporção de um todo | Pie (< 5 categorias) / Treemap |
3RECOMMEND — Implementar com Recharts (React)
```typescript
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
interface SalesChartProps {
data: { month: string; revenue: number; users: number }[];
}
export function SalesChart({ data }: SalesChartProps) {
return (
<div role="img" aria-label="Gráfico de receita mensal — crescimento de 45% em 2026">
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" opacity={0.3} />
<XAxis dataKey="month" tick={{ fontSize: 12 }} />
<YAxis tickFormatter={(v) => `R$ ${(v/1000).toFixed(0)}k`} />
<Tooltip
formatter={(value: number, name: string) => [
`R$ ${value.toLocaleString('pt-BR')}`, name
]}
/>
<Line type="monotone" dataKey="revenue" stroke="#6366f1" strokeWidth={2} dot={false} />
</LineChart>
</ResponsiveContainer>
</div>
);
}
```
4RECOMMEND — Versão Python com Plotly
```python
import plotly.express as px
import plotly.io as pio
fig = px.line(df, x='month', y='revenue',
title='Receita Mensal 2026',
labels={'revenue': 'Receita (R$)', 'month': 'Mês'})
fig.update_layout(yaxis_tickformat='R$,.0f')
# Export
pio.write_image(fig, 'chart.png', width=1200, height=600, scale=2)
fig.write_html('chart.html', include_plotlyjs='cdn')
```
5EVALUATE — Verificar design e acessibilidade
Testar com ferramenta de simulação de daltonismo (Coblis ou Sim Daltonism)
Verificar contraste de cores: `axe-core` para accessibility audit
Testar em mobile: 375px width mínimo
Adicionar fallback tabular para screen readers
Documentar como atualizar dados
Reportar telemetria via mcp-skillschain
SynapticSkills