skills.rest
PostHog
PostHogOFFICIAL
Explore all skills by this author →
Website𝕏@PostHogGitHub

building-react-quill-canvases

Implements PostHog canvases as single React components using Quill design system components.

713|118|Updated Aug 11, 2020
Search Tags:#recharts#PostHog#Quill#Dashboard#Design system#reAct#CANVAS
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill building-react-quill-canvases
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-react-quill-canvases
Source: https://github.com/PostHog/posthog-foss/tree/main/products/canvas/skills/building-react-quill-canvases
Command: npx skills add https://github.com/PostHog/posthog-foss --skill building-react-quill-canvases

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building a PostHog canvas that looks and behaves natively requires knowing many non-obvious rules: the single-component export contract, which imports are allowed, how Quill components must be composed, theme-aware design tokens, per-query loading states, and the in-canvas date picker. This Skill encodes all of those rules so the generated canvas passes validation and matches PostHog's design system on the first build.

Core Features & Use Cases

  • Single-component contract and import rules: Enforces one default-exported React component in src/canvas.tsx, the allowed import set (React, Quill, Recharts, Lucide, Day.js, plus ten optional pinned libraries), and the @posthog/canvas-sdk ph module for data access.
  • Quill composition and theming rules: Mandates Quill components over native controls, Base UI composition patterns (render prop, controlled value/onValueChange), design-token-only coloring, and correct status-token usage (bg-success vs text-success-foreground).
  • Progressive loading, error, and empty states: Requires per-query loading skeletons, visible error states with retry, and a strict separation between failed queries and empty results.
  • Use Case: After the building-canvases router selects a React implementation for a product dashboard request, use this Skill to scaffold the canvas from the starter reference, wire the DateTimePicker in a Popover, fire concurrent ph.query calls per card, and render KPI cards, a Recharts line chart, and a web analytics table that all match the user's PostHog theme.

Quick Start

Build a React + Quill canvas for a product dashboard with KPI cards, a date range picker, and per-card loading skeletons starting from the starter scaffold reference.

Frequently Asked Questions about building-react-quill-canvases

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a PostHog canvas with React and Quill?▼

Export a single default React component from src/canvas.tsx that takes no props; the host mounts it. Build the UI entirely from @posthog/quill components, style with Tailwind utilities and design tokens, and fetch PostHog data through the ph object from @posthog/canvas-sdk.

How do I add a date range picker to a PostHog canvas?▼

Render Quill's DateTimePicker inside a Popover whose trigger is a Quill Button, with PopoverContent set to exactly className="w-auto p-0". Pass only value, onApply, and onCancel to the picker, and re-run every query when the window changes.

Can I use native HTML inputs or styled divs in a Quill canvas?▼

No. Dropdowns must use Select, buttons must use Button, text fields use Input or Textarea, and tables use the Quill Table family. The only non-Quill tags allowed are plain layout divs and recharts elements.

Why does my canvas show a blank area instead of a loading state?▼

Each query must own its own loading state and render a skeleton inside its card while pending. Driving the whole canvas off one shared loading flag or a Promise.all makes every card wait for the slowest query and produces blank regions.

Which charting and utility libraries are allowed in a PostHog canvas?▼

The standard imports are React, @posthog/quill, recharts, lucide-react, and dayjs. Ten optional pinned libraries are also admitted, including d3, three, framer-motion, zod, @tanstack/react-table, react-hook-form, lodash-es, react-markdown, and papaparse.

Can a PostHog canvas make network requests to external APIs?▼

Only with the exact HTTPS origin declared in capabilities.network.origins, and only in the published canvas. The edit-mode preview blocks direct network access regardless of declaration, and remote scripts remain blocked entirely.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

magicpath

Search, inspect, install, and author MagicPath canvas UI components via the magicpath-ai CLI.

Official
Advanced
acquiaacquia
16

canvas-data-fetching

Fetch Drupal JSON:API content with JsonApiClient and SWR caching.

Official
Intermediate
carlos-algmscarlos-algms
2

json-canvas

Create and edit JSON Canvas diagrams with valid nodes and edges.

Community
Intermediate
AizenvoltPrimeAizenvoltPrime
2

canvas-design

Generate a design philosophy and render it as a canvas artwork in PDF or PNG.

Community
Basic