CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-typescript-development

Develop, refactor, and architect production React applications using TypeScript and modern React 18 and 19 patterns. Covers functional components, strict typing, concurrent features (Suspense, transitions), hooks, state management, performance optimization, form actions, error boundaries, testing, and architecture conventions.

55

Quality

69%

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

Quality

Content

60%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 body is well structured, highly executable, and uses a properly signaled one-level-deep reference file, with real strengths in conventions (tsconfig, directory layout, React 18/19 differences, pitfalls). Its main weakness is token efficiency: most of the code examples restate React knowledge Claude already has, so the file could be cut roughly in half by moving boilerplate examples to the companion reference and trimming concept explanations.

Suggestions

Move full-length boilerplate examples (the ErrorBoundary class, the Vitest suites, the controlled-form implementation) into references/component-patterns.md, keeping one-line conventions or short representative snippets inline in SKILL.md.

Trim concept explanations Claude already knows (what useTransition/useDeferredValue/Suspense do, how React.memo works) down to the project-specific rule or convention, e.g. 'Mark expensive, non-urgent updates with startTransition' without the 30-line demo component.

Add feedback-loop guidance to the Verification section — for each check, one line on what to do when it fails (e.g., 'If tsc reports errors, fix them before proceeding; never disable strict flags to pass').

DimensionReasoningScore

Conciseness

The ~727-line body spends most of its budget on React/TypeScript knowledge Claude already has — full boilerplate for controlled forms, a class ErrorBoundary, useTransition/useDeferredValue usage, React.memo/useCallback examples, and a complete Vitest suite — matching anchor 2 ('noticeably verbose; several unnecessary explanations or padded sections'). It is above anchor 1 because genuinely convention-bearing content (directory layout, tsconfig flags, React 18 vs 19 ref handling, pitfalls) is interspersed rather than the whole file being concept explanation.

2 / 5

Actionability

The guidance is overwhelmingly executable: complete tsconfig JSON, copy-paste-ready Zustand/Jotai stores, forwardRef vs React 19 ref-prop components, and a concrete verification section (npx tsc --noEmit, npx eslint . --ext .ts,.tsx, npx vitest run, npm run build). It sits at anchor 4 rather than 5 because of minor gaps — the DataFetcher and withAuth examples contain '// fetching logic...' / '// submit data...' placeholders and reference undefined types (ComplexData, UserProfile, AppSettings).

4 / 5

Workflow Clarity

The 8 numbered steps form a coherent sequence (architecture → typing → state → concurrent APIs → forms → boundaries → performance → testing) and the Verification section supplies explicit checkpoint commands with expectations ('Must pass with 0 errors'), matching anchor 4 ('clear sequence with most checkpoints present; minor validation gaps'). It misses anchor 5 because there are no feedback loops for error recovery — the verification checks say what to run but not what to do when a check fails.

4 / 5

Progressive Disclosure

The body is well organized with clear section headers and points to a real, one-level-deep companion file — 'For deep-dive architectural blueprints (generics, compound components, polymorphic components, custom hooks, and event tables), see the companion guide in references/component-patterns.md' — and a second deep link into a named anchor (#5-context--reducer-architecture), which matches anchor 4's 'good structure; references mostly clear'. It stays below anchor 5 because substantial deep-dive-scale material (the full ErrorBoundary class, complete test suites, full form implementation) is inlined in SKILL.md rather than split out alongside the existing reference.

4 / 5

Total

14

/

20

Passed

Description

66%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 clearly communicates what the skill covers with good keyword density and a distinct React+TypeScript identity, but it omits any explicit 'Use when...' trigger guidance, which caps completeness and weakens discoverability. Adding trigger phrases and common synonyms (TSX, .tsx, frontend) would raise it to the top anchor range.

Suggestions

Add an explicit trigger clause, e.g. "Use when building, refactoring, or modernizing React or React Native web apps, or when the user mentions TSX files, React hooks, or React 18/19 migration."

Include natural synonyms and file extensions users actually say ("TSX", ".tsx", "frontend", "web app") to improve trigger-term coverage.

Sharpen the lead verbs from generic 'develop, refactor, architect' toward concrete outcomes (e.g., 'modernize class components to typed functional components, wire up Suspense and transitions, set up Vitest suites').

DimensionReasoningScore

Specificity

The description names three concrete verbs ("Develop, refactor, and architect production React applications") and enumerates a broad capability list ("functional components, strict typing, concurrent features (Suspense, transitions), hooks, state management, performance optimization, form actions, error boundaries, testing"), matching anchor 4's 'several specific actions; minor gaps'. It falls short of anchor 5 because the lead verbs are generic for a development skill and the coverage list is topic-level rather than a set of distinct concrete actions like 'extract text, fill forms, merge documents'.

4 / 5

Completeness

The 'what' is clear and detailed (develop/refactor/architect React+TS apps with enumerated coverage), but there is no 'Use when...' clause or any equivalent explicit trigger guidance, so per the judging guideline completeness is capped at 3. This matches anchor 3: 'Has a clear what but when is missing or only weakly implied' — here 'when' is entirely absent, not merely weak.

3 / 5

Trigger Term Quality

Strong natural keywords users would say: "React", "TypeScript", "React 18 and 19", "hooks", "state management", "performance optimization", "error boundaries", "testing". This matches anchor 4 ('good keyword coverage; a few natural terms missing') — common variations like "TSX", ".tsx", "frontend", "UI", or "web app" are absent, keeping it below anchor 5's comprehensive synonym/extension coverage.

4 / 5

Distinctiveness Conflict Risk

The React + TypeScript niche is well defined with version-specific triggers ("React 18 and 19", "concurrent features", "Suspense"), matching anchor 4 ('mostly distinct; minor overlap risk'). It stays below anchor 5 because broad listed topics like "testing", "performance optimization", and "state management" could overlap with general testing, performance, or TypeScript skills that lack React-specific triggers.

4 / 5

Total

15

/

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

skill_md_line_count

SKILL.md is long (727 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

administrakt0r/pro-skills-repo-administraktor

Path

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