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.

68

Quality

81%

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

The canonical home for this skill is frontend-ai-guide in shinpr/claude-code-workflows

SKILL.md
Quality
Evals
Security

Quality

Content

75%Weight 40%Scale 1-5

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

A well-structured, competent instruction-only guidance skill that assumes Claude's intelligence and provides concrete decision criteria, templates, and a clear quality/impact workflow. It falls short of top marks mainly through abstract verbose phrasing in places and the absence of fully executable examples or external reference splitting.

Suggestions

Tighten the most abstract Value-First Engineering sentences into shorter imperative criteria to lift conciseness toward a 5.

Add one or two concrete copy-paste-ready examples (e.g., a representative Error Boundary usage or a failing-test skeleton) to move actionability from abstract criteria toward executable guidance.

Consider moving the detailed anti-pattern catalog or impact-analysis template into a references/ file referenced one level deep, to strengthen progressive disclosure and reduce inline length.

DimensionReasoningScore

Conciseness

The body is dense, assumes Claude's competence (never explains what React, hooks, or TypeScript are), and is largely decision criteria where most tokens earn their place. It is not a 5 because several sentences are abstract and could be tightened (e.g., "Inspect until the evidence identifies the lowest-total-complexity solution that delivers the required user or maintainer value while keeping the UI correct and maintainable").

4 / 5

Actionability

As an instruction-only skill it provides concrete, actionable guidance: named anti-patterns, decision criteria, a certainty-record template, an impact-analysis report template, and a deletion decision flow. It is not a 5 because much of the guidance remains abstract criteria rather than fully copy-paste-ready executable steps covering common cases.

4 / 5

Workflow Clarity

The "Quality Check Workflow" and the 3-stage "Risk-Scaled Procedure for Impact Analysis" (Discovery → Understanding → Identification) give clear sequences with validation checkpoints ("Completion requires every applicable configured check to pass") and a troubleshooting feedback section. It is not a 5 because the validation/error-recovery loops are implicit in places and the procedure is risk-scaled rather than a single fully explicit validate→fix→retry loop.

4 / 5

Progressive Disclosure

The body is well organized with clear section headers (Value-First Engineering, Anti-patterns, Fallback Design, Quality Check Workflow, Impact Analysis) and no nested/2+ level references. No bundle files exist, so all content is inline; this is appropriate for a guidance skill, though at ~185 lines some catalog material (anti-pattern lists, impact template) could plausibly live in a separate reference file, keeping it just below the score-5 bar.

4 / 5

Total

16

/

20

Passed

Description

87%Weight 40%Scale 1-5

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 clearly states both capability and explicit use-when triggers within a distinct React/TypeScript frontend niche. The only weakness is slightly category-level action wording and a few missing natural synonyms, which keeps specificity and trigger_term_quality at 4 rather than 5.

DimensionReasoningScore

Specificity

Lists several concrete actions — "technical decision criteria, anti-pattern detection, debugging, and frontend quality gates" — anchored to the React/TypeScript domain, with only minor coverage gaps (e.g., no mention of testing/performance specifically). It sits above score 3 (which expects only 1-2 actions) but the actions are somewhat category-level rather than the exhaustive discrete list expected at score 5.

4 / 5

Completeness

Explicitly answers both halves: the "what" ("Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates") and the "when" via a concrete "Use when reviewing components, hooks, browser behavior, or frontend implementation completeness" trigger clause, matching the score-5 anchor.

5 / 5

Trigger Term Quality

"reviewing components, hooks, browser behavior, or frontend implementation completeness" are natural terms a user would say, giving good keyword coverage. It falls short of score 5 because it lacks synonyms and file/extension-style variations (e.g., JSX, TSX, React rendering, .tsx).

4 / 5

Distinctiveness Conflict Risk

"React/TypeScript-specific" combined with "components, hooks, browser behavior, frontend implementation completeness" carves a clear frontend niche with distinct triggers and minimal conflict risk against non-frontend skills, matching the score-5 anchor.

5 / 5

Total

18

/

20

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.