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.

60

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 ./dev-workflows-frontend/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

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.

A well-organized, dense policy guide with clear sequencing and explicit completion gates for its workflows, but it is heavy on abstract decision prose, light on worked examples, and keeps everything in one long file instead of splitting catalogs into reference files. It functions as an instruction-only skill, yet its actionability and token efficiency fall short of the strongest examples.

Suggestions

Split the anti-pattern catalog and the 'Common Failure Patterns' catalog into files under references/ (e.g. references/anti-patterns.md, references/failure-patterns.md) and keep SKILL.md as a concise overview with clearly signaled one-level-deep links.

Tighten the nominalized policy sentences into short imperative directives and merge the duplication/abstraction criteria that currently appear in three separate sections ('Technical Anti-patterns', 'Criteria for Code Duplication', and 'Timing of Abstraction').

Add one concrete worked example — e.g. a filled-in '## Impact Analysis' report for a sample hook change — and example check commands for a typical repo, so the quality-gate and impact-analysis guidance is executable rather than purely descriptive.

DimensionReasoningScore

Conciseness

The body avoids explaining concepts Claude already knows (no 'what is React' padding), but it is noticeably wordy: long nominalized policy sentences such as 'Treat behavior-preserving maintenance inside the confirmed responsibility as current maintainer value when repository evidence shows it reduces change ambiguity, duplicate ownership, defect risk...' and duplication criteria restated across the anti-patterns, duplication, and abstraction sections. Mostly efficient but could be tightened.

3 / 5

Actionability

There are concrete artifacts — the 3-stage impact-analysis procedure with a structured report template, the ASCII decision flow, the check-category checklist, and troubleshooting entries — but the bulk of the guidance is abstract policy prose ('Inspect until the evidence identifies the lowest-total-complexity solution...') with no worked examples, no sample filled-in impact report, and no example commands. Some concrete guidance, but incomplete per the anchor-3 example.

3 / 5

Workflow Clarity

The multi-step processes are clearly sequenced with checkpoints: Discovery → Understanding → Identification with explicit completion criteria ('Complete all 3 stages', 'Completion requires every applicable configured check to pass'), a 'Proceed when...' gate, and a Troubleshooting section for error recovery. Not a 5 because the quality-check workflow delegates ordering to the repository and the validation feedback loop (run → fail → fix → re-run) is implied rather than explicit.

4 / 5

Progressive Disclosure

There are no bundle files (references/, scripts/, assets/ are absent) and the ~180-line body inlines everything, including a large anti-pattern catalog and failure-pattern catalog that would naturally live in separate reference files. Section headers are clear, so structure exists, but content that should be separate is inline — the anchor-3 case.

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 in third-person voice with an explicit 'Use when...' trigger clause and a clearly scoped React/TypeScript frontend domain. Its only weaknesses are mild abstraction in the capability list and some missing natural synonyms in the trigger terms.

DimensionReasoningScore

Specificity

The description lists several specific capabilities for a named domain — 'Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates' — which is several concrete actions with only minor abstraction ('technical decision criteria'). It is not a 5 because the actions are capability categories rather than fully concrete operations, and debugging/quality gates are left generic.

4 / 5

Completeness

It explicitly answers both parts: 'what' via 'Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates' and 'when' via the explicit trigger clause 'Use when reviewing components, hooks, browser behavior, or frontend implementation completeness'. Matches the anchor-5 example structure.

5 / 5

Trigger Term Quality

Natural trigger phrases are present: 'reviewing components, hooks, browser behavior, or frontend implementation completeness', plus React/TypeScript. Good keyword coverage, but common variations users might say — 'UI', 'web app', 'tsx', 'frontend review' — are not covered.

4 / 5

Distinctiveness Conflict Risk

The React/TypeScript/frontend niche with triggers like 'hooks' and 'browser behavior' is mostly distinct with a clear niche. Minor overlap risk remains with general code-review or backend quality-gate skills, since 'quality gates' and 'debugging' are not frontend-exclusive.

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.