render-ios-keyboard
Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage. Includes the 3-suggestion bar, alpha keys, shift/backspace, 123/emoji/space/return row, and the bottom globe+mic strip. No animation logic — slide up/down is the molecule's job (CSS transform on the .keyboard root).
npx skills add gooseworks-ai/goose-skills --skill render-ios-keyboard --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# render-ios-keyboard ## Purpose Provide a drop-in iOS QWERTY keyboard fragment that pairs with messaging atoms (create-chatgpt-mockup, create-imessage-mockup) when a video needs to show someone typing. Static only: the keyboard sits at the bottom of the screen, the molecule's recorder slides it up/down with `transform: translateY(...)`. ## Inputs ```js const { renderKeyboardHTML, renderKeyboardCSS } = require('./generate'); const html = renderKeyboardHTML({ suggestions: ['"He"', 'Hey', 'Heating'], // optional, default ['I', 'The', "I'm"] layout: 'qwerty-lower', // 'qwerty-lower' | 'qwerty-upper' | 'numbers' }); ``` The atom returns an HTML fragment (one `<div class="ios-keyboard">…</div>`) plus the matching CSS. The CSS uses scoped class names so it won't collide with the rest of the page. ## Workflow 1. **Require the module.** `const { renderKeyboardHTML, renderKeyboardCSS } = require('./generate');` — no build step, no dependencies beyond Node's `fs`/`path`. 2. **Pick a layout.** `renderKeyboardHTML` reads `opts.layout` and looks it up in `ROWS`: `qwerty-lower` (default), `qwerty-upper`, or `numbers`. An unknown layout silently falls back to `qwerty-lower`. The molecule decides
- Purpose
- Inputs
- Workflow
- CLI (for local visual testing)
- Output
- Files
- Quality checks
- Known limitations
- Quality Checks
- Failure Modes
node render.js --out /tmp/kb.html --suggestions 'I,The,I'\''m'
What does the render-ios-keyboard skill do?
Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage. Includes the 3-suggestion bar, alpha keys, shift/backspace, 123/emoji/space/return row, and the bottom globe+mic strip. No animation logic — slide up/down is the molecule's job (CSS transform on the .keyboard root).
How do I install it?
Run `npx skills add gooseworks-ai/goose-skills --skill render-ios-keyboard --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From gooseworks-ai/goose-skills, a repository with 1,091 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.