Library cheatsheet — qué usar para qué¶

Resumen práctico de las librerías disponibles en cada superficie (artifact React, artifact HTML, Claude Code) y para qué casos.

Charts y visualización¶

Librería	Cuándo usar	Cuándo NO
Recharts	Default en React artifacts. Bar, Line, Area, Pie, Composed, Radar, Scatter.	Custom viz exóticas (force graphs, sankeys complejos).
D3	Custom viz, geo-projections, force layouts, complex sankeys.	Charts estándar (overkill).
Plotly	Científico / 3D (surfaces, contour, heatmaps, parallel coords).	Dashboards simples (heavy).
Chart.js	Canvas-based con datasets grandes (>1k points).	Cuando necesitas accesibilidad (Canvas no es a11y-friendly).

Recharts must-have: envolver siempre en <ResponsiveContainer width="100%" height={400}>. Si no, no renderiza.

3D¶

Lib	Donde	Notas
three.js r128	Artifacts (HTML preferido; React también).	Sin CapsuleGeometry, sin OrbitControls.
@react-three/fiber + drei	Claude Code local.	NO disponible en artifacts.

Para 3D simple en artifacts: HTML + <script src cdnjs three r128>. Para 3D complejo: migrar a Claude Code.

Animación¶

Lib	Donde	Notas
CSS keyframes + Tailwind animate	Artifacts.	Suficiente para 90% de casos.
Framer Motion	Claude Code local.	NO en artifacts.
motion.dev (motion primitives)	Claude Code local.	Recomendado por Anthropic 2026.
GSAP	HTML artifact con `<script src cdnjs gsap>`.	Funciona.

Audio¶

Lib	Donde	Uso
tone.js	Artifacts React.	Synth, samples, FX, sequencer. `Tone.start()` en user gesture.
Web Audio API nativa	Artifacts cualquiera.	Para FFT custom, análisis.
wavesurfer.js	HTML artifact via cdnjs.	Waveform display.

Data parsing¶

Lib	Para
papaparse	CSV/TSV parse.
xlsx (SheetJS)	Excel read/write.
mammoth	DOCX → HTML.
PDF.js	HTML artifact via cdnjs. PDF render in-browser.

Iconos¶

Lib	Donde	Notas
lucide-react	React artifacts (default).	~1000 iconos, tree-shakeable.
lucide vía CDN	HTML artifacts.	`<script src cdnjs lucide>`.
heroicons	Solo Claude Code.	npm install.
phosphor-icons	Solo Claude Code.	npm install.

UI components¶

Lib	Donde	Notas
shadcn/ui subset	React artifacts via `@/components/ui/*`.	Button, Card, Input, Tabs, Dialog, Select, etc.
shadcn/ui completo	Claude Code.	Vía `npx shadcn@latest add`.
Radix UI primitives	Claude Code.	Base de shadcn.
Headless UI	Claude Code.	Tailwind official.

shadcn en artifacts:

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

ML / AI in-browser¶

Lib	Caso
@tensorflow/tfjs	Inferencia con modelos preentrenados (MobileNet, BlazeFace, etc.).
transformers.js	HTML artifact via cdnjs. Hugging Face en navegador.
Claudeception	`fetch` a `api.anthropic.com` — el más práctico para LLM tasks.

Math¶

Lib	Caso
mathjs	Expresiones simbólicas, units, matrices.
lodash	Utilities (groupBy, debounce, etc.).

Decision tree rápido¶

¿Necesitas chart estándar?            → Recharts
¿Custom viz exótica?                  → D3
¿3D en artifact?                      → HTML + three.js r128 vía cdnjs
¿3D complejo?                         → Claude Code + @react-three/fiber
¿Animaciones complejas?               → Migrar a Claude Code + Framer Motion / motion.dev
¿Form complejo en artifact?           → Imposible (no <form>). Reescribir con div+handlers o migrar.
¿Backend / DB?                        → Claude Code, no artifact.
¿Offline / cache?                     → Claude Code (Service Worker), no artifact.