# 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.

- Skill: `bytesagain/ribbon` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add bytesagain/ribbon`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bytesagain/ribbon/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bytesagain (https://skillmd.com/u/bytesagain)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/bytesagain/ribbon

---


# 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*