OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add szilu/ux-designer-skill --skill ux-designer
UX/UI design principles for building and critiquing interfaces. Use for accessibility audits (WCAG, EAA), microcopy, forms, navigation, onboarding, internationalization and RTL, voice and AI interfaces, and design systems.
npx skills add szilu/ux-designer-skill --skill ux-designer
Apply the following UX/UI principles when designing or reviewing interfaces.
Use this skill when:
prefers-reduced-motiondir="rtl")Intl| Metric | Value | Context |
|---|---|---|
| Touch target | 44-48px | Minimum tappable area |
| Body text | 16px+ | Minimum readable size |
| Line height | 1.2-1.45 | Optimal readability |
| Line length | 50-75 chars | Ideal for reading |
| Contrast ratio | 4.5:1 | WCAG AA for normal text |
| Contrast ratio | 3:1 | WCAG AA for large text |
| Working memory | 7±2 items | Miller's Law |
| Text expansion | ~30-40% | Translation growth (DE/FI/RU) |
| Metric | Value | Context |
|---|---|---|
| Animation | 300-500ms | Natural feeling duration |
| Touch feedback | < 100ms | Perceived instant response |
| Form abandonment | 81% | Users who start but don't finish |
| Canvas zoom range | 10%-4000% | Typical design tool range |
| Smart guide snap | 2-8px | Distance before snapping |
| Canvas render | 60fps | Target during pan/zoom |
| Metric | Value | Context |
|---|---|---|
| Cursor update rate | 50-100ms | Smooth live cursor movement |
| Cursor label max | 12 chars | Truncate longer usernames |
| Avatar stack | 3-5 visible | Use "+N" for overflow |
| Metric | Value | Context |
|---|---|---|
| AI first token | < 1s | Perceived responsiveness |
| AI streaming | 30-80 tok/s | Natural reading pace |
| Copilot accept rate | 25-35% | Suggestion usefulness |
| Metric | Value | Context |
|---|---|---|
| Onboarding completion | > 65% | Checklist finish rate |
| Time to first value | < 5 min | Sign-up to activation |
| Toast duration | 4-8s | Auto-dismiss timing |
| Search success | > 70% | Users finding results |
| NPS | > 50 | User sentiment |
This skill synthesizes best practices from:
What needs the user's attention?
├── Immediate action required?
│ ├── Blocking (must resolve before continuing)?
│ │ └── → Modal dialog (confirmation, error recovery)
│ └── Non-blocking but urgent?
│ └── → Banner (top of page, persistent until dismissed)
├── Feedback on a completed action?
│ ├── Success or low-importance info?
│ │ └── → Toast (auto-dismiss 4-8s)
│ └── Warning or error?
│ └── → Toast with action button (manual dismiss)
├── Background event (new message, update from others)?
│ ├── User is in the same context?
│ │ └── → Badge + subtle inline indicator
│ └── User is elsewhere in the app?
│ └── → Badge on nav item + optional push notification
└── System status (maintenance, connectivity)?
└── → Persistent banner (top or bottom of viewport)