CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-debug-workflow

Debug UI changes with a repeatable evidence-first workflow. Use when validating visual regressions, reproducing frontend bugs, comparing baseline vs changed behavior, collecting screenshots/DOM/logs, or producing stakeholder-ready UI debug reports. Keywords: ui bug, visual regression, browser devtools, playwright, screenshot evidence, dom snapshot, frontend debugging.

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

88%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 high-quality, action-oriented skill body: executable commands with expected results, a deterministic workflow with an embedded validation feedback loop, and a genuine one-level-deep reference structure. Main improvements are deduplicating the comparison-recovery guidance and annotating the reference list so the bundle is navigable.

Suggestions

Merge the 'Comparison reveals unexpected differences' troubleshooting block into workflow step 3 (or vice versa) — the two repeat the same three recovery steps nearly verbatim.

Annotate each entry in References with what it contains and when to use it (e.g., 'debugging-checklist.md — step-by-step checklist for a full debug session'), and surface the other relevant bundle files (playwright automation, logs/DOM/screenshots evidence collection) that are currently unlisted.

Remove or relocate the 'Evaluate this skill quality' meta-command, which is about scoring the skill rather than executing it and adds noise to the operational content.

DimensionReasoningScore

Conciseness

The body is largely lean — terse commands with one-line expected results, no explanations of concepts Claude already knows — matching the level-4 'efficient with minor trimmable instances' anchor. Two spots could be tightened: the 'Comparison reveals unexpected differences' troubleshooting block repeats the sub-bullets already embedded in workflow step 3 nearly verbatim, and the meta 'Evaluate this skill quality' command is unrelated to executing the skill. Not score-3 territory because the rest earns its tokens.

4 / 5

Actionability

Every command is copy-paste ready with full arguments ('./skills/ui-debug-workflow/scripts/capture-evidence.sh baseline http://localhost:3000 ./baseline') and an 'Expected result' line, covering install, capture, compare, and full-session cases. This matches the level-5 'fully executable, covers the common cases' anchor and clearly exceeds level 4's 'minor gaps'.

5 / 5

Workflow Clarity

The five-step 'Deterministic Workflow' is clearly sequenced, step 3 embeds an explicit validation checkpoint with a feedback loop ('verify identical conditions... check for flaky or animated elements... re-capture both runs if needed'), and step 4 records pass/fail outcomes. Error-recovery guidance is reinforced in Troubleshooting; this is a read-only evidence workflow so the destructive/batch cap does not apply. Fits the level-5 anchor with explicit validation and recovery loops.

5 / 5

Progressive Disclosure

The SKILL.md is a well-structured overview and the three listed references (debugging-checklist.md, browser-devtools-guide.md, evidence-templates.md — all verified to exist) plus three scripts are one level deep, matching the level-4 'good structure, references mostly clear' anchor. It falls short of level 5 because the References section is a bare path list with no signaling of what each file contains or when to consult it, and much of the reference bundle (e.g., playwright-testing-browser-automation.md, logs-evidence-collection.md) is undiscoverable from the body.

4 / 5

Total

18

/

20

Passed

Description

92%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: third-person voice, concrete capability list, an explicit multi-scenario 'Use when' clause, and a natural keyword list. The only improvement space is broader keyword coverage of common phrasings like 'broken UI' or 'CSS bug'.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — 'validating visual regressions, reproducing frontend bugs, comparing baseline vs changed behavior, collecting screenshots/DOM/logs, or producing stakeholder-ready UI debug reports' — comprehensively covering the skill's capability surface. It exceeds the level-4 anchor ('several specific actions; minor gaps') with no meaningful coverage gaps.

5 / 5

Completeness

It explicitly answers both 'what' ('Debug UI changes with a repeatable evidence-first workflow... producing stakeholder-ready UI debug reports') and 'when' with a concrete 'Use when...' clause enumerating five trigger scenarios plus a keyword list. This matches the level-5 anchor exactly; it is well above the level-4 anchor where the 'when' could be more explicit.

5 / 5

Trigger Term Quality

A dedicated keyword list ('ui bug, visual regression, browser devtools, playwright, screenshot evidence, dom snapshot, frontend debugging') provides good natural-term coverage with several synonyms. A few natural phrases users might say are missing (e.g., 'broken UI', 'CSS/layout bug', 'ui test'), so it fits the level-4 anchor rather than comprehensive level 5.

4 / 5

Distinctiveness Conflict Risk

The niche is clear (evidence-first UI debugging with baseline/changed comparison) and triggers like 'visual regression', 'screenshot evidence', 'dom snapshot' are unlikely to fire for unrelated skills. Minimal conflict risk matches the level-5 anchor; it is clearly distinct rather than 'mostly distinct'.

5 / 5

Total

19

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

Total

15

/

16

Passed

Repository
pantheon-org/tekhne
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.