react-patterns
Comprehensive React 19 patterns expert covering Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and modern TypeScript development. Proactively use for any React development, component architecture, state management, performance optimization, or when implementing React 19's latest features.
Install with Tessl CLI
npx tessl i github:giuseppe-trisciuoglio/developer-kit --skill react-patternsOverall
score
67%
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
92%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that clearly articulates specific React 19 capabilities and includes explicit trigger guidance. The description effectively lists concrete features and provides clear 'when to use' guidance. The main weakness is the broad scope which could potentially conflict with other frontend or general development skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete features and actions: Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and TypeScript development. Also mentions specific use cases like component architecture, state management, and performance optimization. | 3 / 3 |
Completeness | Clearly answers both what (comprehensive React 19 patterns covering specific features) and when ('Proactively use for any React development, component architecture, state management, performance optimization, or when implementing React 19's latest features'). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'React', 'React 19', 'Server Components', 'state management', 'performance optimization', 'component architecture', plus specific hook names that developers would mention when seeking help. | 3 / 3 |
Distinctiveness Conflict Risk | While React 19-specific features are distinctive, the broad scope ('any React development', 'state management', 'performance optimization') could overlap with general JavaScript/TypeScript skills or other frontend framework skills. The React 19 specificity helps but doesn't fully eliminate conflict risk. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is highly actionable with excellent executable code examples covering React 19 features, but suffers from severe verbosity and poor organization. It explains many basic React concepts Claude already knows and includes extensive React 18 content that dilutes the React 19 focus. The monolithic structure makes it difficult to navigate and consumes excessive context window space.
Suggestions
Remove basic React patterns (useState, useEffect, controlled components, conditional rendering, lists/keys) that Claude already knows - focus only on React 19-specific features
Split into multiple files: SKILL.md as overview, separate files for Server Components, Actions, React Compiler, and Migration Guide
Add decision workflows: 'When to use Server vs Client Components', 'When to use useOptimistic vs manual state'
Add validation checkpoints to the migration guide: 'Verify Server Components work before adding Client Components', 'Test optimistic updates with network throttling'
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~1500+ lines. Explains basic React concepts Claude already knows (useState, useEffect, controlled components, conditional rendering). Includes extensive coverage of React 18 patterns that aren't React 19-specific, padding the skill with unnecessary foundational content. | 1 / 3 |
Actionability | Provides fully executable TypeScript code examples throughout. All code snippets are copy-paste ready with proper imports, type annotations, and complete implementations. Examples cover real-world scenarios like forms, data fetching, and component composition. | 3 / 3 |
Workflow Clarity | Migration guide provides some sequencing, but lacks explicit validation checkpoints. No feedback loops for error recovery when adopting new features. The 'When to Use' section lists scenarios but doesn't provide decision workflows for choosing between approaches. | 2 / 3 |
Progressive Disclosure | Monolithic wall of text with everything inline. No references to external files for detailed content. API reference, migration guides, and testing patterns could all be separate files. The skill tries to be comprehensive in one document rather than providing an overview with links to detailed materials. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
69%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (1416 lines); consider splitting into references/ and linking | Warning |
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
allowed_tools_field | 'allowed-tools' contains unusual tool name(s) | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 11 / 16 Passed | |
- 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.