CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

44

Quality

47%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

The canonical home for this skill is components in udecode/plate

SKILL.md
Quality
Evals
Security

Quality

Content

32%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 content contains genuinely valuable project-specific guidance (composition patterns, naming conventions, data-slot/data-state conventions, ComponentProps typing) with substantial executable TSX, but it is presented as an uncurated ~49KB documentation-site dump. Known-concept explanations, meta scaffolding (URL lines, duplicate per-page headers, video/author embeds), a dangling 'react.mdc' reference, and the total absence of any file-level structure or build workflow waste most of the token budget.

Suggestions

Restructure into a lean SKILL.md overview (composition workflow, naming conventions, data-state/data-slot decision framework) with one-level-deep reference files per topic, e.g. references/accessibility.md, references/polymorphism.md, references/state.md, references/types.md.

Cut material Claude already knows — accessibility basics (contrast ratios, label/htmlFor, focus trapping), controlled vs uncontrolled explanations, and asChild/cloneElement mechanics — down to one-line conventions, and delete site scaffolding (URL lines, duplicate title/description blocks, video embeds, AuthorNote/Callout components, the Overview page about the spec itself).

Replace the dangling 'see the Data Attribute Styling Patterns section in react.mdc' and 'see the Design Tokens section in react.mdc' pointers with actual bundled reference files (or inline the essential patterns), since react.mdc is not part of the skill.

Add an explicit component-creation workflow with checkpoints: 1. decompose into Root/Trigger/Content subcomponents, 2. extend React.ComponentProps for each wrapper, 3. add data-state/data-slot, 4. verify ARIA wiring and prop forwarding before finishing.

DimensionReasoningScore

Conciseness

The body is a ~1,300-line dump of an entire documentation site and meets all three conditions of anchor 1: severely verbose (11 concatenated doc pages), extensively explaining concepts Claude already knows (accessibility basics like contrast ratios and label/htmlFor pairing, controlled vs uncontrolled state, polymorphism and cloneElement mechanics), and heavily padded ('URL: /accessibility' lines, per-page duplicated title/description blocks, a video embed, author callouts, and an Overview page about the spec itself). Anchor 2 ('several unnecessary explanations') understates the scale of the padding, so 1 fits better than 2.

1 / 5

Actionability

Most sections provide concrete, executable TSX: the full Accordion Root/Item/Trigger/Content composition walkthrough, the Radix Slot implementation with cva variants, the useControllableState example with install commands, and ComponentProps type patterns with good/bad contrasts. It falls short of anchor 5 because some guidance is only descriptive (Design Tokens and Data Attributes sections defer to 'react.mdc', a file not present in the bundle, so those pointers are unusable) and several examples are illustrative fragments rather than complete copy-paste units.

4 / 5

Workflow Clarity

There is no workflow for the skill's stated purpose — creating/updating a composable component — only the Composition section's rough build-out sequence (1. Root, 2. Item, 3. Trigger, 4. Content, 5. Putting it together). No validation or verification checkpoints exist (e.g. verifying ARIA wiring, prop forwarding, or type safety), and the sections are unordered concatenated pages with no decision path. This sits between anchor 1 (steps missing or incoherent, no validation) and anchor 2 (rough sequence, many gaps, validation absent), closer to 2 given the Composition walkthrough.

2 / 5

Progressive Disclosure

The skill is monolithic: all eleven topic areas (Accessibility, asChild, Composition, Data Attributes, Definitions, Design Tokens, Overview, Polymorphism, Core Principles, State, Types) are inlined in one 1,300-line file with no references/, scripts/, or assets/ directories, and the body points to 'react.mdc' which does not exist in the bundle. This matches anchor 2 (content that clearly belongs in separate files is inlined) rather than anchor 1, since the body does have per-topic section headers making it navigable.

2 / 5

Total

9

/

20

Passed

Description

62%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 well-formed: third-person voice, a clear 'what', an explicit 'when' with negative scoping, and a reasonably distinct scope. Its weaknesses are modest trigger-term coverage (few synonyms or natural phrases a user would say) and attribute-style rather than action-style capability listing.

Suggestions

Enumerate concrete actions instead of attributes, e.g. 'Build composable React components with Root/Trigger/Content subcomponents, extend native HTML prop types (React.ComponentProps), add data-state/data-slot attributes, and support asChild/as polymorphism.'

Broaden trigger terms with natural synonyms users would say, e.g. 'UI components', 'component library', 'design system', 'shadcn/ui', 'Radix', 'polymorphic components'.

Add a concrete scenario to the 'when' clause, e.g. 'Use when a user asks to create, refactor, or restyle a reusable component; skip for pages, marketing sections, or feature-level work.'

DimensionReasoningScore

Specificity

The description names the domain ('React component architecture') and a couple of concrete qualities ('composable, accessible components with data attributes'), but these are attributes of the output rather than a list of specific actions the skill performs. This matches anchor 3 (domain plus 1-2 concrete points, not comprehensive) rather than anchor 4, which expects several specific actions enumerated; it is clearly above anchor 2 since the domain is well identified and the named qualities are concrete.

3 / 5

Completeness

Both parts are explicitly present: a clear 'what' ('React component architecture for creating composable, accessible components with data attributes') and an explicit 'when' ('Use when creating/updating composable components, not for higher-level feature/page components') that even includes negative scoping. It falls short of anchor 5 because the trigger guidance lacks concrete trigger phrases or scenario variations, matching anchor 4 ('when' could be more explicit or specific).

4 / 5

Trigger Term Quality

Relevant keywords are present ('React component', 'composable components', 'creating/updating'), but common natural variations a user would actually say are missing — e.g. 'UI components', 'component library', 'design system', 'shadcn/Radix', or file extensions. This fits anchor 3 (some relevant keywords, missing common variations or synonyms) and not anchor 4, which requires good coverage with only a few natural terms missing.

3 / 5

Distinctiveness Conflict Risk

The scope is fairly narrow (composable/accessible React components with data attributes) and the explicit negative boundary ('not for higher-level feature/page components') reduces overlap with page/feature-level skills. Minor overlap risk remains with general React or styling skills ('components' alone is broad), so this is anchor 4 rather than anchor 5, which demands a clear niche with minimal conflict risk.

4 / 5

Total

14

/

20

Passed

Validation

75%

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

CriteriaDescriptionResult

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
Reviewed

Table of Contents

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.