cc-skill-frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Quality

63%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/cc-skill-frontend-patterns/SKILL.md

Quality

Content

65%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The skill is a well-organized, code-dense catalog of executable React/Next.js patterns with strong actionability and lean prose, but it inlines all content with no progressive file structure and provides no real workflow guidance beyond generic boilerplate.

Suggestions

Move the bulk pattern code into reference files (e.g., references/hooks.md, references/performance.md) and keep SKILL.md as a concise overview with one-level-deep links, to improve progressive disclosure.

Make examples self-contained — add missing imports and define or stub the shared types (Market, MarketCardProps, ModalProps) so code is fully copy-paste executable.

Replace the generic 'When to Use' boilerplate with concrete decision guidance on which pattern fits which situation, and remove the duplicate Modal definition.

Dimension	Reasoning	Score
Conciseness	The body is almost entirely terse section headers plus executable code with brief inline comments, avoiding prose explanations of concepts Claude already knows; it is long but the only trim opportunities are a few duplicative examples (Modal is defined twice, similar hook patterns), matching the 'efficient; minor instances could be trimmed' anchor rather than the verbose ones below it.	4 / 5
Actionability	Provides many concrete, largely copy-paste-ready TypeScript/React examples with usage shown; minor gaps prevent a 5 — some examples omit imports (createContext, useState) and reference undefined types (Market, MarketCardProps, ModalProps), matching the 'mostly executable guidance with minor gaps' anchor.	4 / 5
Workflow Clarity	This is a pattern catalog with no real multi-step workflow or validation checkpoints, and the 'When to Use' section is generic boilerplate ('applicable to execute the workflow or actions described in the overview'); the content is organized by category but offers no clear process sequence, fitting the 'sequence/checkpoints missing or implicit' anchor and ruling out 4.	3 / 5
Progressive Disclosure	No bundle files exist (references/, scripts/, assets/ absent) and all ~600 lines of pattern code are inlined in SKILL.md with no file splitting or external references; section headers give 'some structure' but bulk content that belongs in separate reference files is inline, matching the anchor 3 and ruling out 2 (which requires minimal/no structure) and 4 (which requires mostly-appropriate placement).	3 / 5
	Total	14 / 20 Passed

Description

61%Weight 40%Scale 1-5

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 clearly scopes the skill to React/Next.js frontend patterns with good natural trigger terms, but it lists topic areas rather than concrete actions and omits any explicit 'Use when...' guidance, capping completeness.

Suggestions

Reword as concrete actions (e.g., 'Implements composition, custom hooks, memoization, and accessibility patterns for React/Next.js apps') instead of topic nouns.

Add an explicit trigger clause: 'Use when building or refactoring React/Next.js UIs, writing custom hooks, or optimizing render performance.'

Include a few more natural synonyms users say (e.g., 'hooks', 're-renders', 'forms') to round out trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the frontend domain and several specific sub-areas ("React, Next.js, state management, performance optimization, and UI best practices") but frames them as topics rather than concrete actions/verbs, so it sits at the anchor naming domain + capability areas without comprehensive actions.	3 / 5
Completeness	Provides a clear 'what' but contains no 'Use when...' clause or equivalent explicit trigger guidance, so per the judging guidelines completeness is capped at 3.	3 / 5
Trigger Term Quality	Includes natural terms users actually say ("React", "Next.js", "state management", "performance optimization", "frontend") with good coverage; a few natural variations/synonyms are missing, matching the 'good keyword coverage' anchor.	4 / 5
Distinctiveness Conflict Risk	Naming specific frameworks (React, Next.js) gives it a clear niche with mostly distinct triggers; minor overlap risk remains with broad 'UI best practices' / 'state management' skills, matching the 'mostly distinct' anchor.	4 / 5
	Total	14 / 20 Passed

Validation

87%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 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	14 / 16 Passed

Repository: sickn33/antigravity-awesome-skills
Path: skills/cc-skill-frontend-patterns/SKILL.md
Commit: 1f67c44

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.