[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-posthog-building-react-quill-canvases":3,"mdc-zacoq2-key":50,"related-repo-posthog-building-react-quill-canvases":987,"related-org-posthog-building-react-quill-canvases":1089},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":45,"sourceUrl":48,"mdContent":49},"building-react-quill-canvases","build React and Quill canvases","Author the React + Quill implementation of a PostHog canvas: the single-component contract, the allowed imports, Quill (PostHog's design system) component and composition rules, theme-aware design tokens, loading skeletons, and the in-canvas date picker. Use after building-canvases has routed a canvas request to a React implementation — dashboards, data boards, forms, tools, or any canvas that should look native to PostHog.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"posthog","PostHog","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fposthog.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":23,"slug":24,"type":15},"Design","design",35568,"https:\u002F\u002Fgithub.com\u002FPostHog\u002Fposthog","2026-08-06T06:09:18.633724",null,2977,[31,32,33,34,35,36,37,38,39,40,14,41,42,43,44],"ab-testing","ai-analytics","analytics","cdp","data-warehouse","experiments","feature-flags","javascript","product-analytics","python","session-replay","surveys","typescript","web-analytics",{"repoUrl":26,"stars":25,"forks":29,"topics":46,"description":47},[31,32,33,34,35,36,37,38,39,40,14,41,42,43,44],"🦔 PostHog is an all-in-one developer platform for building successful products. We offer product analytics, web analytics, session replay, error tracking, feature flags, experimentation, surveys, data warehouse, a CDP, and an AI product assistant to help debug your code, ship features faster, and keep all your usage and customer data in one stack.","https:\u002F\u002Fgithub.com\u002FPostHog\u002Fposthog\u002Ftree\u002FHEAD\u002Fproducts\u002Fcanvas\u002Fskills\u002Fbuilding-react-quill-canvases","---\nname: building-react-quill-canvases\ndescription: >\n  Author the React + Quill implementation of a PostHog canvas: the single-component contract, the\n  allowed imports, Quill (PostHog's design system) component and composition rules, theme-aware\n  design tokens, loading skeletons, and the in-canvas date picker. Use after building-canvases has\n  routed a canvas request to a React implementation — dashboards, data boards, forms, tools, or any\n  canvas that should look native to PostHog.\n---\n\n# Building React + Quill canvases\n\nThe whole application is one React\u002FTSX file (`src\u002Fcanvas.tsx` in the source project). It must\n`export default` a single React component that takes no props — the host mounts it. Do not import\nreact-dom or call createRoot.\n\nStart from the working scaffold in [references\u002Fstarter-scaffold.md](references\u002Fstarter-scaffold.md)\non a first build: it already wires the date picker, theme tokens, per-card skeletons, and correct\ntyped-node result reading. Keep that wiring; replace the sample metric and layout.\n\n## Imports\n\nImport only from: `react`, `react-dom`, `react-dom\u002Fclient`, `@posthog\u002Fquill`, `recharts`,\n`lucide-react`, `dayjs`. Anything else — including dynamic `import()`, `require()`, `fetch()`,\n`\u003Cscript>` tags, or remote code — fails validation. Use `@posthog\u002Fquill` for UI, `recharts` for\ncharts, `lucide-react` for icons, `dayjs` for dates.\n\n## Quill component rules\n\nA PostHog data board must be built entirely from `@posthog\u002Fquill` components — never a native\ncontrol or a styled `\u003Cdiv>` standing in for one:\n\n- Dropdown\u002Fpicker → `Select` (never a native `\u003Cselect>`); button → `Button` (never `\u003Cbutton>`);\n  text field → `Input`\u002F`Textarea`; checkbox → `Checkbox`; label → `Label`.\n- Table → `Table` (`TableHeader` > `TableRow` > `TableHead`, then `TableBody` > `TableRow` > `TableCell`);\n  panel → `Card` (`CardHeader` + `CardTitle` + `CardContent`); pill → `Badge`; titles → `Heading`; body → `Text`.\n- The only non-Quill tags allowed are plain layout `\u003Cdiv>`s and `recharts` elements.\n- Quill is built on Base UI: compose compound parts (`Select` + `SelectTrigger`\u002F`SelectContent`\u002F`SelectItem`),\n  use controlled `value` + `onValueChange`, and swap a part's element with the `render` prop\n  (e.g. `\u003CPopoverTrigger render={\u003CButton …\u002F>} \u002F>`) instead of wrapping it.\n- Quill components are already themed — never restyle one with Tailwind classes or inline `style`;\n  use their `variant`\u002F`size` props. Put layout utilities (`flex`, `grid`, `gap-4`, `p-4`) on your own\n  wrapper `\u003Cdiv>`s.\n- Buttons: default to `variant=\"outline\"`; `variant=\"primary\"` for the one main action only.\n\n## Styling and theme\n\n- Style with Tailwind utilities and Quill components; reserve inline `style` for genuinely dynamic\n  runtime values (fixed sizes use arbitrary-value utilities like `h-[280px]`).\n- The canvas follows the user's PostHog theme; a `.dark` class on the document root flips at runtime.\n  Color only from the design-token utilities — surfaces `bg-background bg-card bg-muted bg-primary\nbg-success bg-warning bg-info bg-destructive`; text `text-foreground text-muted-foreground\ntext-card-foreground`; borders `border-border`. Never a hardcoded hex or light-only color.\n- Status tokens invert the usual convention: the bare token (`bg-success`) is a pale background fill\n  and `-foreground` (`text-success-foreground`) is the strong readable color. Colored text or icons\n  always use the `-foreground` utility; a filled pill pairs `bg-success text-success-foreground`.\n  Prefer the Quill `Badge` (`variant=\"success\"`\u002F`\"destructive\"`) for deltas so you don't hand-pick.\n- `bg-secondary`, `text-secondary`, `bg-accent`, and `bg-popover` are not defined in the canvas — avoid them.\n- recharts strokes\u002Ffills use token CSS variables (`stroke=\"var(--primary)\"`, grid\u002Faxes in\n  `var(--border)`\u002F`var(--muted-foreground)`).\n- Write Unicode glyphs (curly quotes, ellipsis, arrows, emoji) as literal characters in JSX —\n  `\\uXXXX` escapes render verbatim in JSX text.\n\n## Loading, error, and empty states\n\nEvery data point renders a skeleton in its own `Card` while loading or refreshing: `SkeletonText`\n(matching `lines` and text-size `className`) for text\u002Fnumber values, `Skeleton` for blocks\u002Fcharts.\nDrive `isLoading` off the data calls and set it true again on refresh; never show a blank or a\njumping layout.\n\nA failed query and an empty result are different states — never let one render as the other.\n`.catch` on every `ph.query`\u002F`ph.loadInsight` must set an error state that renders visibly (the\nmessage plus a Retry button wired to the refresh nonce, as in the starter scaffold), not fall\nthrough to zeros, an empty chart, or a \"no data yet\" message. A query that silently swallows its\nerror makes real breakage (a missing table, an auth failure, a bad query) look like missing data.\nReserve the empty state for a query that succeeded with no rows.\n\n## Date window\n\nA data board owns its own date control — render Quill's `DateTimePicker` (never a custom Select or\nnative date input) inside a `Popover` whose trigger is a Quill `Button`. `PopoverContent` gets\nexactly `className=\"w-auto p-0\"` and nothing is added to `DateTimePicker` beyond\n`value`\u002F`onApply`\u002F`onCancel` (it self-sizes; don't pass `compact` or widths). Re-run every query\nwhen the window changes — see the `querying-canvas-data` skill for feeding it into `dateRange`.\n",{"data":51,"body":52},{"name":4,"description":6},{"type":53,"children":54},"root",[55,63,86,99,106,219,225,245,597,603,800,806,858,886,892],{"type":56,"tag":57,"props":58,"children":59},"element","h1",{"id":4},[60],{"type":61,"value":62},"text","Building React + Quill canvases",{"type":56,"tag":64,"props":65,"children":66},"p",{},[67,69,76,78,84],{"type":61,"value":68},"The whole application is one React\u002FTSX file (",{"type":56,"tag":70,"props":71,"children":73},"code",{"className":72},[],[74],{"type":61,"value":75},"src\u002Fcanvas.tsx",{"type":61,"value":77}," in the source project). It must\n",{"type":56,"tag":70,"props":79,"children":81},{"className":80},[],[82],{"type":61,"value":83},"export default",{"type":61,"value":85}," a single React component that takes no props — the host mounts it. Do not import\nreact-dom or call createRoot.",{"type":56,"tag":64,"props":87,"children":88},{},[89,91,97],{"type":61,"value":90},"Start from the working scaffold in ",{"type":56,"tag":92,"props":93,"children":95},"a",{"href":94},"references\u002Fstarter-scaffold.md",[96],{"type":61,"value":94},{"type":61,"value":98},"\non a first build: it already wires the date picker, theme tokens, per-card skeletons, and correct\ntyped-node result reading. Keep that wiring; replace the sample metric and layout.",{"type":56,"tag":100,"props":101,"children":103},"h2",{"id":102},"imports",[104],{"type":61,"value":105},"Imports",{"type":56,"tag":64,"props":107,"children":108},{},[109,111,116,118,124,125,131,132,138,139,145,147,153,154,160,162,168,169,175,176,182,183,189,191,196,198,203,205,210,212,217],{"type":61,"value":110},"Import only from: ",{"type":56,"tag":70,"props":112,"children":114},{"className":113},[],[115],{"type":61,"value":14},{"type":61,"value":117},", ",{"type":56,"tag":70,"props":119,"children":121},{"className":120},[],[122],{"type":61,"value":123},"react-dom",{"type":61,"value":117},{"type":56,"tag":70,"props":126,"children":128},{"className":127},[],[129],{"type":61,"value":130},"react-dom\u002Fclient",{"type":61,"value":117},{"type":56,"tag":70,"props":133,"children":135},{"className":134},[],[136],{"type":61,"value":137},"@posthog\u002Fquill",{"type":61,"value":117},{"type":56,"tag":70,"props":140,"children":142},{"className":141},[],[143],{"type":61,"value":144},"recharts",{"type":61,"value":146},",\n",{"type":56,"tag":70,"props":148,"children":150},{"className":149},[],[151],{"type":61,"value":152},"lucide-react",{"type":61,"value":117},{"type":56,"tag":70,"props":155,"children":157},{"className":156},[],[158],{"type":61,"value":159},"dayjs",{"type":61,"value":161},". Anything else — including dynamic ",{"type":56,"tag":70,"props":163,"children":165},{"className":164},[],[166],{"type":61,"value":167},"import()",{"type":61,"value":117},{"type":56,"tag":70,"props":170,"children":172},{"className":171},[],[173],{"type":61,"value":174},"require()",{"type":61,"value":117},{"type":56,"tag":70,"props":177,"children":179},{"className":178},[],[180],{"type":61,"value":181},"fetch()",{"type":61,"value":146},{"type":56,"tag":70,"props":184,"children":186},{"className":185},[],[187],{"type":61,"value":188},"\u003Cscript>",{"type":61,"value":190}," tags, or remote code — fails validation. Use ",{"type":56,"tag":70,"props":192,"children":194},{"className":193},[],[195],{"type":61,"value":137},{"type":61,"value":197}," for UI, ",{"type":56,"tag":70,"props":199,"children":201},{"className":200},[],[202],{"type":61,"value":144},{"type":61,"value":204}," for\ncharts, ",{"type":56,"tag":70,"props":206,"children":208},{"className":207},[],[209],{"type":61,"value":152},{"type":61,"value":211}," for icons, ",{"type":56,"tag":70,"props":213,"children":215},{"className":214},[],[216],{"type":61,"value":159},{"type":61,"value":218}," for dates.",{"type":56,"tag":100,"props":220,"children":222},{"id":221},"quill-component-rules",[223],{"type":61,"value":224},"Quill component rules",{"type":56,"tag":64,"props":226,"children":227},{},[228,230,235,237,243],{"type":61,"value":229},"A PostHog data board must be built entirely from ",{"type":56,"tag":70,"props":231,"children":233},{"className":232},[],[234],{"type":61,"value":137},{"type":61,"value":236}," components — never a native\ncontrol or a styled ",{"type":56,"tag":70,"props":238,"children":240},{"className":239},[],[241],{"type":61,"value":242},"\u003Cdiv>",{"type":61,"value":244}," standing in for one:",{"type":56,"tag":246,"props":247,"children":248},"ul",{},[249,319,429,448,512,576],{"type":56,"tag":250,"props":251,"children":252},"li",{},[253,255,261,263,269,271,277,279,285,287,293,295,301,303,309,311,317],{"type":61,"value":254},"Dropdown\u002Fpicker → ",{"type":56,"tag":70,"props":256,"children":258},{"className":257},[],[259],{"type":61,"value":260},"Select",{"type":61,"value":262}," (never a native ",{"type":56,"tag":70,"props":264,"children":266},{"className":265},[],[267],{"type":61,"value":268},"\u003Cselect>",{"type":61,"value":270},"); button → ",{"type":56,"tag":70,"props":272,"children":274},{"className":273},[],[275],{"type":61,"value":276},"Button",{"type":61,"value":278}," (never ",{"type":56,"tag":70,"props":280,"children":282},{"className":281},[],[283],{"type":61,"value":284},"\u003Cbutton>",{"type":61,"value":286},");\ntext field → ",{"type":56,"tag":70,"props":288,"children":290},{"className":289},[],[291],{"type":61,"value":292},"Input",{"type":61,"value":294},"\u002F",{"type":56,"tag":70,"props":296,"children":298},{"className":297},[],[299],{"type":61,"value":300},"Textarea",{"type":61,"value":302},"; checkbox → ",{"type":56,"tag":70,"props":304,"children":306},{"className":305},[],[307],{"type":61,"value":308},"Checkbox",{"type":61,"value":310},"; label → ",{"type":56,"tag":70,"props":312,"children":314},{"className":313},[],[315],{"type":61,"value":316},"Label",{"type":61,"value":318},".",{"type":56,"tag":250,"props":320,"children":321},{},[322,324,330,332,338,340,346,347,353,355,361,362,367,368,374,376,382,383,389,391,397,398,404,406,412,414,420,422,428],{"type":61,"value":323},"Table → ",{"type":56,"tag":70,"props":325,"children":327},{"className":326},[],[328],{"type":61,"value":329},"Table",{"type":61,"value":331}," (",{"type":56,"tag":70,"props":333,"children":335},{"className":334},[],[336],{"type":61,"value":337},"TableHeader",{"type":61,"value":339}," > ",{"type":56,"tag":70,"props":341,"children":343},{"className":342},[],[344],{"type":61,"value":345},"TableRow",{"type":61,"value":339},{"type":56,"tag":70,"props":348,"children":350},{"className":349},[],[351],{"type":61,"value":352},"TableHead",{"type":61,"value":354},", then ",{"type":56,"tag":70,"props":356,"children":358},{"className":357},[],[359],{"type":61,"value":360},"TableBody",{"type":61,"value":339},{"type":56,"tag":70,"props":363,"children":365},{"className":364},[],[366],{"type":61,"value":345},{"type":61,"value":339},{"type":56,"tag":70,"props":369,"children":371},{"className":370},[],[372],{"type":61,"value":373},"TableCell",{"type":61,"value":375},");\npanel → ",{"type":56,"tag":70,"props":377,"children":379},{"className":378},[],[380],{"type":61,"value":381},"Card",{"type":61,"value":331},{"type":56,"tag":70,"props":384,"children":386},{"className":385},[],[387],{"type":61,"value":388},"CardHeader",{"type":61,"value":390}," + ",{"type":56,"tag":70,"props":392,"children":394},{"className":393},[],[395],{"type":61,"value":396},"CardTitle",{"type":61,"value":390},{"type":56,"tag":70,"props":399,"children":401},{"className":400},[],[402],{"type":61,"value":403},"CardContent",{"type":61,"value":405},"); pill → ",{"type":56,"tag":70,"props":407,"children":409},{"className":408},[],[410],{"type":61,"value":411},"Badge",{"type":61,"value":413},"; titles → ",{"type":56,"tag":70,"props":415,"children":417},{"className":416},[],[418],{"type":61,"value":419},"Heading",{"type":61,"value":421},"; body → ",{"type":56,"tag":70,"props":423,"children":425},{"className":424},[],[426],{"type":61,"value":427},"Text",{"type":61,"value":318},{"type":56,"tag":250,"props":430,"children":431},{},[432,434,439,441,446],{"type":61,"value":433},"The only non-Quill tags allowed are plain layout ",{"type":56,"tag":70,"props":435,"children":437},{"className":436},[],[438],{"type":61,"value":242},{"type":61,"value":440},"s and ",{"type":56,"tag":70,"props":442,"children":444},{"className":443},[],[445],{"type":61,"value":144},{"type":61,"value":447}," elements.",{"type":56,"tag":250,"props":449,"children":450},{},[451,453,458,459,465,466,472,473,479,481,487,488,494,496,502,504,510],{"type":61,"value":452},"Quill is built on Base UI: compose compound parts (",{"type":56,"tag":70,"props":454,"children":456},{"className":455},[],[457],{"type":61,"value":260},{"type":61,"value":390},{"type":56,"tag":70,"props":460,"children":462},{"className":461},[],[463],{"type":61,"value":464},"SelectTrigger",{"type":61,"value":294},{"type":56,"tag":70,"props":467,"children":469},{"className":468},[],[470],{"type":61,"value":471},"SelectContent",{"type":61,"value":294},{"type":56,"tag":70,"props":474,"children":476},{"className":475},[],[477],{"type":61,"value":478},"SelectItem",{"type":61,"value":480},"),\nuse controlled ",{"type":56,"tag":70,"props":482,"children":484},{"className":483},[],[485],{"type":61,"value":486},"value",{"type":61,"value":390},{"type":56,"tag":70,"props":489,"children":491},{"className":490},[],[492],{"type":61,"value":493},"onValueChange",{"type":61,"value":495},", and swap a part's element with the ",{"type":56,"tag":70,"props":497,"children":499},{"className":498},[],[500],{"type":61,"value":501},"render",{"type":61,"value":503}," prop\n(e.g. ",{"type":56,"tag":70,"props":505,"children":507},{"className":506},[],[508],{"type":61,"value":509},"\u003CPopoverTrigger render={\u003CButton …\u002F>} \u002F>",{"type":61,"value":511},") instead of wrapping it.",{"type":56,"tag":250,"props":513,"children":514},{},[515,517,523,525,531,532,538,540,546,547,553,554,560,561,567,569,574],{"type":61,"value":516},"Quill components are already themed — never restyle one with Tailwind classes or inline ",{"type":56,"tag":70,"props":518,"children":520},{"className":519},[],[521],{"type":61,"value":522},"style",{"type":61,"value":524},";\nuse their ",{"type":56,"tag":70,"props":526,"children":528},{"className":527},[],[529],{"type":61,"value":530},"variant",{"type":61,"value":294},{"type":56,"tag":70,"props":533,"children":535},{"className":534},[],[536],{"type":61,"value":537},"size",{"type":61,"value":539}," props. Put layout utilities (",{"type":56,"tag":70,"props":541,"children":543},{"className":542},[],[544],{"type":61,"value":545},"flex",{"type":61,"value":117},{"type":56,"tag":70,"props":548,"children":550},{"className":549},[],[551],{"type":61,"value":552},"grid",{"type":61,"value":117},{"type":56,"tag":70,"props":555,"children":557},{"className":556},[],[558],{"type":61,"value":559},"gap-4",{"type":61,"value":117},{"type":56,"tag":70,"props":562,"children":564},{"className":563},[],[565],{"type":61,"value":566},"p-4",{"type":61,"value":568},") on your own\nwrapper ",{"type":56,"tag":70,"props":570,"children":572},{"className":571},[],[573],{"type":61,"value":242},{"type":61,"value":575},"s.",{"type":56,"tag":250,"props":577,"children":578},{},[579,581,587,589,595],{"type":61,"value":580},"Buttons: default to ",{"type":56,"tag":70,"props":582,"children":584},{"className":583},[],[585],{"type":61,"value":586},"variant=\"outline\"",{"type":61,"value":588},"; ",{"type":56,"tag":70,"props":590,"children":592},{"className":591},[],[593],{"type":61,"value":594},"variant=\"primary\"",{"type":61,"value":596}," for the one main action only.",{"type":56,"tag":100,"props":598,"children":600},{"id":599},"styling-and-theme",[601],{"type":61,"value":602},"Styling and theme",{"type":56,"tag":246,"props":604,"children":605},{},[606,626,663,727,760,787],{"type":56,"tag":250,"props":607,"children":608},{},[609,611,616,618,624],{"type":61,"value":610},"Style with Tailwind utilities and Quill components; reserve inline ",{"type":56,"tag":70,"props":612,"children":614},{"className":613},[],[615],{"type":61,"value":522},{"type":61,"value":617}," for genuinely dynamic\nruntime values (fixed sizes use arbitrary-value utilities like ",{"type":56,"tag":70,"props":619,"children":621},{"className":620},[],[622],{"type":61,"value":623},"h-[280px]",{"type":61,"value":625},").",{"type":56,"tag":250,"props":627,"children":628},{},[629,631,637,639,645,647,653,655,661],{"type":61,"value":630},"The canvas follows the user's PostHog theme; a ",{"type":56,"tag":70,"props":632,"children":634},{"className":633},[],[635],{"type":61,"value":636},".dark",{"type":61,"value":638}," class on the document root flips at runtime.\nColor only from the design-token utilities — surfaces ",{"type":56,"tag":70,"props":640,"children":642},{"className":641},[],[643],{"type":61,"value":644},"bg-background bg-card bg-muted bg-primary bg-success bg-warning bg-info bg-destructive",{"type":61,"value":646},"; text ",{"type":56,"tag":70,"props":648,"children":650},{"className":649},[],[651],{"type":61,"value":652},"text-foreground text-muted-foreground text-card-foreground",{"type":61,"value":654},"; borders ",{"type":56,"tag":70,"props":656,"children":658},{"className":657},[],[659],{"type":61,"value":660},"border-border",{"type":61,"value":662},". Never a hardcoded hex or light-only color.",{"type":56,"tag":250,"props":664,"children":665},{},[666,668,674,676,682,683,689,691,696,698,704,706,711,712,718,719,725],{"type":61,"value":667},"Status tokens invert the usual convention: the bare token (",{"type":56,"tag":70,"props":669,"children":671},{"className":670},[],[672],{"type":61,"value":673},"bg-success",{"type":61,"value":675},") is a pale background fill\nand ",{"type":56,"tag":70,"props":677,"children":679},{"className":678},[],[680],{"type":61,"value":681},"-foreground",{"type":61,"value":331},{"type":56,"tag":70,"props":684,"children":686},{"className":685},[],[687],{"type":61,"value":688},"text-success-foreground",{"type":61,"value":690},") is the strong readable color. Colored text or icons\nalways use the ",{"type":56,"tag":70,"props":692,"children":694},{"className":693},[],[695],{"type":61,"value":681},{"type":61,"value":697}," utility; a filled pill pairs ",{"type":56,"tag":70,"props":699,"children":701},{"className":700},[],[702],{"type":61,"value":703},"bg-success text-success-foreground",{"type":61,"value":705},".\nPrefer the Quill ",{"type":56,"tag":70,"props":707,"children":709},{"className":708},[],[710],{"type":61,"value":411},{"type":61,"value":331},{"type":56,"tag":70,"props":713,"children":715},{"className":714},[],[716],{"type":61,"value":717},"variant=\"success\"",{"type":61,"value":294},{"type":56,"tag":70,"props":720,"children":722},{"className":721},[],[723],{"type":61,"value":724},"\"destructive\"",{"type":61,"value":726},") for deltas so you don't hand-pick.",{"type":56,"tag":250,"props":728,"children":729},{},[730,736,737,743,744,750,752,758],{"type":56,"tag":70,"props":731,"children":733},{"className":732},[],[734],{"type":61,"value":735},"bg-secondary",{"type":61,"value":117},{"type":56,"tag":70,"props":738,"children":740},{"className":739},[],[741],{"type":61,"value":742},"text-secondary",{"type":61,"value":117},{"type":56,"tag":70,"props":745,"children":747},{"className":746},[],[748],{"type":61,"value":749},"bg-accent",{"type":61,"value":751},", and ",{"type":56,"tag":70,"props":753,"children":755},{"className":754},[],[756],{"type":61,"value":757},"bg-popover",{"type":61,"value":759}," are not defined in the canvas — avoid them.",{"type":56,"tag":250,"props":761,"children":762},{},[763,765,771,773,779,780,786],{"type":61,"value":764},"recharts strokes\u002Ffills use token CSS variables (",{"type":56,"tag":70,"props":766,"children":768},{"className":767},[],[769],{"type":61,"value":770},"stroke=\"var(--primary)\"",{"type":61,"value":772},", grid\u002Faxes in\n",{"type":56,"tag":70,"props":774,"children":776},{"className":775},[],[777],{"type":61,"value":778},"var(--border)",{"type":61,"value":294},{"type":56,"tag":70,"props":781,"children":783},{"className":782},[],[784],{"type":61,"value":785},"var(--muted-foreground)",{"type":61,"value":625},{"type":56,"tag":250,"props":788,"children":789},{},[790,792,798],{"type":61,"value":791},"Write Unicode glyphs (curly quotes, ellipsis, arrows, emoji) as literal characters in JSX —\n",{"type":56,"tag":70,"props":793,"children":795},{"className":794},[],[796],{"type":61,"value":797},"\\uXXXX",{"type":61,"value":799}," escapes render verbatim in JSX text.",{"type":56,"tag":100,"props":801,"children":803},{"id":802},"loading-error-and-empty-states",[804],{"type":61,"value":805},"Loading, error, and empty states",{"type":56,"tag":64,"props":807,"children":808},{},[809,811,816,818,824,826,832,834,840,842,848,850,856],{"type":61,"value":810},"Every data point renders a skeleton in its own ",{"type":56,"tag":70,"props":812,"children":814},{"className":813},[],[815],{"type":61,"value":381},{"type":61,"value":817}," while loading or refreshing: ",{"type":56,"tag":70,"props":819,"children":821},{"className":820},[],[822],{"type":61,"value":823},"SkeletonText",{"type":61,"value":825},"\n(matching ",{"type":56,"tag":70,"props":827,"children":829},{"className":828},[],[830],{"type":61,"value":831},"lines",{"type":61,"value":833}," and text-size ",{"type":56,"tag":70,"props":835,"children":837},{"className":836},[],[838],{"type":61,"value":839},"className",{"type":61,"value":841},") for text\u002Fnumber values, ",{"type":56,"tag":70,"props":843,"children":845},{"className":844},[],[846],{"type":61,"value":847},"Skeleton",{"type":61,"value":849}," for blocks\u002Fcharts.\nDrive ",{"type":56,"tag":70,"props":851,"children":853},{"className":852},[],[854],{"type":61,"value":855},"isLoading",{"type":61,"value":857}," off the data calls and set it true again on refresh; never show a blank or a\njumping layout.",{"type":56,"tag":64,"props":859,"children":860},{},[861,863,869,871,877,878,884],{"type":61,"value":862},"A failed query and an empty result are different states — never let one render as the other.\n",{"type":56,"tag":70,"props":864,"children":866},{"className":865},[],[867],{"type":61,"value":868},".catch",{"type":61,"value":870}," on every ",{"type":56,"tag":70,"props":872,"children":874},{"className":873},[],[875],{"type":61,"value":876},"ph.query",{"type":61,"value":294},{"type":56,"tag":70,"props":879,"children":881},{"className":880},[],[882],{"type":61,"value":883},"ph.loadInsight",{"type":61,"value":885}," must set an error state that renders visibly (the\nmessage plus a Retry button wired to the refresh nonce, as in the starter scaffold), not fall\nthrough to zeros, an empty chart, or a \"no data yet\" message. A query that silently swallows its\nerror makes real breakage (a missing table, an auth failure, a bad query) look like missing data.\nReserve the empty state for a query that succeeded with no rows.",{"type":56,"tag":100,"props":887,"children":889},{"id":888},"date-window",[890],{"type":61,"value":891},"Date window",{"type":56,"tag":64,"props":893,"children":894},{},[895,897,903,905,911,913,918,920,926,928,934,936,941,943,948,949,955,956,962,964,970,972,978,980,986],{"type":61,"value":896},"A data board owns its own date control — render Quill's ",{"type":56,"tag":70,"props":898,"children":900},{"className":899},[],[901],{"type":61,"value":902},"DateTimePicker",{"type":61,"value":904}," (never a custom Select or\nnative date input) inside a ",{"type":56,"tag":70,"props":906,"children":908},{"className":907},[],[909],{"type":61,"value":910},"Popover",{"type":61,"value":912}," whose trigger is a Quill ",{"type":56,"tag":70,"props":914,"children":916},{"className":915},[],[917],{"type":61,"value":276},{"type":61,"value":919},". ",{"type":56,"tag":70,"props":921,"children":923},{"className":922},[],[924],{"type":61,"value":925},"PopoverContent",{"type":61,"value":927}," gets\nexactly ",{"type":56,"tag":70,"props":929,"children":931},{"className":930},[],[932],{"type":61,"value":933},"className=\"w-auto p-0\"",{"type":61,"value":935}," and nothing is added to ",{"type":56,"tag":70,"props":937,"children":939},{"className":938},[],[940],{"type":61,"value":902},{"type":61,"value":942}," beyond\n",{"type":56,"tag":70,"props":944,"children":946},{"className":945},[],[947],{"type":61,"value":486},{"type":61,"value":294},{"type":56,"tag":70,"props":950,"children":952},{"className":951},[],[953],{"type":61,"value":954},"onApply",{"type":61,"value":294},{"type":56,"tag":70,"props":957,"children":959},{"className":958},[],[960],{"type":61,"value":961},"onCancel",{"type":61,"value":963}," (it self-sizes; don't pass ",{"type":56,"tag":70,"props":965,"children":967},{"className":966},[],[968],{"type":61,"value":969},"compact",{"type":61,"value":971}," or widths). Re-run every query\nwhen the window changes — see the ",{"type":56,"tag":70,"props":973,"children":975},{"className":974},[],[976],{"type":61,"value":977},"querying-canvas-data",{"type":61,"value":979}," skill for feeding it into ",{"type":56,"tag":70,"props":981,"children":983},{"className":982},[],[984],{"type":61,"value":985},"dateRange",{"type":61,"value":318},{"items":988,"total":1088},[989,1005,1017,1029,1042,1057,1073],{"slug":990,"name":990,"fn":991,"description":992,"org":993,"tags":994,"stars":25,"repoUrl":26,"updatedAt":1004},"analyzing-expensive-users","analyze expensive users in AI observability","Analyze the most expensive users in AI observability and explain why they cost so much. Use when the user asks about top spenders, expensive users, per-user LLM cost, user-level cost drivers, or patterns behind high AI observability spend.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[995,997,1000,1003],{"name":996,"slug":33,"type":15},"Analytics",{"name":998,"slug":999,"type":15},"Cost Optimization","cost-optimization",{"name":1001,"slug":1002,"type":15},"Observability","observability",{"name":9,"slug":8,"type":15},"2026-07-28T05:34:11.117757",{"slug":1006,"name":1006,"fn":1007,"description":1008,"org":1009,"tags":1010,"stars":25,"repoUrl":26,"updatedAt":1016},"auditing-endpoints","audit PostHog project endpoints","Audit every endpoint in a PostHog project for staleness, failed materialisations, and unused materialised versions. Use when the user asks \"what endpoints can I clean up?\", \"are any of my endpoints broken?\", \"which materialised versions are still being called?\", or wants a one-shot cleanup pass over the Endpoints product. Produces a prioritised report grouped by issue type, with recommended actions but does not modify anything without explicit confirmation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1011,1012,1015],{"name":996,"slug":33,"type":15},{"name":1013,"slug":1014,"type":15},"Audit","audit",{"name":9,"slug":8,"type":15},"2026-06-08T08:08:33.693989",{"slug":1018,"name":1018,"fn":1019,"description":1020,"org":1021,"tags":1022,"stars":25,"repoUrl":26,"updatedAt":1028},"auditing-warehouse-source-health","audit PostHog data warehouse source health","Audit the health of a PostHog project's data warehouse sources and syncs — find every broken or degraded source connection, sync schema, and webhook channel. Use when the user asks \"why are my imports failing?\", \"what's broken with my sources?\", \"why is my warehouse data stale?\", or wants a one-shot triage of source\u002Fsync health before deciding where to dig in. Produces a prioritized report grouped by severity, with recommended next steps. For materialized-view health use `auditing-warehouse-view-health`; for a single failing sync use `diagnosing-failed-warehouse-syncs`.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1023,1024,1026,1027],{"name":1013,"slug":1014,"type":15},{"name":1025,"slug":35,"type":15},"Data Warehouse",{"name":1001,"slug":1002,"type":15},{"name":9,"slug":8,"type":15},"2026-06-18T08:22:57.67984",{"slug":1030,"name":1030,"fn":1031,"description":1032,"org":1033,"tags":1034,"stars":25,"repoUrl":26,"updatedAt":1041},"auditing-warehouse-view-health","audit PostHog materialized view health","Audit the health of a PostHog project's materialized views (saved queries) — find every failed materialization and flag unused or stale materialized views that cost storage and compute. Use when the user asks \"which of my views are broken?\", \"why is this materialized view failing?\", \"are any of my views wasting compute?\", or wants a one-shot triage of view health. For source\u002Fsync health use `auditing-warehouse-source-health`.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1035,1036,1037,1040],{"name":1013,"slug":1014,"type":15},{"name":1025,"slug":35,"type":15},{"name":1038,"slug":1039,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-06-18T08:25:10.936787",{"slug":1043,"name":1043,"fn":1044,"description":1045,"org":1046,"tags":1047,"stars":25,"repoUrl":26,"updatedAt":1056},"authoring-error-tracking-alerts","author PostHog error tracking alerts","Author error tracking alerts that fire when an issue is created, reopened, or starts spiking. Use when the user asks to set up error notifications, route exceptions to Slack\u002Fwebhook\u002FLinear, or evaluate which error events are worth alerting on. Covers trigger-event selection, integration choice, dedup against existing alerts, and shipping with the canonical message body shape.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1048,1051,1054,1055],{"name":1049,"slug":1050,"type":15},"Alerting","alerting",{"name":1052,"slug":1053,"type":15},"Debugging","debugging",{"name":1001,"slug":1002,"type":15},{"name":9,"slug":8,"type":15},"2026-06-18T08:24:40.318583",{"slug":1058,"name":1058,"fn":1059,"description":1060,"org":1061,"tags":1062,"stars":25,"repoUrl":26,"updatedAt":1072},"authoring-log-alerts","author log alerts in PostHog","Author useful, low-noise log alerts on services in a PostHog project. Use when the user asks to set up alerts for their logs, suggest alerts they should add, or evaluate whether a service is worth monitoring. Covers service triage, baseline characterisation, threshold drafting, back-testing via simulate, and shipping with a notification destination.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1063,1064,1067,1068,1071],{"name":996,"slug":33,"type":15},{"name":1065,"slug":1066,"type":15},"Monitoring","monitoring",{"name":1001,"slug":1002,"type":15},{"name":1069,"slug":1070,"type":15},"Operations","operations",{"name":9,"slug":8,"type":15},"2026-07-18T05:10:54.430898",{"slug":1074,"name":1074,"fn":1075,"description":1076,"org":1077,"tags":1078,"stars":25,"repoUrl":26,"updatedAt":1087},"building-canvases","create and edit PostHog canvases","Create or edit a PostHog canvas — a sandboxed browser application (data board, document, form, small tool, graphics experiment) stored in PostHog and rendered by the desktop\u002Fweb app. Use when a task asks to build, generate, update, or fix a canvas, or when a canvas id is given as the publish target. Covers resolving or creating the target canvas, choosing an implementation approach (React + Quill vs plain HTML\u002Fbrowser APIs), the read → edit → validate → publish → build loop, and which companion canvas skills to load for the details.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1079,1082,1083,1084],{"name":1080,"slug":1081,"type":15},"Automation","automation",{"name":23,"slug":24,"type":15},{"name":9,"slug":8,"type":15},{"name":1085,"slug":1086,"type":15},"Prototyping","prototyping","2026-08-06T06:09:29.946969",74,{"items":1090,"total":1207},[1091,1098,1104,1111,1118,1125,1133,1140,1158,1165,1180,1192],{"slug":990,"name":990,"fn":991,"description":992,"org":1092,"tags":1093,"stars":25,"repoUrl":26,"updatedAt":1004},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1094,1095,1096,1097],{"name":996,"slug":33,"type":15},{"name":998,"slug":999,"type":15},{"name":1001,"slug":1002,"type":15},{"name":9,"slug":8,"type":15},{"slug":1006,"name":1006,"fn":1007,"description":1008,"org":1099,"tags":1100,"stars":25,"repoUrl":26,"updatedAt":1016},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1101,1102,1103],{"name":996,"slug":33,"type":15},{"name":1013,"slug":1014,"type":15},{"name":9,"slug":8,"type":15},{"slug":1018,"name":1018,"fn":1019,"description":1020,"org":1105,"tags":1106,"stars":25,"repoUrl":26,"updatedAt":1028},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1107,1108,1109,1110],{"name":1013,"slug":1014,"type":15},{"name":1025,"slug":35,"type":15},{"name":1001,"slug":1002,"type":15},{"name":9,"slug":8,"type":15},{"slug":1030,"name":1030,"fn":1031,"description":1032,"org":1112,"tags":1113,"stars":25,"repoUrl":26,"updatedAt":1041},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1114,1115,1116,1117],{"name":1013,"slug":1014,"type":15},{"name":1025,"slug":35,"type":15},{"name":1038,"slug":1039,"type":15},{"name":9,"slug":8,"type":15},{"slug":1043,"name":1043,"fn":1044,"description":1045,"org":1119,"tags":1120,"stars":25,"repoUrl":26,"updatedAt":1056},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1121,1122,1123,1124],{"name":1049,"slug":1050,"type":15},{"name":1052,"slug":1053,"type":15},{"name":1001,"slug":1002,"type":15},{"name":9,"slug":8,"type":15},{"slug":1058,"name":1058,"fn":1059,"description":1060,"org":1126,"tags":1127,"stars":25,"repoUrl":26,"updatedAt":1072},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1128,1129,1130,1131,1132],{"name":996,"slug":33,"type":15},{"name":1065,"slug":1066,"type":15},{"name":1001,"slug":1002,"type":15},{"name":1069,"slug":1070,"type":15},{"name":9,"slug":8,"type":15},{"slug":1074,"name":1074,"fn":1075,"description":1076,"org":1134,"tags":1135,"stars":25,"repoUrl":26,"updatedAt":1087},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1136,1137,1138,1139],{"name":1080,"slug":1081,"type":15},{"name":23,"slug":24,"type":15},{"name":9,"slug":8,"type":15},{"name":1085,"slug":1086,"type":15},{"slug":1141,"name":1141,"fn":1142,"description":1143,"org":1144,"tags":1145,"stars":25,"repoUrl":26,"updatedAt":1157},"building-html-canvases","author HTML and CSS PostHog canvases","Author a PostHog canvas with semantic HTML, CSS, and direct browser APIs — documents, articles, generative graphics, 2D canvas and WebGL experiences, and focused experiments where React components add no useful structure. Use after building-canvases has routed a canvas request to a plain-HTML\u002Fbrowser-API implementation. Covers the thin component wrapper the current runtime requires, styling and theming without Quill, drawing surfaces, and animation\u002Fcleanup patterns.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1146,1149,1150,1153,1156],{"name":1147,"slug":1148,"type":15},"CSS","css",{"name":23,"slug":24,"type":15},{"name":1151,"slug":1152,"type":15},"Graphics","graphics",{"name":1154,"slug":1155,"type":15},"HTML","html",{"name":9,"slug":8,"type":15},"2026-08-06T06:09:30.313848",{"slug":4,"name":4,"fn":5,"description":6,"org":1159,"tags":1160,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1161,1162,1163,1164],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":1166,"name":1166,"fn":1167,"description":1168,"org":1169,"tags":1170,"stars":25,"repoUrl":26,"updatedAt":1179},"building-workflows","build and edit PostHog workflows","Build, edit, test, enable, and monitor PostHog workflows over MCP. Author the action\u002Fedge graph so it runs and opens cleanly in the visual editor, then change drafts surgically with patch operations. Use when asked to build, set up, automate, change, fix, or debug a workflow, campaign, broadcast, drip sequence, or event-triggered automation in the workflows product.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1171,1172,1175,1176],{"name":1080,"slug":1081,"type":15},{"name":1173,"slug":1174,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},{"name":1177,"slug":1178,"type":15},"Workflow Automation","workflow-automation","2026-08-06T05:36:26.504811",{"slug":1181,"name":1181,"fn":1182,"description":1183,"org":1184,"tags":1185,"stars":25,"repoUrl":26,"updatedAt":1191},"check-posthog-loading","inspect PostHog SDK loading across URLs","Inspect how the PostHog JavaScript SDK is loaded across a list of URLs. Use to confirm consistent installation across pages, find pages missing the snippet, detect mismatched API keys or hosts between pages, and verify the load method (head snippet vs deferred vs array.js).\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1186,1187,1188,1189,1190],{"name":996,"slug":33,"type":15},{"name":1052,"slug":1053,"type":15},{"name":20,"slug":21,"type":15},{"name":1001,"slug":1002,"type":15},{"name":9,"slug":8,"type":15},"2026-05-07T05:56:19.828048",{"slug":1193,"name":1193,"fn":1194,"description":1195,"org":1196,"tags":1197,"stars":25,"repoUrl":26,"updatedAt":1206},"consuming-endpoints-from-client-code","integrate PostHog endpoints into client applications","Wire a PostHog endpoint into a client app or SDK. Covers fetching the OpenAPI spec, generating a typed client with openapi-generator or @hey-api\u002Fopenapi-ts, sending the right auth header, shaping the variables payload (HogQL code_name vs insight breakdown property), handling rate-limit and materialised-endpoint error responses. Use when the user says \"how do I call my endpoint\", \"generate a client for this\", or \"what auth header do I use\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1198,1201,1202,1203],{"name":1199,"slug":1200,"type":15},"API Development","api-development",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":1204,"slug":1205,"type":15},"SDK","sdk","2026-06-08T08:08:34.929454",243]