cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
48
37%
Does it follow best practices?
Impact
Pending
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 category-level terms rather than specific capabilities. The description would benefit significantly from specifying concrete actions and explicit trigger conditions.
Suggestions
Add a 'Use when...' clause with explicit triggers, e.g., 'Use when the user asks about React components, Next.js routing, state management with Redux/Zustand, or frontend performance optimization.'
Replace abstract categories with concrete actions, e.g., 'Creates React components, implements Next.js routing and SSR, configures state management with Redux or Zustand, optimizes bundle size and rendering performance.'
Include more natural trigger terms users would say, such as 'hooks', 'components', 'SSR', 'server-side rendering', 'CSS', 'responsive', 'TypeScript', '.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 '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 provides some distinctiveness, 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
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 cookbook that restates well-known, widely-documented patterns Claude already knows. While the code examples are high-quality and executable, the massive token cost provides almost no novel information. The content would benefit enormously from being condensed to project-specific conventions and decisions, with patterns split into referenced sub-files.
Suggestions
Reduce to project-specific conventions and decisions (e.g., 'We use compound components for X, context+reducer for Y') rather than teaching standard React patterns Claude already knows.
Split into referenced sub-files (e.g., COMPONENTS.md, HOOKS.md, STATE.md, PERFORMANCE.md, ACCESSIBILITY.md) with a concise overview in the main skill file.
Add a decision-making workflow: when to use which pattern, how to evaluate tradeoffs, and what the project's preferred approaches are.
Remove patterns that are standard React knowledge (ErrorBoundary, React.memo, lazy/Suspense) unless there are project-specific conventions around them.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | This is extremely verbose at ~500+ lines, covering many well-known React patterns (composition, compound components, render props, hooks, context+reducer, memoization, error boundaries, animations, accessibility) that Claude already knows thoroughly. Almost none of this content adds knowledge beyond standard React documentation. | 1 / 3 |
Actionability | The code examples are fully executable, complete TypeScript with proper types, usage examples, and copy-paste ready patterns. Each pattern includes both implementation and usage demonstration. | 3 / 3 |
Workflow Clarity | The patterns are presented as isolated examples without clear guidance on when to choose one over another, how they compose together, or any decision-making workflow. There's no sequencing or validation steps for applying these patterns in a real project. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of code examples with no references to external files. The content covers at least 8 major topics that could each be their own reference file, all inlined into a single massive document with no navigation structure beyond flat headings. | 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 (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
93c57b2
- 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.