How does this skill improve web accessibility?

It enforces the inclusion of labels, keyboard navigation support, and focus visibility, ensuring that components meet fundamental a11y standards.

Which frameworks does the Frontend Quality Bar skill support?

This skill is specifically optimized for applications built using Next.js and Chakra UI, focusing on the specific patterns and tokens used by those libraries.

What commands are included in this skill?

The skill provides streamlined access to npm run lint, npm run build, npm run format, and a specialized quality script at scripts/quality.sh.

Can this skill help with performance optimization?

Yes, it includes checks for performance patterns and provides a framework for identifying and fixing inefficient UI rendering or async handling.

Does it handle UI state management?

It explicitly requires the definition of loading, empty, error, and success states for any user-facing surface to ensure a polished UX.

Frontend Quality Bar

Name: Frontend Quality Bar
Author: Stacked-Labs

byStacked-Labs

•

Design Tools

Enforces production-grade standards for Next.js and Chakra UI applications by ensuring accessibility, performance, and UI polish.

The Frontend Quality Bar skill serves as a rigorous quality assurance layer for Claude Code within Next.js and Chakra UI environments. It directs the AI to prioritize user experience by implementing comprehensive state management (loading, error, success), adhering to strict accessibility standards, and utilizing semantic theme tokens instead of hardcoded styles. By automating essential checks for linting, formatting, and building, this skill ensures that all frontend contributions meet high-fidelity requirements and are ready for production deployment.

Key Features

01Validation of loading, error, and empty UI states

02Standardized code hygiene through automated lint and format scripts

03Next.js and Chakra UI best practice enforcement

04Automated accessibility (a11y) and keyboard navigation checks

05Theme-token compliance to ensure consistent design language

062 GitHub stars

Use Cases

01Finalizing UI components for a production-ready release

02Auditing existing pages for accessibility and responsive design issues

03Standardizing state handling across complex async user workflows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stacked-labs/poker-game frontend-quality-bar

For use in Claude.ai and ChatGPT

Download Skill