CtrlK
BlogDocsLog inGet started
Tessl Logo

react

React component patterns, hooks, naming conventions, and the query-language translation system for Graph Explorer.

64

0.97x
Quality

47%

Does it follow best practices?

Impact

96%

0.97x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.kiro/skills/react/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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 communicates project-specific knowledge about the translation system and React Compiler usage, which are genuinely useful non-obvious details. However, it dilutes its value with generic React best practices that Claude already knows (functional components, single responsibility, avoid prop drilling). The translations section is the strongest part with concrete code, file paths, and naming conventions.

Suggestions

Remove generic React advice (functional components, single responsibility, avoid prop drilling, least privilege) that Claude already knows — keep only project-specific conventions and patterns.

Add a concrete example showing how to add a new translation key end-to-end: adding the key to each JSON file and using it in a component.

Provide a concrete example of the feature module structure (e.g., show a sample module's directory layout and index file export pattern) rather than describing it abstractly.

DimensionReasoningScore

Conciseness

Mostly efficient but includes some unnecessary guidance that Claude already knows (e.g., 'Prefer functional components with hooks over class components', 'Keep components small, focused on single responsibility', 'Follow principle of least privilege for component props'). The translations section is well-targeted with project-specific knowledge.

2 / 3

Actionability

The translations section provides a concrete, executable code example and specific file paths, which is strong. However, the general React guidelines are abstract advice ('Avoid prop drilling', 'Keep components small') without concrete project-specific examples or commands. The React Compiler guidance is actionable but could benefit from a before/after example.

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, naming conventions, module structure) is unambiguous and clearly sequenced where needed. No destructive or batch operations require validation checkpoints.

3 / 3

Progressive Disclosure

The skill references specific file paths (e.g., `src/hooks/useTranslations.ts`, translation JSON files, `src/modules/`) which aids navigation, but all content is inline in a single file. The feature modules section and translations section could benefit from linking to more detailed references, especially given no bundle files are provided to supplement.

2 / 3

Total

9

/

12

Passed

Description

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 a specific project (Graph Explorer) and lists topic areas but lacks concrete actions and any 'Use when...' guidance. It reads more like a table of contents than a 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 working on Graph Explorer React components, writing custom hooks, or implementing query-language translation.'

Replace category labels with concrete actions, e.g., 'Creates and refactors React components following Graph Explorer conventions, implements custom hooks, and translates user queries into graph query languages.'

Include natural trigger terms users might say, such as 'Graph Explorer UI', 'SPARQL', 'Gremlin', 'React component', or specific file/module names to reduce conflict with generic React skills.

DimensionReasoningScore

Specificity

Names the domain (React, Graph Explorer) and lists 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', and 'Graph Explorer', but misses common user-facing variations and natural phrases a user might say (e.g., 'build a component', 'write a hook', 'query translation').

2 / 3

Distinctiveness Conflict Risk

'Graph Explorer' provides some specificity that distinguishes it, but 'React component patterns' and 'hooks' are very broad and could overlap with any general React development skill.

2 / 3

Total

7

/

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.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

10

/

11

Passed

Repository
aws/graph-explorer
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.