Building React + Quill canvases
Ce skill fait partie du repository posthog/skills, une collection de skills destinés à enrichir les workflows assistés par IA autour de la plateforme PostHog. Il s'agit d'un skill pleinement documenté (non d'un squelette vide) : son SKILL.md contient des instructions détaillées et opérationnelles pour guider Claude dans la création de canvases PostHog basés sur React et le design system Quill.
Rôle et périmètre
Ce skill intervient en aval du skill building-canvases, une fois qu'une demande de canvas a été routée vers une implémentation React. Il couvre l'ensemble du contrat de développement : l'application entière tient dans un seul fichier src/canvas.tsx exportant un composant React sans props. Il précise les imports autorisés (React, Quill, Recharts, Lucide, Day.js, et le SDK @posthog/canvas-sdk), les règles d'utilisation des composants Quill (jamais de contrôles natifs ni de <div> stylisés à la place d'un composant Quill), la gestion des tokens de thème (dark/light), et les patterns de chargement progressif par requête indépendante.
Le skill documente également des patterns de data-product réutilisables : dashboards produit, boards web analytics, explorateurs interactifs, et checklists ou runbooks. Chaque pattern inclut des recommandations sur les états de chargement, d'erreur et de résultat vide, ainsi que sur la vérifiabilité des données affichées.
Comment l'utiliser
Ce skill s'installe depuis le marketplace du repository posthog/skills via la commande /plugin install dans Claude Code, ou en copiant manuellement le dossier dans .claude/skills/ de votre projet. Une fois actif, Claude s'y réfère automatiquement lors de la génération ou de la modification de canvases React + Quill pour PostHog. Il renvoie vers des références internes (references/starter-scaffold.md, references/platform-libraries.md, references/checklist-example.md) et vers le skill complémentaire querying-canvas-data pour tout ce qui concerne les appels de données et les écritures PostHog.