react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
Install with Tessl CLI
npx tessl i github:lchenrique/politron-ide --skill react-patternsOverall
score
61%
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
33%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 description identifies the domain (React) and lists topic areas but reads more like a table of contents than actionable guidance. It lacks concrete actions Claude would perform and completely omits when-to-use triggers, making it difficult for Claude to know when to select this skill over others.
Suggestions
Add a 'Use when...' clause with explicit triggers like 'Use when the user asks about React components, hooks like useState/useEffect, component optimization, or React TypeScript patterns'
Replace abstract categories with concrete actions: 'Refactor class components to functional components with hooks, optimize re-renders with memo/useMemo, implement custom hooks, add TypeScript types to React components'
Include more natural trigger terms users would say: 'functional components', 'useState', 'useEffect', 'React performance', 'component re-rendering'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React) and lists some areas (Hooks, composition, performance, TypeScript), but these are categories rather than concrete actions. Doesn't specify what actions Claude performs like 'refactor class components to hooks' or 'optimize re-renders'. | 2 / 3 |
Completeness | Only addresses 'what' at a high level (React patterns) but completely lacks any 'when' guidance. No 'Use when...' clause or equivalent trigger guidance exists. | 1 / 3 |
Trigger Term Quality | Includes relevant keywords like 'React', 'Hooks', 'TypeScript' that users might mention, but missing common variations like 'useState', 'useEffect', 'functional components', 'memo', 'useMemo', or 'React components'. | 2 / 3 |
Distinctiveness Conflict Risk | React-specific which helps distinguish from general coding skills, but could overlap with generic JavaScript/TypeScript skills or other frontend framework skills. The broad terms like 'best practices' and 'performance' are not distinctive. | 2 / 3 |
Total | 7 / 12 Passed |
Implementation
65%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill excels at token efficiency through excellent use of tables and concise formatting - it packs substantial React knowledge into a scannable reference. However, it reads more as a decision-making cheat sheet than actionable guidance, lacking executable code examples that would make patterns immediately applicable. The content would benefit from a few concrete implementations for the more complex patterns.
Suggestions
Add 2-3 executable code examples for key patterns (e.g., compound component implementation, custom hook extraction, error boundary setup)
Include a concrete useActionState or useOptimistic example since React 19 patterns are newer and less familiar
Consider linking to separate files for detailed implementations: [COMPOUND_COMPONENTS.md], [HOOKS_EXAMPLES.md]
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean and efficient use of tables to convey information. No unnecessary explanations of what React is or how components work - assumes Claude's competence throughout. | 3 / 3 |
Actionability | Provides clear guidance through tables and rules, but lacks executable code examples. The patterns are described rather than demonstrated with copy-paste ready implementations. | 2 / 3 |
Workflow Clarity | The optimization order section shows good sequencing, but most content is reference-style without clear workflows. For a principles/patterns skill this is acceptable, but lacks validation checkpoints for applying patterns. | 2 / 3 |
Progressive Disclosure | Well-organized with clear sections and tables, but everything is in one file. Could benefit from linking to detailed examples or implementation guides for complex patterns like compound components or error boundaries. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
91%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
allowed_tools_field | 'allowed-tools' contains unusual tool name(s) | Warning |
Total | 10 / 11 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.