CtrlK
BlogDocsLog inGet started
Tessl Logo

agent-frontend-patterns

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

32

Quality

27%

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 ./.agent/skills/agent-frontend-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

22%

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

This SKILL.md is essentially an empty index page—a list of 14 links to sub-skill files with no substantive content, no code examples, no decision guidance, and no workflow. While the progressive disclosure structure of linking to sub-skills is reasonable in principle, the main file fails to provide any actionable overview, quick-start guidance, or context for when to apply which pattern. Without the bundle files to evaluate, the skill body alone is nearly useless.

Suggestions

Add a quick-start section with at least 2-3 concrete, executable code examples of the most common patterns (e.g., a custom hook, a compound component) so the main file is actionable on its own.

Add a decision guide or categorization (e.g., 'Component Patterns', 'Performance Patterns', 'Accessibility Patterns') with brief descriptions of when to use each sub-skill, rather than a flat numbered list.

Include at least one multi-step workflow example (e.g., 'Building a performant form: 1. Use controlled form pattern → 2. Add debounce → 3. Add validation → 4. Optimize with memoization') to provide workflow clarity.

Provide brief 1-sentence descriptions next to each sub-skill link so readers can navigate without clicking every link.

DimensionReasoningScore

Conciseness

The content is brief and doesn't over-explain concepts Claude already knows, but it's essentially just a table of contents with no substantive content in the main file itself. The one-line intro is unnecessary filler.

2 / 3

Actionability

The SKILL.md contains zero actionable guidance—no code examples, no commands, no concrete instructions. It is purely a list of links to sub-skills with no executable or instructional content whatsoever.

1 / 3

Workflow Clarity

There is no workflow, sequence, or process described. The file is just a flat list of 14 links with no guidance on when to use which pattern, no decision tree, and no sequencing of any kind.

1 / 3

Progressive Disclosure

The file does reference sub-skills with clear one-level-deep links, which is good structure. However, since no bundle files are provided, we cannot verify these references exist, and the main file provides zero overview content or guidance on navigating the sub-skills—it's just a bare link list without context or categorization beyond numbered items.

2 / 3

Total

6

/

12

Passed

Description

32%

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, and uses broad category terms rather than specific capabilities. The description would benefit significantly from specifying concrete actions and explicit trigger conditions.

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 optimization.'

Replace abstract category names 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', 'CSS', 'responsive', 'TypeScript', '.tsx', '.jsx'.

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 like 'create components', 'optimize bundle size', or 'implement routing'.

2 / 3

Completeness

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

1 / 3

Trigger Term Quality

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

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/styling, or JavaScript skills.

2 / 3

Total

7

/

12

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

10

/

11

Passed

Repository
Dokhacgiakhoa/antigravity-ide
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.