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

69%

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

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/building-components/SKILL.md

Quality

Content

51%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 an exemplary progressive-disclosure hub — lean and well-organized with verified one-level-deep references — but as a pure index it contains no executable guidance or sequenced workflow itself, relying entirely on the referenced files for actionability and process.

Suggestions

Add a brief "Quick start" or worked example inline (a small code snippet or one concrete recipe) so the body offers some executable guidance rather than only pointers.

Include a short decision flow (e.g., "If the task is X, start with references/Y.mdx") to give the hub a minimal workflow sequence.

Collapse the duplicated trigger list between the frontmatter description and the "When to use" section to remove redundancy and recover tokens.

Dimension	Reasoning	Score
Conciseness	The body is a lean bullet-only index with no concept padding, but the "When to use this skill" list largely restates the frontmatter triggers, a minor redundancy that keeps it just below fully lean.	4 / 5
Actionability	The body provides only an index of references with one-line descriptions and no executable code, commands, or concrete steps, matching the score-2 anchor of high-level hints missing the specific steps to execute.	2 / 5
Workflow Clarity	There is no sequenced workflow or validation checkpoint in the body; only a when-to-use list and a reference index, with the actual process delegated entirely to the referenced files, matching the score-2 anchor of a rough structure with no real sequence.	2 / 5
Progressive Disclosure	The body is a clear overview with 15 well-signaled one-level-deep references, each with a descriptive label, and all referenced files exist in ./references/, matching the score-5 anchor for clean progressive disclosure.	5 / 5
	Total	13 / 20 Passed

Description

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

A strong, third-person description that clearly states both capability and trigger conditions with good keyword coverage. It is comprehensive on completeness and distinctiveness, slightly less granular on action specificity and synonym coverage.

Suggestions

Add concrete synonyms and specifics users say (e.g., "ARIA", "keyboard navigation", "theming", "slots") to push trigger_term_quality toward 5.

Tighten capability verbs from broad nouns ("building components") to more concrete actions (e.g., "build, compose, and publish accessible UI components") to raise specificity.

Dimension	Reasoning	Score
Specificity	The description lists several specific actions ("building new components", "implementing accessibility", "creating composable APIs", "setting up design tokens", "publishing to npm/registry", "writing component documentation"), but each is broader than the concrete PDF-style verbs in the score-5 anchor, so it sits just below comprehensive.	4 / 5
Completeness	It explicitly answers both what ("Guide for building modern, accessible, and composable UI components") and when ("Use when building new components, implementing accessibility, ...") with concrete trigger phrases, matching the score-5 anchor.	5 / 5
Trigger Term Quality	It covers natural terms a user would say (components, accessibility, design tokens, composable APIs, npm/registry), but omits common synonyms and specifics like "ARIA", "theming", "slots", or file extensions that the score-5 anchor requires.	4 / 5
Distinctiveness Conflict Risk	The component-design niche (accessibility, composition, design tokens, npm publishing) has distinct triggers and minimal overlap with other skills; it is in third-person voice with no conflict-prone generic language.	5 / 5
	Total	18 / 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: databricks/devhub
Path: .agents/skills/building-components/SKILL.md
Commit: f83a74d

Reviewed: 4 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.