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

The body delivers genuinely thoughtful frontend decision criteria with a well-sequenced impact-analysis workflow, but it is held back by restated generic principles (SRP, DRY, YAGNI), a substantial share of abstract direction lacking concrete commands or examples, and a monolithic single-file structure with no progressive disclosure. It reads more as a policy document than an actionable guide.

Suggestions

Remove or compress restatements of universally known principles (SRP, DRY, YAGNI, 'use version control', 'composition over inheritance') and tighten the long Value-First Engineering paragraphs to concrete criteria only.

Convert abstract directives into executable checks — e.g., replace 'measure before optimizing' with a concrete Profiler comparison procedure, and give the quality-check workflow explicit command-discovery examples (package.json scripts, CI config) instead of only category names.

Move the anti-pattern catalog and failure-pattern collection into one-level-deep reference files (e.g., references/anti-patterns.md, references/failure-patterns.md) linked from concise SKILL.md sections, keeping the main file as a lean overview.

DimensionReasoningScore

Conciseness

The body is mostly efficient prescriptive guidance, but it restates concepts Claude already knows ('Violates Single Responsibility Principle (SRP)', 'Violates DRY principle', 'Be conscious of YAGNI', 'Use composition over inheritance', 'Should use version control') and several long sentences (e.g., the Value-First Engineering paragraph) could be tightened. This fits anchor 3 — some unnecessary explanation — rather than anchor 4's 'minor instances', and is well above the padded anchor 2.

3 / 5

Actionability

There is concrete guidance in places (React DevTools Profiler, Error Boundary layer responsibilities, the structured impact-report template, the deletion decision flow), but much of the content is abstract direction such as 'Design components that appropriately express UI patterns' and 'Prioritize current simplicity over future extensibility' with no commands or code. Anchor 3 — some concrete guidance but incomplete — fits better than anchor 4, which expects mostly executable guidance.

3 / 5

Workflow Clarity

The impact-analysis procedure is clearly sequenced (Discovery → Understanding → Identification) with an explicit completion criterion ('Proceed when the accepted scope, consumers, state flow, required adjacent changes, and applicable checks are identified'), and the quality-check workflow has a completion gate plus a troubleshooting section for error recovery. Minor validation gaps (no explicit re-validate loop in the check workflow) keep it at anchor 4 rather than 5.

4 / 5

Progressive Disclosure

The ~177-line body is well-sectioned with headers but all content is inline in a single file with no reference structure; the anti-pattern catalog and failure-pattern collection are exactly the kind of enumerable material that could live in one-level-deep reference files. No bundle files exist to offset this, and the file exceeds the under-50-line simple-skill exception, so anchor 3 ('content that should be separate is inline') fits better than anchor 4.

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 clearly states its React/TypeScript frontend domain, enumerates concrete capabilities, and provides an explicit 'Use when...' clause with natural trigger terms. The only weaknesses are minor: a few missing trigger synonyms and slight overlap risk with generic code-review skills.

DimensionReasoningScore

Specificity

Lists several concrete actions in a named domain — 'anti-pattern detection, debugging, and frontend quality gates' alongside 'React/TypeScript-specific technical decision criteria' — though 'decision criteria' and 'quality gates' remain somewhat abstract, leaving minor coverage gaps that keep it below the comprehensive anchor 5.

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 merely-adequate anchor 4.

5 / 5

Trigger Term Quality

Includes natural terms users would say — 'React', 'TypeScript', 'components', 'hooks', 'browser behavior', 'frontend' — but misses common variations like '.tsx', 'JSX', 'UI', or 'React code review', so a few natural terms are missing per anchor 4.

4 / 5

Distinctiveness Conflict Risk

The React/TS frontend niche with triggers like 'hooks' and 'browser behavior' is mostly distinct, but 'reviewing components' and 'debugging' leave minor overlap risk with a general code-review skill, fitting anchor 4 rather than the minimal-conflict anchor 5.

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

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.