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, actionable frontend decision-criteria collection with clear workflows and a sensible single-file organization. Its main weakness is conciseness — long compound sentences inflate the token budget without adding guidance value.

Suggestions

Break the longest compound criteria sentences (e.g., the 'Judge total complexity across every activated...' line and the Value-First Engineering bullets) into shorter, scannable clauses or bullet sub-points to reduce token cost.

Add an explicit validate→fix→retry loop to the Quality Check Workflow (e.g., 'If a check fails: fix, re-run only the failing check, then re-run the full gate') to lift workflow_clarity from 4 to 5.

Consider moving the lengthy anti-pattern and common-failure-pattern catalogs into a references/ file referenced one level deep from SKILL.md, so the core decision criteria stay lean and load only when needed.

DimensionReasoningScore

Conciseness

The body assumes Claude's intelligence (no basic-concept padding) and is information-dense, but many criteria are delivered as very long compound sentences such as 'Judge total complexity across every activated user decision, prop, state, variant, concept, output, persistent state, and component or hook path...' that could be tightened, matching the 'mostly efficient but could be tightened' 3 anchor rather than the lean 4.

3 / 5

Actionability

Concrete, applicable guidance is present throughout — named anti-patterns, explicit commonalization cases, the Lint/Type/Build/Behavior check categories, the 3-stage impact procedure, and templates (certainty record, Impact Analysis) — with only minor gaps, fitting the 4 anchor; being instruction-only, absence of code is not penalized.

4 / 5

Workflow Clarity

The Quality Check Workflow and the Risk-Scaled Procedure (Discovery → Understanding → Identification) give a clear sequence with completion criteria ('Completion requires every applicable configured check to pass'; 'Proceed when the accepted scope, consumers, state flow... are identified') plus a deletion decision flow, supplying most checkpoints; minor validation gaps keep it at 4 rather than 5.

4 / 5

Progressive Disclosure

No bundle files exist, so scoring is on the single SKILL.md: it is well-organized with clear ##/### section headings and no nested references, and the criteria content is appropriately kept in one file with only minor organization gaps, matching the 4 anchor.

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, third-person description that clearly states both capabilities and explicit 'Use when' triggers scoped to React/TypeScript frontend work. It is comprehensive on completeness and only slightly short on trigger-term synonyms and distinctiveness from adjacent review skills.

DimensionReasoningScore

Specificity

Names the React/TypeScript domain and lists several concrete actions — 'technical decision criteria, anti-pattern detection, debugging, and frontend quality gates' — which is several specific actions with only minor coverage gaps, matching the 4 anchor rather than the fully comprehensive 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, matching the 5 anchor.

5 / 5

Trigger Term Quality

The 'Use when reviewing components, hooks, browser behavior, or frontend implementation completeness' clause supplies natural terms a frontend developer would say; coverage is good but misses common synonyms/variations, so it sits at 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

The React/TypeScript frontend framing carves a clear niche with distinct triggers, but 'debugging' and 'reviewing components' retain minor overlap risk with general code-review or TypeScript skills, placing it at 4 rather than a conflict-free 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.

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.