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

Securityby

Passed

No findings from the security scan

Quality

Content

77%Weight 40%Scale 1-3

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

The content is highly actionable with a well-sequenced workflow and an explicit verification checklist. Its main weakness is conciseness and progressive disclosure: the long single-file body, especially the duplicative Complete Example, could be tightened or split into a reference file.

Suggestions

Trim the 'Complete Example' section so it does not restate the frontmatter/import/demo patterns already shown in Steps 2–4, or move it to a references file and link to it.

Split the large category/import/demo-helper tables (or the full worked Alert example) into a separate reference file and link from the overview, improving progressive disclosure and reducing inline length.

Add a short top-of-body overview or table of contents so readers can navigate the Steps and the checklist without scanning ~350 lines.

Dimension	Reasoning	Score
Conciseness	The body is largely lean and prescriptive (frontmatter template, ordered imports, demo/callout patterns) and assumes Claude knows MDX/React, but the ~350-line length and the 'Complete Example' section restate patterns already shown (frontmatter, imports, demo-then-codeblock), so it could be tightened — fitting 'mostly efficient but could be tightened' rather than the every-token-earns-its-place score 3.	2 / 3
Actionability	Provides copy-paste-ready templates throughout — exact frontmatter YAML, an ordered import block with real statements, the <Storybook.Demo>+codeblock pattern, props-table schema, and a full end-to-end Alert example including a 'Complex export' filter form — matching the score-3 anchor for fully executable, copy-paste-ready guidance.	3 / 3
Workflow Clarity	A clear Step 0→Step 5 sequence is capped by an explicit 'Checklist' validation checkpoint covering colocation, frontmatter fields, import order, demo pairing, and prohibited patterns, satisfying the score-3 anchor for an explicit validation/checklist feedback loop; the missing-validation cap (score 2) does not apply because a checklist is present.	3 / 3
Progressive Disclosure	No references/scripts/assets bundle exists, so it is a self-contained file with well-titled sections and helpful tables; however, at ~350 lines the 'Complete Example' restates inline patterns that arguably belong in a separate file and there is no top-level overview/navigation signaling, placing it at 'some structure but content that should be separate is inline' rather than the cleanly-split score 3.	2 / 3
	Total	10 / 12 Passed

Description

100%Weight 40%Scale 1-3

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 third-person, concrete, and trigger-rich, explicitly stating both capabilities and when to use the skill. It is a strong, low-conflict description with no notable weaknesses.

Dimension	Reasoning	Score
Specificity	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' — naming deliverables and the generation mechanism, matching the score-3 anchor for multiple specific actions; it exceeds the partial coverage of score 2.	3 / 3
Completeness	Explicitly answers what (creating/updating MDX stories with demos, a11y guidance, API docs) and when via an explicit 'Use when asked to...' trigger clause, satisfying the score-3 anchor for both; score 2 would require the 'when' to be missing or merely implied.	3 / 3
Trigger Term Quality	Provides several natural phrasings users would say — 'document a component', 'add stories', 'write component docs', 'create an mdx file', 'add a stories.mdx', 'document a design system component' — giving broad coverage of common variations rather than the sparse keywords of score 2.	3 / 3
Distinctiveness Conflict Risk	The Sentry MDX-stories / design-system-component niche and distinctive triggers ('stories.mdx', 'add stories') make it unlikely to fire for unrelated skills, matching the score-3 clear-niche anchor rather than the overlapping score 2.	3 / 3
	Total	12 / 12 Passed

Validation

87%

Warnings & errors only

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

Criteria	Description	Result
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
Commit: b4b3565

Reviewed: 2 days ago

Table of Contents

Discovery Implementation Validation

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.