frontend-quality
OfficialShip fast, accessible frontend with confidence.
System Documentation
What problem does it solve?
It prevents user-facing frontend regressions by enforcing accessibility, performance, semantic correctness, and reliable UI states so real users don’t hit slow loads, broken keyboard navigation, or layout shifts.
Core Features & Use Cases
- Accessibility (WCAG 2.2 AA) enforcement: keyboard navigation, focus visibility, semantic HTML, correct form labeling, contrast, and motion/animation considerations.
- Performance guardrails (Core Web Vitals): targeted LCP/INP/CLS requirements plus bundle size and loading-pattern checks for mobile and slow networks.
- State coverage requirements: BLOCKER if components omit Loading, Empty, Error, or Partial/Stale states, with explicit retry/empty CTAs and “success path” correctness.
Use it on PRs that touch React/Next.js/Astro/Svelte/Vue, CSS/Tailwind, or layout/page entrypoints under app/, components/, pages/, src/ to keep every change aligned with the quality bar.
Quick Start
Use the frontend-quality skill on a PR that modifies components or layout files to generate an enforceable review checklist and required fixes for accessibility, Core Web Vitals, semantic HTML, and UI state handling.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-quality Download link: https://github.com/Xipher-Labs/walter-os/archive/main.zip#frontend-quality Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.