CtrlK
BlogDocsLog inGet started
Tessl Logo

react-web

React web development with hooks, React Query, Zustand

52

Quality

59%

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 ./skills/react-web/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

62%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 code-rich, highly actionable React reference with an excellent test-first workflow, but it is long and redundant — the TFD workflow and Button test examples each appear twice — and everything is inlined in one monolithic file with no progressive disclosure to supporting references. Tightening the duplication and splitting detailed examples into referenced files would materially raise quality.

Suggestions

De-duplicate the testing material: keep one canonical Button/useCounter test example in the Testing section and have the TFD section reference it instead of repeating it.

Collapse the two presentations of the TFD workflow (numbered list and bash comment block) into a single sequenced workflow to cut tokens.

Move the exhaustive code catalogs (forms, routing, performance, full testing suites) into references/ files and link to them from SKILL.md to enable progressive disclosure.

DimensionReasoningScore

Conciseness

The ~550-line body duplicates material: the Test-First workflow is shown as a numbered list AND as a bash comment block, and a Button test suite appears in both the TFD section and the later Testing section in near-identical form; sections like "Functional Components Only" and "Props Interface Always Explicit" explain concepts Claude already knows. This is noticeably verbose with several padded/redundant sections; not a 3 because the redundancy is more than minor, not a 1 because most content is concrete code rather than conceptual prose.

2 / 5

Actionability

Concrete, mostly executable TypeScript examples span components, hooks, Zustand, React Query, routing, forms, testing, and performance, with copy-paste-ready snippets. Not a 5 because several examples leave gaps ("// handle submit" in LoginForm, undefined fetchItems in useHome); not a 3 because the code is real and runnable, not pseudocode.

4 / 5

Workflow Clarity

The Test-First Development workflow is a clear numbered sequence with explicit validation checkpoints (run test → it fails → implement → it passes → refactor) plus an "Enforcement Checklist" and a violation-feedback block; this matches the anchor for clear sequence with explicit validation and checklists. Not a destructive/batch skill, so the cap does not apply.

5 / 5

Progressive Disclosure

The body has clear ## section headers and is a single self-contained file with no bundle files, but ~550 lines of detailed reference-style content (full testing suites, complete forms/routing/state examples) is inlined that could live in separate reference files. Not a 4 because there is no file-level splitting or signaled one-level-deep references; not a 2 because internal section structure is genuinely present and organized.

3 / 5

Total

14

/

20

Passed

Description

56%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 a concise topic-plus-stack label rather than a capability statement: it identifies the domain and key technologies but omits concrete actions and an inline "when to use" trigger. It is clearly niche and uses good natural keywords, but the missing trigger clause and absent verbs keep it mid-range.

Suggestions

Rewrite as an action-led capability statement, e.g. "Build React web components and pages, manage state with Zustand, and fetch server data with React Query."

Append an explicit "Use when..." trigger clause naming natural user phrases (components, pages, hooks, React Query, Zustand) so the description self-contains the when-to-use guidance.

Add file-extension or surface terms (.tsx, .jsx, frontend) to broaden natural trigger coverage.

DimensionReasoningScore

Specificity

"React web development with hooks, React Query, Zustand" names the domain and tech stack but lists no concrete actions (verbs like build, fetch, manage state are absent), matching the 'names the domain but actions are minimal' anchor; not a 3 because no concrete actions are enumerated, not a 1 because the domain and specific libraries are named.

2 / 5

Completeness

The description gives a clear "what" (React web dev with the three named technologies) but no "when"/"Use when..." clause inside the description field — the trigger guidance lives in the separate when-to-use field, so per the missing-trigger cap it cannot exceed 3; not a 4 because the when is absent rather than merely imprecise.

3 / 5

Trigger Term Quality

"hooks", "React Query", "Zustand", "React web development" are natural terms users say when working in this stack; not a 5 because common variations like "components", "pages", "frontend", or file extensions (.tsx/.jsx) are absent from the description.

4 / 5

Distinctiveness Conflict Risk

The named libraries (React Query, Zustand) and "web" qualifier carve a clear niche distinct from React Native or general frontend skills; not a 5 because "React web development" is still broad enough to overlap with a generic React skill.

4 / 5

Total

13

/

20

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (557 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository
alinaqi/claude-bootstrap
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.