react-web
React web development with hooks, React Query, Zustand
39
38%
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 technology names provide some keyword value, the lack of specific capabilities and explicit 'when to use' guidance makes it insufficient for Claude to reliably select this skill from a large pool.
Suggestions
Add concrete actions describing what the skill does, e.g., 'Builds React components using hooks, manages server state with React Query, and handles client state with Zustand.'
Add an explicit 'Use when...' clause with trigger terms, e.g., 'Use when the user asks about React components, state management, data fetching, or mentions React Query, Zustand, hooks, JSX, or .tsx files.'
Include common user-facing variations and file types 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 should cap 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', 'JSX', '.tsx', or 'frontend'. Coverage is partial. | 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's somewhat specific but not clearly carved out. | 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.
The skill provides highly actionable, executable React code examples across many domains, and the test-first workflow section is well-structured with clear validation steps. However, it is severely bloated — it covers too many topics in a single file with significant duplication (Button tests appear twice, hook tests appear twice), and it explains many standard React patterns that Claude already knows (routing, CSS modules, memoization). The content would benefit greatly from splitting into focused reference files with a concise overview in SKILL.md.
Suggestions
Split the monolithic content into separate reference files (e.g., TESTING.md, STATE.md, FORMS.md, ROUTING.md, PERFORMANCE.md) and keep SKILL.md as a concise overview with links to each.
Remove duplicate code examples — the Button and useCounter tests appear in both the Test-First Development section and the Testing section.
Remove or drastically condense sections covering standard React patterns Claude already knows (React Router setup, CSS Modules usage, basic memoization, Zustand store creation) — focus only on project-specific conventions or non-obvious decisions.
Trim the anti-patterns list to only project-specific rules; items like 'don't mutate state directly' and 'don't use index as key' are basic React knowledge.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~400+ lines with significant redundancy. The Testing section repeats the exact same Button test examples from the Test-First Development section nearly verbatim. Hook testing is also duplicated. Many patterns shown (React Router, CSS Modules, Tailwind, React Hook Form) are standard React knowledge Claude already possesses. The anti-patterns list at the end restates well-known React best practices. | 1 / 3 |
Actionability | The skill provides fully executable, copy-paste ready TypeScript/React code throughout. Every pattern includes complete, runnable examples with proper imports, type definitions, and realistic usage — from component definitions to hooks, stores, queries, forms, and tests. | 3 / 3 |
Workflow Clarity | The Test-First Development workflow is clearly sequenced with explicit steps (write test → run test fails → implement → run test passes → refactor). It includes a validation checkpoint (tests must fail first), an enforcement checklist, and even a violation recovery pattern. The component development order is explicitly numbered with correct/wrong comparisons. | 3 / 3 |
Progressive Disclosure | The entire skill is a monolithic wall of content with no references to external files despite covering at least 10 distinct topics (TFD, project structure, components, state management, routing, styling, forms, testing, performance, anti-patterns). Content like the full React Query patterns, routing setup, form handling, and performance tips could easily be split into separate reference files. No bundle files exist to support this. | 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 (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
7e5f7a2
- 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.