fe-devtools

Étoiles10

Forks2

Mis à jour17 juillet 2026 à 15:56

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.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Source

sukirman1901

sukirman1901/frontend-expert

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Métiers associésSOC

Basé sur la classification professionnelle SOC

Analystes en assurance qualité des logiciels et testeursProfessions informatiques et mathématiques·SOC 15-1253

SKILL.md

readonly

name	fe-devtools
description	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.

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.

Plus depuis ce dépôt

même dépôt

frontend-expert

sukirman1901/frontend-expert

Chat-first frontend UI quality suite — 22 skills across UI Quality, Responsive, Ship FE, and Depth pillars. Token decision tree, compliance gates, anti-AI-slop, motion vocabulary (12 families), marketing landing recipes, and quality loop. Auto-loads on any UI/build/audit/polish request — no slash commands needed.

2026-07-3110

accessibility

sukirman1901/frontend-expert

Enforce WCAG 2.1 AA (keyboard, ARIA, focus, contrast, semantic HTML). Use for accessibility work, pre-ship UI checks, and as a light pass on every UI build or design review — including "a11y", "keyboard", "screen reader", or shipping user-facing changes, without requiring a slash command.

2026-07-3110

design-vocabulary

sukirman1901/frontend-expert

Name a design or UI concept from a loose description. Reverse-lookup for design terms — user describes something vaguely ("card floating over blur", "zig-zag layout"), skill returns the proper name + brief definition. Use when the user uses informal language for a UI concept, or when you need the correct term to search references or communicate precisely.

2026-07-3110

engineering-vocabulary

sukirman1901/frontend-expert

Name a frontend engineering concept from a loose description. Reverse-lookup for FE technical terms — user describes a pattern informally ("supaya gak fetch ulang", "render cuma yang keliatan"), skill returns the proper name + brief definition. Use when the user uses informal language for a technical concept, or when you need the correct term to pick the right implementation.

2026-07-3110

web-performance

sukirman1901/frontend-expert

Optimize frontend Core Web Vitals (LCP, INP, CLS) and loading/rendering/network. Use when the UI feels slow, images/fonts/bundles need work, or during design audits that touch performance — phrases like "lemot", "optimize", "LCP", or "Core Web Vitals" without requiring a slash command.

2026-07-3110

writing-skills

sukirman1901/frontend-expert

Write new skill files for the Frontend Expert pack following conventions. Use when the user wants to add a new skill, extend the pack, or says "make this a skill", "buat skill baru", or "tambah skill". Documents the pack's SKILL.md structure, frontmatter format, checklist pattern, and integration points (AGENTS.md, plugin.json, compliance-gates).

2026-07-3110

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.