CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-ai-guide

Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when reviewing components, hooks, browser behavior, or frontend implementation completeness.

72

Quality

88%

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

SKILL.md
Quality
Evals
Security

Quality

Content

77%

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

A well-structured, highly actionable technical-decision guide with concrete thresholds and gated workflows, but it is a monolithic single file with some cross-section redundancy. Splitting detailed reference material into bundle files and deduplicating the recurring Rule-of-Three guidance would lift the weaker dimensions.

Suggestions

Consolidate the Rule-of-Three / '3 times' guidance, which currently appears in three places (Code Quality Anti-pattern #1, the Rule of Three section, and Timing of Abstraction), into one canonical location and cross-reference it elsewhere.

Move detailed reference material such as Debugging Techniques, Common Failure Patterns, and the Rule of Three table into separate files under references/ and link to them from a concise overview in SKILL.md, since the body is a single ~230-line monolith.

The Common Failure Patterns section restates several anti-patterns already enumerated above (e.g., abandoning type safety, insufficient testing); merge these with the existing entries or replace the restatements with pointers to avoid redundancy.

DimensionReasoningScore

Conciseness

The body is information-dense and assumes Claude's competence, but the Rule-of-Three / '3 times' concept is restated across three sections (anti-pattern #1, the Rule of Three section, and Timing of Abstraction) and several Common Failure Patterns restate anti-patterns already listed above, so it could be tightened.

2 / 3

Actionability

Concrete decision thresholds ('300+ lines', 'prop drilling through 3+ levels', '3rd catch statement', '3 times') plus executable bash grep commands and TypeScript/console.log examples make the guidance copy-paste-ready and specific.

3 / 3

Workflow Clarity

Multi-step processes are clearly sequenced with explicit gates: the run-in-order Quality Check Workflow with troubleshooting feedback, and the gated 3-stage Impact Analysis ('Proceed when... scope, consumers, state flow, and required checks are identified').

3 / 3

Progressive Disclosure

No bundle files exist and the skill is a single ~230-line monolith; while sections are well-organized, detailed reference material (Debugging Techniques, Common Failure Patterns, the Rule of Three table) that could live in separate files is all inline.

2 / 3

Total

10

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, third-person description that concisely states concrete capabilities and provides an explicit 'Use when' trigger scoped to a distinct frontend niche. No fluff or over-claims; every clause earns its place.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ('technical decision criteria, anti-pattern detection, debugging, and frontend quality gates') rather than vague language, matching the score-3 anchor of several specific concrete actions.

3 / 3

Completeness

Explicitly states what it does ('Applies React/TypeScript-specific technical decision criteria...') and when to use it ('Use when reviewing components, hooks, browser behavior...'), satisfying both halves with an explicit trigger clause.

3 / 3

Trigger Term Quality

Natural frontend terms a developer would actually say ('reviewing components, hooks, browser behavior, or frontend implementation completeness') plus 'React/TypeScript' give good coverage of common trigger phrasings.

3 / 3

Distinctiveness Conflict Risk

The 'React/TypeScript-specific' and frontend-scoped triggers ('components, hooks, browser behavior') carve a clear niche unlikely to fire for non-frontend skills.

3 / 3

Total

12

/

12

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
shinpr/claude-code-workflows
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.