CtrlK
BlogDocsLog inGet started
Tessl Logo

tech-react

React-specific component, hook, and rendering patterns. Use when writing React components, hooks, JSX, or optimizing React performance.

Install with Tessl CLI

npx tessl i github:ravnhq/ai-toolkit --skill tech-react
What are skills?

74

1.18x

Quality

62%

Does it follow best practices?

Impact

97%

1.18x

Average score across 3 eval scenarios

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/framework/tech-react/SKILL.md
SKILL.md
Review
Evals

Evaluation results

100%

44%

Blog Post Editor

TanStack Query mutation call-site handling

Criteria
Without context
With context

No onSuccess callback

0%

100%

No onError callback

100%

100%

No onSettled callback

100%

100%

Uses mutateAsync

0%

100%

Awaited post-mutation actions

0%

100%

No useEffect for form submission

100%

100%

Try/catch at call site

0%

100%

Hooks at top level

100%

100%

No premature memoization

100%

100%

Without context: $0.2739 · 1m 10s · 18 turns · 25 in / 3,710 out tokens

With context: $0.2788 · 59s · 17 turns · 419 in / 3,259 out tokens

92%

-8%

Live Activity Feed Panel

Effect cleanup and avoiding effect misuse

Criteria
Without context
With context

Event listener cleanup

100%

85%

Timer cleanup

100%

100%

No derived state in effect

100%

100%

No effect chain

100%

58%

No useEffect for user event response

100%

100%

AbortController for fetch

100%

100%

Hooks at top level

100%

100%

Cleanup returns function

100%

88%

No premature memoization

100%

100%

Without context: $0.1631 · 39s · 10 turns · 15 in / 2,296 out tokens

With context: $0.2577 · 58s · 16 turns · 21 in / 2,868 out tokens

100%

10%

Employee Directory with Detail Panel

List rendering, key prop reset, and semantic HTML

Criteria
Without context
With context

Stable unique list keys

100%

100%

No index as key

100%

100%

Separate child component for per-item hooks

100%

100%

Key prop for state reset

100%

100%

No useEffect state reset

0%

100%

Semantic interactive elements

100%

100%

Semantic page structure

100%

100%

Hooks at top level

100%

100%

No premature memoization

100%

100%

Without context: $0.4219 · 1m 33s · 20 turns · 27 in / 6,659 out tokens

With context: $0.5920 · 2m 3s · 30 turns · 276 in / 7,111 out tokens

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.