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.

56

Quality

70%

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

42%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 well-intentioned policy document with a few genuinely concrete artifacts (impact report template, certainty block, decision flow), but most of it is verbose, abstract criteria that restates engineering knowledge Claude already has, with no progressive disclosure into reference files. It reads as guidance for a human reviewer rather than executable instruction for an agent.

Suggestions

Move the anti-pattern catalog and the five common-failure patterns into a references/ file (e.g. references/anti-patterns.md) and keep SKILL.md as a concise overview with clearly signaled one-level-deep links.

Replace abstract criteria sentences with concrete, checkable guidance — e.g. turn the Quality Check Workflow into an explicit ordered checklist with validation gates ('run lint/typecheck/build; only proceed when all pass; fix and re-run on failure') instead of deferring everything to 'the project's configured' tooling.

Cut restatements of knowledge Claude already has (SRP, DRY, YAGNI, composition over inheritance, 5 Whys) and tighten the multi-clause policy sentences to short imperative rules so every remaining token earns its place.

DimensionReasoningScore

Conciseness

The body re-explains concepts Claude already knows ("Violates Single Responsibility Principle (SRP)", "Violates DRY principle", "Be conscious of YAGNI", "Use composition over inheritance", 5 Whys) and pads many sections with heavily qualified run-on policy sentences such as "Introduce state, props, variants, abstractions, or speculative edge-case handling when a current outcome, verified constraint, or evidence-backed material risk requires them" — noticeably verbose with several padded sections, matching anchor 2 rather than the mostly-efficient anchor 3.

2 / 5

Actionability

Some guidance is concrete and executable — the structured impact-report template, the "Certainty:" record block, and the deletion decision flow — but the bulk is abstract decision criteria ("Prefer reuse or no new mechanism when it delivers the same confirmed value...") with no commands or checkable specifics, matching anchor 3's "some concrete guidance but incomplete".

3 / 5

Workflow Clarity

The 3-stage impact analysis (Discovery → Understanding → Identification) has a sequence and a completion criterion, but the Quality Check Workflow defers every command to repo configuration ("the project's configured formatter and linter") and validation checkpoints are implicit ("Completion requires every applicable configured check to pass") rather than explicit validate-fix-retry steps, matching anchor 3.

3 / 5

Progressive Disclosure

The single ~185-line file has clear section headers, but there are no bundle files at all — the anti-pattern catalog and the five common-failure patterns are exactly the reference material that belongs in separate files, and all of it is inlined in SKILL.md, matching anchor 3's "content that should be separate is inline".

3 / 5

Total

11

/

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 and explicitly states both what the skill does and when to use it, with domain-specific triggers. Its only weaknesses are generic terms ("debugging", "quality gates") that slightly blur distinctiveness and a few missing natural trigger variations.

DimensionReasoningScore

Specificity

The description lists several named actions scoped to the domain — "anti-pattern detection, debugging, and frontend quality gates" — with only minor gaps; "Applies ... technical decision criteria" is the least concrete of the listed actions, keeping it below the comprehensive anchor 5 and above the 1–2-action anchor 3.

4 / 5

Completeness

It explicitly answers both questions: the "what" ("Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates") and a concrete "Use when..." trigger clause, matching the anchor-5 example structure exactly.

5 / 5

Trigger Term Quality

"reviewing components, hooks, browser behavior, or frontend implementation completeness" gives good natural keyword coverage a user would actually say, but common variations like "React app", "TSX", or "UI bugs" are missing, so it falls between anchor 3 and the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

"React/TypeScript-specific" plus distinctive triggers like "hooks" and "browser behavior" carve a clear frontend niche, but the generic terms "debugging" and "quality gates" create minor overlap risk with general code-review skills, matching 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
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.