skills.rest
PostHog
PostHogOFFICIAL
Explore all skills by this author →
Website𝕏@PostHogGitHub

writing-kea-logics

Guides writing and reviewing PostHog kea logic files with framework conventions.

713|118|Updated Aug 11, 2020
Search Tags:#Frontend#typeScript#PostHog#reAct#Code review#State management#kea
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill writing-kea-logics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: writing-kea-logics
Source: https://github.com/PostHog/posthog-foss/tree/main/.agents/skills/writing-kea-logics
Command: npx skills add https://github.com/PostHog/posthog-foss --skill writing-kea-logics

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend developers at PostHog must place business logic in kea *Logic.ts files rather than React hooks, and choosing the wrong state container (reducer vs selector vs loader vs cache) causes bugs like stale UI, duplicated state, and leaked timers. This Skill encodes the PostHog-specific kea conventions so new and reviewed logics follow the correct patterns.

Core Features & Use Cases

  • State container decision flow: Directs each piece of state to a loader, selector, reducer, or cache.disposables based on whether it is async, derived, action-driven, or disposable.
  • Pattern references: Covers loaders with breakpoint debouncing, kea-forms validation, keyed logics, URL sync via urlToAction/actionToUrl, polling through disposables, persistence, and testing with kea-test-utils.
  • Anti-pattern catalogue: Lists concrete shapes to convert on sight, such as reducers mirroring loaders, useEffect business logic, and kea-subscriptions in products/* code.
  • Use Case: When creating a new fooLogic.ts that fetches an API resource, the Skill prescribes the builder order, a loader with fooLoading, inline typegen blocks, and an afterMount dispatch.

Quick Start

Ask the assistant to create a new kea logic for a PostHog scene that loads data from the API and follows the writing-kea-logics conventions.

Frequently Asked Questions about writing-kea-logics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a kea logic file for a PostHog frontend feature?▼

Create a `*Logic.ts` file using the `kea<Type>()` builder with blocks in conventional order: props, key, path, connect, actions, loaders, reducers, selectors, listeners. Run `pnpm --filter=@posthog/frontend typegen:file` to generate the inline type block.

Reducer vs selector vs loader in kea: which should I use?▼

Use a loader for values from HTTP calls, a selector for values computed from other state, and a reducer for action-driven state the UI renders. Use `cache.disposables` only for timers and listeners needing cleanup, never for UI state.

How do I test kea logics with jest and MSW?▼

Use `kea-test-utils` with `initKeaTests()` and `useMocks` for HTTP mocking, then assert with `expectLogic(logic).toDispatchActions(...).toMatchValues(...)`. Await async work via `.toFinishAllListeners()` rather than awaiting action dispatches.

Can I use kea-subscriptions inside a products/* logic?▼

No, `kea-subscriptions` is only installed in the `frontend/` workspace, so importing it from a `products/*` logic fails the build. Use a listener on the action that changes the value instead.

Why does my kea polling timer keep running on hidden tabs?▼

Bare `setInterval` with manual `beforeUnmount` cleanup keeps firing when the tab is hidden and can leak on unmount. Register the interval through `cache.disposables.add(...)`, which auto-pauses on hidden tabs and cleans up automatically.

How do keyed logics work in kea for multiple instances?▼

Add `props({} as Props)`, `key((props) => props.id)`, and `path((key) => [... , key])` so each key gets an isolated instance. Annotate the export as `LogicWrapper<fooLogicType>` and always pass props at call sites.

Related Skills

Explore More Software Engineering Skills→
OpenElementsLabsOpenElementsLabs

web-frontend-builder

Scaffold Next.js frontends with TypeScript, Tailwind CSS, and shadcn/ui.

Official
Advanced
anicca-labsanicca-labs

testing

Automate React Native component and hook testing with Jest and @testing-library/react-native.

Official
Intermediate
vallafedericovallafederico

solid-core-lifecycle

Explain SolidJS lifecycle management with onMount and onCleanup for resource disposal.

Community
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

react-state-management

Manage React state across local, global, and server contexts.

Official
Advanced