frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
Install with Tessl CLI
npx tessl i github:haniakrim21/everything-claude-code --skill frontend-patternsOverall
score
55%
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.
The description identifies a clear technical domain with recognizable framework names but reads more like a topic list than an actionable skill description. It lacks concrete actions (what Claude will actually do) and completely omits trigger guidance (when to use it), which significantly limits its effectiveness for skill selection among many options.
Suggestions
Add a 'Use when...' clause with explicit triggers like 'Use when the user asks about React components, Next.js routing, frontend performance, or building UI interfaces'
Replace category labels with concrete actions: instead of 'state management', say 'implement Redux/Zustand stores, manage component state with hooks'
Include common user terms and file extensions: 'JSX', 'TSX', 'components', 'hooks', 'CSS modules', '.jsx', '.tsx'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend development) and lists several areas (React, Next.js, state management, performance optimization, UI best practices), but these are categories rather than concrete actions like 'build components' or 'optimize bundle size'. | 2 / 3 |
Completeness | Describes what domain it covers but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. The 'when' is entirely missing. | 1 / 3 |
Trigger Term Quality | Includes relevant keywords like 'React', 'Next.js', 'state management', 'performance optimization' that users might mention, but missing common variations like 'components', 'hooks', 'Redux', 'CSS', 'responsive design', or file extensions like '.jsx', '.tsx'. | 2 / 3 |
Distinctiveness Conflict Risk | React and Next.js provide some specificity, but 'frontend development patterns' and 'UI best practices' are broad enough to potentially overlap with general web development, CSS, or JavaScript skills. | 2 / 3 |
Total | 7 / 12 Passed |
Implementation
57%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides high-quality, actionable React/TypeScript code examples covering a broad range of frontend patterns. Its main strength is the executable, well-typed code throughout. However, it suffers from being overly comprehensive in a single file without progressive disclosure, and includes some patterns that Claude already knows well, reducing token efficiency.
Suggestions
Split content into separate files: SKILL.md as overview with links to HOOKS.md, STATE.md, PERFORMANCE.md, ACCESSIBILITY.md for detailed patterns
Remove basic patterns Claude already knows (simple useState, basic React.memo usage) and focus on project-specific conventions or advanced patterns
Add a quick reference section at the top summarizing when to use each pattern category, with links to detailed sections
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some patterns Claude already knows well (basic useState, useEffect, React.memo). The examples are clean but the sheer volume (~500 lines) could be trimmed by removing more basic patterns and focusing on project-specific conventions. | 2 / 3 |
Actionability | Excellent executable TypeScript/React code throughout. Every pattern includes complete, copy-paste ready implementations with usage examples. The code is properly typed and follows modern React conventions. | 3 / 3 |
Workflow Clarity | This is a pattern reference rather than a workflow guide, so multi-step processes aren't the focus. However, for patterns that do involve sequences (form validation, error boundaries), the steps are implicit rather than explicitly numbered with validation checkpoints. | 2 / 3 |
Progressive Disclosure | The content is a monolithic wall of code examples with no references to external files for advanced topics. All patterns are inline regardless of complexity. No navigation structure or links to separate reference files for detailed API documentation or advanced use cases. | 1 / 3 |
Total | 8 / 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 (632 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 |
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | 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.