CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

91%

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.

The body is a strong, executable workflow skill: fully concrete commands with expected results, a clearly sequenced process with validation and feedback loops, and clean structure. Its main weaknesses are moderate redundancy between the workflow and troubleshooting sections, and a bundle where most reference files are not surfaced from SKILL.md.

Suggestions

Reference the remaining bundle files (e.g. dom-snapshots-evidence-collection.md, logs-evidence-collection.md, screenshots-evidence-collection.md, playwright-testing-browser-automation.md) from the References section so they are discoverable.

De-duplicate the unexpected-differences guidance: keep the detail in Troubleshooting and shorten workflow step 3 to a pointer.

Trim the Consequence line from the anti-pattern template (WHY/BAD/GOOD already convey it) to recover tokens.

DimensionReasoningScore

Conciseness

The body is efficient — commands are presented with one-line expected results and no explanation of concepts Claude already knows. It falls short of anchor 5 due to redundancy: the unexpected-differences checklist appears nearly verbatim in both workflow step 3 ("verify identical conditions (URL, viewport, seed data, build mode)") and the Troubleshooting section, and the four-part WHY/BAD/GOOD/Consequence anti-pattern template adds padding. It is clearly above anchor 3, which would require substantial unnecessary explanation.

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", "npx playwright install chromium", "full-debug-session.sh main fix/my-branch http://localhost:3000 'npm run build' 'npm start'" — and each includes an expected result. This matches the anchor for fully executable guidance covering the common cases; there are no pseudocode or missing-detail gaps.

5 / 5

Workflow Clarity

The Deterministic Workflow gives a clear 5-step sequence with an explicit validation checkpoint and feedback loop in step 3 ("verify identical conditions ... re-capture both runs if needed before concluding"), reinforced by a Troubleshooting section with recovery steps for each failure mode. This matches the anchor for explicit validation with error-recovery loops; anchor 4 would imply missing checkpoints, which are present.

5 / 5

Progressive Disclosure

SKILL.md is a well-organized overview with clearly signaled one-level-deep references ("references/debugging-checklist.md", "references/browser-devtools-guide.md", "references/evidence-templates.md" — all verified to exist with real content). However, the bundle contains roughly a dozen additional reference files (e.g. "dom-snapshots-evidence-collection.md", "playwright-testing-browser-automation.md", "logs-evidence-collection.md") that are not referenced or navigable from SKILL.md, an organization gap beyond the "minor" allowance of anchor 5.

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: it states concrete capabilities across the full debugging workflow, includes an explicit 'Use when' clause with natural trigger keywords, and occupies a clearly distinct niche. The only improvement space is broader synonym coverage in the keywords list.

Suggestions

Add a few natural synonym triggers users might say, e.g. "screenshot diff", "ui testing", "frontend issue", to lift trigger-term coverage to comprehensive.

Consider trimming "stakeholder-ready" phrasing slightly; it borders on marketing language without adding trigger value.

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" — covering the full debug cycle from reproduction to reporting. It matches the anchor for comprehensive coverage rather than anchor 4, which reserves room for minor gaps in action coverage.

5 / 5

Completeness

It explicitly answers both what ("Debug UI changes with a repeatable evidence-first workflow") and when ("Use when validating visual regressions, reproducing frontend bugs, ...") with concrete trigger phrases, matching the anchor-5 example pattern exactly. Not anchor 4, since the 'when' clause is fully explicit rather than merely serviceable.

5 / 5

Trigger Term Quality

"Keywords: ui bug, visual regression, browser devtools, playwright, screenshot evidence, dom snapshot, frontend debugging" provides good natural-phrase coverage a user would plausibly say. It falls short of anchor 5 because common variations like "screenshot diff", "ui testing", or "frontend issue" are missing, though it is clearly above anchor 3's "missing common variations".

4 / 5

Distinctiveness Conflict Risk

The niche — evidence-first UI debugging with baseline/changed comparison — is distinct and the triggers (visual regression, screenshot evidence, DOM snapshot) are specific to it. The "playwright" keyword creates only minimal overlap with generic browser-automation skills, keeping it at anchor 5 rather than requiring the anchor-4 caveat.

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.

Validation — 15 / 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

Path

skills/testing/ui-debug-workflow/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.