react-web
React web development with hooks, React Query, Zustand
35
32%
Does it follow best practices?
Impact
—
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 'Use when...' guidance makes it insufficient for reliable skill selection among many candidates.
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 to create or modify React components, manage application state, fetch API data, or work with .jsx/.tsx files.'
Include common user-facing synonyms and file extensions such as 'frontend', 'component', 'state management', 'data fetching', '.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 frontend skill. | 2 / 3 |
Total | 6 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides highly actionable, executable React code examples covering a broad range of topics, but suffers severely from verbosity and lack of progressive disclosure. Significant duplication (Button tests, hook tests appear twice) wastes tokens, and many sections cover standard React patterns Claude already knows. The content would benefit enormously from being split into focused reference files with a concise overview in SKILL.md.
Suggestions
Eliminate duplicate code examples: the Button component test and hook test each appear twice in nearly identical form — keep only one instance of each.
Split into separate reference files (e.g., TESTING.md, STATE.md, FORMS.md, ROUTING.md) and reduce SKILL.md to a concise overview with links to each.
Remove sections covering standard React knowledge Claude already has (basic routing, CSS modules usage, anti-patterns list, memoization basics) or compress them to single-line reminders.
Add explicit validation checkpoints beyond TFD — e.g., 'run type-check before committing', 'verify build succeeds after adding new routes'.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~400+ lines. Massive duplication: the Button test appears nearly identically in the 'Test-First Development' section and again in the 'Testing' section. The hook test is also duplicated. Many patterns shown (routing, forms, styling, performance) are standard React knowledge Claude already possesses. The anti-patterns list at the end is basic React knowledge that doesn't need to be spelled out. | 1 / 3 |
Actionability | All code examples are fully executable TypeScript/TSX with proper imports, typed interfaces, and realistic patterns. The test examples, component patterns, Zustand store, React Query hooks, and form validation are all copy-paste ready with concrete implementations. | 3 / 3 |
Workflow Clarity | The test-first development workflow is clearly sequenced with numbered steps and an enforcement checklist. However, there are no validation checkpoints for the broader development workflow (e.g., no linting step, no type-checking step, no build verification). The TFD section has a feedback loop but other multi-step processes like form handling or state management escalation lack explicit sequencing. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of text with no references to external files despite covering at least 8 distinct topics (TFD, project structure, components, state management, routing, styling, forms, testing, performance, anti-patterns). Each major section could be its own reference file. No bundle files exist to offload content, and no navigation structure guides the reader to relevant sections. | 1 / 3 |
Total | 7 / 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 (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 | 9 / 11 Passed | |
- Repository
- alinaqi/claude-bootstrap
- Commit
65efb33
- 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.