| name | ribbon |
| version | 1.0.0 |
| description | Ribbon UI component reference — design patterns, accessibility, responsive layouts, implementation. Use when designing ribbon toolbars, implementing Office-style command bars, or building complex toolbar UIs. |
| author | BytesAgain |
| homepage | https://bytesagain.com |
| source | https://github.com/bytesagain/ai-skills |
| tags | ["ribbon","toolbar","ui-component","command-bar","office-ui","tabbed-toolbar","frontend"] |
| category | frontend |
Ribbon — Ribbon UI Component Reference
Quick-reference skill for ribbon toolbar design patterns, implementation, and best practices.
When to Use
- Designing ribbon-style toolbars for complex applications
- Implementing tabbed command bars with grouped actions
- Adapting Office-style UI patterns for web applications
- Making ribbon interfaces accessible and responsive
- Organizing large command sets into discoverable groups
Commands
intro
scripts/script.sh intro
Ribbon UI overview — history, anatomy, when to use vs alternatives.
anatomy
scripts/script.sh anatomy
Ribbon anatomy — tabs, groups, controls, contextual tabs, backstage view.
patterns
scripts/script.sh patterns
Design patterns — command organization, progressive disclosure, adaptive layout.
controls
scripts/script.sh controls
Ribbon control types — buttons, split buttons, galleries, drop-downs, spinners.
responsive
scripts/script.sh responsive
Responsive ribbon design — collapse priorities, overflow menus, compact modes.
accessibility
scripts/script.sh accessibility
Accessibility — keyboard navigation, KeyTips, screen reader support, ARIA roles.
css
scripts/script.sh css
CSS implementation patterns — flexbox layout, theming, animations.
checklist
scripts/script.sh checklist
Ribbon UI design review checklist.
help
scripts/script.sh help
version
scripts/script.sh version
Powered by BytesAgain | bytesagain.com | hello@bytesagain.com
