cc-skill-frontend-patterns

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

1.31x

Quality

55%

Does it follow best practices?

Impact

96%

1.31x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills/skills/cc-skill-frontend-patterns/SKILL.md

The canonical home for this skill is cc-skill-frontend-patterns in sickn33/agentic-awesome-skills

Quality

Content

57%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 content is a well-structured, actionable catalog of standard React/Next.js patterns with strong code examples, but it functions as a monolithic reference rather than a guided workflow and offers little progressive disclosure.

Suggestions

Move specialized sections (Framer Motion animations, accessibility patterns, virtualization) into separate reference files and link to them from a concise overview to improve progressive disclosure.

Add a brief 'When to use which pattern' decision guide so the catalog functions as a guided workflow rather than an undirected list.

Trim patterns Claude already knows and retain only project-specific conventions or non-obvious guidance to improve token efficiency.

Dimension	Reasoning	Score
Conciseness	The 630-line body catalogs well-known React patterns Claude largely already knows, but presents them efficiently as code with minimal prose padding; mostly efficient though the sheer volume of standard material adds limited new value.	3 / 5
Actionability	Code examples are concrete, complete, copy-paste ready TypeScript/React covering many common cases, with minor gaps like undefined Market, ModalProps, and DropdownProps types.	4 / 5
Workflow Clarity	This is a patterns catalog rather than a multi-step process, so there is no real sequence or validation checkpoints; the closing 'When to Use' is generic boilerplate rather than a workflow.	3 / 5
Progressive Disclosure	No bundle files exist and the entire body is one monolithic 630-line document with section headers; content like animation, accessibility, and virtualization that could live in separate references is all inlined.	3 / 5
	Total	13 / 20 Passed

Description

52%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 states the domain but lacks concrete actions and any explicit 'Use when' trigger guidance, which limits its specificity and completeness scores. Trigger term quality is reasonably good thanks to named frameworks.

Suggestions

Add concrete actions instead of topic nouns, e.g. 'Compose components, manage state with reducers, optimize rendering with memoization, and add accessibility for React/Next.js apps.'

Append an explicit trigger clause such as 'Use when building or refactoring React/Next.js user interfaces, or when the user mentions component composition, state management, or performance optimization.'

Narrow the niche and add distinguishing terms (e.g. specific patterns like compound components, virtualization) to reduce overlap with generic frontend skills.

Dimension	Reasoning	Score
Specificity	The description names domains ("React, Next.js, state management, performance optimization, and UI best practices") but lists no concrete actions, only topic nouns rather than verbs like 'extract' or 'fill'.	2 / 5
Completeness	Has a clear 'what' (frontend development patterns for the listed areas) but no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the rubric.	3 / 5
Trigger Term Quality	Includes natural terms users say (React, Next.js, state management, performance optimization) with good coverage, though it lacks synonyms, file extensions, and 'UI best practices' is generic.	4 / 5
Distinctiveness Conflict Risk	"Frontend development patterns" is fairly broad and could overlap with other general web/frontend skills; React/Next.js narrow it somewhat but no distinct niche triggers are given.	3 / 5
	Total	12 / 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 (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	14 / 16 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: plugins/AI-Agents-Safe-Coding-Skills/skills/cc-skill-frontend-patterns/SKILL.md
Commit: 57c135b

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.