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

75%

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-fullstack/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

56%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-sectioned, criteria-dense guide with a genuinely sequenced impact-analysis workflow, but it is held back by verbose conditional phrasing, overlap between sections, and a monolithic single-file structure with no progressive disclosure. The guidance is specific in spots yet often stays at the level of principle rather than executable direction.

Suggestions

Consolidate the overlapping duplication guidance: merge the 'Criteria for Code Duplication' section with duplication-related anti-patterns (#1 and #3) into one decision rule set to remove redundancy and save tokens.

Split the anti-pattern catalog and the five failure patterns into reference files (e.g., references/anti-patterns.md), keeping SKILL.md as a lean overview with clearly signaled one-level-deep links.

Convert abstract principles like 'Prioritize current simplicity over future extensibility' into operational checks (e.g., a concrete question list or decision flow like the existing deletion decision flow) so the guidance is executable rather than declarative.

DimensionReasoningScore

Conciseness

It avoids teaching known concepts, but long conditional prescriptions (e.g., "Treat behavior-preserving maintenance inside the assigned responsibility as current maintainer value when repository evidence shows...") and overlapping sections (duplication anti-patterns vs. "Criteria for Code Duplication"; anti-pattern #4 vs. Pattern 5) could be meaningfully tightened.

3 / 5

Actionability

Concrete artifacts exist (the 3-stage impact procedure, the structured report template, check categories, error-boundary layer responsibilities), but a substantial share is abstract principle ("Prioritize current simplicity over future extensibility", "Use composition over inheritance") without operational detail on how to execute it.

3 / 5

Workflow Clarity

The impact-analysis procedure is explicitly sequenced (Discovery, Understanding, Identification) with a completion criterion and a "Proceed when..." gate, and the quality workflow defines pass-required completion plus troubleshooting recovery paths. It falls short of the top anchor because no explicit validate-fix-retry loops are stated and the remaining sections are unsequenced criteria collections.

4 / 5

Progressive Disclosure

The body has clear section headers but no bundle files or references exist; all ~170 lines of criteria, catalogs, and procedures are inlined in one file when material like the anti-pattern catalog and failure patterns could be split into reference files to keep SKILL.md lean.

3 / 5

Total

13

/

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 pairs a domain-specific capability list with an explicit and natural 'Use when' trigger clause. Its only weakness is that some capability phrasing is abstract and a few common frontend synonyms are absent.

DimensionReasoningScore

Specificity

Lists several domain-anchored capabilities ("anti-pattern detection, debugging, and frontend quality gates") tied to React/TypeScript, but terms like "technical decision criteria" remain category-level abstractions rather than concrete operations, so it falls just short of the comprehensive anchor.

4 / 5

Completeness

Explicitly answers both what ("Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates") and when ("Use when reviewing components, hooks, browser behavior, or frontend implementation completeness") with concrete trigger phrases, matching the top anchor rather than the weaker-'when' anchor below it.

5 / 5

Trigger Term Quality

"Use when reviewing components, hooks, browser behavior" uses phrases a frontend reviewer would naturally say, with "React/TypeScript" appearing in the capability clause. A few natural variants (UI, web app, .tsx) are missing, keeping it below the comprehensive-synonym anchor.

4 / 5

Distinctiveness Conflict Risk

"React/TypeScript-specific" and the component/hook triggers establish a clear frontend niche, but generic terms like "debugging" and "quality gates" leave minor overlap risk with general code-review skills, so it sits at mostly-distinct rather than minimal-conflict.

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-fullstack/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.