flipoff-split-flap-display — Claude Code skill: airport flip board
A skill for building, restyling and embedding FlipOff, a framework-free split-flap board emulator that runs in any browser.
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a claude-codeWhat flipoff-split-flap-display 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.
What it helps with
- 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 for the agent
- Add the FlipOff board to my page with a 16×4 grid
- Switch the scramble colours in
js/constants.jsto a dark blue theme - Embed the board inline and push messages from my API into it
How to install flipoff-split-flap-display
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a claude-code2Manually: put the files in place
~/.claude/skills/flipoff-split-flap-display/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/flipoff-split-flap-display/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a codex2Manually: put the files in place
.agents/skills/flipoff-split-flap-display/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a cursor2Manually: put the files in place
.cursor/skills/flipoff-split-flap-display/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills flipoff-split-flap-display2Manually: put the files in place
.github/skills/flipoff-split-flap-display/SKILL.md1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a gemini-cli2Platform CLI
gemini skills install https://github.com/reason-machines/trending-skills --path skills/flipoff-split-flap-displayManually: put the files in place
.devin/skills/flipoff-split-flap-display/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about flipoff-split-flap-display
How do I install flipoff-split-flap-display in Claude Code?
Run npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a claude-code. The skill file lands at ~/.claude/skills/flipoff-split-flap-display/SKILL.md.
What does flipoff-split-flap-display do?
It teaches the agent how FlipOff is put together: editing js/constants.js, resizing the grid, changing colours, importing Board, SoundEngine and MessageRotator, and embedding the board in another page.
Why is the board silent?
Browser autoplay rules block the audio context until the user interacts. One click or keypress lets sound.init() start Web Audio, and after that the flap sound plays on every transition.
