components

React component architecture for creating composable, accessible components with data attributes. Use when creating/updating composable components, not for higher-level feature/page components.

Quality

64%

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 ./templates/plate-playground-template/.agents/skills/components/SKILL.md

Quality

Content

46%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 concatenation of documentation-website pages dumped into SKILL.md: verbose, padded with basic concepts Claude knows, and monolithic with broken references to a missing react.mdc. It does contain genuinely actionable, copy-paste-ready code patterns, but it fails progressive disclosure and token-efficiency.

Suggestions

Split the glossary (Definitions), accessibility reference, and long conceptual pages into separate reference files under references/, keeping SKILL.md as a lean overview that links one level deep — and either create react.mdc or remove the dangling references to it.

Cut explanatory prose about concepts Claude already knows (what accessibility is, what controlled/uncontrolled state means, what the `as`/`asChild` props are) and keep only the concrete patterns, ARIA attributes, code, and decision rules that add information Claude does not already have.

Promote the Composition build sequence into a single clearly numbered workflow with a verification step (e.g. 'confirm the component renders and keyboard/focus behavior works'), and trim the rest to reference material rather than leaving the skill as an unsequenced doc dump.

Dimension	Reasoning	Score
Conciseness	At ~1300 lines the body extensively explains concepts Claude already knows (what accessibility is, controlled/uncontrolled state, polymorphism, design tokens), with padded prose ('Accessibility is not an optional feature—it's a fundamental requirement...', 'The `as` prop is a fundamental pattern...') surrounding the useful code.	2 / 5
Actionability	Most code blocks are concrete and copy-paste ready (Slot/asChild, Accordion composition, Stepper controlled state, type extension patterns, npm install commands), but large descriptive-only sections (Definitions, Core Principles, Overview, parts of Accessibility) lack executable guidance.	4 / 5
Workflow Clarity	The Composition tutorial is a clear numbered sequence (Root → Item → Trigger → Content → Putting it all together) and the Definitions classification heuristics give a decision flow, but most of the skill is unsequenced reference material with no verification checkpoints.	3 / 5
Progressive Disclosure	This is a monolithic wall of documentation inlined into SKILL.md that clearly belongs in separate reference files; the only external references point to a non-existent 'react.mdc' (e.g. 'see the Data Attribute Styling Patterns section in react.mdc'), and no bundle files exist.	2 / 5
	Total	11 / 20 Passed

Description

82%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 description that concisely states both the capability and an explicit usage trigger with a clear negative boundary. The only weakness is specificity: it names qualities rather than enumerating several concrete actions.

Dimension	Reasoning	Score
Specificity	Names the domain ('React component architecture') and concrete aspects ('composable, accessible components with data attributes') but offers only a single action verb ('creating') rather than a list of concrete actions, so coverage is not comprehensive.	3 / 5
Completeness	Clearly answers 'what' (React component architecture for composable, accessible components with data attributes) and 'when' ('Use when creating/updating composable components'), with an explicit negative boundary ('not for higher-level feature/page components').	5 / 5
Trigger Term Quality	Includes natural developer phrases like 'composable components', 'accessible components', and 'data attributes' that users would actually say, though a few common synonyms (e.g. 'component composition', 'asChild', 'polymorphism') are missing.	4 / 5
Distinctiveness Conflict Risk	The explicit 'not for higher-level feature/page components' boundary plus the narrow composable/accessible/data-attribute niche gives it distinct triggers with minimal overlap risk against page or feature skills.	5 / 5
	Total	17 / 20 Passed

Validation

75%

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

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (1311 lines); consider splitting into references/ and linking	Warning
metadata_version	'metadata.version' is missing	Warning
metadata_field	'metadata' should map string keys to string values	Warning
relative_links	Relative link issues: 3 suspicious	Warning

	Total	12 / 16 Passed

Repository: udecode/plate
Path: templates/plate-playground-template/.agents/skills/components/SKILL.md
Commit: babb3c2

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.