verify-bulk-action-bar
Ensures UI consistency and accessibility for BulkActionBar patterns in front-end development.
Install
mkdir -p .claude/skills/verify-bulk-action-bar && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14452" && unzip -o skill.zip -d .claude/skills/verify-bulk-action-bar && rm skill.zipInstalls to .claude/skills/verify-bulk-action-bar
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
BulkActionBar 패턴 SSOT 검증 — count chip aria-live, role=toolbar, Esc clear, indeterminate Radix, focus management, IME guard. 일괄 작업 UI 변경 시 트리거. canonical = components/common/BulkActionBar.tsx (도메인 무관 generic), components/approvals/BulkActionBar.tsx는 approvals 특화 wrapper.Key capabilities
- →Verify `aria-live` attribute for count chips in toolbars.
- →Ensure `role="toolbar"` and `aria-label` are present on the container.
- →Check for `return null` or `aria-hidden="true"` when no items are selected.
- →Validate indeterminate state handling for Radix Checkbox.
- →Confirm focus management after Esc key press.
How it works
This skill verifies the BulkActionBar pattern by checking ARIA attributes, keyboard interactions, and component states using grep commands and predefined policies to ensure UX consistency and accessibility.
Inputs & outputs
When to use verify-bulk-action-bar
- →Audit UI accessibility
- →Verify bulk action logic
- →Check keyboard focus management
About verify-bulk-action-bar
Validates ARIA roles, live regions, and keyboard interaction patterns for bulk action interfaces. It maintains SSOT for design tokens and hooks.
BulkActionBar 패턴 SSOT 검증 — count chip aria-live, role=toolbar, Esc clear, indeterminate Radix, focus management, IME guard. 일괄 작업 UI 변경 시 트리거. canonical = components/common/BulkActionBar.tsx (도메인 무관 generic), components/approvals/BulkActionBar.tsx는 approvals 특화 wrapper.
When not to use it
- →When the user needs to dedup `components/approvals/BulkActionBar.tsx` and `components/common/BulkActionBar.tsx`.
- →When the user wants to add window-level keydown listeners.
- →When the user wants to use HTML basic `<input type="checkbox" indeterminate>`.
Limitations
- →The skill does not perform deduping of BulkActionBar components.
- →It prohibits window-level keydown listeners for Esc key handling.
- →It prohibits the use of HTML basic `<input type="checkbox" indeterminate>`.
How it compares
This skill provides a structured, automated verification process for BulkActionBar patterns against specific accessibility and UX policies, which is more systematic than manual inspection.
Compared to similar skills
verify-bulk-action-bar side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| verify-bulk-action-bar (this skill) | 0 | 3mo | Review | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
| radix-ui-design-system | 33 | 2mo | Review | Intermediate |
| reusable-ui-components | 1 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by junnv93
View all by junnv93 →You might also like
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
reusable-ui-components
EvanBacon
Guidelines for creating reusable, portable UI components with native-first design, compound patterns, and accessibility
ui-testing
alinaqi
Visual testing - catch invisible buttons, broken layouts, contrast
rule-accessibility
btabaska
MANDATORY when editing files matching ["frontend/src/**/*.tsx", "frontend/src/**/*.ts"]. Accessibility requirements for all frontend code. WCAG 2.1 AA and Section 508 compliance is legally mandated for this federal project.
frontend-patterns
forgivesam168
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.