CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

cc-skill-frontend-patterns

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

Quality

59%

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 SKILL.md body is a well-disciplined, token-efficient pointer: one clearly signaled, one-level-deep reference with instructions on how to load it. But it delegates everything — there is no quick-start guidance, no summary of the guide's contents, and no workflow or validation steps in the body itself, leaving a reader with no actionable information until they open the reference.

Suggestions

Add a brief quick-start or one concrete inline example (e.g., a canonical component-composition snippet) so the skill is actionable before the reference is opened.

List the guide's section names (Component Patterns, Custom Hooks, State Management, Performance, Forms, Accessibility, Integration limits) inline so 'load the relevant sections' is navigable without opening the file first.

Replace the circular 'When to Use' boilerplate with concrete applicability conditions and trim the templated Limitations to the ones that matter for this skill's scope.

DimensionReasoningScore

Conciseness

The body is very lean (~24 lines) with no concept over-explanation and properly delegates detail to the reference. However, minor boilerplate could be trimmed: 'When to Use: This skill is applicable to execute the workflow or actions described in the overview' is circular filler, and the opening line restates the description. This matches anchor 4 (efficient with minor trimmable instances), not anchor 5 (every token earns its place).

4 / 5

Actionability

The body contains no code, commands, or concrete task steps; its only substantive instruction is to read references/detailed-guide.md. The pointer is concrete navigation guidance, but the body itself is missing the specific steps to execute, matching anchor 2 ('Minimal concrete guidance; high-level hints but missing the specific steps') rather than anchor 1, since the delegation instruction is explicit and the referenced file does exist.

2 / 5

Workflow Clarity

The body's entire sequence is 'read the guide (relevant sections or completely), then execute' — a rough, minimal sequence with many gaps: no steps for the actual work, no explicit checkpoints, and validation is only deferred ('Treat its safety, prerequisites, and validation requirements as mandatory') rather than specified. This matches anchor 2; it is not anchor 1 because the delegation is coherent, and not anchor 3 because no actual steps are listed in the body.

2 / 5

Progressive Disclosure

The bundle uses a clearly signaled, one-level-deep reference (references/detailed-guide.md, verified to exist) with a dedicated 'Detailed Guide' section and explicit loading guidance (focused sections vs. complete read). It falls short of anchor 5 because all detail (8+ topic areas, 15KB) sits in a single monolithic file, and the body never surfaces the guide's section names, so 'load the relevant sections' requires opening the file first to know what exists. Structure is good with minor organization gaps, matching anchor 4.

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 identifies the domain and includes natural framework keywords, but it reads as a topic list rather than a statement of capabilities: no concrete actions and no 'Use when' trigger guidance. Adding explicit trigger conditions and concrete actions would substantially improve it.

Suggestions

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

Replace generic topic labels with concrete actions, e.g. 'Composes reusable components, builds custom hooks, manages state with Context + reducer, and virtualizes long lists.'

Narrow the scope or add distinct trigger keywords (hooks, memoization, code splitting) to reduce overlap with general web/UI and dataviz skills.

DimensionReasoningScore

Specificity

The description names the domain ("Frontend development patterns for React, Next.js") but lists only topic categories ("state management, performance optimization, and UI best practices") with no concrete actions or verbs. It matches anchor 2 ("Names the domain but actions are minimal or generic") rather than anchor 3, which would require 1-2 concrete actions like 'builds components' or 'optimizes rendering'.

2 / 5

Completeness

The description has a reasonably clear 'what' (frontend development patterns for React/Next.js and listed topic areas) but no 'Use when...' clause or equivalent explicit trigger guidance. Per the judging guidelines, a missing 'Use when' clause caps completeness at 3 ("Has a clear 'what' but 'when' is missing or only weakly implied").

3 / 5

Trigger Term Quality

Terms like "React", "Next.js", "state management", "performance optimization", and "frontend" are natural phrases users would say when needing this skill. It falls short of anchor 5 because common variations and synonyms (e.g., 'hooks', 'components', 'rendering', 'forms', 'web app performance') are missing, but it clearly exceeds anchor 3's partial keyword coverage.

4 / 5

Distinctiveness Conflict Risk

"React", "Next.js" give it some specificity, but "performance optimization", "state management", and "UI best practices" overlap with many frontend-adjacent skills (e.g., charting/dataviz, CSS, testing, or general web-app skills). It is somewhat specific but could still overlap with similar skills, matching anchor 3 rather than anchor 4's 'minor overlap risk only'.

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

Path

skills/cc-skill-frontend-patterns/SKILL.md

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.