flipoff-split-flap-display — скилл для Claude Code: табло аэропорта
Скилл помогает собрать, настроить и встроить эмулятор механического flip-табло FlipOff — веб-приложение без сборки и фреймворков.
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a claude-codeЧто делает flipoff-split-flap-display
FlipOff — это приложение на чистом HTML, CSS и JavaScript, которое рисует в браузере старое аэропортовое табло с перекидными плитками. Ни npm, ни сборки: открываешь index.html и получаешь полноэкранное табло с анимацией перемешивания и щёлканьем. Скилл даёт агенту знание о внутренностях проекта, чтобы тот правил конфиг, а не угадывал.
Вся настройка собрана в js/constants.js: размер сетки (GRID_COLS, GRID_ROWS), длительность перемешивания, задержка между плитками, интервал автосмены сообщений, палитры и массив MESSAGES. Сообщения длиннее сетки обрезаются, короткие добиваются пробелами, так что держи текст в пределах GRID_COLS × GRID_ROWS символов. Классы Board, MessageRotator, SoundEngine и KeyboardController можно импортировать по отдельности — например, чтобы вывести на табло данные из своего API.
Звук упирается в политику автовоспроизведения браузеров: sound.init() вызывается только после клика или нажатия клавиши. Без этого жеста Web Audio не запустится, и табло будет молчать. Локальный сервер через python3 -m http.server 8080 надёжнее прямого открытия файла, если нужен звук.
Какие задачи решает
- собрать ретро-табло для страницы или презентации
- поменять размер сетки и палитру под свой макет
- встроить табло в существующую страницу через iframe или инлайн
- вывести на табло данные из внешнего API
- добавить управление с клавиатуры и звук перелистывания
Примеры запросов агенту
- Добавь flip-табло FlipOff на мою страницу и поставь сетку 16×4
- Поменяй цвета перемешивания в
js/constants.jsна тёмно-синюю тему - Встрой табло в страницу инлайном и выводи в него сообщения из моего API
Как установить flipoff-split-flap-display
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a claude-code2Вручную: положить файлы
~/.claude/skills/flipoff-split-flap-display/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/flipoff-split-flap-display/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a codex2Вручную: положить файлы
.agents/skills/flipoff-split-flap-display/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a cursor2Вручную: положить файлы
.cursor/skills/flipoff-split-flap-display/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills flipoff-split-flap-display2Вручную: положить файлы
.github/skills/flipoff-split-flap-display/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/flipoff-split-flap-displayВручную: положить файлы
.devin/skills/flipoff-split-flap-display/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о flipoff-split-flap-display
Как установить flipoff-split-flap-display в Claude Code?
Выполни npx skills add reason-machines/trending-skills --skill flipoff-split-flap-display -a claude-code. Файл скилла окажется по пути ~/.claude/skills/flipoff-split-flap-display/SKILL.md.
Что делает flipoff-split-flap-display?
Учит агента работать с эмулятором FlipOff: править конфиг в js/constants.js, менять сетку и цвета, подключать классы Board, SoundEngine, MessageRotator и встраивать табло в чужую страницу.
Почему табло не издаёт звук?
Браузеры блокируют автовоспроизведение. Нужен один клик или нажатие клавиши, чтобы sound.init() создал контекст Web Audio, дальше звук играет на каждом переходе.
