# flipoff-split-flap-display

A skill for building, restyling and embedding FlipOff, a framework-free split-flap board emulator that runs in any browser.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 849 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/flipoff-split-flap-display/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/flipoff-split-flap-display

## What it does

FlipOff is a plain HTML, CSS and JS app that recreates the mechanical split-flap boards from old airport terminals. There is no build step and no npm: you open `index.html` and get a full-screen board with scramble animation and clacking tiles. The skill hands your agent the layout of that codebase so edits land in the right place.

Configuration sits in `js/constants.js`. Grid dimensions (`GRID_COLS`, `GRID_ROWS`), scramble duration, per-tile stagger, auto-rotate interval, colour arrays and the `MESSAGES` list all live there. Text longer than the grid gets cut, shorter text gets padded, so stay within `GRID_COLS × GRID_ROWS` characters. `Board`, `MessageRotator`, `SoundEngine` and `KeyboardController` are importable on their own — handy when you want the board to show live data from your own API.

Audio is where it usually breaks. Browsers block autoplay, so `sound.init()` has to run after a click or keypress; without that gesture the Web Audio context never starts and the board stays silent. Serving the folder with `python3 -m http.server 8080` works better than opening the file directly when you care about sound.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/flipoff-split-flap-display/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/flipoff-split-flap-display/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/flipoff-split-flap-display/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/flipoff-split-flap-display/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills flipoff-split-flap-display
```

2. **Manually: put the files in place**
- File: `.github/skills/flipoff-split-flap-display/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/flipoff-split-flap-display
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/flipoff-split-flap-display/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/flipoff-split-flap-display/SKILL.md

## When to use it
- put a retro flip board on a landing page
- resize the grid and swap the colour palette
- embed the board into an existing page as an iframe or inline
- feed live API data into the display
- wire up keyboard shortcuts and flap sound

## Example prompts
- Add the FlipOff board to my page with a 16×4 grid
- Switch the scramble colours in `js/constants.js` to a dark blue theme
- Embed the board inline and push messages from my API into it

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 139 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md