cc-skill-frontend-patterns

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

Quality

51%

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

62%

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

The content is a strong, actionable catalog of executable React/Next.js patterns, but it is a monolithic reference with no workflow sequencing or progressive disclosure to deeper files. The 'When to Use' and 'Limitations' sections are generic boilerplate.

Suggestions

Add decision guidance: a short 'When to use' note per pattern or a selection matrix so Claude knows which pattern fits which situation.

Split the large pattern catalog into referenced files (e.g. COMPONENTS.md, HOOKS.md, PERFORMANCE.md) and keep SKILL.md as an overview with one-level-deep links.

Replace the generic 'When to Use'/'Limitations' boilerplate with concrete validation steps (e.g. type-check, test, a11y audit) for the riskier changes.

Dimension	Reasoning	Score
Conciseness	The body is mostly code examples with little padding, but several sections restate patterns Claude already knows (composition, memoization, debounce) without adding project-specific nuance, so it is efficient but not maximally lean.	2 / 3
Actionability	It provides complete, executable TypeScript/React code blocks for each pattern with usage examples, copy-paste ready and concrete.	3 / 3
Workflow Clarity	Sections are organized by pattern but there is no sequencing guidance, decision criteria for choosing patterns, or validation/review checkpoints for risky changes, so it stays below the explicit-checkpoint bar.	2 / 3
Progressive Disclosure	Content is well sectioned, but everything is inline in a single large SKILL.md with no referenced bundle files and no navigation to deeper materials; the volume could be split into referenced files for a single-purpose pattern library.	2 / 3
	Total	9 / 12 Passed

Description

40%

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 lists relevant frontend domains and technologies but reads as a category label rather than a trigger-rich, action-oriented description. It lacks an explicit 'Use when...' clause, which the rubric penalizes.

Suggestions

Add an explicit 'Use when...' clause with natural trigger phrasing, e.g. 'Use when building React or Next.js components, managing state, or optimizing frontend performance.'

Lead with concrete actions instead of topic lists, e.g. 'Build composable React components, manage state with hooks/context, and optimize render performance.'

Include natural user-facing terms ('React components', 'Next.js pages', 'hooks', 'frontend performance') to improve trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the domain (React, Next.js, state management, performance optimization, UI best practices) and the general action area, but lists technologies and topics rather than concrete executable actions, so it does not reach the multiple-specific-concrete-actions bar of 3.	2 / 3
Completeness	It states what the skill covers but provides no explicit 'Use when...' trigger guidance, so per the rubric a missing when-clause caps completeness at 2; combined with the absence of any explicit trigger phrasing this lands at the low end.	1 / 3
Trigger Term Quality	Terms like 'React', 'Next.js', 'state management', and 'performance optimization' are relevant, but the phrasing is category-oriented rather than the natural request language a user would say, and it omits common variations and a 'Use when...' trigger.	2 / 3
Distinctiveness Conflict Risk	It is somewhat specific to frontend work and could overlap with general coding or React-specific skills, but it is not so generic as to conflict broadly.	2 / 3
	Total	7 / 12 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: 7962275

Reviewed: 2 days 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.