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.

64

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

67%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-structured, competence-assuming criteria guide with concrete decision flows and gated workflows. Its primary weakness is conciseness: redundant coverage of type-guarantee and duplication topics across multiple sections inflates length without adding information.

Suggestions

Consolidate the 'Technical Anti-patterns' list with 'Common Failure Patterns' (e.g., merge the duplicate type-assertion/`any`/`as` coverage) into a single section to remove redundancy.

Unify the three duplication discussions ('Code Quality Anti-pattern #1/#3', 'Criteria for Code Duplication', 'Criteria for Commonalization') into one decision block with cases-for and cases-against.

Consider extracting the anti-pattern and failure-pattern catalogs into a references/ file, leaving SKILL.md as a tighter overview with a one-level-deep pointer.

DimensionReasoningScore

Conciseness

The guide is dense and assumes Claude's competence without explaining basics, but it is ~180 lines with notable structural redundancy — the Technical Anti-patterns list overlaps the Common Failure Patterns (e.g., type-assertion/`as`/`any` covered twice) and duplication/commonalization guidance is spread across three sections — so it could be tightened.

3 / 5

Actionability

Provides mostly actionable guidance: concrete decision criteria, a deletion decision flow, an Impact Analysis template, and a Certainty-recording block. Some sections remain abstract ('Value-First Engineering', 'Fail-Fast' framing) but the templates and checklists are directly usable.

4 / 5

Workflow Clarity

Sequenced workflows are present with checkpoints — the Risk-Scaled Procedure (Discovery → Understanding → Identification) gates progress on 'accepted scope, consumers, state flow… identified' and the Quality Check Workflow requires 'every applicable configured check to pass'. Minor validation gaps remain in a few less explicit sections.

4 / 5

Progressive Disclosure

Well-organized with clear section headers and a self-contained structure (no bundle files exist to reference). The main gap is that the sizable anti-pattern and failure-pattern catalogs are inlined in a ~180-line monolith and could be externalized into reference files.

4 / 5

Total

15

/

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 with third-person voice, explicit Use-when trigger guidance, and a distinct React/TypeScript frontend niche. The main gap is action specificity that trends categorical and missing synonyms/extensions for top-tier trigger coverage.

DimensionReasoningScore

Specificity

Names several concrete actions ('anti-pattern detection, debugging, and frontend quality gates', 'technical decision criteria') but they remain somewhat categorical rather than fully concrete, leaving minor coverage gaps relative to a comprehensive list.

4 / 5

Completeness

Clearly states what it does ('Applies React/TypeScript-specific... criteria, anti-pattern detection, debugging, and frontend quality gates') and an explicit 'Use when reviewing components, hooks, browser behavior, or frontend implementation completeness' trigger, satisfying both what and when with concrete phrases.

5 / 5

Trigger Term Quality

Good natural keyword coverage ('components, hooks, browser behavior, frontend implementation') that users would say, but omits synonyms and file extensions like .tsx/.jsx or 'UI'.

4 / 5

Distinctiveness Conflict Risk

The React/TypeScript frontend framing is a clear niche with distinct triggers, but 'debugging' and 'frontend quality gates' carry minor overlap risk with a general code-review skill.

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.

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