cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
57
37%
Does it follow best practices?
Impact
96%
1.31xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/cc-skill-frontend-patterns/SKILL.mdQuality
Discovery
32%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 the technology domain (React/Next.js frontend) but reads more like a topic list than an actionable skill description. It lacks concrete actions (verbs), has no 'Use when...' clause, and uses broad category terms rather than specific capabilities. It would benefit significantly from specifying what actions the skill performs and when Claude should select it.
Suggestions
Add a 'Use when...' clause with explicit triggers, e.g., 'Use when the user asks about React components, Next.js routing, frontend performance, or building UI interfaces.'
Replace abstract category names with concrete actions, e.g., 'Creates React components, configures Next.js routing and SSR, implements state management with hooks/Redux, and optimizes frontend performance (code splitting, lazy loading).'
Include more natural trigger terms users would say, such as 'components', 'hooks', 'SSR', 'client-side rendering', 'CSS', 'Tailwind', 'responsive design', '.tsx files'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend development) and lists some areas (React, Next.js, state management, performance optimization, UI best practices), but these are categories rather than concrete actions. No specific verbs describing what the skill does (e.g., 'creates components', 'optimizes bundle size'). | 2 / 3 |
Completeness | Describes the 'what' at a high level (frontend development patterns) but completely lacks any 'when' clause or explicit trigger guidance. There is no 'Use when...' or equivalent, which per the rubric should cap completeness at 2, and the 'what' itself is weak enough to warrant a 1. | 1 / 3 |
Trigger Term Quality | Includes relevant keywords like 'React', 'Next.js', 'state management', 'performance optimization', and 'UI' that users might naturally mention. However, it misses common variations and related terms like 'components', 'hooks', 'CSS', 'rendering', 'TypeScript', 'Redux', 'Tailwind', etc. | 2 / 3 |
Distinctiveness Conflict Risk | Mentioning React and Next.js specifically provides some distinctiveness, but 'frontend development patterns' and 'UI best practices' are broad enough to overlap with general coding skills, CSS skills, or other web development skills. | 2 / 3 |
Total | 7 / 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 essentially a React patterns encyclopedia that Claude already knows. While the code examples are high-quality and executable, the content is far too verbose for a skill file — it teaches standard React concepts (composition, context, memoization, error boundaries) that Claude is thoroughly familiar with. The massive monolithic structure with no progressive disclosure makes it an inefficient use of context window tokens.
Suggestions
Remove or drastically reduce standard React patterns (composition, compound components, render props, ErrorBoundary, useDebounce) that Claude already knows — focus only on project-specific conventions or non-obvious decisions.
Split into a concise SKILL.md overview (~30-50 lines) with links to separate reference files for each category (hooks.md, state-patterns.md, performance.md, accessibility.md).
Add project-specific guidance: which patterns are preferred in THIS codebase, naming conventions, file structure expectations, and decision criteria for choosing between patterns.
Add workflow guidance for common tasks like 'adding a new feature component' with step-by-step sequences and validation checkpoints.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | This is extremely verbose at ~500+ lines, essentially a textbook of React patterns Claude already knows well. Composition, compound components, render props, useDebounce, ErrorBoundary, Context+Reducer — these are all standard React patterns that don't need to be taught to Claude. Almost every token here is explaining things Claude already understands. | 1 / 3 |
Actionability | The code examples are fully executable, typed TypeScript with usage examples. Every pattern includes complete, copy-paste ready implementations with proper types and real-world usage demonstrations. | 3 / 3 |
Workflow Clarity | The content is organized by pattern category with clear sections, but there's no workflow sequencing — it's a reference catalog rather than a guided process. There's no guidance on when to choose one pattern over another or how to combine them in a real project, and no validation steps. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of code examples with no references to external files. At this length, content should be split into separate files (e.g., hooks.md, state-management.md, performance.md, accessibility.md) with the SKILL.md serving as a concise overview with links. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (638 lines); consider splitting into references/ and linking | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
- Repository
- sickn33/antigravity-awesome-skills
- Commit
6a07b83
- 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.