cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
34
31%
Does it follow best practices?
Impact
—
No eval scenarios have been run
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. The mention of specific frameworks helps with distinctiveness but isn't enough to compensate for the other weaknesses.
Suggestions
Add a 'Use when...' clause with explicit triggers, e.g., 'Use when the user asks about React components, Next.js routing, hooks, SSR, or frontend performance.'
Replace category nouns with concrete actions, e.g., 'Creates React components, implements Next.js routing and SSR, optimizes bundle size and rendering performance, manages state with hooks and context.'
Include more natural trigger terms users would say, such as 'component', 'hooks', 'CSS', 'styling', 'TypeScript', 'SSR', 'server-side rendering', 'responsive', '.tsx', '.jsx'.
| 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 like 'create components', 'optimize bundle size', or 'implement routing'. | 2 / 3 |
Completeness | Describes the 'what' at a high level (frontend development patterns) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. Per rubric guidelines, missing 'Use when...' caps completeness at 2, and the 'what' is also weak, so this scores a 1. | 1 / 3 |
Trigger Term Quality | Includes some relevant keywords users might say like 'React', 'Next.js', 'state management', and 'performance optimization', but misses common variations like 'component', 'hooks', 'CSS', 'styling', 'TypeScript', 'SSR', 'server-side rendering', or 'responsive design'. | 2 / 3 |
Distinctiveness Conflict Risk | Mentioning React and Next.js specifically helps narrow the scope, but 'frontend development patterns' and 'UI best practices' are broad enough to overlap with general web development, CSS/styling, or JavaScript skills. | 2 / 3 |
Total | 7 / 12 Passed |
Implementation
29%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 cheat sheet that teaches Claude things it already knows thoroughly — composition, context, memoization, error boundaries, and Framer Motion are all standard React knowledge. It lacks any project-specific conventions, decision-making guidance, or workflow structure. The code quality is high but the content provides almost zero incremental value over Claude's existing knowledge.
Suggestions
Remove generic React patterns Claude already knows and focus only on project-specific conventions, preferred libraries, or non-obvious decisions (e.g., 'We use Zustand instead of Context for global state because...').
Add a decision workflow: when to use which pattern, with clear criteria (e.g., 'Use Context+Reducer for state shared across 3+ components; use local state otherwise').
Split into a concise overview SKILL.md (~30 lines) with references to separate files for each pattern category (hooks.md, state-management.md, accessibility.md).
Add project-specific constraints and validation steps, such as required accessibility checks, performance budgets, or testing requirements for new components.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | This is extremely verbose at ~500+ lines, covering many patterns Claude already knows well (React composition, context/reducer, useCallback, error boundaries, etc.). Almost every pattern here is standard React knowledge that doesn't need to be taught. The skill reads like a React tutorial rather than project-specific guidance. | 1 / 3 |
Actionability | The code examples are fully executable, well-typed TypeScript with usage examples shown for each pattern. Every pattern includes complete, copy-paste ready implementations with proper imports and type definitions. | 3 / 3 |
Workflow Clarity | There is no workflow or sequencing at all — it's a reference catalog of patterns with no guidance on when to use which pattern, no decision tree, and no validation steps. The closing line 'Choose patterns that fit your project complexity' is vague and unhelpful. | 1 / 3 |
Progressive Disclosure | This is a monolithic wall of code examples with no references to external files and no layered structure. All content is inline with no separation between quick-reference overview and detailed implementations. Sections like animation, accessibility, and form handling could easily be separate files. | 1 / 3 |
Total | 6 / 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 (643 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
7ebecf2
- 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.