CtrlK
BlogDocsLog inGet started
Tessl Logo

react-component-documentation

Create or update component documentation in Sentry's MDX stories format. Use when asked to "document a component", "add stories", "write component docs", "create an mdx file", "add a stories.mdx", or document a design system component. Generates structured MDX with live demos, accessibility guidance, and auto-generated API docs from TypeScript types.

75

Quality

94%

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

88%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: an unambiguous step sequence ending in a validation checklist, exact paths and templates, and dense project-specific conventions rather than generic explanation. The main weaknesses are mild redundancy (the Complete Example repeats prior patterns) and a monolithic ~350-line structure with no reference files despite having clearly separable reference material.

Suggestions

Move the Complete Example, the demo-layout helper table, and the category table into references/ files (e.g. references/example.mdx, references/conventions.md) linked from the relevant steps, turning SKILL.md into a leaner overview.

Trim redundant scaffolding: the Complete Example restates frontmatter, import, demo, and accessibility patterns already specified in Steps 2–4 — keep only the parts that demonstrate assembling them into one file.

Fix the stray empty fenced code block at the end of the Complete Example section (lines 339–341 of SKILL.md), which appears to be an unclosed fence artifact.

DimensionReasoningScore

Conciseness

The body is dense with project-specific, non-inferable conventions (import order, type-loader paths, category table, Storybook helpers) with almost no explanation of concepts Claude already knows — matching anchor 4 ('Efficient; minor instances of over-explanation that could be trimmed'). It is not anchor 5: the ~80-line Complete Example largely restates patterns already shown in Steps 2–4, and the repeated fenced-code-block scaffolding around each demo pattern adds trimmable tokens.

4 / 5

Actionability

Guidance is fully executable: exact file paths ('static/app/components/core/<category>/<component>/index.tsx'), a literal import-order block, concrete frontmatter YAML, copy-paste demo/SideBySide/See Also templates, and a checklist of verifiable conditions. This matches anchor 5 ('Fully executable; copy-paste ready code or commands; specific examples cover the common cases') — the Complete Example is nearly a working Alert stories.mdx; anchor 4 would require missing key details, and none are evident.

5 / 5

Workflow Clarity

Steps are clearly sequenced (Gather editorial content → Locate component → Frontmatter → Imports → Content → Props table) with an explicit verification Checklist ('Every <Storybook.Demo> is immediately followed by a matching code block', etc.) and recovery guidance ('If the file already exists, read it first and update rather than overwrite'). This matches anchor 5 ('Clear sequence with explicit validation steps; ... checklists for complex processes'); the operation is not destructive/batch, so the workflow-clarity cap of 3 does not apply, and anchor 4 would require missing checkpoints that are in fact present.

5 / 5

Progressive Disclosure

The skill is a single well-organized file with clear step-level headers and easy navigation, matching anchor 4 ('Good structure; most content is appropriately placed; minor organization gaps'). It is not anchor 5: there are no one-level-deep reference files, and ~350 lines inline material that could be split out (the Complete Example, the demo-layout/helper reference tables, and the category table are natural references/ candidates). It is above anchor 3, whose 'content that should be separate is inline' describes bulk misplacement rather than the minor gaps present here.

4 / 5

Total

18

/

20

Passed

Description

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

An exemplary description: it pairs a precise, multi-action 'what' with an explicit 'Use when' clause containing six natural trigger phrasings including file-extension variants. Third-person/imperative voice, no fluff or over-claims, and a distinct Sentry-specific niche.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "Create or update component documentation in Sentry's MDX stories format", "Generates structured MDX with live demos, accessibility guidance, and auto-generated API docs from TypeScript types" — comprehensively covering what the skill does. It matches the anchor 'Lists multiple specific concrete actions; comprehensive coverage' and exceeds anchor 4, which is for actions with minor coverage gaps; no capability of the skill is left unmentioned.

5 / 5

Completeness

It explicitly answers both questions: what ("Create or update component documentation in Sentry's MDX stories format... Generates structured MDX with live demos, accessibility guidance, and auto-generated API docs") and when ("Use when asked to 'document a component'..."), with concrete trigger phrases. This mirrors the anchor-5 example structure exactly; a missing or weak 'Use when' clause would have capped it at 3, but the when-clause is explicit and multi-trigger.

5 / 5

Trigger Term Quality

Trigger phrases are natural user phrasings with synonyms and file extensions: "document a component", "add stories", "write component docs", "create an mdx file", "add a stories.mdx", "document a design system component". This matches the anchor-5 pattern ('PDF files, PDFs, forms, document extraction, .pdf') — including the .mdx/stories.mdx extension variants — and is well above anchor 4's 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

The description carves a clear niche — Sentry's MDX stories format for design system components — with triggers ('stories.mdx', 'add stories', 'component docs') unlikely to fire for unrelated documentation skills. It matches anchor 5 ('Clear niche with distinct triggers; minimal conflict risk'); anchor 4 would require noticeable overlap with closely related skills, which is not the case here.

5 / 5

Total

20

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

relative_links

Relative link issues: 2 suspicious

Warning

Total

14

/

16

Passed

Repository
getsentry/sentry
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.