Agent skill · posthog
writing-ui-components
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 becomes a component and when a generic is premature, rename sweeps and the frozen-strings contract (event names, properties, flag keys, `data-attr` values are API), UI resolution states (loading, empty, and error are three different screens), and visual discipline (design tokens, on-brand custom components with no AI slop, real interactive elements, reduced motion, Storybook). Component choice (Lemon vs quill) lives in `frontend/src/AGENTS.md` Rule 1; state management in `/writing-kea-logics`.
What it needs
About 9k tokens when loaded.
What this skill does
Writing UI components 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/. Each section leads with its gate question. If you can answer the gate honestly, the details below it usually follow on their own. Use this skill when Creating a new component, scene, view, hook, or frontend module Splitting or restructuring an existing component file, or moving one between folders Extracting a repeated shape into a shared/generic component, or promoting one toward lib/ Renaming a frontend symbol, file, or feature vocabulary Adding loading/empty/error handling to a view Reviewing a PR that does any of the above Companion rules (do not duplicate) This skill owns structure. These own their own territory — link to them, don't restate them: frontend/src/AGENTS.md — Rule 1: reuse before you create (the Lemon/quill lookup table) and Rule 2 (generated API types). Both apply before anything here. writing-kea-logics — business logic lives in a logic, not in React; state container choice. using-kea-disposables for anything that needs cleanup. writing-user-facing-copy — every visible string. writing-code-comments — every comment, including the pinned-string comments below. building-product-empty-states — scene-level first-run empty states (the ProductEmptyState gate). scene-menu-bar — scene action surfaces. setting-feature-flags-in-storybook — stories for flag-gated components. Survey precedent before you build Gate: which existing scene or component are you modeling this on — and does that model itself follow these rules? Brand consistency comes from imitation, not invention. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills posthog/writing-ui-components