CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

78%

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 ./dev-workflows-frontend/skills/frontend-ai-guide/SKILL.md

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

SKILL.md
Quality
Evals
Security

Quality

Content

63%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.

The body is a dense, competent decision-criteria collection with genuinely actionable procedures (impact analysis, fallback layering, deletion flows), but it is held back by redundant overlapping sections, some convoluted phrasing, and a monolithic single-file structure with no progressive disclosure. Splitting the anti-pattern catalog and detailed procedures into reference files would improve both conciseness and organization.

Suggestions

Move the detailed anti-pattern catalog, common failure patterns, and impact-analysis procedure into separate reference files (e.g., references/anti-patterns.md, references/impact-analysis.md), keeping SKILL.md as a concise overview with clearly signaled one-level-deep links.

Consolidate duplicated guidance: type-assertion handling (anti-pattern 7 vs. Pattern 2) and duplication criteria (anti-patterns 1/3 vs. 'Criteria for Code Duplication') each cover the same ground twice; merge them into single canonical sections.

Tighten the long compound sentences in 'Value-First Engineering' and the fallback sections into short, scannable rules, and add one concrete code example per high-value anti-pattern (e.g., an `as` assertion with its corrected form) to ground detection.

DimensionReasoningScore

Conciseness

The writing is terse and assumes Claude's competence (it never explains React, SRP, or DRY), but redundancy could be tightened: type-assertion guidance appears in both anti-pattern 7 and Pattern 2, and duplication criteria appear in both the anti-pattern list and the 'Criteria for Code Duplication' section, plus several convoluted compound sentences ('Judge total complexity across every activated user decision, prop, state, variant...'). This matches 'mostly efficient but... could be tightened' rather than anchor 4's 'minor instances' of excess.

3 / 5

Actionability

Most guidance is concrete and executable in the decision-criteria sense: a 3-stage Discovery/Understanding/Identification procedure with a structured impact-report template, explicit fallback layer responsibilities ('Use the project's Error Boundary'), a deletion decision flow, and specific troubleshooting steps ('stop the stale dev/preview/test process holding the port'). It is not 5 because some directives remain abstract ('Design components that appropriately express UI patterns', 'Prioritize current simplicity over future extensibility') and no illustrative anti-pattern code examples are provided.

4 / 5

Workflow Clarity

The impact-analysis procedure is clearly sequenced with an explicit gate ('Proceed when the accepted scope, consumers, state flow, required adjacent changes, and applicable checks are identified'), and the quality workflow has a completion criterion ('Completion requires every applicable configured check to pass') plus troubleshooting recovery guidance. It is not 5 because the quality-check workflow lacks an explicit validate→fix→re-run feedback loop and the document overall is a criteria collection with embedded workflows rather than one coherent, checkpoint-driven sequence.

4 / 5

Progressive Disclosure

Sections are well-organized with clear ## / ### headers, but the skill is a 172-line monolithic SKILL.md with all detailed criteria inline and no references/ or scripts/ files — the under-50-line exception does not apply. This matches anchor 3 ('content that should be separate is inline') because sizable chunks like the anti-pattern catalog and the impact-analysis procedure would fit better in separate reference files; it is not 4 because nothing is split out, and not 2 because internal structure and navigation within the file are good.

3 / 5

Total

14

/

20

Passed

Description

83%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 description that explicitly covers what the skill does and when to use it, with domain-specific, natural trigger terms. The only weaknesses are mild abstraction in a couple of capability phrases ('technical decision criteria', 'quality gates') and missing common synonyms (React.js, JSX, UI).

DimensionReasoningScore

Specificity

The description lists several concrete capability areas — 'anti-pattern detection, debugging, and frontend quality gates' — anchored to the React/TypeScript domain, matching the 'several specific actions; minor gaps' anchor. It falls short of 5 because phrases like 'technical decision criteria' and 'quality gates' are more abstract than fully concrete actions, but exceeds 3 by naming more than 1-2 specific actions.

4 / 5

Completeness

It clearly answers both questions: 'what' via 'Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates' and 'when' via an explicit 'Use when reviewing components, hooks, browser behavior, or frontend implementation completeness' clause with concrete trigger phrases — a direct match to the anchor-5 example structure. It is not 4 because the 'when' clause is already explicit and specific rather than needing more detail.

5 / 5

Trigger Term Quality

Natural trigger terms like 'reviewing components, hooks, browser behavior', React, TypeScript, and frontend give good keyword coverage a user would plausibly say. It is not 5 because common synonyms and variations (React.js, JSX/TSX, UI, code review) are missing, and not 3 because coverage goes beyond 'some relevant keywords'.

4 / 5

Distinctiveness Conflict Risk

React/TypeScript- and frontend-specific triggers (components, hooks, browser behavior) make it mostly distinct with only minor overlap risk against closely related skills such as generic code-review guides. It is not 5 because frontend review is a crowded trigger space and the description lacks a uniquely distinctive niche, and not 3 because the domain framing meaningfully narrows conflicts.

4 / 5

Total

17

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

shinpr/claude-code-workflows

Path

dev-workflows-frontend/skills/frontend-ai-guide/SKILL.md

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.