Frontend Production Quality FAQs

Question 1

Does this skill help with emergency production deployments?

Accepted Answer

Yes. It includes an Emergency Protocol for production outages that provides a 10-minute rapid verification path (axe CLI, manual keyboard tests, and Lighthouse) to ensure a hotfix doesn't introduce critical accessibility or performance regressions.

Question 2

How does this skill prevent incomplete 'Work in Progress' (WIP) code?

Accepted Answer

The skill enforces a 'Never commit incomplete work' policy. It detects 'WIP' anti-patterns and requires full verification (like 4.5:1 color contrast and keyboard navigation) before a commit is allowed, preventing the common issue where accessibility tasks are deferred and eventually forgotten.

Question 3

What does the Frontend Production Quality skill do?

Accepted Answer

This skill acts as a high-standard quality gate for frontend development. It forces Claude to use the TodoWrite framework—a mandatory 18+ item checklist covering accessibility (WCAG 2.1 AA), Core Web Vitals performance benchmarks, and evidence collection before any code is committed or deployed.

Question 4

When should I trigger this Claude Code skill?

Accepted Answer

You should use this skill before implementing any UI changes, creating frontend Pull Requests, or performing audits. It is triggered by keywords like 'accessibility audit', 'WCAG', 'Lighthouse', 'screen reader', and 'Core Web Vitals' in a frontend context.

Question 5

What specific performance benchmarks does it enforce?

Accepted Answer

It mandates strict Core Web Vitals targets: Largest Contentful Paint (LCP) under 2.5s, First Input Delay (FID) under 100ms, and Cumulative Layout Shift (CLS) under 0.1. It also requires documentation of bundle size impacts for any change over 10KB.

Frontend Production Quality

Frontend Production Quality

概要

主な機能

ユースケース

概要

主な機能

ユースケース