cc-skill-frontend-patterns

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

1.31x

Quality

51%

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-claude/skills/cc-skill-frontend-patterns/SKILL.md

Quality

Content

46%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 body is a well-structured, mostly executable React/Next.js pattern catalog, but it re-states widely known patterns at length with no progressive disclosure, no external references, and only a templated 'When to Use' section instead of a real workflow.

Suggestions

Move the bulk of the pattern reference into bundled files under references/ and keep SKILL.md as a concise overview pointing to them, to fix the monolithic structure and reduce token load.

Trim patterns Claude already knows (memoization, debounce, error boundaries) to only the non-obvious or project-specific variations.

Replace the boilerplate 'When to Use' section with concrete decision guidance on which pattern fits which situation.

Dimension	Reasoning	Score
Conciseness	The prose itself is lean, but the body is a ~630-line catalog of well-known patterns (memoization, debounce, error boundary, compound components) that Claude already knows, which is effectively padded reference material; a 3 would require the content to add knowledge Claude lacks rather than restate it.	2 / 5
Actionability	Concrete, copy-paste TypeScript examples cover the common cases with usage snippets throughout; a 5 is held back by minor gaps such as undefined referenced interfaces (e.g., MarketCardProps, ModalProps) and generic placeholder handlers.	4 / 5
Workflow Clarity	This is a pattern catalog with no multi-step workflow or sequencing, and the 'When to Use' section is boilerplate ('applicable to execute the workflow or actions described in the overview'); it is organized but lacks any explicit steps, so it sits at the midpoint.	3 / 5
Progressive Disclosure	All content is inlined into a single ~630-line SKILL.md with no bundle files and no references to separate files, so a large reference catalog that should be split is monolithic; a 3 would require at least some signaled references or clearer separation, which is absent.	2 / 5
	Total	11 / 20 Passed

Description

57%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 is third-person and names a clear domain with several relevant capability areas and natural trigger terms, but it omits any explicit 'when to use' guidance and stays at a broad topic-list level rather than concrete actions.

Suggestions

Add an explicit 'Use when...' clause naming concrete user requests (e.g., 'Use when building React/Next.js components, managing state, or optimizing frontend performance').

Replace topic-area phrasing with concrete actions (e.g., 'Compose components, build custom hooks, memoize renders, and virtualize long lists').

Narrow the niche to reduce overlap with general web-dev skills, e.g. by emphasizing React-specific patterns.

Dimension	Reasoning	Score
Specificity	Names the frontend domain plus several concrete capability areas ('React, Next.js, state management, performance optimization, and UI best practices'), but these are topic areas rather than concrete actions like 'extract' or 'fill forms'; a 4 would require specific verbs/actions, which are absent.	3 / 5
Completeness	It clearly states the 'what' (frontend development patterns across listed areas) but provides no 'Use when...' clause or equivalent trigger guidance, capping completeness at 3 per the rubric.	3 / 5
Trigger Term Quality	Natural user-facing terms are present ('React', 'Next.js', 'state management', 'performance optimization', 'UI best practices'), giving good keyword coverage; a 5 would require synonyms/variations beyond the core stack names, which are missing.	4 / 5
Distinctiveness Conflict Risk	It is frontend-specific and thus distinct from backend/general skills, but 'frontend development patterns' is broad enough to overlap with several frontend-adjacent skills; a 4 would require a tighter niche, which the generic phrasing lacks.	3 / 5
	Total	13 / 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-claude/skills/cc-skill-frontend-patterns/SKILL.md
Commit: 57c135b

Reviewed: 5 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.