Ribbon

---
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`

```bash
scripts/script.sh intro
```

Ribbon UI overview — history, anatomy, when to use vs alternatives.

### `anatomy`

```bash
scripts/script.sh anatomy
```

Ribbon anatomy — tabs, groups, controls, contextual tabs, backstage view.

### `patterns`

```bash
scripts/script.sh patterns
```

Design patterns — command organization, progressive disclosure, adaptive layout.

### `controls`

```bash
scripts/script.sh controls
```

Ribbon control types — buttons, split buttons, galleries, drop-downs, spinners.

### `responsive`

```bash
scripts/script.sh responsive
```

Responsive ribbon design — collapse priorities, overflow menus, compact modes.

### `accessibility`

```bash
scripts/script.sh accessibility
```

Accessibility — keyboard navigation, KeyTips, screen reader support, ARIA roles.

### `css`

```bash
scripts/script.sh css
```

CSS implementation patterns — flexbox layout, theming, animations.

### `checklist`

```bash
scripts/script.sh checklist
```

Ribbon UI design review checklist.

### `help`

```bash
scripts/script.sh help
```

### `version`

```bash
scripts/script.sh version
```

---

*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*