react
React component patterns, hooks, naming conventions, and the query-language translation system for Graph Explorer.
64
47%
Does it follow best practices?
Impact
96%
0.97xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.kiro/skills/react/SKILL.mdQuality
Discovery
32%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 identifies the domain (React patterns for Graph Explorer) and lists topic areas but lacks concrete actions and any explicit 'Use when...' guidance. It reads more like a topic list than an actionable skill description, making it difficult for Claude to know precisely when to select this skill over other React-related skills.
Suggestions
Add an explicit 'Use when...' clause, e.g., 'Use when building or modifying React components, custom hooks, or query-language translation logic in the Graph Explorer project.'
Replace category labels with concrete actions, e.g., 'Implements React components following project conventions, creates custom hooks, and translates user queries into graph query language for Graph Explorer.'
Include natural trigger terms users might say, such as 'graph query', 'SPARQL', 'Gremlin', 'React component', 'custom hook', or specific file types/patterns relevant to Graph Explorer.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React, Graph Explorer) and some areas (component patterns, hooks, naming conventions, query-language translation system), but these are categories rather than concrete actions like 'create components' or 'translate queries'. | 2 / 3 |
Completeness | Describes 'what' at a high level but completely lacks any 'when' clause or explicit trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' is also weak enough to warrant a 1. | 1 / 3 |
Trigger Term Quality | Includes relevant keywords like 'React', 'hooks', 'component patterns', 'Graph Explorer', and 'query-language translation', but misses common user variations and natural phrasing users might say (e.g., 'build a component', 'write a hook', 'graph query'). | 2 / 3 |
Distinctiveness Conflict Risk | The mention of 'Graph Explorer' provides some specificity, but 'React component patterns' and 'hooks' are very broad and could overlap with any general React development skill. | 2 / 3 |
Total | 7 / 12 Passed |
Implementation
62%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill effectively documents the project-specific translation system with concrete code examples and file paths, which is its strongest section. However, the general React guidelines are largely things Claude already knows and add little project-specific value. The skill would benefit from trimming generic advice and adding more codebase-specific patterns or examples.
Suggestions
Remove or significantly trim the 'General' section — Claude already knows standard React best practices like preferring functional components and avoiding prop drilling. Replace with project-specific patterns if they exist.
Add concrete examples for feature module structure (e.g., show an actual module's file tree and its index export pattern) to make the 'Feature Modules' section actionable rather than descriptive.
Include an example of adding a new translation key across all three JSON files to make the translations workflow more complete and actionable.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Mostly efficient but includes some unnecessary guidance Claude already knows (e.g., 'Prefer functional components with hooks over class components', 'Keep components small, focused on single responsibility', 'Avoid prop drilling'). The translations section is well-targeted with project-specific information. | 2 / 3 |
Actionability | The translations section provides a concrete, executable code example and specific file paths, which is good. However, the general React guidelines are abstract advice ('Keep components small', 'Follow principle of least privilege') without concrete examples of what this looks like in this specific codebase. The feature modules section describes structure but doesn't show examples. | 2 / 3 |
Workflow Clarity | This is a conventions/patterns skill rather than a multi-step workflow skill. The single-task guidance (how to use translations, how to name files, where to find things) is unambiguous. No destructive or batch operations are involved, so validation checkpoints are not needed. | 3 / 3 |
Progressive Disclosure | The content references specific file paths (e.g., `src/hooks/useTranslations.ts`, translation JSON files) which aids navigation. However, there are no bundle files or linked documents for deeper reference, and the general React guidelines could be separated or omitted entirely. The content is reasonably organized with clear sections but everything is inline. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- aws/graph-explorer
- Commit
30587b0
- 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.