CtrlK
BlogDocsLog inGet started
Tessl Logo

cc-skill-frontend-patterns

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

47

Quality

50%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

Quality

Content

47%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 lean, well-structured overview that correctly delegates detail to a single one-level-deep reference file — good progressive disclosure and token efficiency. However, it provides almost no actionable content itself: no patterns, steps, or validation checkpoints are surfaced, and the 'When to Use' section is a tautology that adds nothing.

Suggestions

Replace the tautological 'When to Use' text with the actual trigger conditions for the skill (e.g., component design, hooks, state management, or render-performance work in React/Next.js).

Surface 3-5 key pattern names from the guide (e.g., Composition Over Inheritance, Context + Reducer, Memoization, Virtualization) so a reader can jump to the relevant section without scanning the full guide.

Summarize the guide's safety/validation requirements concretely in the body (or at minimum name which sections contain them) rather than deferring them entirely with 'Treat its safety, prerequisites, and validation requirements as mandatory.'

DimensionReasoningScore

Conciseness

The body is ~130 tokens with no padding and no explanation of concepts Claude already knows. It is not a 5 because the 'When to Use' section ('This skill is applicable to execute the workflow or actions described in the overview') is empty filler that earns no tokens.

4 / 5

Actionability

The only concrete instruction is 'Read [the detailed guide](references/detailed-guide.md) before executing this skill' — the body itself contains no code, commands, patterns, or steps, matching 'Minimal concrete guidance; high-level hints but missing the specific steps to execute'. It is not a 1 because the single pointer instruction is concrete and the mandatory-treatment language gives some direction.

2 / 5

Workflow Clarity

There is a rough implied sequence (read the guide, then execute) but many gaps: no steps are listed, no validation checkpoints appear in the body, and the actual workflow is entirely deferred to the external guide. It is not a 3 because the body lists no steps at all — even the anchor-3 example enumerates a step sequence.

2 / 5

Progressive Disclosure

The bundle structure is sound: one clearly signaled, one-level-deep reference (references/detailed-guide.md, 633 lines of real, well-sectioned content with no nested references). It is not a 5 because the body says 'For focused work, load the relevant sections' yet never names or indexes those sections, leaving navigation to the reader.

4 / 5

Total

12

/

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 is concise and names concrete technologies with natural trigger terms, but it describes topics rather than actions and omits any 'Use when...' trigger guidance. Its broad multi-domain scope also creates overlap risk with more focused frontend skills.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when building or refactoring React/Next.js components, managing client state, or fixing render performance issues.'

Replace the passive topic list with 2-3 concrete actions, e.g., 'Implements component composition patterns, custom hooks, and memoization/code-splitting for React and Next.js apps.'

Narrow the scope or name the distinctive niche (e.g., which state-management approaches or performance techniques) to reduce conflict with single-purpose React, state-management, or performance skills.

DimensionReasoningScore

Specificity

The description names the domain and technologies ("React, Next.js, state management, performance optimization") but contains no concrete actions at all — it lists topic areas, not verbs, matching the anchor 'Names the domain but actions are minimal or generic'. It falls short of a 3 because even 1-2 concrete actions (e.g., 'implements component patterns' or 'optimizes rendering') are absent.

2 / 5

Completeness

A 'what' is present ("Frontend development patterns for React, Next.js...") but there is no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines. It is not a 2 because the 'what' is reasonably clear, naming specific technologies.

3 / 5

Trigger Term Quality

"React", "Next.js", "state management", and "performance optimization" are natural phrases users would say when needing this skill. It is not a 5 because common variations such as "hooks", "components", "rendering", or "frontend" as a standalone trigger are missing.

4 / 5

Distinctiveness Conflict Risk

Naming React and Next.js makes it somewhat specific, but the breadth of scope ("state management, performance optimization, and UI best practices") means it could overlap with many individual frontend skills (a dedicated state-management skill, a performance skill, a UI skill). It is not a 4 because the overlap risk extends beyond 'closely related skills'.

3 / 5

Total

12

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
sickn33/agentic-awesome-skills
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.