メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
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.
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.
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.
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.
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).
| 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. |
Use browser/tooling evidence when available — don’t invent Lighthouse scores. Pair with web-performance, accessibility, and frontend-testing.
/test-ui or ship checks when tooling exists in the project| 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.
web-performance / accessibility / build skillsreferences/fe-devtools.md.
CWV detail: references/performance.md.
A11y: references/accessibility-checklist.md.