CtrlK
BlogDocsLog inGet started
Tessl Logo

code-react

React-specific code shape in the Grida editor. Hooks cannot be tested or benchmarked and silently break tuned UX under layered composition, so they are barred from the engine and main system — load-bearing logic lives in classes and namespaces, hooks only as thin edge wires. `data-testid` follows component-root discipline: one per significant component, not scattered. Use when authoring React in `editor/grida-canvas-react/`, `editor/components/`, `editor/scaffolds/`, or `editor/app/*`.

64

Quality

77%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/code-react/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, opinionated conventions skill with concrete decision criteria and clear references to the canonical detail doc. Its main weakness is verbosity — persuasive prose and a redundant summary section could be trimmed to respect the token budget.

Suggestions

Trim the rhetorical justification in 'Hooks live at the edge' (e.g. 'discipline fails at the third layer of composition; prevention does not') to the minimal rationale needed to justify the rule, since Claude already understands hook composition.

Drop or fold the 'The short version' section — it restates rules already covered and adds tokens without new guidance; a one-line pointer at the top would preserve scanability.

Add a small concrete code example of the allowed `use-*` adapter shape (useSyncExternalStore/useContext/disposal useEffect wired to the engine) to make the 'three-line wire' instruction copy-paste ready.

DimensionReasoningScore

Conciseness

Mostly efficient but padded with extended rhetorical justification ('discipline fails at the third layer of composition; prevention does not') and a 'short version' that restates the main rules; some of the prose explains hook composition concepts Claude already knows.

3 / 5

Actionability

Provides concrete, actionable rules — the two acceptable hook situations, an apply/skip list for data-testid, kebab-case value examples, and the extract-to-class instruction — though it lacks a concrete code example of the allowed `use-*` adapter shape.

4 / 5

Workflow Clarity

The decision flow is clear (is the hook load-bearing? if yes, extract to a class/namespace and reduce the hook to a three-line wire) with explicit acceptance criteria, though it is a conventions skill rather than a sequenced multi-step workflow.

4 / 5

Progressive Disclosure

Well-organized into clear sections with a one-level-deep, clearly signaled reference to `docs/contributing/react.md` for the full table and worked examples; the body itself runs somewhat long for an overview but is appropriately split.

4 / 5

Total

15

/

20

Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, specific description that clearly states both the code-shape conventions and the exact authoring contexts in which to apply them. It uses third person and concrete trigger paths, with only minor room for broader synonym coverage.

DimensionReasoningScore

Specificity

Lists several concrete rules — hooks barred from the engine, load-bearing logic in classes/namespaces, hooks as thin edge wires, one data-testid per component root — rather than vague language, though framed as constraints rather than a comprehensive action list.

4 / 5

Completeness

Explicitly answers both what (React code-shape conventions) and when ('Use when authoring React in `editor/grida-canvas-react/`, `editor/components/`, `editor/scaffolds/`, or `editor/app/*`') with concrete trigger paths.

5 / 5

Trigger Term Quality

Includes natural terms a user would say ('React', 'Grida editor', 'hooks', 'data-testid') plus concrete trigger paths, with only minor synonym coverage missing.

4 / 5

Distinctiveness Conflict Risk

Clear niche — React conventions scoped to the Grida editor with specific directory paths — making it highly distinct with minimal conflict risk against other skills.

5 / 5

Total

18

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository
gridaco/grida
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.