CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-nextjs-development

React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

Quality

70%

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 ./skills/react-nextjs-development/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, token-efficient orchestration workflow with a clear phase sequence, specific technology choices, and a quality-gates checklist. Its main weakness is actionability: steps are high-level pointers to other skills with no executable commands, code, or inline validation checkpoints.

Suggestions

Add at least one concrete executable artifact per phase, e.g. the actual scaffold command ("npx create-next-app@latest --typescript --tailwind --app") instead of only "Scaffold project structure".

Insert inline validation checkpoints within phases rather than only a final Quality Gates section (e.g. after setup: "Run `npm run build` before proceeding to Phase 2"), with a fix-and-retry loop.

Reduce redundancy by merging each phase's 'Skills to Invoke' and 'Copy-Paste Prompts' sections, since the prompts restate the same skill invocations.

DimensionReasoningScore

Conciseness

The body is mostly terse lists with no re-explanation of concepts Claude already knows; every phase follows a compact skills/actions/prompts structure. Minor redundancy (copy-paste prompts restate the 'Skills to Invoke' lists, and 'When to Use This Workflow' repeats the description) plus time-sensitive version pins ('Next.js 14+', 'Tailwind CSS v4', 'React 18+') keep it below a 5.

4 / 5

Actionability

There is some concrete guidance — literal copy-paste prompts ("Use @frontend-developer to create forms with React Hook Form and Zod") and a specific technology table (Zustand, Vitest, Playwright) — but the action steps are high-level hints ("Create API client", "Set up Tailwind CSS") with no executable code or commands, leaving key details deferred to sub-skills. This fits 'some concrete guidance but incomplete' better than the mostly-executable anchor 4.

3 / 5

Workflow Clarity

The 8 phases (setup → architecture → styling → data fetching → routing → forms → testing → deployment) are clearly sequenced, and the Quality Gates checklist (TypeScript compiles, tests passing, WCAG 2.1) provides validation criteria. It falls short of anchor 5 because there are no inline per-phase validation checkpoints or error-recovery feedback loops, though it is well above the gaps-only anchor 3.

4 / 5

Progressive Disclosure

Sections are well organized, and as an orchestration workflow the detail lives one level away in clearly signaled per-phase sub-skills ("nextjs-app-router-patterns", "typescript-pro"); no bundle files exist and no bulky reference material is inlined that clearly belongs in a separate file. It is not a 5 because everything sits in the single SKILL.md with no actual referenced files in the bundle.

4 / 5

Total

15

/

20

Passed

Description

61%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 clearly scoped, technology-specific description with strong natural keywords, but it reads as a stack inventory rather than a capability statement: no explicit action verbs and no 'Use when...' trigger clause. Adding concrete actions and trigger guidance would raise both specificity and completeness.

Suggestions

Add an explicit trigger clause, e.g., "Use when building React or Next.js 14+ apps, setting up App Router, Server Components, TypeScript, or Tailwind CSS styling."

Replace the generic "application development" phrasing with concrete action verbs such as "Builds, scaffolds, and deploys React/Next.js 14+ applications...".

Drop the buzzword phrase "modern frontend patterns" in favor of naming the specific patterns covered (data fetching, forms, testing, deployment).

DimensionReasoningScore

Specificity

The description enumerates concrete capability areas ("App Router, Server Components, TypeScript, Tailwind CSS") but the only action stated is the generic "application development" with no specific action verbs, and "modern frontend patterns" is buzzword padding. It is above anchor 2 (the sub-technology enumeration goes beyond a bare domain name) but below anchor 4 (no list of several specific actions).

3 / 5

Completeness

It clearly answers 'what' (React/Next.js 14+ application development with the named stack) but contains no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 3 per the judging guidelines. It is not a 2 because the 'what' is specific and well-scoped, not vague.

3 / 5

Trigger Term Quality

"React", "Next.js 14+", "App Router", "Server Components", "TypeScript", "Tailwind CSS", and "frontend" are natural terms users would say when they need this skill. A few common variations (e.g., "web app", "SSR", "client components") are missing, matching the 'good keyword coverage; a few natural terms missing' anchor rather than comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

"React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS" carves a clear niche with mostly distinct triggers. There is minor overlap risk with closely related generic React, TypeScript, or frontend skills, keeping it below a 5.

4 / 5

Total

14

/

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

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

skills/react-nextjs-development/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.