← ClaudeAtlas

frontend-state-accessibilitylisted

Turn frontend requirements into usable, testable, accessible UI behavior with explicit loading/empty/error/success states and keyboard/a11y flows.
authenticfake/clike · ★ 1 · AI & Automation · score 70
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