agent-frontend-patterns

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

Quality

27%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.agent/skills/agent-frontend-patterns/SKILL.md

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 is essentially an empty table of contents with no actionable content, no workflow guidance, and no concrete examples. While the intent to use progressive disclosure via sub-skills is reasonable, the main file provides no value on its own — no quick-start guidance, no decision framework for choosing among the 14 patterns, and no executable code. Without the bundle files to back up the references, this skill is non-functional.

Suggestions

Add a brief 1-2 sentence description for each sub-skill link so Claude can determine which pattern is relevant to a given task without opening every file.

Include a quick-start section with at least one concrete, executable code example demonstrating a common pattern (e.g., a custom hook or component composition).

Add a decision framework or workflow (e.g., 'For state shared across siblings → Context + Reducer; For async data → Async Data Fetching Hook') to guide pattern selection.

Provide the referenced sub-skill bundle files, or consolidate the most critical patterns inline if sub-files cannot be included.

Dimension	Reasoning	Score
Conciseness	The content is brief and doesn't over-explain concepts Claude already knows, but the numbered list of 14 sub-skills with no additional context or guidance is somewhat hollow — it's lean but arguably too sparse to be useful on its own.	2 / 3
Actionability	There is zero actionable content in this file — no code examples, no commands, no concrete guidance. It is purely a table of contents linking to sub-skills, none of which are provided in the bundle.	1 / 3
Workflow Clarity	There is no workflow, no sequencing, no steps, and no validation checkpoints. The skill provides no guidance on when or how to apply any of the 14 listed patterns.	1 / 3
Progressive Disclosure	The structure attempts progressive disclosure by linking to 14 sub-skill files, which is a reasonable approach. However, no bundle files are provided, so the references are unverifiable, and there's no brief description or context for each link to help Claude decide which sub-skill is relevant — it's just a flat numbered list with no navigation guidance.	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 a clear domain (frontend/React/Next.js) but reads more like a topic list than an actionable skill description. It lacks concrete actions (verbs), has no 'Use when...' clause, and uses category-level terms rather than specific capabilities. It would benefit significantly from specifying what the skill actually does and when Claude should select it.

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 the category listing with concrete actions, e.g., 'Creates React components, implements Next.js routing and SSR, configures state management with Redux or Zustand, and optimizes bundle size and rendering performance.'

Include more natural trigger terms users would say, such as 'hooks', 'components', 'SSR', 'server-side rendering', 'CSS', '.tsx', '.jsx', 'bundle size', 'lazy loading'.

Dimension	Reasoning	Score
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 a 'Use when...' clause or any explicit trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' itself is also weak (patterns rather than actions), warranting 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

90%

Warnings & errors only

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

Validation — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: Dokhacgiakhoa/antigravity-ide
Commit: 061c4c6

Reviewed: about 20 hours ago

Table of Contents

Discovery Implementation Validation

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.