CtrlK
BlogDocsLog inGet started
Tessl Logo

building-product-empty-states

Guide for adding a product setup empty state — the skippable first-run screen a product scene shows until real data arrives, built on the shared ProductEmptyState component. Use when adding an empty state or first-run/setup screen to a product scene, declaring `emptyState` on a `SceneExport`, writing a product setup-status detection logic, building an animated example-data preview widget, or migrating away from the deprecated `ProductIntroduction` component. Covers the `productSetupStatusLogic` single-layer contract, real-data detection rules, local-only skip semantics, wizard commands, and design tokens.

80

Quality

100%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

100%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, lean body that walks through a multi-step adoption process with executable code, specific commands, concrete file pointers, and closing validation/QA checkpoints. It assumes Claude's competence while surfacing only product-specific knowledge.

DimensionReasoningScore

Conciseness

Dense and information-rich with no padding of general concepts Claude already knows (HogQL, kea, tailwind are used without explanation); every token conveys product-specific architecture and gotchas.

3 / 3

Actionability

Provides copy-paste-ready TypeScript (the connect/listeners snippet, the SceneExport declaration), specific commands ('pnpm build:products', 'pnpm --filter=@posthog/frontend typescript:check'), and concrete reference file paths.

3 / 3

Workflow Clarity

Sequenced adoption steps 1-6 (plus 4b) with explicit validation checkpoints: a dedicated test step (5) and a final QA checklist covering dark mode, self-hosted, skip persistence, and type checks.

3 / 3

Progressive Disclosure

Well-organized into clear sections (How it works, Adoption steps, Migration, QA) with one-level-deep references to real codebase files and no nested reference chains; no bundle files are needed.

3 / 3

Total

12

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, third-person description that pairs a concrete what-statement with an explicit, multi-trigger 'Use when' clause and domain-specific keywords. It is specific, complete, and unlikely to conflict with other skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ('declaring `emptyState` on a `SceneExport`', 'building an animated example-data preview widget', 'migrating away from the deprecated `ProductIntroduction` component') rather than vague language.

3 / 3

Completeness

Explicitly answers both what ('Guide for adding a product setup empty state...') and when via a clear 'Use when...' clause enumerating concrete triggers.

3 / 3

Trigger Term Quality

Covers the natural terms a developer on this codebase would say — 'empty state', 'first-run/setup screen', 'detection logic', 'preview widget', 'ProductIntroduction' — with good variation.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (product setup empty states in this codebase) with distinct triggers unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
PostHog/posthog
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.