team-frontend-debug

Frontend debugging team using Chrome DevTools MCP. Dual-mode — feature-list testing or bug-report debugging. Triggers on "team-frontend-debug", "frontend debug".

Quality

71%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/team-frontend-debug/SKILL.md

Quality

Content

85%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 is a well-structured orchestration skill that clearly defines dual-mode pipelines, role routing, and worker spawn mechanics with concrete, executable templates. The workflow is well-sequenced with validation checkpoints and error recovery paths. Minor verbosity exists in the Chrome DevTools tool listing and architecture diagram, but overall the skill is efficient and highly actionable.

Dimension	Reasoning	Score
Conciseness	The skill is reasonably structured but includes some verbose sections — the full Chrome DevTools MCP tool table lists 16 tools with obvious purpose descriptions Claude could infer, and the architecture ASCII diagram is large. The error handling table and user commands are useful but could be tighter.	2 / 3
Actionability	The skill provides concrete, executable templates (Agent spawn template, AskUserQuestion completion action), specific tool names, exact file paths, JSON structures for session state, and clear CLI commands. The role router logic and workspace resolution steps are copy-paste actionable.	3 / 3
Workflow Clarity	The dual-pipeline modes are clearly sequenced (TEST→ANALYZE→FIX→VERIFY and REPRODUCE→ANALYZE→FIX→VERIFY), with explicit validation checkpoints (verifier role), error recovery paths (re-fix on regression, retry commands), and feedback loops (blocker reporting, iteration loops for inconclusive analysis). The error handling table covers edge cases with clear resolutions.	3 / 3
Progressive Disclosure	The SKILL.md serves as a clear router/overview with well-signaled one-level-deep references to role files (roles/coordinator/role.md, etc.) and spec files (specs/pipelines.md, specs/debug-tools.md). Content is appropriately split between the overview and referenced files, with a role registry table providing easy navigation.	3 / 3
	Total	11 / 12 Passed

Description

57%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 establishes a clear niche around frontend debugging with Chrome DevTools MCP and mentions two operational modes, which aids distinctiveness. However, it lacks specific concrete actions (what exactly does it do in each mode?), misses many natural user trigger terms, and has no explicit 'Use when...' clause to guide skill selection.

Suggestions

Add specific concrete actions for each mode, e.g., 'In feature-list mode: validates UI elements, checks responsive layouts, verifies interactions. In bug-report mode: inspects DOM, analyzes console errors, traces network requests.'

Add an explicit 'Use when...' clause such as 'Use when the user needs to debug frontend issues, investigate CSS/JS errors, test UI features in a browser, or analyze Chrome DevTools output.'

Include more natural user keywords like 'CSS issue', 'JavaScript error', 'browser debugging', 'console errors', 'layout problem', 'responsive design' to improve trigger term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain (frontend debugging) and mentions two modes (feature-list testing, bug-report debugging), but doesn't list specific concrete actions like inspecting DOM elements, analyzing network requests, checking console errors, etc.	2 / 3
Completeness	The 'what' is partially addressed (dual-mode frontend debugging with Chrome DevTools MCP), and trigger terms are listed but there's no explicit 'Use when...' clause explaining when Claude should select this skill beyond the trigger keywords.	2 / 3
Trigger Term Quality	Includes some relevant terms like 'frontend debug', 'Chrome DevTools', 'bug-report', and 'feature-list testing', but misses common natural user phrases like 'CSS issue', 'JavaScript error', 'browser debugging', 'console errors', 'inspect element', or 'network requests'.	2 / 3
Distinctiveness Conflict Risk	The combination of 'Chrome DevTools MCP', 'dual-mode', and specific trigger terms like 'team-frontend-debug' creates a clear niche that is unlikely to conflict with other skills.	3 / 3
	Total	9 / 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
allowed_tools_field	'allowed-tools' contains unusual tool name(s)	Warning

	Total	10 / 11 Passed

Repository: catlog22/Claude-Code-Workflow
Path: .claude/skills/team-frontend-debug/SKILL.md
Commit: 07491b0

Reviewed: 5 days 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.