Design or review a UI component with UX best practices, accessibility, and interaction patterns
Designs or reviews UI components with accessibility, interaction patterns, and UX best practices.
/plugin marketplace add standardbeagle/standardbeagle-tools/plugin install ux-developer@standardbeagle-toolsDesign a new component or review an existing one with comprehensive UX considerations.
Gather requirements:
Every interactive component needs these states defined:
| State | Visual | Behavior | Screen Reader |
|---|---|---|---|
| Default | |||
| Hover | |||
| Focus | visible ring/outline | announced | |
| Active/Pressed | |||
| Disabled | reduced opacity, no pointer | not clickable | aria-disabled |
| Loading | spinner/skeleton | aria-busy | |
| Error | error styling | aria-invalid + message | |
| Success | success styling | announced |
prefers-reduced-motion## [Component Name]
### Purpose
[What problem does this solve for users?]
### Anatomy
[Describe the parts of the component]
- Container
- Label
- Icon (optional)
- Helper text (optional)
### States
[Visual representation of each state]
### Behavior
#### Keyboard
- `Tab`: Focus the component
- `Enter/Space`: Activate
- `Escape`: Close/cancel (if applicable)
- Arrow keys: Navigate (if applicable)
#### Mouse/Touch
- Click: [action]
- Hover: [feedback]
- Long press: [action if applicable]
### Accessibility
- Role: [button/checkbox/etc.]
- Required attributes: [aria-label, aria-describedby, etc.]
- Announcements: [what screen reader should say]
### Variations
- Size: small, medium, large
- Style: primary, secondary, ghost
- State: default, loading, disabled
### Do's and Don'ts
| Do | Don't |
|----|-------|
| [Good practice] | [Anti-pattern] |
### Code Example
[Accessible implementation example]
If reviewing existing code:
Analyze current implementation
Read the component code
Identify HTML structure, event handlers, styles
Test with agnt proxy
Use proxy to view component in browser
Use __devtool.inspect() on the component
Run __devtool.auditAccessibility()
Test keyboard navigation
Generate improvement report
Output a complete spec:
# [Component] Specification
## Overview
[Purpose and usage context]
## Props/API
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| | | | |
## Accessibility Specification
- **Role**:
- **Keyboard**:
- **Screen Reader**:
- **Focus**:
## Visual Specification
- **Dimensions**:
- **Colors**: (reference design tokens)
- **Typography**:
- **Spacing**:
## States
[Defined above]
## Testing Checklist
- [ ] Keyboard navigation works
- [ ] Screen reader announces correctly
- [ ] Touch targets adequate
- [ ] All states implemented
- [ ] Reduced motion respected
- [ ] Error states accessible
Offer to: