Official agent skill

Quill Code

by PostHog in PostHog/posthog-foss

Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm.

OfficialMITAuto-check passedFrontend & Design

Install Quill Code

skills CLI
$ npx skills add PostHog/posthog-foss --skill quill-code -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install PostHog/posthog-foss quill-code --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/PostHog/posthog-foss.git skills-src && mkdir -p .claude/skills && cp -r skills-src/products/desktop/.claude/skills/quill-code .claude/skills/quill-code && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
quill-code
GitHub stars
721
Token cost
~1.3k tokens
SKILL.md length
444 words
Files
1
Skills in repo
213
Repo updated
First seen
Licence
MIT

At a glance

Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm.

  • Works in 3 steps: Edit/add the component in the right… → Re-sync into products/desktop manually —… → Verify in the Code app (pnpm dev, or the…
  • Changing quill components/primitives/tokens
  • SKILL.md covers Quill layout (where to edit), The loop (every quill change), Why a tarball, not link: or… and The override (what the script…, plus 1 more section
  • Calls pnpm, npm and git

What it does

Quill Code is an agent skill from PostHog/posthog-foss, published by the product's own GitHub organization. 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.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design systems. It works with PostHog, pnpm and npm. The repository describes itself as: PostHog FOSS is a read-only mirror of PostHog, with all proprietary code removed. NOTE: This repo is synced automatically from the main PostHog repo. Please raise any issues and… The licence is MIT.

When your agent uses it

  • Changing quill components/primitives/tokens
  • A quill change must be tested inside the Code app
  • The user mentions quill
  • The design system

Example prompts

  • “/quill-code”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Edit/add the component in the right sub-package (above) and export it from that
  2. Re-sync into products/desktop manually — build → pack → point the override → reinstall
  3. Verify in the Code app (pnpm dev, or the test-electron-app skill). Repeat from 1.

What it can do on your machine

Read from SKILL.md and the folder at commit 2c48221. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm
    • npm
    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, npm and git, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Quill Code loads about 1.3k tokens when it runs. Until then it costs about 89 tokens; SKILL.md has 444 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~89
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from PostHog/posthog-foss at commit 2c48221, republished under its MIT licence (© PostHog). 444 words, ~1,281 tokens.

Download SKILL.mdSave it as .claude/skills/quill-code/SKILL.md (or your agent's skills folder).
name
quill-code
description
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.

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.

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 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.

The loop (every quill change)

  1. Edit/add the component in the right sub-package (above) and export it from that package's src/index.ts.

  2. Re-sync into products/desktop manually — build → pack → point the override → reinstall:

    bash
    # 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.

  3. Verify in the Code app (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.

Show full SKILL.md (170 more words)Show less

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::

yaml
'@posthog/quill': file:./.local-quill/posthog-quill-local-<hash>.tgz

There is also a permanent pin you should leave alone:

yaml
'@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):

  1. Bump the catalog version in pnpm-workspace.yaml ('@posthog/quill': 0.3.0-beta.x) to the published version.
  2. Restore the override line to point back at the catalog, or remove the file: override.
  3. pnpm install.

Do not commit a file:./.local-quill/... override or the .local-quill/ tarballs.

© PostHog, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in products/desktop/.claude/skills/quill-code of PostHog/posthog-foss.

Open the folder on GitHubat commit 2c48221

Compare with similar skills

Quill Code next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Quill Code compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Quill Code this skillPostHog/posthog-foss721—~1.3kAutomated safety check: PassMIT
Quill CodePostHog/code179—~1.1kAutomated safety check: PassMIT
Repo Healthcheck Nodecommercetools/ui-kit154—~1.6kAutomated safety check: NotesMIT
Create Docsvictorgarciaesgi/nuxt-typed-router4132 repos~2.8kAutomated safety check: PassMIT
Kampsy UIkampsy/ui287—~3.6kAutomated safety check: PassMIT
Run Umbraco UIumbraco/Umbraco.UI152—~1.2kAutomated safety check: PassMIT

Similar skills

  • Quill Code

    PostHog/code

    Official

    Edit the @posthog/quill design system locally and consume the change in this repo (posthog-code) before it is published to npm.

    179 GitHub stars~1.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Repo Healthcheck Node

    commercetools/ui-kit

    Verify a Node.js/TypeScript repo's development environment is correctly set up.

    154 GitHub stars~1.6k tokensUpdated 4 days ago
    Frontend & DesignAuto-check: notes
  • Create Docs

    victorgarciaesgi/nuxt-typed-router

    Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.

    413 GitHub starsUsed in 2 repos~2.8k tokens
    Frontend & DesignAuto-check passed
  • Kampsy UI

    kampsy/ui

    Consumer guide to build UIs with kampsy-ui (Svelte 5 + Tailwind v4, Geist-inspired).

    287 GitHub stars~3.6k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed
  • Run Umbraco UI

    umbraco/Umbraco.UI

    Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook.

    152 GitHub stars~1.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Design Project Scaffold

    plugin87/ux-ui-agent-skills

    Creates a new design-product project from the kit's product-design template, then installs the engine folders and the Playwright dependency that the quality gates need.

    1.5k GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed

More from PostHog/posthog-foss

All 213 skills in this repo
  • Authoring Log Alerts

    PostHog/posthog-foss

    Official

    Author useful, low-noise log alerts on services in a PostHog project.

    721 GitHub stars~3k tokensUpdated today
    Auto-check passed
  • Autoresolving PR Conflicts

    PostHog/posthog-foss

    Official

    Operating procedure for the conflict-autoresolver agent: sweep open PostHog/posthog PRs that conflict with master, resolve the trivial conflicts (generated artifacts deterministically, source…

    721 GitHub stars~4.2k tokensUpdated today
    Auto-check passed
  • Official

    Help users debug PostHog Error Tracking stack-trace symbolication for any supported platform — JavaScript/TypeScript web, React Native (Hermes), Android (Proguard / R8), or iOS / macOS (dSYM).

    721 GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Exploring Apm Traces

    PostHog/posthog-foss

    Official

    Investigates distributed application performance using PostHog APM (OpenTelemetry span) data via MCP.

    721 GitHub stars~3.5k tokensUpdated today
    Auto-check passed
  • Exploring LLM Traces

    PostHog/posthog-foss

    Official

    Debug and inspect LLM/AI agent traces using PostHog's MCP tools.

    721 GitHub stars~4.4k tokensUpdated today
    Auto-check passed
  • Investigate Metric

    PostHog/posthog-foss

    Official

    Diagnose why a product metric changed (dropped, spiked, or plateaued) by orchestrating breakdowns, actors, paths, lifecycle, retention, and annotations queries.

    721 GitHub stars~1.9k tokensUpdated today
    Auto-check passed

Works with

Questions about Quill Code

What does Quill Code do?

Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. Quill Code is an agent skill from PostHog/posthog-foss, published by the product's own GitHub organization. Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm.

When should I use Quill Code?

Quill Code fits situations like: changing quill components/primitives/tokens; A quill change must be tested inside the Code app; the user mentions quill; the design system.

How do I install Quill Code in Claude Code?

Run `npx skills add PostHog/posthog-foss --skill quill-code -a claude-code`. Or copy the skill folder (products/desktop/.claude/skills/quill-code in PostHog/posthog-foss) into .claude/skills/quill-code in your project. Claude Code loads it when a task matches its description.

How do I install Quill Code in Codex?

Run `npx skills add PostHog/posthog-foss --skill quill-code -a codex`. Or copy the skill folder (products/desktop/.claude/skills/quill-code in PostHog/posthog-foss) into .agents/skills/quill-code in your project. Codex loads it when a task matches its description.

Can I use Quill Code in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add PostHog/posthog-foss --skill quill-code -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/quill-code, .gemini/skills/quill-code, .github/skills/quill-code and .opencode/skills/quill-code in your project.

What does Quill Code need to run?

Going by SKILL.md and its folder, Quill Code needs the command-line tools its instructions call (pnpm, npm and git).

Does Quill Code access the network?

SKILL.md contains no URLs. Its commands use npm and git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Quill Code safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Quill Code use?

Quill Code is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Quill Code use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Quill Code?

Skills that share tags, products or a category with Quill Code: Quill Code (PostHog/code, 179 stars), Repo Healthcheck Node (commercetools/ui-kit, 154 stars), Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars) and Kampsy UI (kampsy/ui, 287 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Quill Code?

PostHog (a GitHub organization, an official publisher) maintains it in PostHog/posthog-foss, which has 721 GitHub stars. The repository holds 213 skills in this directory. The repository was last updated on October 7, 2026.

Source: PostHog/posthog-foss on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.