Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. Use when changing quill components/primitives/tokens, when a quill change must be tested inside the Code app, or when the user mentions quill, the design system, the .local-quill tarball, or the @posthog/quill pnpm override.
npx skills add https://github.com/PostHog/posthog --skill quill-code
@posthog/quill's source lives in this monorepo at packages/quill (repo root, two
levels up from products/desktop). Desktop still consumes the published npm package
via its nested workspace catalog — products/desktop is excluded from the root pnpm
workspace, so workspace: linking cannot reach it. To test an unpublished quill change
here, you build quill in-repo, pack it to a tarball, and point a pnpm overrides entry
at that tarball. This is a temporary local-dev state — revert before merging (see
below).
All commands below run from products/desktop/. Building quill uses the root
workspace's install, so run pnpm install at the monorepo root once first.
packages/quill (from the monorepo root) is the workspace
(@posthog/quill-workspace). It contains sub-packages, each a layer of the design
system:
packages/primitives/src — base components (Card, Badge, Button, Progress, …)packages/components/src — composed components (DataTable, DateTimePicker, Metric)packages/blocks/src — product-level blocks (e.g. ExperimentCard). Add thefile here and export it from packages/blocks/src/index.ts.
packages/quill/src — the aggregate that re-exports all layers as @posthog/quill.A new export in any sub-package flows to @posthog/quill automatically on build.
package's src/index.ts.
# From products/desktop/
DESKTOP_ROOT="$PWD"
QUILL_DIR="${QUILL_DIR:-../../packages/quill/packages/quill}"
# a. Build the WHOLE quill workspace (two levels up from the aggregate), so the
# sub-packages rebuild BEFORE the aggregate bundles them.
( cd "$QUILL_DIR/../.." && pnpm build )
# b. Pack into .local-quill/ under a UNIQUE filename. pnpm pins a tarball by
# integrity, so a stable name caches stale across re-syncs — drop old local
# tarballs first, then rename the packed file to a unique local name.
# (Anchor on $DESKTOP_ROOT, not `git rev-parse --show-toplevel`: the git
# toplevel is the monorepo root, not this workspace.)
rm -f .local-quill/posthog-quill-local-*.tgz
( cd "$QUILL_DIR" && npm pack --pack-destination "$DESKTOP_ROOT/.local-quill" )
mv .local-quill/posthog-quill-[0-9]*.tgz ".local-quill/posthog-quill-local-$(git rev-parse --short HEAD)-$$.tgz"
# c. Point the override at the new tarball, then reinstall.
# Edit pnpm-workspace.yaml so overrides['@posthog/quill'] = file:./.local-quill/<new file>
pnpm install
> Building only the aggregate (packages/quill/packages/quill) re-bundles the
> sub-packages' stale dist/, so edits to primitives/components/blocks are
> silently dropped. Always build at the workspace root.
pnpm dev, or the test-electron-app skill). Repeat from 1.After every quill edit you must re-run the sync — the app consumes the tarball, not
the quill source, so unsynced edits are invisible here.
For an out-of-tree quill checkout, set
QUILL_DIR=/abs/path/to/posthog/packages/quill/packages/quill.
link: or workspace:workspace: cannot resolve across the nested-workspace boundary (products/desktop is
excluded from the root pnpm workspace). link: symlinks into the root workspace's
node_modules and drags in its React 18 types, colliding with this workspace's
React 19 (dual-React → broken typecheck + invalid-hook-call at runtime). The
tarball is copied into this workspace's store and deduped against React 19. The
filename is content-hashed because pnpm pins a tarball by integrity, so a stable
filename gets cached stale across re-syncs.
In pnpm-workspace.yaml, under overrides::
'@posthog/quill': file:./.local-quill/posthog-quill-local-<hash>.tgz
There is also a permanent pin you should leave alone:
'@posthog/quill>@base-ui/react': ^1.3.0 # quill ships a broken catalog: dep; do not remove
The override is local-dev only. Once the quill change is published to npm (quill
publishes from this monorepo via the manual publish-quill-npm workflow dispatch):
pnpm-workspace.yaml ('@posthog/quill': 0.3.0-beta.x)to the published version.
file: override.pnpm install.Do not commit a file:./.local-quill/... override or the .local-quill/ tarballs.
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
| Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"
Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
Take posthog/quill-code from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm.
Without those the skill loads but fails at the first command.