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 conventions skill with concrete, actionable rules and correctly offloaded deep reference material. Its main cost is token weight: a persuasive multi-paragraph rationale and a "The short version" section duplicate content that could be stated once, tightly.

Suggestions

Cut the rhetorical failure narrative in "Hooks live at the edge" (the "no failing test… no bisect helps" passage) down to one or two sentences — the two acceptance criteria and the Fine/Never pair already carry the rule.

Delete "The short version" section, or replace the body's long rationale with it; having both roughly doubles the core guidance for no new information.

Add one short example of the single allowed hook shape (a useSyncExternalStore wire to the engine) so the "entire allowed shape" is copy-paste concrete rather than described.

DimensionReasoningScore

Conciseness

The core rules are substantive and non-obvious team policy ("The engine package must not import React", the apply/skip list, the kebab-case value examples), but there is real padding: the rhetorical failure narrative ("no failing test, no benchmark regression, no noisy error to alert you. By the time someone notices, the regression is weeks deep and no bisect helps, because nothing was ever measurable") and a redundant "The short version" section restating the body. This matches anchor 3 ("mostly efficient but includes some unnecessary explanation or could be tightened"); it is not 2 because the material is not explaining concepts Claude already knows, and not 4 because the duplication and rhetoric exceed minor trimming.

3 / 5

Actionability

Concrete, executable guidance throughout: "A hook is acceptable in exactly two situations" with testable criteria, "reduce the hook to a three-line call site", "The engine package must not import React", a Fine/Never example pair, and worked testid values like "sidebar-right-inspect-node-properties". Mostly executable with minor gaps (no example of an acceptable use-* adapter), matching anchor 4; not 5 because no copy-paste example of the one allowed hook shape is shown, and not 3 because nothing is pseudocode or missing key details.

4 / 5

Workflow Clarity

The decision procedure is clear and ordered: check the two acceptable hook situations, otherwise "extract the logic out, test and benchmark it there, and reduce the hook to a three-line call site", plus structural enforcement (engine must not import React). Matches anchor 4; not 5 because the acceptance criteria are subjective ("short enough that no test could catch a bug the code couldn't already reveal at sight") with no concrete verification step for checking compliance, and not 3 because the sequence and decision points are explicit, not implicit.

4 / 5

Progressive Disclosure

Well-organized sections with the bulk of the testid detail correctly offloaded and clearly signaled: "The full reference — with the apply/skip table and worked examples — lives in docs/contributing/react.md", plus a one-level "See also code-ts" link. No bundle files exist, so this is scored on the body's structure alone; matches anchor 4. Not 5 because the body carries a long inline rationale and a duplicate summary section that could be trimmed, leaving the SKILL.md less of a lean overview; not 3 because structure is good and references are clearly signaled, not buried.

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 description: it states the skill's concrete code-shape rules in third person and gives an explicit, path-based "Use when" clause with natural trigger terms. Its only weakness is missing a few common React synonyms and file extensions in the trigger vocabulary.

DimensionReasoningScore

Specificity

Quotes: "React-specific code shape in the Grida editor", "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". It lists several specific, concrete conventions with minor gaps, matching anchor 4; it is not 3 (more than 1-2 actions named) nor 5 (coverage is convention-shaped and omits the testing workflow it alludes to).

4 / 5

Completeness

It explicitly answers what ("React-specific code shape… hooks only as thin edge wires", "one `data-testid` per significant component") and when with concrete trigger phrases ("Use when authoring React in `editor/grida-canvas-react/`, `editor/components/`, `editor/scaffolds/`, or `editor/app/*`"), matching anchor 5; anchor 4's caveat ("when could be more explicit") does not apply since the when clause names specific paths.

5 / 5

Trigger Term Quality

Quotes: "React", "hooks", "Grida editor", "`data-testid`", and the natural directory triggers "editor/grida-canvas-react/", "editor/components/", "editor/scaffolds/", "editor/app/*". Good keyword coverage with a few natural terms missing, matching anchor 4; not 5 because it lacks common variations like .tsx, JSX, or "React components".

4 / 5

Distinctiveness Conflict Risk

The description carves a clear niche — React conventions scoped to the Grida editor's specific directories — with directory-path triggers unlikely to fire for other skills, matching anchor 5; the sibling code-ts skill is referenced but the directory scoping keeps overlap minimal, so anchor 4's "minor overlap risk" is not the best fit.

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.

Validation — 15 / 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.