New: 98,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

Writing UI Components

by PostHog in PostHog/posthog

Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/.

OfficialCustom licenceAuto-check passedFrontend & Design

Install Writing UI Components

skills CLI
$ npx skills add PostHog/posthog --skill writing-ui-components -a claude-code

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

GitHub CLI
$ gh skill install PostHog/posthog writing-ui-components --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.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/writing-ui-components .claude/skills/writing-ui-components && 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
writing-ui-components
GitHub stars
40k
Token cost
~4.1k tokens
SKILL.md length
1,907 words
Files
2 (incl. references)
Skills in repo
252
Repo updated
First seen
Licence
Custom licence

At a glance

Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/.

  • Works in 5 steps: Reuse before you create —… → Duplicate before you abstract. Extract a… → The generic owns scaffolding, not… → …
  • Tasks that involve State management
  • SKILL.md covers Use this skill when, Companion rules (do not…, Survey precedent before you… and Code organization, plus 6 more sections
  • Calls git and pnpm

What it does

Writing UI Components is an agent skill from PostHog/posthog, published by the product's own GitHub organization. Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/. Use ALWAYS before creating, moving, splitting, or restructuring a component or frontend file, extracting a shared/generic component, promoting a component to lib/, renaming a frontend symbol or feature, or reviewing a diff that does any of these. Covers file and folder organization (one component per file, one home per symbol, no re-export shims or barrels), when duplication…

Its SKILL.md is about 4.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/anti-patterns.md`).

It sits in Frontend & Design, covering State management, React components and Design tokens. It works with PostHog and Storybook. The repository describes itself as: :hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error…

When your agent uses it

  • Tasks that involve State management
  • Tasks that involve React components
  • Tasks that involve Design tokens

Example prompts

  • “/writing-ui-components”

Workflow steps

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

  1. Reuse before you create — frontend/src/AGENTS.md Rule 1.
  2. Duplicate before you abstract. Extract a shared component when the same shape appears
  3. The generic owns scaffolding, not variants. If the second call site needs a boolean prop
  4. Keep new generics feature-local. They live next to the feature that uses them until a
  5. Don't abstract single-consumer, state-coordinated components. A wrapper with one caller

What it can do on your machine

Read from SKILL.md and the folder at commit 10f9ad7. 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:

    • git
    • pnpm

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

  • Network

    No URLs in SKILL.md. Its commands use git and pnpm, 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

Writing UI Components loads about 4.1k tokens when it runs, and up to ~6.6k if it reads all its reference files. Until then it costs about 260 tokens; SKILL.md has 1,907 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~260
When it runs · the whole SKILL.md, loaded when a task matches
~4.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.6k

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,907 words (~4,053 tokens).

“How UI code is structured: which file a component lives in, when duplication becomes a shared component, what a rename must sweep, and what every component renders before its data resolves. Applies to everything under frontend/src/ and products/*/frontend/.”

— opening of SKILL.md by PostHog, Custom licence
name
writing-ui-components

Read the full SKILL.md on GitHub

Files

SKILL.md and 1 other file (references) in .agents/skills/writing-ui-components of PostHog/posthog.

  • SKILL.md
  • references/anti-patterns.md

Open the folder on GitHubat commit 10f9ad7

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in PostHog/posthog, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Writing UI Components 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.

Writing UI Components compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Writing UI Components this skillPostHog/posthog40k—~4.1kAutomated safety check: PassCustom licence
Storybook StoriesPostHog/code179—~929Automated safety check: PassMIT
Skillshare UI Website Stylerunkids/skillshare2.7k—~4.5kAutomated safety check: PassMIT
Wonder BlocksKhan/wonder-blocks163—~3.2kAutomated safety check: PassMIT
DaleuiDaleStudy/daleui119—~675Automated safety check: PassMIT
Token SystemOrange-OpenSource/Orange-Boosted-Bootstrap222—~780Automated safety check: PassMIT

Similar skills

  • 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
    Frontend & DesignAuto-check passed

  • Skillshare UI Website Style

    runkids/skillshare

    Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/).

    2.7k GitHub stars~4.5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Daleui

    DaleStudy/daleui

    Use the daleui React design system with semantic Panda CSS tokens and accessible components.

    119 GitHub stars~675 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Token System

    Orange-OpenSource/Orange-Boosted-Bootstrap

    OUDS design token system rules and architecture. An agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap.

    222 GitHub stars~780 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Storybook

    Khan/wonder-blocks

    Storybook best practices for Wonder Blocks component stories.

    163 GitHub stars~4.2k tokensUpdated today
    Frontend & DesignAuto-check passed

More from PostHog/posthog

All 252 skills in this repo

  • Authoring Log Alerts

    PostHog/posthog

    Official

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

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Autoresolving PR Conflicts

    PostHog/posthog

    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…

    40k GitHub stars~4.2k tokensUpdated today
    Auto-check passed

  • Diagnosing Stacktrace Symbolication

    PostHog/posthog

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

    40k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Exploring Apm Traces

    PostHog/posthog

    Official

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

    40k GitHub stars~3.5k tokensUpdated today
    Auto-check passed

  • Exploring LLM Traces

    PostHog/posthog

    Official

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

    40k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Investigate Metric

    PostHog/posthog

    Official

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

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

Works with

Categories

Questions about Writing UI Components

What does Writing UI Components do?

Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/. Writing UI Components is an agent skill from PostHog/posthog, published by the product's own GitHub organization. Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/.

When should I use Writing UI Components?

Writing UI Components fits situations like: tasks that involve State management; tasks that involve React components; tasks that involve Design tokens.

How do I install Writing UI Components in Claude Code?

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

How do I install Writing UI Components in Codex?

Run `npx skills add PostHog/posthog --skill writing-ui-components -a codex`. Or copy the skill folder (.agents/skills/writing-ui-components in PostHog/posthog) into .agents/skills/writing-ui-components in your project. Codex loads it when a task matches its description.

Can I use Writing UI Components 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 --skill writing-ui-components -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/writing-ui-components, .gemini/skills/writing-ui-components, .github/skills/writing-ui-components and .opencode/skills/writing-ui-components in your project.

What does Writing UI Components need to run?

Going by SKILL.md and its folder, Writing UI Components needs the command-line tools its instructions call (git and pnpm).

Does Writing UI Components access the network?

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

Is Writing UI Components 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 Writing UI Components use?

Writing UI Components has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Writing UI Components use?

About 4.1k tokens (SKILL.md is roughly 16k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.6k tokens, read only when the agent opens those files.

What are the alternatives to Writing UI Components?

Skills that share tags, products or a category with Writing UI Components: Storybook Stories (PostHog/code, 179 stars), Skillshare UI Website Style (runkids/skillshare, 2.7k stars), Wonder Blocks (Khan/wonder-blocks, 163 stars) and Daleui (DaleStudy/daleui, 119 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Writing UI Components?

PostHog (a GitHub organization, an official publisher) maintains it in PostHog/posthog, which has 40,182 GitHub stars. The repository holds 252 skills in this directory. The repository was last updated on October 8, 2026.

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