New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Quill Code

by PostHog in PostHog/code

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

OfficialMITAuto-check passedFrontend & Design

Install Quill Code

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

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

GitHub CLI
$ gh skill install PostHog/code 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/code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.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
179
Token cost
~1.1k tokens
SKILL.md length
371 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 3 steps: Edit/add the component in the right… → Re-sync into this repo manually — build… → 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: and The override (what the script…, plus 1 more section
  • Calls pnpm, git and npm

What it does

Quill Code is an agent skill from PostHog/code, published by the product's own GitHub organization. Edit the @posthog/quill design system locally and consume the change in this repo (posthog-code) 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.1k 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, npm and React. The repository describes itself as: The era of self-driving development is here. 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 this repo 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 a4c32df. 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
    • git
    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm, git and npm, 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.1k tokens when it runs. Until then it costs about 91 tokens; SKILL.md has 371 words of instructions outside code blocks.

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

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/code at commit a4c32df, republished under its MIT licence (© PostHog). 371 words, ~1,099 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 this repo (posthog-code) 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 is not in this repo. It is a published catalog dependency whose source lives in the main PostHog monorepo at ../posthog/packages/quill. To test an unpublished quill change inside this repo (posthog-code), you build quill, 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).

Quill layout (where to edit)

../posthog/packages/quill 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 this repo manually — build → pack → point the override → reinstall:

    bash
    QUILL_DIR="${QUILL_DIR:-../posthog/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.
rm -f .local-quill/posthog-quill-local-*.tgz
( cd "$QUILL_DIR" && npm pack --pack-destination "$(git rev-parse --show-toplevel)/.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.

If quill lives elsewhere, set QUILL_DIR=/abs/path/to/posthog/packages/quill/packages/quill.

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

link: symlinks into the mono's node_modules and drags in its React 18 types, colliding with this repo's React 19 (dual-React → broken typecheck + invalid-hook-call at runtime). The tarball is copied into this repo'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:

  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 .claude/skills/quill-code of PostHog/code.

Open the folder on GitHubat commit a4c32df

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/code179—~1.1kAutomated safety check: PassMIT
Quill CodePostHog/posthog-foss721—~1.3kAutomated safety check: PassMIT
Repo Healthcheck Nodecommercetools/ui-kit154—~1.6kAutomated safety check: NotesMIT
Light Frontend DesignLight0305/Light-skills640—~3.1kAutomated safety check: PassMIT
GSAP for Reactgreensock/gsap-skills16k4 repos~1.6kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT

Similar skills

  • Quill Code

    PostHog/posthog-foss

    Official

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

    721 GitHub stars~1.3k tokensUpdated today
    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

  • Light Frontend Design

    Light0305/Light-skills

    Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…

    640 GitHub stars~3.1k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 4 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo 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

More from PostHog/code

All 10 skills in this repo

  • Canvas Templates

    PostHog/code

    Official

    How PostHog "canvas" dashboards work end-to-end — the two rendering tiers (json-render vs freeform React-in-iframe), the agent system prompts that steer each, and the RIGHT way to fetch PostHog data…

    179 GitHub stars~2.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Dynamic Workflows

    PostHog/code

    Official

    How to write JavaScript workflow scripts for the workflow tool - fanning work out across many isolated subagents with agent(), parallel(), and pipeline(), then synthesizing one result.

    179 GitHub stars~2.3k tokensUpdated 2 mo ago
    Auto-check passed

  • MCP Servers

    PostHog/code

    Official

    Install, configure, authenticate, and troubleshoot MCP (Model Context Protocol) servers for this agent.

    179 GitHub stars~1.9k tokensUpdated 2 mo ago
    Auto-check passed

  • Merging PRs

    PostHog/code

    Official

    Merge a PR into main through the Trunk merge queue and babysit it until it lands.

    179 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed

  • Onboarding Videos

    PostHog/code

    Official

    Add, replace, and optimize the looping demo videos in the onboarding "welcome" bento grid (packages/ui/src/features/onboarding).

    179 GitHub stars~1.7k tokensUpdated 2 mo ago
    Auto-check passed

  • Storybook Stories

    PostHog/code

    Official

    Write Storybook stories for PostHog UI components. An agent skill from PostHog/code.

    179 GitHub stars~929 tokensUpdated 2 mo ago
    Auto-check passed

Works with

Categories

Questions about Quill Code

What does Quill Code do?

Edit the @posthog/quill design system locally and consume the change in this repo (posthog-code) before it is published to npm. Quill Code is an agent skill from PostHog/code, published by the product's own GitHub organization. Edit the @posthog/quill design system locally and consume the change in this repo (posthog-code) 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/code --skill quill-code -a claude-code`. Or copy the skill folder (.claude/skills/quill-code in PostHog/code) 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/code --skill quill-code -a codex`. Or copy the skill folder (.claude/skills/quill-code in PostHog/code) 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/code --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, git and npm).

Does Quill Code access the network?

SKILL.md contains no URLs. Its commands use git and npm, 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.1k tokens (SKILL.md is roughly 4.4k 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/posthog-foss, 721 stars), Repo Healthcheck Node (commercetools/ui-kit, 154 stars), Light Frontend Design (Light0305/Light-skills, 640 stars) and GSAP for React (greensock/gsap-skills, 16k 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/code, which has 179 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on August 5, 2026.

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