CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

fix-ui-frontend

Fix UI, layout, cross-browser, mobile, console-error, and broken-asset bugs at their cause, verified across the same viewport and engine matrix the tester used. Use for visual, responsive, Safari, touch, image, or front-end crash bugs.

72

Quality

90%

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

SKILL.md
Quality
Evals
Security

Quality

Content

92%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 tight, high-signal instruction skill: reproduction-first procedure, a concrete cause→fix table for the common front-end bug classes, anti-pattern guidance (don't hide errors), and explicit exit criteria that serve as validation checkpoints. Its only weakness is two fix entries that describe what to inspect without saying what to change.

Suggestions

Make the image fix entry concrete: instead of "fix the container or loading strategy", state the specific remedy (e.g., remove transform/containment from the lazy-image's ancestor, or switch to native loading="lazy" with width/height attributes).

Concretize the refactor entry: replace "check loaded fonts and initial overlay state" with the actual check (e.g., confirm the @font-face family name still matches post-refactor and that modal overlays are mounted hidden with aria-hidden until open).

DimensionReasoningScore

Conciseness

Every line carries project-specific knowledge Claude cannot infer (the 360/390/768/1280 viewport list, the ≥400px fixed-width threshold, the "Chromium results don't count for Safari bugs" rule, the BLOCKED convention). No concept explanations, no padding — lean and efficient throughout.

5 / 5

Actionability

Mostly executable guidance: "add max-width:100%, flex-wrap, overflow-wrap:anywhere", "Measure against clientWidth, not innerWidth", "native listeners with { passive: false }" are copy-paste-ready fixes for the common cases. Two entries stay high-level — "fix the container or loading strategy" and "check loaded fonts and initial overlay state" name what to inspect but not what to change — which are the minor gaps that keep it below fully-executable 5.

4 / 5

Workflow Clarity

Clear sequence with explicit validation: reproduce on the reported engine/viewport (step 1), fix at cause, then "Re-run the tester's full UI sweep for the route on every viewport, and check neighbors that share the component", capped by an Exit criteria checklist including error recovery for missing Safari ("marked BLOCKED if no real Safari is available"). This matches the anchor-5 pattern of explicit validation steps plus a feedback/checklist.

5 / 5

Progressive Disclosure

A sub-50-line, single-purpose skill with no bundle files (references/, scripts/, assets/ do not exist) and no content that belongs in separate files; sections (Procedure, Exit criteria, counterpart pointer) are well organized. Per the simple-skill guideline, this earns a 5 with just well-organized sections, and the qa-browser-ui counterpart reference is clearly signaled and not nested.

5 / 5

Total

19

/

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, compact description: concrete bug-type enumeration, an explicit 'Use for...' trigger clause with natural terms, and a distinctive verification-matrix angle linking it to its counterpart tester skill. Third-person imperative form is used correctly with no padding or over-claims.

DimensionReasoningScore

Specificity

"Fix UI, layout, cross-browser, mobile, console-error, and broken-asset bugs at their cause, verified across the same viewport and engine matrix the tester used" names the domain and several specific capability categories (bug classes plus engine/viewport verification). It is not a 5 because it enumerates bug categories rather than listing multiple distinct concrete actions, and not a 3 because coverage goes well beyond 1-2 actions.

4 / 5

Completeness

It explicitly answers both questions: what ("Fix UI, layout, cross-browser, mobile, console-error, and broken-asset bugs at their cause, verified across the same viewport and engine matrix") and when ("Use for visual, responsive, Safari, touch, image, or front-end crash bugs") with concrete trigger phrases, matching the anchor-5 pattern of clear what + explicit when with triggers.

5 / 5

Trigger Term Quality

The "Use for visual, responsive, Safari, touch, image, or front-end crash bugs" clause plus "console-error", "mobile", and "layout" gives good natural-phrase coverage users would actually say. A few common synonyms are missing (e.g., "CSS", "rendering", "broken image"), which keeps it below the comprehensive-synonym level of 5 and clearly above the 3 anchor's sparse keyword set.

4 / 5

Distinctiveness Conflict Risk

The niche is distinct — front-end bug repair verified across a specific engine/viewport matrix, tied to a counterpart tester skill — with targeted triggers (Safari, touch, responsive, crash). Minor overlap risk remains with a general front-end development skill that could also claim layout/mobile bugs, so it fits 'mostly distinct' rather than the clear-niche 5 anchor.

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

itsablabla/qa-bug-agent-skills

Path

skills/fix-ui-frontend/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.