frontend-component-build

Build production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this skill whenever the user wants to build a component from scratch, refactor an existing one, design a component API, or implement a UI element with proper states and accessibility. Triggers on build a component, create a button, create a modal, create a form input, component API, props design, component states, refactor component, accessible component. Also triggers when implementing UI from a design that needs to be reusable.

Quality

89%

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

78%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 well-structured, actionable guide that leverages progressive disclosure effectively via three real reference files. It is efficient and concrete, with only minor gaps in conciseness framing and an implicit rather than explicit test feedback loop in the workflow.

Suggestions

Make the workflow's validation feedback loop explicit, e.g. after step 9 'Test': 'If tests fail, fix the markup/ARIA and re-test before documenting.'

Trim interpretive framing sentences like 'Naming the parts up front makes the API obvious' to tighten conciseness.

Add one short worked component example (e.g. an accessible Button) to lift actionability from concrete guidance to copy-paste ready.

Dimension	Reasoning	Score
Conciseness	The body is dense with concrete patterns and mostly assumes Claude's competence, but a few framing sentences ('Naming the parts up front makes the API obvious', 'Most patterns translate to React, Vue, Svelte') are explanatory rather than strictly necessary, keeping it just short of fully lean.	4 / 5
Actionability	Concrete, specific guidance throughout — named HTML elements (`<button>`, `<nav>`), specific ARIA (`aria-pressed`, `aria-describedby`, `aria-live`), 44x44 tap targets, and enum-prop patterns — but lacks a complete worked component example, leaving a minor gap.	4 / 5
Workflow Clarity	A clear 10-step sequenced Workflow with a Test step is present; the validation feedback loop (test fails → fix → retest) is implied rather than explicit, a minor checkpoint gap that keeps it below 5.	4 / 5
Progressive Disclosure	SKILL.md is a well-organized overview with clearly signaled, one-level-deep references to three real bundle files (component-spec-template, component-api-patterns, accessibility-patterns), each linked with a descriptive label — matching the score-5 anchor.	5 / 5
	Total	17 / 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.

The description is strong across all dimensions: it states concrete capabilities, provides extensive natural trigger terms, explicitly covers both what and when, and carves out a distinct niche with minimal conflict risk. It uses appropriate third-person/imperative voice with no fluff.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'accessible markup, sensible props, defined states, and tested behavior' — giving comprehensive coverage of what the skill does, matching the score-5 anchor.	5 / 5
Completeness	Explicitly answers both what ('Build production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior') and when ('Use this skill whenever... Triggers on...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Triggers on natural phrases users actually say — 'build a component, create a button, create a modal, create a form input, component API, props design, refactor component' — with broad synonym coverage, matching the comprehensive score-5 anchor.	5 / 5
Distinctiveness Conflict Risk	Occupies a clear niche — frontend component construction — with distinct triggers (component API, props design, component states) that minimize overlap with adjacent skills like design-system or design-standards.	5 / 5
	Total	20 / 20 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: rampstackco/claude-skills
Path: skills/frontend-component-build/SKILL.md
Commit: a67dd34

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