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

building-html-canvases

Author PostHog canvases with semantic HTML, CSS, and direct browser APIs.

713|118|Updated Aug 11, 2020
Search Tags:#CSS#HTML#PostHog#themING#browser apis#webGL#CANVAS
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill building-html-canvases
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-html-canvases
Source: https://github.com/PostHog/posthog-foss/tree/main/products/canvas/skills/building-html-canvases
Command: npx skills add https://github.com/PostHog/posthog-foss --skill building-html-canvases

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building document-style or graphics-focused PostHog canvases with React components and Quill adds unnecessary structure. This Skill guides authoring canvases as semantic HTML documents, generative graphics, 2D canvas, or WebGL experiences using plain browser APIs inside the thin React wrapper the runtime requires.

Core Features & Use Cases

  • Thin React Wrapper Pattern: Keep src/canvas.tsx as a minimal shell while writing the experience in semantic HTML, <style> blocks, and imperative browser APIs driven from useEffect.
  • Drawing and Animation: Render <canvas> elements with 2D or WebGL contexts, run requestAnimationFrame loops, and clean up listeners and contexts on unmount to avoid leaks.
  • Theme-Aware Styling: Size the root to the iframe viewport with h-screen, define CSS variables under :root and html.dark, and read resolved theme tokens at runtime for canvas drawing colors.
  • Use Case: A user asks for a generative-art canvas or a written report with verifiable PostHog numbers; this Skill routes the implementation to raw HTML/CSS/WebGL instead of forcing React component structure.

Quick Start

Build a PostHog canvas as a semantic HTML document with a WebGL animation using plain browser APIs inside the required React wrapper.

Frequently Asked Questions about building-html-canvases

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

FAQPage Schema
How do I build a PostHog canvas with plain HTML and CSS?▼

Keep src/canvas.tsx as a thin default-export React component and write the experience as semantic HTML (article, headings, tables, figures) with a <style> block inside it. Size the outermost element with h-screen and define theme colors as CSS variables under :root and html.dark.

How do I add WebGL or 2D canvas graphics to a PostHog canvas?▼

Render a <canvas> element and drive it imperatively from a useEffect via a ref: get the 2D or WebGL context, run setup and the render loop there. Clean up in the effect's return by canceling requestAnimationFrame loops and removing listeners.

Can I use Three.js or other npm graphics libraries in a canvas?▼

No. Three.js and other npm graphics libraries are not yet loadable; the import allowlist covers only react, react-dom, @posthog/quill, recharts, lucide-react, and dayjs. Write against raw WebGL or the 2D canvas API instead.

Why does my canvas root element collapse to zero height?▼

A published canvas's artifact shell gives html, body, and #root no explicit height, so h-full or height: 100% on the root collapses to content height. Use h-screen or height: 100vh on the outermost element; descendants may then use percentage heights.

How do I make canvas drawing colors follow the PostHog dark theme?▼

Read the resolved theme token at runtime with getComputedStyle(document.documentElement).getPropertyValue("--primary") or your own CSS variables, and re-read on theme change for long-lived scenes. The host toggles a .dark class on the document root when the theme changes.

Related Skills

Explore More Software Engineering Skills→
844196844196
8

pr

Route pull request creation through a dedicated skill with the --web flag.

Community
Intermediate
CHENyiru3CHENyiru3

json-canvas

Create, validate, and modify JSON canvas structures with nodes and edges.

Community
Intermediate
byaan-aibyaan-ai
94

posthog

Query events and analytics via HogQL using the PostHog REST API.

Official
Advanced
Progery222Progery222

project-frontend

Develop React frontends with Canvas visualizations, Zustand state, and routing.

Community
Intermediate