react-web
React web development with hooks, React Query, Zustand
49
38%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/react-web/SKILL.mdQuality
Discovery
22%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 essentially a comma-separated list of technologies with no concrete actions and no usage triggers. While the named libraries (React Query, Zustand) provide some distinctiveness, the lack of specific capabilities and explicit 'when to use' guidance makes it insufficient for reliable skill selection among many options.
Suggestions
Add concrete actions describing what the skill does, e.g., 'Builds React components, manages client state with Zustand, handles server-state and data fetching with React Query.'
Add an explicit 'Use when...' clause with trigger terms, e.g., 'Use when the user asks about React components, hooks, state management, data fetching, or mentions React Query, Zustand, .jsx, or .tsx files.'
Include common user-facing synonyms and file extensions like 'frontend', 'SPA', 'single-page app', '.jsx', '.tsx' to improve trigger term coverage.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names a domain ('React web development') and lists technologies (hooks, React Query, Zustand) but does not describe any concrete actions like 'build components', 'manage state', or 'fetch data'. It reads more like a tag list than a capability description. | 1 / 3 |
Completeness | The description weakly addresses 'what' (React web development) but provides no 'when should Claude use it' guidance. There is no 'Use when...' clause or equivalent explicit trigger guidance, which per the rubric caps completeness at 2, and the 'what' itself is too vague to merit even a 2. | 1 / 3 |
Trigger Term Quality | It includes some natural keywords a user might mention—'React', 'hooks', 'React Query', 'Zustand'—but misses common variations like 'component', 'state management', 'data fetching', 'frontend', '.jsx', '.tsx', or 'SPA'. | 2 / 3 |
Distinctiveness Conflict Risk | Mentioning specific libraries (React Query, Zustand) adds some distinctiveness, but 'React web development' is broad enough to overlap with any general frontend or JavaScript skill. It could easily conflict with a generic web development or JavaScript skill. | 2 / 3 |
Total | 6 / 12 Passed |
Implementation
55%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides highly actionable, executable React patterns with a strong test-first workflow, but suffers significantly from verbosity and lack of progressive disclosure. The content is roughly 3-4x longer than necessary, with duplicated code examples (Button tests, hook tests appear twice) and explanations of patterns Claude already knows well. Restructuring into a concise overview with references to detailed sub-files would dramatically improve token efficiency.
Suggestions
Remove duplicated code examples - Button tests and hook tests each appear twice in nearly identical form between the TFD section and Testing section
Extract detailed sections (Forms, Routing, Styling, Performance, State Management) into separate reference files and link to them from a concise overview
Remove the anti-patterns list or reduce to only non-obvious items - most entries (don't mutate state, use stable keys, fix TypeScript errors) are basic React knowledge Claude already has
Trim explanatory prose throughout - e.g., 'Start with useState, escalate only when needed' and similar commentary adds no actionable value
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~400+ lines. Contains massive duplication - the Button test appears twice (once in TFD section, once in Testing section), hook tests appear twice. Explains basic React concepts Claude already knows (useState, useCallback, routing patterns). The anti-patterns list restates common React knowledge. Much of this could be cut by 60%+ without losing actionable information. | 1 / 3 |
Actionability | All code examples are fully executable TypeScript/TSX with proper imports, type definitions, and complete implementations. Covers components, hooks, state management, routing, forms, testing, and performance with copy-paste ready code throughout. | 3 / 3 |
Workflow Clarity | The test-first development workflow is clearly sequenced with explicit steps (write test → run/fail → implement → run/pass → refactor). Includes a validation checkpoint (tests must fail first), an enforcement checklist, and even a violation recovery pattern. The component development order is explicit with correct vs wrong ordering. | 3 / 3 |
Progressive Disclosure | Monolithic wall of text with no references to external files for detailed content. Everything is inline - the full testing patterns, form handling, routing, styling, performance, and state management could each be separate reference files. The header mentions 'Load with: base.md + typescript.md' but the body itself has no outward references for advanced topics. | 1 / 3 |
Total | 8 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (558 lines); consider splitting into references/ and linking | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
- Repository
- alinaqi/claude-bootstrap
- Commit
d4ddb03
- 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.