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.

48

Quality

55%

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

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

SKILL.md
Quality
Evals
Security

Quality

Content

40%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 docs-site dump of the components.build specification: genuinely useful, concrete React component patterns buried in tutorial-level explanation, leftover page metadata, embedded video/author markup, and a broken pointer to react.mdc. It needs aggressive trimming of what Claude already knows and a restructure into per-topic reference files.

Suggestions

Trim or remove the educational padding Claude already knows (ARIA attribute lists, focus-trap explanations, controlled vs. uncontrolled basics, cloneElement semantics) and delete the docs-site artifacts — 'URL:' lines, stray title/description metadata, the <Video> and <AuthorNote> tags.

Split the ~1300-line body into topic reference files (e.g. references/accessibility.md, references/polymorphism.md, references/data-attributes.md) with a concise SKILL.md overview that links to them one level deep.

Resolve the dangling references: replace 'see the ... section in react.mdc' pointers with actual bundled reference files, and add a short 'how to apply this when building a component' workflow (e.g. the Definitions classification decision flow surfaced up front).

DimensionReasoningScore

Conciseness

At ~1300 lines the body extensively explains concepts Claude already knows — ARIA attribute basics, focus trapping, controlled vs. uncontrolled state, cloneElement semantics, TypeScript generics — plus padded docs-site artifacts ('URL: /accessibility', stray 'title:'/'description:' metadata, an embedded <Video> tag and <AuthorNote> blocks). There is real signal mixed in (data-slot/data-state conventions, the artifact taxonomy, naming conventions), which keeps it above the purely padded level 1 anchor, but the verbosity is substantial.

2 / 5

Actionability

Most guidance is concrete and executable: complete TSX for the composable Accordion build-up, the Radix Slot implementation with cva variants, useControllableState usage, and ComponentProps typing patterns, all copy-paste quality. Minor gaps — the Composition Root snippet omits imports, and the Data Attributes and Design Tokens sections defer to a 'react.mdc' section that is not part of this bundle — keep it below fully covered.

4 / 5

Workflow Clarity

There is no overall workflow: the body is a concatenation of eleven independent topic pages (Accessibility, asChild, Composition, Definitions, Polymorphism, State, Types, ...) with no sequence connecting them and no instruction on how to apply the material when building a component. Fragments of sequence exist (the 5-step Accordion walkthrough, the Definitions classification decision flow), matching the 'rough sequence present but many gaps' anchor rather than the 'steps missing or incoherent' one.

2 / 5

Progressive Disclosure

The skill is a monolithic single file with no references/, scripts/, or assets/ directories; content that clearly belongs in separate files (the full Accessibility page, the Polymorphism deep-dive, the Definitions glossary) is inlined. References that do exist are buried and dangling — 'see the Data Attribute Styling Patterns section in react.mdc' points to a file not in the bundle — leaving navigation effectively impossible.

2 / 5

Total

10

/

20

Passed

Description

70%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 solid, third-person description with an explicit 'Use when' clause and a helpful negative boundary. It would score higher with more enumerated concrete capabilities and richer trigger synonyms (composition, compound components, polymorphic/asChild).

DimensionReasoningScore

Specificity

The description names the domain ('React component architecture') and a couple of concrete facets ('composable, accessible components with data attributes'), but it is a single topic clause rather than a list of multiple concrete actions, so coverage is not comprehensive. It matches the 'names domain and 1-2 concrete actions' anchor, not the 'several specific actions' anchor above.

3 / 5

Completeness

Both parts are present: the 'what' ('React component architecture for creating composable, accessible components with data attributes') and an explicit 'Use when creating/updating composable components' clause that even adds a negative boundary ('not for higher-level feature/page components'). It falls short of a 5 because the trigger phrases are less concrete than anchor examples like 'or when the user mentions PDFs, forms, or document extraction'.

4 / 5

Trigger Term Quality

Natural trigger terms like 'composable components', 'accessible components', 'data attributes', and 'creating/updating' cover how a user would plausibly phrase the need. Common variations a user might say — 'composition', 'compound components', 'polymorphic', 'asChild', 'headless' — are absent, which keeps it below the comprehensive synonym coverage of a 5.

4 / 5

Distinctiveness Conflict Risk

The scope is a clear niche (composable React component construction) with an explicit exclusion of feature/page-level components, making it mostly distinct from general React or design-system skills. Minor overlap risk remains with sibling skills about general component building or accessibility, keeping it below the 'clear niche with minimal conflict risk' anchor.

4 / 5

Total

15

/

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.