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

Evaluation results

90%

-5%

Node Properties Panel

Feature module structure and naming conventions

Criteria
Without context
With context

Module under modules/

100%

100%

Index file exports public API

100%

100%

PascalCase component filenames

100%

100%

Hook naming convention

100%

100%

Functional components only

100%

100%

No prop drilling

100%

100%

No unnecessary memoization

50%

100%

PascalCase component folders

100%

0%

Module self-containment

100%

100%

Single-responsibility components

100%

100%

100%

Adding Path Concept Labels Across Query Languages

Query-language translation system usage

Criteria
Without context
With context

All three files updated

100%

100%

Keys are kebab-case

100%

100%

Keys read naturally

100%

100%

Files in correct output path

100%

100%

Gremlin display values differ

100%

100%

SPARQL display values differ

100%

100%

Component uses useTranslations hook

100%

100%

Component calls t() for labels

100%

100%

No hard-coded language strings

100%

100%

Nested key structure used

100%

100%

100%

Modernizing the Edge List Component

React Compiler memoization and naming fixes

Criteria
Without context
With context

React.memo removed

100%

100%

useMemo removed

100%

100%

useCallback removed

100%

100%

Hook filename corrected

100%

100%

Hook export name corrected

100%

100%

Functional component preserved

100%

100%

Component filename unchanged

100%

100%

No new unnecessary memoization

100%

100%

Memoization imports removed

100%

100%

Hook import updated

100%

100%

Repository
aws/graph-explorer
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

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.