cc-skill-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:sickn33/antigravity-awesome-skills --skill cc-skill-frontend-patterns62
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/skillEvaluation — 96%
↑ 1.31xAgent success when using this skill
Validation for skill structure
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 a clear technology stack (React, Next.js) but relies on category labels rather than concrete actions. It completely lacks a 'Use when...' clause, making it difficult for Claude to know when to select this skill. The description would benefit from specific actions and explicit trigger conditions.
Suggestions
Add a 'Use when...' clause with explicit triggers like 'Use when building React components, implementing Next.js routing, managing application state, or optimizing frontend performance'
Replace abstract terms like 'patterns' and 'best practices' with concrete actions such as 'Build React components, implement server-side rendering, configure state management with Redux/Zustand, optimize bundle size'
Include more natural trigger terms users would say: 'hooks', 'components', 'SSR', 'hydration', 'Redux', 'Zustand', '.jsx', '.tsx', 'CSS-in-JS'
| 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 lacks any explicit 'Use when...' clause or trigger guidance. The 'when' is entirely missing, which per the rubric should cap this at 2, but since the 'what' is also weak (patterns rather than actions), this scores a 1. | 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', 'SSR', 'Redux', 'CSS', 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 excels at providing concrete, executable React/TypeScript patterns with excellent code quality and clear examples. However, it suffers from being a monolithic document that could benefit significantly from progressive disclosure - splitting detailed implementations into separate reference files while keeping SKILL.md as a concise overview with navigation. The lack of workflow guidance for pattern selection also limits its utility.
Suggestions
Split into multiple files: keep SKILL.md as a concise overview (~50-100 lines) with links to separate files like HOOKS.md, STATE-MANAGEMENT.md, PERFORMANCE.md, ACCESSIBILITY.md
Add a decision tree or guidance section explaining when to use each pattern (e.g., 'Use Context+Reducer when: state is shared across 3+ components')
Remove the generic closing statement 'Modern frontend patterns enable maintainable, performant user interfaces' - Claude already knows this
Add a quick reference table at the top summarizing all patterns with one-line descriptions and links to detailed sections
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill provides extensive code examples that are valuable, but includes some unnecessary commentary like 'Modern frontend patterns enable maintainable, performant user interfaces' and could be more concise. The sheer volume (~500 lines) suggests some patterns could be consolidated or moved to separate reference files. | 2 / 3 |
Actionability | Excellent actionability with fully executable TypeScript/React code examples throughout. Every pattern includes complete, copy-paste ready implementations with proper typing, usage examples, and clear ✅ annotations for best practices. | 3 / 3 |
Workflow Clarity | The skill presents patterns clearly but lacks explicit workflow guidance for when to apply each pattern or how they relate to each other. There are no validation checkpoints or decision trees for choosing between patterns (e.g., when to use Context+Reducer vs. simpler state management). | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of code with no references to external files for detailed content. All patterns are inline in one large document. Content like the full virtualization implementation, animation patterns, and accessibility patterns could be split into separate reference files with links from a concise overview. | 1 / 3 |
Total | 8 / 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 | |
- 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.