frontend-state-accessibilitylisted
Install: claude install-skill authenticfake/clike
# Skill: Frontend State Accessibility
## Intent
Ensure that frontend requirements produce usable, testable, accessible UI behavior rather than decorative components.
This skill turns UI work into verifiable product behavior: state handling, user flows, accessibility, loading/error/empty states, and regression-safe frontend tests.
## Use when
Use this skill when a REQ touches frontend applications, dashboards, forms, tables, workflows, charts, navigation, design profiles, operator consoles, mobile-like responsive UI, or user-facing state.
## Do not use when
Do not use this skill for backend-only logic, pure infrastructure, documentation-only work, or non-visual CLI modules.
## Signals
- The REQ mentions UI, UX, frontend, React, Vue, Angular, Next.js, dashboard, console, form, page, component, route, design profile, accessibility, WCAG, responsive, loading state, empty state, or error state.
- The REQ has acceptance criteria involving user interaction.
- The selected design profile is non-empty.
- The output includes `.tsx`, `.jsx`, `.vue`, CSS, HTML, frontend routes, or UI tests.
## Required behavior
- Implement explicit UI states: loading, empty, error, success, disabled, and permission-denied when relevant.
- Keep state transitions deterministic and testable.
- Use accessible labels, semantic elements, keyboard navigation, focus behavior, and readable error messages.
- Keep generated UI aligned with the selected design profile without cloning external brands.
- Se