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.

57

1.31x
Quality

37%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/cc-skill-frontend-patterns/SKILL.md

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

SKILL.md
Quality
Evals
Security

Quality

Content

42%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill reads like a React patterns cookbook that teaches Claude things it already knows extensively. The code quality is high and examples are executable, but the content is massively over-scoped for a SKILL.md — it should be a brief overview pointing to categorized reference files. The lack of project-specific conventions, constraints, or novel patterns means nearly every token is wasted on general React knowledge.

Suggestions

Remove all standard React patterns Claude already knows (composition, render props, ErrorBoundary, useDebounce, etc.) and focus only on project-specific conventions, preferred libraries, or non-obvious decisions.

Split into a concise SKILL.md overview (~30 lines) with references to separate files like HOOKS.md, STATE.md, ACCESSIBILITY.md, ANIMATION.md for detailed patterns.

Add project-specific guidance: which state management approach to use when, preferred component library, naming conventions, file structure expectations, and any custom tooling.

Include a decision tree or brief guidelines for pattern selection (e.g., 'Use Context+Reducer for X, use Zustand for Y') rather than just listing all patterns equally.

DimensionReasoningScore

Conciseness

This is extremely verbose at ~400+ lines, essentially a textbook of React patterns Claude already knows well. Composition, compound components, render props, useDebounce, ErrorBoundary, Context+Reducer — these are all standard React patterns that don't need to be taught to Claude. Almost every token here is explaining concepts Claude already understands.

1 / 3

Actionability

The code examples are fully executable, complete TypeScript with proper types, and copy-paste ready. Each pattern includes both the implementation and usage examples, making them immediately actionable.

3 / 3

Workflow Clarity

There is no multi-step workflow or process described — it's a collection of independent patterns. The patterns themselves are clear, but there's no guidance on when to choose one pattern over another, no decision tree, and no validation steps for applying these patterns in a project.

2 / 3

Progressive Disclosure

This is a monolithic wall of code examples with no references to external files. All content is inline despite being far too long for a SKILL.md overview. The patterns could easily be split into separate reference files (hooks.md, state-management.md, accessibility.md, etc.) with the SKILL.md serving as a concise index.

1 / 3

Total

7

/

12

Passed

Description

32%Scale 1-3

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 technology domain (React/Next.js frontend) but reads more like a topic list than an actionable skill description. It lacks concrete actions (verbs), has no 'Use when...' clause to guide skill selection, and uses broad category terms rather than specific capabilities. The mention of specific frameworks helps with distinctiveness but is insufficient to make this a strong skill description.

Suggestions

Add a 'Use when...' clause with explicit triggers, e.g., 'Use when the user asks about React components, Next.js routing, state management with Redux/Zustand, or frontend performance issues.'

Replace vague category labels with concrete actions, e.g., 'Creates React components, implements Next.js routing and SSR, configures state management with Redux or Zustand, optimizes bundle size and rendering performance.'

Include more natural trigger terms users would say, such as 'hooks', 'components', 'SSR', 'server-side rendering', '.tsx', '.jsx', 'CSS-in-JS', 'hydration'.

DimensionReasoningScore

Specificity

Names the domain (frontend development) and lists some areas (React, Next.js, state management, performance optimization, UI best practices), but these are categories rather than concrete actions. No specific verbs describing what the skill does (e.g., 'creates components', 'optimizes bundle size', 'implements routing').

2 / 3

Completeness

Describes the 'what' at a high level (frontend development patterns) but completely lacks any 'when' clause or explicit trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' is also weak/vague, so this scores a 1.

1 / 3

Trigger Term Quality

Includes some relevant keywords users might say like 'React', 'Next.js', 'state management', 'performance optimization', but misses common variations and natural terms like 'component', 'hooks', 'CSS', 'rendering', 'TypeScript', 'SSR', 'server-side rendering', '.tsx', '.jsx'.

2 / 3

Distinctiveness Conflict Risk

Mentioning React and Next.js specifically provides some distinctiveness, but 'frontend development patterns' and 'UI best practices' are broad enough to overlap with general web development, CSS, or design system skills.

2 / 3

Total

7

/

12

Passed

Validation

81%

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

Validation9 / 11 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

9

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-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.