
Quill Code
FreeEdit and test the PostHog Quill design system locally.
Free · Opens the source repo
What Quill Code does
Quill Code is a skill designed for developers working with the PostHog Quill design system. It allows users to edit components, primitives, and tokens locally, facilitating immediate testing within the Code app before changes are published to npm. This skill is particularly useful when modifications to the Quill components are needed, as it provides a streamlined workflow for building, packing, and consuming these changes without requiring a full npm publish.
The skill operates within a monorepo structure where the Quill source code resides in the packages/quill directory. Developers can make changes to the design system and then build the entire workspace from the root, ensuring that all components are correctly compiled. Once built, the changes are packed into a tarball that can be referenced locally, allowing for quick iterations and testing in the desktop application. This method overcomes limitations posed by the nested workspace structure, where traditional linking methods fail due to dependency conflicts.
Users will benefit from a clear, repeatable process that involves editing the relevant sub-package, building the workspace, packing the changes, and updating the pnpm overrides to point to the new tarball. This ensures that the latest modifications are reflected in the Code app without the need for a full deployment cycle. The skill is aimed at developers who are directly involved in enhancing the Quill design system and need an efficient way to test their changes in real-time.
In scenarios where a developer needs to make quick iterations on the Quill components, Quill Code serves as an essential tool. However, it is important to revert any local overrides before merging changes into the main branch to maintain a clean codebase.
When to use it
Use Quill Code when you need to make and test changes to the Quill design system locally before publishing.
When not to use it
This skill is not suitable for users who are not working with the PostHog Quill design system or who do not require local testing of unpublished changes.
What you can build with it
Testing Component Changes
When modifying a Quill component, use Quill Code to edit and test changes locally before publishing.
Iterative Development
For developers making frequent updates to the Quill design system, Quill Code allows for quick iterations and testing.
Local Environment Setup
Set up a local development environment for the Quill design system to ensure compatibility with the Code app.
How to install Quill Code
View source1. Install with the skills CLI
npx skills add posthog/posthog/quill-code --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by posthogquill-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.
Quill layout (where to edit)
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 the file here and export it frompackages/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.
The loop (every quill change)
-
Edit/add the component in the right sub-package (above) and export it from that package's
src/index.ts. -
Re-sync into products/desktop manually — build → pack → point the override → reinstall:
# 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 installBuilding only the aggregate (
packages/quill/packages/quill) re-bundles the sub-packages' staledist/, so edits to primitives/components/blocks are silently dropped. Always build at the workspace root. -
Verify in the Code app (
pnpm dev, or thetest-electron-appskill). 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.
Why a tarball, not 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.
The override (what the script rewrites)
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
Reverting (before merge)
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):
- Bump the catalog version in
pnpm-workspace.yaml('@posthog/quill': 0.3.0-beta.x) to the published version. - Restore the override line to point back at the catalog, or remove the
file:override. pnpm install.
Do not commit a file:./.local-quill/... override or the .local-quill/ tarballs.
Frequently asked questions about Quill Code
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.
