frontend-quality-bar
Enforce a high-quality, production-ready standard for changes in this Next.js + Chakra UI frontend repo. Use for UX polish, accessibility, performance, error/loading states, code hygiene, and “ready to merge” checks (lint/format/build).
When & Why to Use This Skill
This Claude skill acts as a comprehensive quality gate for Next.js and Chakra UI frontend repositories, ensuring all code changes meet production-ready standards. It focuses on optimizing user experience (UX) through rigorous checks for accessibility (a11y), performance, and responsive design. By automating 'ready to merge' workflows—including linting, formatting, and build verification—it helps developers maintain high code hygiene and prevent UI regressions.
Use Cases
- Pre-merge Quality Audit: Automatically verify that new features or bug fixes adhere to the project's 'Definition of Done' before they reach the main branch.
- Accessibility (a11y) Compliance: Ensure all UI components include proper labels, keyboard navigation, and focus visibility to meet modern web accessibility standards.
- UX State Management: Guarantee that every asynchronous user-facing surface correctly implements loading, empty, and error states to provide a polished user experience.
- Design System Enforcement: Validate that styling consistently uses theme and semantic tokens instead of hardcoded hex values, maintaining visual integrity across the application.
- Automated Code Hygiene: Run and verify linting, formatting, and build scripts to ensure the codebase remains clean and deployable at all times.
| name | frontend-quality-bar |
|---|---|
| description | Enforce a high-quality, production-ready standard for changes in this Next.js + Chakra UI frontend repo. Use for UX polish, accessibility, performance, error/loading states, code hygiene, and “ready to merge” checks (lint/format/build). |
Frontend Quality Bar (Stacked Poker)
Always start here
- Read
.cursor/rules/frontend-guidelines.mdc(project expectations). - Identify the user-facing surface (page/component) and list required states:
- loading, empty, error, success
- Prefer small, incremental changes; avoid broad refactors unless requested.
Definition of done (minimum)
- UI has loading/error handling for async work that affects UX.
- No console errors in normal flows; logs are purposeful for debugging only.
- Accessibility basics: labels, keyboard access, focus visibility.
- Responsive: works in both portrait/landscape where applicable.
- Styling uses theme tokens/semantic tokens (no random hexes).
Commands
npm run lintnpm run buildnpm run format(when touching many files)
For convenience, run scripts/quality.sh from this skill.
What to load next
- For a detailed PR checklist: read
references/checklist.md. - For perf/a11y patterns that match this repo: read
references/perf-a11y.md.