CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-patterns

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

Quality

80%

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 ./.kiro/skills/react-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

75%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 dense, well-structured patterns reference: lean good/bad code pairs, decision trees and matrices, and mostly executable examples covering the common React 18/19 cases. The main improvements are moving long-form examples and the full forms/RSC walkthroughs into reference files, completing the fragmentary composition recipes, and trimming concept-restating commentary.

Suggestions

Move the Examples section and the full form-action/RSC walkthroughs into a references/ file (e.g. references/examples.md) and keep one short representative snippet inline, reducing SKILL.md toward an overview.

Make the composition recipes concrete: give Tabs and compound-component examples minimal working definitions (or note explicitly that they are pattern shapes, not runnable code).

Trim concept-restating commentary ("React has no inheritance model for components", the Routing section) to one actionable line each.

DimensionReasoningScore

Conciseness

The body is lean — good/bad code pairs with one-line rationales, decision trees and matrices instead of prose, no library tutorials or installation padding. Minor over-explanation remains: "React has no inheritance model for components", the Routing section's "follow the router's documentation" filler, and some Core Principles commentary could be trimmed.

4 / 5

Actionability

Mostly executable guidance: near-complete code for useDebounce/SearchBox, the useActionState form, the RSC page, and useOptimistic, plus concrete library names and thresholds ("~50 visible items", "@tanstack/react-virtual"). The composition recipes (Tabs, Layout, DataLoader) are fragments referencing undefined components — pattern-shape illustrations rather than copy-paste-ready code — which keeps it below the anchor-5 bar.

4 / 5

Workflow Clarity

A clear "When to Activate" entry list plus sequenced decision structures (state-location decision tree, data-fetching matrix) give an unambiguous decision path, and no validation checkpoints are needed since the skill involves no destructive or batch operations. It falls short of anchor 5 because the decision paths lack any feedback/checkpoint structure (e.g. how to verify a memoization or boundary placement actually helped).

4 / 5

Progressive Disclosure

Well-sectioned overview with clearly signaled one-level links (rules/react/, sibling skills, agents, commands) and consistent cross-linking. No references/ bundle exists, so all example code and the full RSC/forms guidance are inlined in a ~340-line SKILL.md, and the most-referenced ruleset ("../../rules/react/hooks.md") lives outside the bundle — minor organization gaps versus the anchor-5 clear-split structure.

4 / 5

Total

16

/

20

Passed

Description

80%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: specific, comprehensive on the "what", with an explicit use-when clause and a distinct React niche. Main gaps are missing common trigger synonyms (JSX/TSX, Next.js, RSC) and a when-clause that undersells the full breadth of activation scenarios the body itself enumerates.

Suggestions

Broaden the use-when clause to match the body's activation list, e.g. "Use when writing or reviewing React components, hooks, or JSX/TSX files, designing state or component composition, or working with Server Components (Next.js App Router/RSC)."

Add natural trigger synonyms such as "JSX", "TSX", and "Next.js" so users phrasing a request in those terms still match this skill over siblings.

DimensionReasoningScore

Specificity

The description enumerates seven concrete, specific capability areas — "hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition" — giving comprehensive coverage of the React-patterns domain with no real gaps.

5 / 5

Completeness

Both a clear "what" (the enumerated pattern list) and an explicit "when" ("Use when writing or reviewing React components") are present; the when-clause is a single trigger, narrower than the breadth of the what, so it does not reach the anchor-5 bar of multiple concrete trigger phrases.

4 / 5

Trigger Term Quality

Natural terms like "React", "hooks", "components", "forms", "data fetching", "state management", and "reviewing React components" are present, but common variations users actually say — "JSX/TSX", "Next.js", "RSC", ".tsx" — are missing even though the body covers them.

4 / 5

Distinctiveness Conflict Risk

"React 18/19 patterns" carves a clear niche with a distinct trigger, but the skill cross-references closely related siblings (react-performance, accessibility, react-testing) that share "React component" triggers, creating minor overlap risk.

4 / 5

Total

17

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

relative_links

Relative link issues: 8 suspicious

Warning

Total

14

/

16

Passed

Repository

affaan-m/ECC

Path

.kiro/skills/react-patterns/SKILL.md

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.