Fe devtools

Skill sukirman1901/frontend-expert/skills/fe-devtools

Frontend DevTools audit workflow — Lighthouse/CWV, a11y (axe), network/layout, when checks are MUST vs optional. Use for /test-ui deep passes, "audit performance", "cek Lighthouse", "axe", or verifying UI before ship with tooling evidence.From its SKILL.md

Install

npx -y skills add sukirman1901/frontend-expert --skill fe-devtools

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

10 stars10 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.5 KB, as published. Nobody here has run it

FE DevTools

Overview

Use browser/tooling evidence when available — don’t invent Lighthouse scores. Pair with web-performance, accessibility, and frontend-testing.

When to use

/test-ui or ship checks when tooling exists in the project
User asks for Lighthouse, axe, Network, Layout shift, Coverage
Design/perf audit needs measured Performance or Accessibility scorecard rows
Verifying no horizontal overflow / focus order with real viewport tools

When to skip

No runnable app / static markdown-only change
User wants theory-only advice with no environment
Pure token rename with no UI surface

MUST vs optional

Check	MUST when	Optional
Responsive viewports	Layout UI ship (320/768/1024/1440)	—
Keyboard / focus	Interactive forms, dialogs, drawers	—
axe / a11y scan	`/test-ui`, `/design` deep, or user asks	Quick source-only audit
Lighthouse / CWV	Perf ask, public landing, `/design` deep with app running	Tiny internal chrome tweak
Network waterfalls	Suspected overfetch / huge assets	Default CRUD form
Layout / CLS	Animations, fonts, images without dimensions	Static settings copy

Rule: Never fabricate scores. If tools didn’t run → scorecard = not evaluated.

Workflow

Confirm target — URL/route or local preview command
Viewport — resize or device mode; note Responsive Conventions
A11y — axe or equivalent; fix Critical/High (labels, contrast, names)
Perf — Lighthouse or Web Vitals extension on key route; note LCP/INP/CLS risks
Network — flag obvious huge JS/CSS/images on first load
Report — tool · metric · value · source; hand remediations to web-performance / accessibility / build skills

Checklist

Did not invent Lighthouse/axe numbers
Viewport evidence for layout ships
A11y scan when MUST (or waiver documented)
Perf metrics only when tool ran or explicitly source-level risks
Findings mapped to skills (not dumped as vague “optimize”)

Depth

references/fe-devtools.md.
CWV detail: references/performance.md.
A11y: references/accessibility-checklist.md.