Name: modular-ds-utilities
Rating: 72 (1 reviews)
Author: primer

modular-ds-utilities

Use when: extracting, reusing, or naming hooks, state management, or other component-agnostic behavior in Primer React, or when a component's behavior hook wraps a native element with built-in behavior such as `<dialog>`. Covers the compound behavior-hook pattern (prop-getters), the controlled component contract for wrapping native elements, the difference between a component's own hook and a generic reusable utility, naming conventions, and where utilities live in the package.

Quality

87%

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

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

The body is a high-quality, actionable reference: complete executable examples, concrete file-placement guidance, and a well-sequenced controlled-component contract. It is dense and well-structured, with only minor conciseness and structure refinements available.

Suggestions

Trim the composeEventHandlers 'lifting into packages/react/src/hooks/' aside and the experimental/Tabs precedent detail to the essential rule, moving the full divergence list to a reference if needed.

Consider splitting the large useDialog code example or the controlled-component contract into a reference file so SKILL.md reads as a tighter overview.

Add an explicit validate-or-fix retry note to the controlled-component contract (e.g. re-check dialog.open after each native-event intercept) to turn the checklist into a full feedback loop.

Dimension	Reasoning	Score
Conciseness	Dense and assumes Claude's competence — it never explains basics like what a hook or React is, and every rule carries Primer-specific rationale. A few prose passages (the composeEventHandlers lifting note, the Tabs precedent detail) could be trimmed, so it is efficient with minor over-explanation rather than perfectly lean.	4 / 5
Actionability	Provides a complete, copy-paste-ready TypeScript example (useDialog + DialogRoot/DialogCloseButton/DialogTitle) illustrating the patterns, plus concrete file paths (packages/react/src/hooks/, experimental/<Component>/) and concrete naming and placement rules covering the common cases.	5 / 5
Workflow Clarity	The 'Controlled component contract' is a clear six-item sequenced checklist with explicit gating conditions (e.g. "call showModal() only when open === true and dialog.open === false") and a dev-mode warning feedback signal, but there is no full validate-fix-retry loop, so it stops short of a 5.	4 / 5
Progressive Disclosure	Well-organized into clear sections (Two kinds of hooks, Precedent, Controlled component contract, Naming, Public vs internal, Where utilities live) with clearly-signaled one-level-deep cross-references to sibling skills and docs. No bundle files exist, and the large inline code block and Tabs precedent detail are reasonable inline but keep it from a 5.	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.

The description is specific, complete, and distinctive, with an explicit 'Use when:' trigger clause and a concrete catalog of what the skill covers. It is slightly heavy on domain jargon, which keeps trigger-term quality at good-but-not-comprehensive.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions and patterns — "extracting, reusing, or naming hooks, state management", "compound behavior-hook pattern (prop-getters)", "controlled component contract for wrapping native elements", "naming conventions, and where utilities live" — giving comprehensive coverage of the domain.	5 / 5
Completeness	Explicitly answers both: a "Use when:" clause gives concrete triggers (extracting/reusing/naming hooks, wrapping native elements like `<dialog>`), and "Covers the compound behavior-hook pattern..." states clearly what the skill does. Both what and when are present with concrete trigger phrases.	5 / 5
Trigger Term Quality	Good keyword coverage with natural contributor phrases ("hooks", "state management", "naming hooks", "behavior hook wraps a native element", "Primer React"), but the terms lean technical and lack common synonyms a user might vary; not a 5 because coverage is good rather than comprehensive.	4 / 5
Distinctiveness Conflict Risk	Clear niche — Primer React utility/behavior-hook patterns, prop-getters, and the controlled-component contract for native elements — with distinct triggers unlikely to fire for sibling skills like the accessibility-contract or deprecations skills.	5 / 5
	Total	19 / 20 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: primer/react
Path: .github/skills/modular-ds-utilities/SKILL.md
Commit: 2909f19

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.