CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

slots

Use when: building, modifying, or wrapping compound components that use child-component "slots" in Primer React. Covers when to add a `__SLOT__` marker, the `useSlots` hook, the `isSlot` helper, the `asSlot` wrapper helper, naming conventions for slot symbols, and common pitfalls.

Quality

88%

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

78%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.

A strong, highly actionable body: every primitive has executable code, decision criteria are explicit, and the writing stays lean and project-specific. The main weaknesses are the absence of any progressive-disclosure structure (everything lives in one ~200-line SKILL.md with no reference files) and minor redundancy between the naming-convention and marker-decision sections.

Suggestions

Move stable reference material — the naming-conventions table, the dev-mode warnings list, and the architecture/file map — into a references/ file (e.g. references/conventions.md), keeping SKILL.md as a lean overview with clearly signaled links, to improve progressive disclosure.

Deduplicate the marker-decision guidance: the 'Don't' bullets under naming conventions and the 'Should I add a `__SLOT__` marker at all?' section cover overlapping ground; consolidate into one place.

Add a short verification step to the checklist (e.g. render the compound with duplicate and wrapped children in dev mode and confirm no warnings fire) to close the workflow-clarity validation gap.

DimensionReasoningScore

Conciseness

The body is dense with project-specific, non-obvious conventions (SSR constraints, single-match semantics, lint-rule workaround, marker-copy wrapping) and avoids explaining generic React concepts, matching the score-4 anchor of efficient with minor trimmable instances. It falls short of 5 because of slight redundancy — the 'Don't' bullets under naming conventions restate points from the 'Should I add a `__SLOT__` marker at all?' section, and the old-vs-new `asSlot` comparison adds length — but it is nowhere near the over-explanation of the score-3 example.

4 / 5

Actionability

Every section ships copy-paste-ready TypeScript/TSX: a complete `useSlots` consumer example, both matcher styles, the `__SLOT__` marker assignment with typed variants, a full `asSlot` wrapper example with usage, and an `isSlot` snippet, covering the common cases per the score-5 anchor. It exceeds the score-4 anchor because no example is pseudocode or missing key details — even the import paths are given.

5 / 5

Workflow Clarity

The 'Quick checklist for a new compound component' provides a clear 5-step sequence, and decision guidance (when slots are/aren't the right tool, when to add a marker) plus the `grep "isSlot.*ComponentName"` check act as checkpoints, matching the score-4 anchor. It is not 5 because there are no explicit validation/feedback steps for verifying the built component works (e.g. confirming the warning-free dev behavior the skill itself documents), though this is a convention skill, not a destructive/batch operation, so no cap applies.

4 / 5

Progressive Disclosure

The body has good section structure (TL;DR, Architecture, per-topic sections, checklist) but is a single ~200-line file with no bundle files and no one-level-deep references, and content that could be split out (naming-convention tables, dev-mode warnings, limitations) is inlined — matching the score-3 anchor of some structure with content that could be separate left inline. It is above 2 because sections are well-organized and navigable, and below 4 because nothing is offloaded to reference files despite the length exceeding the simple-skill threshold.

3 / 5

Total

16

/

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.

The description is excellent: it pairs an explicit 'Use when' trigger clause with a concrete, near-complete enumeration of the skill's capabilities, all scoped tightly to Primer React slots. The only minor gap is that a couple of natural phrasings (e.g. 'extracting child components', 'compound sub-components') that a user might say are absent.

DimensionReasoningScore

Specificity

The description names the domain ("child-component \"slots\" in Primer React") and enumerates the full API surface with concrete actions: "when to add a `__SLOT__` marker, the `useSlots` hook, the `isSlot` helper, the `asSlot` wrapper helper, naming conventions for slot symbols, and common pitfalls" — comprehensive, matching the score-5 anchor listing multiple specific concrete actions. It exceeds the score-4 anchor because there are no meaningful gaps in coverage of the skill's capabilities.

5 / 5

Completeness

It explicitly answers "when" ("Use when: building, modifying, or wrapping compound components that use child-component \"slots\" in Primer React") and "what" ("Covers when to add a `__SLOT__` marker, the `useSlots` hook, the `isSlot` helper, the `asSlot` wrapper helper, naming conventions for slot symbols, and common pitfalls"), matching the score-5 anchor with concrete trigger phrases for both. Not 4 because the 'when' clause is fully explicit rather than merely serviceable.

5 / 5

Trigger Term Quality

Strong, natural trigger terms for the target user: "building, modifying, or wrapping compound components", "slots", "Primer React", plus the exact identifiers a practitioner would mention (`useSlots`, `__SLOT__`, `asSlot`). A few natural phrasings users might say are absent (e.g. "extract child components", "sub-components"), placing it at the score-4 anchor (good coverage, a few natural terms missing) rather than 5 (comprehensive synonyms/extensions).

4 / 5

Distinctiveness Conflict Risk

The description is anchored to a clear niche — Primer React's slot system — with distinctive identifiers (`__SLOT__`, `useSlots`, `asSlot`) unlikely to appear in other skills, giving minimal conflict risk per the score-5 anchor. It is far more specific than the score-4 example ("PDF and Word document files"), which still carries cross-domain overlap.

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

primer/react

Path

.github/skills/slots/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.