building-components

Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

Quality

86%

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

72%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 body is an excellent progressive-disclosure index: concise, well-organized, and every reference resolves to a real file. Its weakness is that it is purely navigational — it offers no in-body executable guidance or sequenced workflow with validation, so actionability and workflow clarity land in the middle of the scale.

Suggestions

Add a short in-body "Quick start" snippet with one concrete, copy-paste-ready component example so Claude has actionable guidance without opening every reference.

Turn the "When to use" capability list into a lightly sequenced build workflow (e.g., pick artifact type → implement primitives → add accessibility → compose APIs → style/tokens → publish) so multi-step tasks have a clear order.

For destructive/external operations like npm publishing and registry distribution, include an explicit validation or dry-run checkpoint step before 'publish'.

Dimension	Reasoning	Score
Conciseness	The body is a lean index: a short "When to use" bullet list and a one-line-per-file reference table, with no padding, no explaining of concepts Claude already knows, and every line earning its place — matching the score-3 anchor.	3 / 3
Actionability	It is an organized pointer to references rather than executable guidance; the bullets name tasks ("implementing accessibility features (ARIA, keyboard navigation, focus management)") but provide no concrete code, commands, or copy-paste examples inside the body itself, so it sits between describing and instructing.	2 / 3
Workflow Clarity	The skill is task-oriented (build → make accessible → compose → style → publish → document) but the body presents it as a flat capability list rather than a sequenced workflow, and there are no validation checkpoints for the risky operations it covers (e.g., npm publishing, registry distribution), which caps the score at 2 per the rubric.	2 / 3
Progressive Disclosure	SKILL.md is a clear overview pointing one level deep to 15 well-signaled reference files; every cited path resolves to a real file in ./references/, content is appropriately split, and navigation is easy — matching the score-3 anchor.	3 / 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.

A strong, well-scoped description: it concisely names concrete capabilities and pairs them with an explicit Use-when trigger list that users would naturally voice. It uses correct third-person voice and avoids fluff or over-claims.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions — "building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, ... writing component documentation" — directly matching the score-3 anchor.	3 / 3
Completeness	It states what the skill does ("Guide for building modern, accessible, and composable UI components") and gives an explicit "Use when..." clause enumerating triggers, clearly answering both what and when.	3 / 3
Trigger Term Quality	Natural user phrases are well covered ("building new components", "implementing accessibility", "composable APIs", "design tokens", "publishing to npm/registry", "component documentation"), the kind of language a user would actually say when they need this skill.	3 / 3
Distinctiveness Conflict Risk	The UI-component-building niche with distinct triggers (composable APIs, as-child, design tokens, npm/registry publishing) is clearly bounded and unlikely to fire for unrelated skills.	3 / 3
	Total	12 / 12 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: databricks/devhub
Path: .agents/skills/building-components/SKILL.md
Commit: 01580f8

Reviewed: about 18 hours 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.