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.

1.31x
Quality

56%

Does it follow best practices?

Impact

96%

1.31x

Average score across 3 eval scenarios

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

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

SKILL.md
Quality
Evals
Security

Quality

Content

43%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-organized, code-dense catalog of React/Next.js patterns with mostly executable examples, but nearly all of it restates knowledge Claude already has rather than adding project-specific value. It lacks any workflow, selection guidance, or split-out reference files, and its "When to Use" section is empty filler.

Suggestions

Cut or drastically trim sections covering patterns Claude already knows (useToggle, useDebounce, React.memo, the standard error boundary, basic memoization) and retain only project-specific conventions or non-obvious variations.

Replace the placeholder "When to Use" and closing "Remember" fluff with concrete decision guidance — which pattern to choose under which constraints (e.g., when to reach for compound components vs. render props, virtualization vs. lazy loading).

Move the detailed catalogs (animations, accessibility, forms, virtualization) into references/ files and keep SKILL.md as a lean index linking to them, which would also fix the inline-import gaps by making snippets self-contained.

DimensionReasoningScore

Conciseness

Roughly 630 lines of standard React patterns — composition over inheritance, render props, useToggle, useDebounce, context+reducer, React.memo, a textbook error boundary — that Claude already knows well; almost nothing is project-specific or non-obvious. Not a 1 because there is no padded explanatory prose and the code itself is lean, but the redundancy spans the entire document rather than a few sections.

2 / 5

Actionability

The examples are concrete, typed, and largely copy-paste ready, each paired with a usage snippet. Not a 5 because several snippets omit their imports (createContext, useState, useRef) and reference undefined components or types (Spinner, Error, MarketCard, Market, ModalProps, ChartSkeleton), so they are not fully self-contained executable code.

4 / 5

Workflow Clarity

This is a topical pattern catalog with no workflow: no sequence of steps, no guidance on choosing among the patterns, and a placeholder "When to Use" section ("This skill is applicable to execute the workflow or actions described in the overview") plus a generic closing "Remember" line that convey no actionable direction. Not a 1 because the sections are coherently organized by topic; not a 3 because there is no sequence or checkpoint present at all to have gaps in.

2 / 5

Progressive Disclosure

Section headers are clear and well-organized, but the entire ~600-line pattern catalog is inlined monolithically in SKILL.md with no reference files at all (no references/, scripts/, or assets/ exist), matching the anchor of bulk content that could live in separate files sitting inline. Not a 2 because the structure is real and navigable, not minimal; not a 4 because nothing is split out and there is no navigation to detail files.

3 / 5

Total

11

/

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 correctly names its technology niche (React, Next.js) with decent natural keywords, but it lists topics rather than capabilities and provides no usage trigger whatsoever. It reads as a subject line for a catalog rather than a statement of what the skill does and when to reach for it.

Suggestions

Replace topic nouns with concrete actions, e.g., "Provides copy-paste React/Next.js code patterns for component composition, custom hooks, state management, memoization, virtualization, and form validation."

Add an explicit "Use when..." clause, e.g., "Use when building or refactoring React/Next.js components, optimizing render performance, or implementing accessible UI widgets."

Include natural trigger variations users would actually say (hooks, forms, memoization, lazy loading, error boundaries) to sharpen both trigger matching and distinctiveness.

DimensionReasoningScore

Specificity

The description names the domain ("Frontend development patterns") and topic areas ("React, Next.js, state management, performance optimization, and UI best practices") but contains no concrete action verbs anywhere — it never states what the skill actually does. It falls below anchor 3, which requires 1-2 concrete actions, but above anchor 1 because it names specific technologies rather than being purely abstract.

2 / 5

Completeness

The "what" is identifiable at the domain level (frontend patterns for a named tech stack), but the "when" is entirely absent — no "Use when..." clause or equivalent, which caps completeness at 3 per the rubric guidelines. Not a 2 because the "what" is not vague like "Helps with documents"; it explicitly names technologies and subtopics.

3 / 5

Trigger Term Quality

Good keyword coverage with natural terms users would say: "React", "Next.js", "state management", "performance optimization", "UI best practices". Not a 5 because common variations and synonyms are missing — "hooks", "components", "forms", "accessibility", "memoization" — and there is no trigger phrasing at all.

4 / 5

Distinctiveness Conflict Risk

"Frontend development patterns" plus "UI best practices" is broad enough to trigger on nearly any frontend task, creating overlap risk with styling, dataviz, testing, and general coding skills. Not a 4 because the overlap risk is more than minor; not a 2 because the explicit React/Next.js references keep it above "very broad".

3 / 5

Total

12

/

20

Passed

Validation

87%

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

CriteriaDescriptionResult

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

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.