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.

68

Quality

83%

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 lean, well-organized React/Next.js reference that assumes Claude's competence and uses tables and decision flows efficiently. The main gap is actionability: it offers named tools and pseudocode but lacks executable copy-paste code examples.

Suggestions

Add at least one fully executable code example (e.g., a minimal compound-component or custom-hook implementation) so the actionability dimension can reach 3.

Provide concrete signatures/snippets for the recommended tools (e.g., a Zustand store skeleton, a React Query onMutate optimistic-update snippet) instead of only naming them.

Reconcile the progressive_disclosure frontmatter (level1/level2 tokens enabled) with the absence of any bundle files, or add referenced files to match the declared disclosure levels.

DimensionReasoningScore

Conciseness

The body is dense and table-driven, assumes Claude already knows React basics, and never pads with explanations of what useState or a component is; every section earns its place.

3 / 3

Actionability

Guidance is concrete — named tools (Zustand, React Query, nuqs, @tanstack/react-virtual), a directory tree, and a decision flow — but the "code" is decision-flow pseudocode and structure trees rather than fully executable, copy-paste JSX or hook implementations, so it sits at the "some concrete guidance but incomplete" anchor.

2 / 3

Workflow Clarity

As a reference skill with no destructive batch operations, it provides a clear decision-flow sequence and an explicit Verification checklist that functions as a checkpoint loop, satisfying the clear-sequence-with-checklist anchor.

3 / 3

Progressive Disclosure

No bundle files exist, so the skill is a single well-organized markdown file with clear section headers and tables; per the simple-skills scoring note, a single well-organized file with no need for external references can score 3.

3 / 3

Total

11

/

12

Passed

Description

82%

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, well-scoped frontend reference description with strong natural trigger terms and explicit out-of-scope boundaries. Its main weakness is the absence of an explicit "Use when..." trigger clause inside the description field, which caps completeness at 2.

Suggestions

Add an explicit "Use when..." trigger clause directly inside the description field (e.g., "Use when designing React/Next.js components, choosing state management, or structuring a frontend project") so completeness can score 3 without relying on the separate when_to_use field.

Soften the technical "spawned via Agent(general-purpose) with frontend instructions" phrasing into more natural user-facing trigger language.

Keep the explicit NOT-for list; it is the strongest part of the description for distinctiveness.

DimensionReasoningScore

Specificity

Enumerates multiple concrete capabilities — "component design patterns, state management strategies, and project structure reference" — matching the anchor that lists several specific concrete actions rather than a single vague domain.

3 / 3

Completeness

The description clearly answers "what" (patterns, state management, structure) but contains no explicit "Use when..." trigger clause within the description field itself, capping completeness at 2 per the rubric guideline; the when-guidance lives in a separate when_to_use field.

2 / 3

Trigger Term Quality

Natural terms a frontend user would say appear throughout — "React/Next.js", "component design patterns", "state management", "frontend" — with good coverage; the "Agent(general-purpose)" phrasing is slightly technical but does not undermine the natural keyword coverage.

3 / 3

Distinctiveness Conflict Risk

Clear niche (React/Next.js frontend) reinforced by an explicit out-of-scope list — "NOT for: backend API design, database modeling, DevOps, mobile apps" — making it unlikely to trigger for the wrong skill.

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

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.