CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

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

75%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 skill body: everything is Sentry-specific convention rather than generic explanation, with concrete templates, exact paths, and a well-sequenced workflow capped by a verification checklist. The main defects are a broken fence structure in the Complete Example (stray/empty fences at lines 342–344 and example content leaking outside the fence), no render-verification feedback loop, and no use of reference files for the long worked example.

Suggestions

Fix the Complete Example's fence structure: the outer ````mdx fence closes prematurely at line 309 (leaving the '## Types' and '## Accessibility' example content rendered as raw top-level markdown) and lines 342–344 are a stray empty code-fence pair — replace the trailing ```/``` pair with a single ```` closing fence so the example is one clean, copy-pasteable block.

Add a concrete verification/feedback step to the workflow, e.g. 'run the storybook/dev build and confirm the new story renders without errors before finishing; if the type-loader import fails, check a neighboring .mdx file's loader path' — this gives the checklist a real feedback loop rather than self-review alone.

Move the ~65-line complete Alert example to a references/ file (e.g., references/example-alert.mdx) and link to it from a short 'Complete Example' section, keeping SKILL.md a lean overview per progressive-disclosure best practice.

DimensionReasoningScore

Conciseness

The ~350-line body is dense with repo-specific conventions (import order, frontmatter fields, category tables, Storybook helpers) and never explains concepts Claude already knows. Not 5 because the ~65-line Complete Example partially restates patterns already demonstrated (frontmatter template, import block, demo and accessibility patterns) and could be trimmed. Not 3 because there is no generic padding and the tables carry real information per token.

4 / 5

Actionability

Provides copy-paste-ready material throughout: exact component paths ("static/app/components/core/<category>/<component>/index.tsx"), a full frontmatter template, an exact import-order code block, and a worked Alert example. Not 5 because the Complete Example is structurally broken — the outer ````mdx fence closes at line 309, leaving the "## Types"/"## Accessibility" example content outside the fence, and lines 342–344 are a stray empty code-fence pair — and the type-loader path ambiguity ("@sentry/scraps/<name> or @sentry/scraps/<name>/<name>") is resolved only by 'check an existing import'. Not 3 because guidance is overwhelmingly concrete and executable apart from these minor gaps.

4 / 5

Workflow Clarity

Steps 0–5 are clearly sequenced (gather editorial content → locate component → frontmatter → imports → content → props table) and end with an explicit 9-item verification Checklist plus an 'if the file already exists, read it first and update rather than overwrite' guard. Not 5 because there is no feedback loop — no step to verify the generated MDX actually renders/builds (e.g., running the story) and what to do on failure; the checklist is self-review only. Not 3 because checkpoints (checklist, overwrite guard) are present and the sequence is coherent.

4 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/) and the ~350-line body has good internal structure: numbered step headings, scannable tables, and clearly labeled pattern sections. Most content is process guidance appropriately placed inline. Not 5 because the ~65-line complete Alert example is reference material that could live in a references/ file to keep SKILL.md a leaner overview, and no content is offloaded at all.

4 / 5

Total

16

/

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: concrete capability statement, explicit 'Use when' trigger clause with natural user phrasings and synonyms, and a clearly delimited Sentry MDX-stories niche with minimal conflict risk. No changes needed.

DimensionReasoningScore

Specificity

"Create or update component documentation in Sentry's MDX stories format" and "Generates structured MDX with live demos, accessibility guidance, and auto-generated API docs from TypeScript types" list multiple concrete, specific actions with comprehensive coverage of the skill's outputs. Not 4 because there is no meaningful gap in what it claims to do; not below because every action named is concrete rather than generic.

5 / 5

Completeness

The description explicitly answers both questions: what ("Create or update component documentation in Sentry's MDX stories format... auto-generated API docs from TypeScript types") and when ("Use when asked to..." with six concrete trigger phrases). This mirrors the anchor example that clearly and explicitly answers both what and when.

5 / 5

Trigger Term Quality

"document a component", "add stories", "write component docs", "create an mdx file", "add a stories.mdx", and "document a design system component" are natural user phrasings covering synonyms (docs/stories) and file forms (mdx file, stories.mdx). Matches the anchor for comprehensive natural-term coverage including synonyms and file extensions.

5 / 5

Distinctiveness Conflict Risk

"Sentry's MDX stories format", "add a stories.mdx", and "document a design system component" carve out a clear niche with distinct triggers unlikely to fire for unrelated skills. Not 4 because the triggers are specific enough that overlap with a generic documentation skill is minimal.

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

Path

.agents/skills/react-component-documentation/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.