Individual skill
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).
skills/video/render-ios-keyboard/SKILL.md
Source commit df8298140d434a6363de0c265eb6af2e571d97a5
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 11, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 1,315
- Repository last updated
- Nov 6, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- claude Repository topic
- claude-skills Repository topic
- claudecode Repository topic
- claudecode-skills Repository topic
- codex Repository topic
- cursor Repository topic
- gtm Repository topic
- skills Repository topic
- engineering Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 7,807 bytesSKILL.mdcore · 7,807 bytesgenerate.jsruns · 4,399 bytesrender.jsruns · 1,536 bytesskill.meta.jsonasset · 134 bytestemplates/keyboard.cssasset · 2,800 bytestests/expected-output.mddoc · 3,016 bytestests/human-test.mddoc · 1,701 bytestests/sample-input.mddoc · 1,619 bytestests/smoke-test.mddoc · 2,111 bytes
Read excerpt
> **Superseded:** the video kit now does this with the phone-chat part, version 1.2.0, in the parts folder of this repository. Every phone-chat style is a style file that draws the same screen frame by frame from the plan's scenes, with the original sounds, in the kit's browser. This atom stays, unchanged in behaviour, for skills outside the kit until they move; its scripts still run.
# 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"]