CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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 deciding between the scene-level `ProductEmptyState` gate and an inline `ProductIntroduction` panel. Covers the `productSetupStatusLogic` single-layer contract, real-data detection rules, local-only skip semantics, wizard commands, and design tokens.

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

—

The risk profile of this skill

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

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

An excellent, deeply actionable adoption guide with a validated multi-step workflow and precise pointers to real reference implementations. The one real weakness is density: several mega-paragraphs pack many configuration options into unbroken prose that would be tighter as tables or a reference file.

Suggestions

Split step 1's ~400-word options paragraph into a table (option | when to use it | behavior) or move it to a references/detection-options.md file, keeping only the default path in SKILL.md.

Move the step 3 preview-widget design rules (interaction, ambient motion, crossfade mixins, accessibility, responsiveness) to a references/preview-guidelines.md and keep a short checklist in the main body.

Trim the per-product digressions in the keyed `wizard`/`primaryAction` bullets to one example each; the second and third examples (clusters, support) restate the same rule.

DimensionReasoningScore

Conciseness

Almost everything is non-obvious project-specific contract knowledge (no explaining of concepts Claude already knows), but presentation could be tightened considerably: step 1's options paragraph alone runs ~400 words covering `cacheHasData`, `revalidateCachedHasData`, `recheckActionTypes`, and `allowReturnToSetup` in one unbroken block, and the keyed-by-mode rationale for `wizard`/`primaryAction` digresses into multiple per-product examples inline. This fits "mostly efficient but could be tightened" better than "minor instances that could be trimmed".

3 / 5

Actionability

Fully executable guidance throughout: a copy-adaptable `createSetupDetectionLogic` snippet, the bespoke-logic `connect`/listener push pattern, the `SceneExport` declaration block, exact file paths for every reference adoption, and runnable commands (`pnpm build:products`, `pnpm --filter=@posthog/frontend typescript:check`, the `?empty_state=1` QA param).

5 / 5

Workflow Clarity

A clearly sequenced adoption workflow (steps 1, 2, 3, 4, 4b, 5, 6) with explicit validation checkpoints: a test step asserting `productSetupStatusLogic(...).values.status`, storybook visual-regression coverage, and a closing QA checklist (dark mode, reduced motion, self-hosted, skip persistence, "Loading never flashes", "Non-adopting scenes unaffected", typecheck + stable snapshots).

5 / 5

Progressive Disclosure

Good structure with clear section headers, and references are one level deep and well signaled — every pointer ("Reference: `products/mcp_analytics/frontend/emptyState/mcpAnalyticsEmptyState.tsx`", "References: `MCPToolCallPreview.tsx`, `FeatureFlagPreview.tsx`", "see `types.ts` for every field") targets real files in the target repo, verified as plausible in-repo paths (no bundle files exist in this skill). Not a 5 because substantial sub-topics (the step 3 preview-widget design rules, the step 1 detection options) are inlined in a single ~135-line file where a reference file could carry the detail.

4 / 5

Total

17

/

20

Passed

Description

92%Weight 40%Scale 1-5

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 description: concrete capability list, explicit and varied Use-when triggers, and built-in disambiguation from the sibling ProductIntroduction pattern. Only minor room to add natural synonyms such as "zero state" or "onboarding screen".

DimensionReasoningScore

Specificity

Multiple concrete actions are enumerated: "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 deciding between the scene-level `ProductEmptyState` gate and an inline `ProductIntroduction` panel" — comprehensive coverage of the skill's capabilities with no vague filler.

5 / 5

Completeness

The "what" is explicit ("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") and the "when" is an explicit "Use when..." clause with five concrete trigger phrases. Not the level below (4) because the when-clause is specific and multi-trigger rather than merely present.

5 / 5

Trigger Term Quality

Good natural keyword coverage ("empty state", "first-run", "setup screen", "product scene") plus specific API terms a developer would name ("SceneExport", "detection logic", "preview widget"). A few common synonyms a user might naturally say are missing (e.g. "zero state", "no data screen", "onboarding screen"), keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

A clear niche (product setup empty states on a specific component) with distinct triggers, and it even disambiguates against the nearest neighbor inline panel ("deciding between the scene-level `ProductEmptyState` gate and an inline `ProductIntroduction` panel"), minimizing risk of triggering for the wrong skill.

5 / 5

Total

19

/

20

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

PostHog/posthog

Path

.agents/skills/building-product-empty-states/SKILL.md

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.