ribbon
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.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/bytesagain/ribbonRibbon — 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 | [email protected]
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-bytesagain-ribbon": {
"enabled": true,
"auto_update": true
}
}
}Tags
Related Skills
frontend-design
Generates production-ready UI components from natural language. Use when the user asks to design a component, create a button, build a form, prototype a layout, or generate React/Tailwind CSS code. NOT for: backend logic, API design, database schema, or non-UI tasks.
react-best-practices
Audits React code for performance, bundle size, and best practices. Use when reviewing React code, auditing bundle size, finding performance issues, checking React 18+ patterns, or evaluating a React codebase. NOT for: non-React projects, backend Node.js code, or CSS-only reviews.
shadow
Generate and preview CSS shadow effects using CLI tools. Use when you need box-shadow, text-shadow, drop-shadow, layered shadows, presets, animations,
popover
Generate popover UI elements and design assets. Use when building interfaces, creating visual components, or styling web pages.
webpack
Webpack reference tool. Use when working with webpack in frontend contexts.