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

73%

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

50%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 well-organized, domain-specific decision guidance that avoids teaching basics, but it sits at the midpoint on every dimension: duplicated criteria inflate token cost, much of the guidance is abstract rather than executable, validation checkpoints are implicit, and all content is inlined in one long file with no progressive disclosure. Restructuring around concrete examples and splitting reference material into bundle files would lift most dimensions.

Suggestions

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

Consolidate duplicated guidance: merge the type-assertion anti-pattern with Pattern 2 and fold the reuse rules in Pattern 5 into the commonalization criteria to cut redundant tokens.

Add concrete executable anchors: example search commands for the Discovery stage, a filled-in sample impact report, and the exact quality-check commands for a typical React repo.

DimensionReasoningScore

Conciseness

The body is dense and avoids explaining basics Claude already knows, but guidance is duplicated across sections (type assertions appear as anti-pattern 7 and again as Pattern 2; reuse rules appear in both the commonalization criteria and Pattern 5) and long hedged sentences could be tightened.

3 / 5

Actionability

Concrete artifacts exist ('Identify root cause with 5 Whys', 'Measure before optimizing with React DevTools Profiler', the structured impact report template, the deletion decision flow), but much of the text is abstract principle statements like 'Judge total complexity across every activated user decision, prop, state, variant...' with no concrete command or example to execute.

3 / 5

Workflow Clarity

The 3-stage impact analysis (Discovery, Understanding, Identification) and the quality-check workflow are sequenced with completion criteria and a troubleshooting loop, but validation checkpoints are largely implicit and no end-to-end sequence connects the separate workflow sections.

3 / 5

Progressive Disclosure

Section headers are clear and well-organized, but the ~173-line body is monolithic with no bundle files: the anti-pattern catalog and failure-pattern collection are inlined when they could be one-level-deep reference files, and the simple-skill exception does not apply at this length.

3 / 5

Total

12

/

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: it names the domain and several concrete capabilities, uses third person, and includes an explicit 'Use when...' clause with concrete frontend triggers. Slightly more concrete capability wording and a few more natural synonyms (UI, .tsx) would make it fully comprehensive.

DimensionReasoningScore

Specificity

The description lists several specific capabilities ('anti-pattern detection, debugging, and frontend quality gates') grounded in the React/TypeScript domain, but items like 'technical decision criteria' remain somewhat abstract, leaving minor gaps versus the comprehensive anchor 5.

4 / 5

Completeness

It 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, in third-person voice.

5 / 5

Trigger Term Quality

Natural trigger terms are present ('reviewing components, hooks, browser behavior', 'React/TypeScript'), matching what a user would say, though common variations like 'UI', 'web app', or file extensions (.tsx/.jsx) are missing.

4 / 5

Distinctiveness Conflict Risk

'React/TypeScript-specific' and frontend-focused triggers carve a mostly distinct niche, but there is minor overlap risk with general code-review or testing skills, so it falls just short of the minimal-conflict anchor.

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