CtrlK
BlogDocsLog inGet started
Tessl Logo

moai-ref-react-patterns

React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design, database modeling, DevOps, mobile apps.

65

Quality

79%

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

Quality

Content

71%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.

The content is a lean, highly actionable reference with concrete tooling decisions and a verification checklist, scoring well on conciseness, actionability, and workflow clarity. Its main weakness is progressive disclosure: everything is inlined into one file with no bundle references.

Suggestions

Split large reference tables (state management, performance, error handling) into one-level-deep reference files under references/ and link to them from the body to improve progressive disclosure.

Add one or two short, copy-paste-ready component code examples (e.g., a compound Select or a headless useCombobox hook) to lift actionability from mostly-executable to fully copy-paste ready.

Trim the 'Rationale' column where it merely restates the tool choice, or merge it into the tool cell, to remove residual redundancy.

DimensionReasoningScore

Conciseness

The body is a dense, table-driven reference that assumes Claude's React knowledge and avoids padded explanations, with only minor trimmable redundancy such as the 'Rationale' column restating the tool choice.

4 / 5

Actionability

Provides concrete, executable guidance (specific libraries like Zustand/React Query/nuqs, a decision flow, a directory tree, HTTP-status handling, naming conventions), though it leans on tabular direction rather than full copy-paste component code examples.

4 / 5

Workflow Clarity

As a reference/catalog skill it offers a clear selection decision flow and an explicit Verification checklist that acts as a feedback loop, but it is not a multi-step sequenced workflow with intermediate validation checkpoints, so it stops short of 5.

4 / 5

Progressive Disclosure

The ~165-line body is well-sectioned but monolithic: no references/scripts/assets bundle files exist and no one-level-deep external file references are used, so content that could be split (state management, accessibility, error handling) is inlined rather than progressively disclosed.

3 / 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.

The description is specific, well-triggered, and clearly bounded, with both an explicit what and a when (via when_to_use) and strong negative-boundary guidance. Its only weakness is that the action areas are categorical rather than enumerating individual pattern names.

DimensionReasoningScore

Specificity

Names the React/Next.js domain plus three concrete action areas ('component design patterns, state management strategies, and project structure'), listing several specific capabilities with only minor gaps in coverage.

4 / 5

Completeness

Clearly states what the skill does (patterns/strategies/structure reference) and provides an explicit 'Use for...' trigger clause in when_to_use, plus concrete 'NOT for' boundaries, satisfying both what and when with concrete trigger phrases.

5 / 5

Trigger Term Quality

Includes natural terms users would say ('React', 'Next.js', 'component', 'state management', 'frontend') plus the when_to_use additions ('hooks', 'component composition'), with good coverage though a few synonyms/extensions like '.tsx' or 'JSX' are missing.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js frontend-patterns niche is clearly bounded by the explicit 'NOT for: backend API design, database modeling, DevOps, mobile apps' clause, giving a distinct trigger profile with minimal conflict risk.

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

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository
modu-ai/moai-adk
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.