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/*`.

69

Quality

85%

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

SKILL.md
Quality
Evals
Security

Quality

Content

85%

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

A well-structured, actionable conventions skill with a clear decision procedure and clean one-level-deep deferral to the canonical reference. Its single weakness is conciseness: the motivational prose carries rhetorical padding that could be trimmed without losing the rule.

Suggestions

Tighten the motivation in 'Hooks live at the edge': collapse the rhetorical negation-lists ('not X, not Y, not Z') into a single sentence stating the prevention-over-discipline principle.

Consider moving the extended rationale ('Features you tuned will get silently dropped... no bisect helps, because nothing was ever measurable') into docs/contributing/react.md, keeping only the load-bearing rule and the two-situation test inline.

The 'short version' section usefully duplicates the rules for scanning; ensure it stays a true summary and does not re-expand into prose as the skill grows.

DimensionReasoningScore

Conciseness

The guidance is accurate and domain-specific (not basic concepts Claude already knows), but the motivational prose is padded with rhetorical negation-lists ('not test your hooks better, not be more careful with deps, not add a renderHook suite'; 'discipline fails at the third layer of composition; prevention does not') that could be tightened. It is above level 1 because it does not explain generic concepts, but below level 3 because not every token earns its place.

2 / 3

Actionability

Concrete, specific rules with named APIs (useSyncExternalStore, useContext), a two-situation decision test, fine/never example pairs, and copy-paste-ready data-testid values (sidebar-right-inspect-node-properties). Per the code-vs-instruction scoring note, absence of code blocks is not penalized when the guidance is this actionable, placing it above the pseudocode/incomplete level 2.

3 / 3

Workflow Clarity

The decision procedure is explicit and sequenced: 'A hook is acceptable in exactly two situations: 1... 2... If a hook fails both — extract the logic out... and reduce the hook to a three-line call site.' No destructive/batch/XML operations are involved, so the missing-validation cap does not apply, keeping it above level 2.

3 / 3

Progressive Disclosure

Sections are well-organized, the load-bearing rule is inline, and the full reference is deferred exactly one level to docs/contributing/react.md with explicit signaling ('The rule above is the load-bearing part'), plus a sibling-skill cross-link. References are clearly signaled and one level deep, so it is above the level 2 'references present but not clearly signaled' anchor.

3 / 3

Total

11

/

12

Passed

Description

85%

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 specific, complete, and highly distinctive description that names concrete conventions and gives an explicit 'Use when' clause. Its only weakness is trigger-term coverage, which leans on file paths rather than natural-language variations a user would say.

Suggestions

Add natural-language trigger terms a user would actually say (e.g. 'React components', 'React hooks', 'JSX in the editor') alongside the directory paths so the skill fires from conversational cues, not just file locations.

Consider naming the conventions as actions in the description (e.g. 'Keep load-bearing logic in classes, confine hooks to thin edge wires, place one data-testid per component root') to make the capability list more action-shaped.

DimensionReasoningScore

Specificity

Names multiple concrete rules — 'load-bearing logic lives in classes and namespaces, hooks only as thin edge wires' and 'one per significant component, not scattered' — rather than vague actions. It is comprehensive across both the hooks and data-testid conventions, so it is above the 'names domain and some actions' level 2.

3 / 3

Completeness

It explicitly states both what it governs (React code shape: hooks barred, logic in classes/namespaces, data-testid discipline) and when to use it ('Use when authoring React in ...'). The explicit 'Use when' clause places it above level 2, where 'when' is only implied.

3 / 3

Trigger Term Quality

'Use when authoring React in ...' supplies the natural keyword 'React', but the trigger surface is dominated by file paths (editor/grida-canvas-react/, editor/components/) rather than the natural-language variations a user would say. It is above level 1 because 'React' is a genuine natural term, but below level 3 which expects good coverage of natural terms.

2 / 3

Distinctiveness Conflict Risk

Scoped to React-in-Grida-editor conventions with directory-specific triggers, giving it a clear niche unlikely to fire for unrelated skills. It is more distinct than the level 2 'somewhat specific but could overlap' anchor.

3 / 3

Total

11

/

12

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.