From bee-dev-team
Gate 1 of frontend development cycle - ensures all components pass axe-core automated accessibility scans with zero WCAG 2.1 AA violations.
npx claudepluginhub luanrodrigues/ia-frmwrk --plugin bee-dev-teamThis skill uses the workspace's default tool permissions.
Ensure all frontend components meet **WCAG 2.1 AA** accessibility standards through automated axe-core scanning, keyboard navigation testing, and focus management validation.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Ensure all frontend components meet WCAG 2.1 AA accessibility standards through automated axe-core scanning, keyboard navigation testing, and focus management validation.
Core principle: Accessibility is not optional. All components MUST be accessible to all users, including those using keyboard navigation, screen readers, and assistive technologies.
<block_condition>
This skill ORCHESTRATES. Frontend QA Analyst Agent (accessibility mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend Agent | Run axe-core, write keyboard tests, verify ARIA |
MANDATORY: Load testing-accessibility.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend/testing-accessibility.md </fetch_required>
REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]
- language: [typescript only]
if any REQUIRED input is missing:
→ STOP and report: "Missing required input: [field]"
if language != "typescript":
→ STOP and report: "Frontend accessibility testing only supported for TypeScript/React"
Task tool:
subagent_type: "bee:qa-analyst-frontend"
model: "opus"
prompt: |
**MODE:** ACCESSIBILITY TESTING (Gate 1)
**Standards:** Load testing-accessibility.md
**Input:**
- Unit ID: {unit_id}
- Implementation Files: {implementation_files}
- Language: typescript
**Requirements:**
1. Run axe-core scans on all components (all states: default, loading, error, empty, disabled)
2. Test keyboard navigation (Tab, Enter, Escape, Arrow keys)
3. Test focus management (trap, restoration, auto-focus)
4. Verify semantic HTML usage
5. Check ARIA attributes
6. Verify color contrast
**Output Sections Required:**
- ## Accessibility Testing Summary
- ## Violations Report
- ## Handoff to Next Gate
Parse agent output:
if "Status: PASS" in output:
→ Gate 1 PASSED
→ Return success with metrics
if "Status: FAIL" in output:
→ Dispatch fix to implementation agent (bee:frontend-engineer or bee:ui-engineer)
→ Re-run accessibility tests (max 3 iterations)
→ If still failing: ESCALATE to user
## Accessibility Testing Summary
**Status:** {PASS|FAIL}
**Components Tested:** {count}
**Violations Found:** {count}
**Keyboard Nav Tests:** {count}
**Focus Management Tests:** {count}
## Violations Report
| Component | States Scanned | Violations | Status |
|-----------|---------------|------------|--------|
| {component} | {states} | {count} | {PASS|FAIL} |
## Handoff to Next Gate
- Ready for Gate 2 (Unit Testing): {YES|NO}
- Iterations: {count}
See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "It's an internal tool" | WCAG compliance is mandatory for all applications. | Run accessibility tests |
| "The library handles it" | Components can be misused. axe-core catches misuse. | Run axe-core scans |
| "We'll fix accessibility later" | Retrofitting costs 10x. Fix now. | Fix violations now |
| "Only one violation, it's minor" | One violation = FAIL. No exceptions. | Fix all violations |
| "Keyboard nav works, I tested manually" | Manual ≠ automated. Tests must be repeatable. | Write automated tests |