| name | ui-component-check |
| description | Check React UI components against banking design system rules, accessibility standards, and Radix UI patterns |
UI Component Check Skill
When to Use
Invoke when building or reviewing React UI components for the banking portal.
Design System Checklist
- Uses internal design system components (Radix UI based)
- Follows color palette: Primary (#1A365D), Secondary (#2B6CB0), Error (#E53E3E)
- Typography: Inter font family, sizes from design tokens
- Spacing: 4px grid system (4, 8, 12, 16, 24, 32, 48, 64)
- Responsive: works at 320px, 768px, 1024px, 1440px breakpoints
Banking UI Patterns
- Money display: right-aligned, currency code, 2 decimal places
- Account selector: name + last 4 digits + balance
- Transaction list: date | description | amount (green credit / red debit) | balance
- Confirmation dialogs: required before any money movement
- Session timer: visible countdown, warning at 2 minutes
Accessibility Requirements
- All images have alt text
- Form inputs have visible labels
- Focus indicators visible (2px solid outline)
- Color is not the only indicator (use icons + color)
- Touch targets: minimum 44x44px on mobile