New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Render iOS Keyboard

by gooseworks-ai in gooseworks-ai/goose-skills

Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage.

MITAuto-check passedDocuments & Office

Install Render iOS Keyboard

skills CLI
$ npx skills add gooseworks-ai/goose-skills --skill render-ios-keyboard -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install gooseworks-ai/goose-skills render-ios-keyboard --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/gooseworks-ai/goose-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ads/packs/video-ad-formats/render-ios-keyboard .claude/skills/render-ios-keyboard && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
render-ios-keyboard
GitHub stars
1.2k
Used in
1 other repo
Token cost
~1.9k tokens
SKILL.md length
948 words
Files
10
Skills in repo
273
Repo updated
First seen
Licence
MIT

At a glance

Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage.

  • Works in 7 steps: Require the module. const {… → Pick a layout. renderKeyboardHTML reads… → Pass suggestions. opts.suggestions is an… → …
  • Tasks that involve Slides and decks
  • SKILL.md covers Purpose, Inputs, Workflow and CLI (for local visual testing), plus 6 more sections
  • Runs JavaScript scripts from its folder; calls node

What it does

Render iOS Keyboard is an agent skill from gooseworks-ai/goose-skills. 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).

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files (for example `generate.js`, `render.js` and `skill.meta.json`).

It sits in Documents & Office, covering Slides and decks. It works with iOS. The repository describes itself as: Library of Growth & GTM skills + data APIs for Claude Code, Codex, Cursor to run ads, social, content, lead gen, seo and data scraping. The licence is MIT.

When your agent uses it

  • Tasks that involve Slides and decks

Example prompts

  • “/render-ios-keyboard”

Requirements

  • Node.js

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Require the module. const { renderKeyboardHTML, renderKeyboardCSS } = require('./generate'); — no build step, no dependencies beyond…
  2. Pick a layout. renderKeyboardHTML reads opts.layout and looks it up in ROWS: qwerty-lower (default), qwerty-upper, or numbers. An unknown…
  3. Pass suggestions. opts.suggestions is an array of up to three strings rendered into the suggestion bar; each value is run through…
  4. Receive the fragment. The function returns a single root containing, in order: the .kb-suggestions bar, three letter rows (row-1 10 keys…
  5. Inject the CSS once. Call renderKeyboardCSS() (which reads templates/keyboard.css from disk) and place it in a block on the page. The…
  6. Animate externally. The atom emits no JS and never sets a transform. The owning molecule slides the keyboard in/out via transform…
  7. (Optional) Preview standalone. render.js wraps the fragment + CSS in a 750×1334 white .stage HTML page and writes it to --out for…

What it can do on your machine

Read from SKILL.md and the folder at commit c650c6d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Render iOS Keyboard loads about 1.9k tokens when it runs. Until then it costs about 81 tokens; SKILL.md has 948 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~81
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from gooseworks-ai/goose-skills at commit c650c6d, republished under its MIT licence (© gooseworks-ai). 948 words, ~1,944 tokens.

Download SKILL.mdSave it as .claude/skills/render-ios-keyboard/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.
name
render-ios-keyboard
description
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).
status
superseded
superseded_by
phone-chat@1.1.4

Superseded: the video kit now does this with the phone-chat part, version 1.1.4, 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"]
  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 which state to show; this atom never switches on its own.
  3. Pass suggestions. opts.suggestions is an array of up to three strings rendered into the suggestion bar; each value is run through escapeHTML so quotes/angle brackets are safe. Omit it to get the default ['I', 'The', "I'm"].
  4. Receive the fragment. The function returns a single root <div class="ios-keyboard" data-layout="…"> containing, in order: the .kb-suggestions bar, three letter rows (row-1 10 keys, row-2 9 keys padded with two 18px spacers, row-3 = shift/#+= modifier + 7 keys + backspace), the row-bottom (123/ABC switch, emoji, wide space, return), and the .kb-system-row globe + mic strip.
  5. Inject the CSS once. Call renderKeyboardCSS() (which reads templates/keyboard.css from disk) and place it in a <style> block on the page. The molecule mounts the fragment at the bottom of the stage next to .composer-wrap.
  6. Animate externally. The atom emits no JS and never sets a transform. The owning molecule slides the keyboard in/out via transform: translateY(...) on the .ios-keyboard root (the CSS sets will-change: transform for this).
  7. (Optional) Preview standalone. render.js wraps the fragment + CSS in a 750×1334 white .stage HTML page and writes it to --out for eyeballing padding/colors.

CLI (for local visual testing)

bash
node render.js --out /tmp/kb.html --suggestions 'I,The,I'\''m'

Produces a standalone HTML page with just the keyboard, useful for tweaking padding/colors.

Output

OutputShape
renderKeyboardHTML(opts)HTML string (one root <div class="ios-keyboard">)
renderKeyboardCSS()CSS string (scoped to .ios-keyboard *)

The molecule injects these into the chatgpt-mockup page next to .composer-wrap.

Files

FilePurpose
generate.jsReturns {renderKeyboardHTML, renderKeyboardCSS}
render.jsStandalone CLI for visual review
templates/keyboard.cssAll keyboard styling

Quality checks

  • Keyboard fits in 518px vertical space on the 750-wide stage (matches iOS QWERTY on a Pro-class iPhone)
  • Three suggestion pills are visible above the keys with vertical dividers between them
  • Shift, backspace are sized correctly (~10% wider than letter keys)
  • Space bar reads as a single wide white pill
  • Globe and mic at the very bottom edge of the keyboard, in the system tray strip
  • No JS — pure HTML/CSS so the recorder can slide it without re-render

Known limitations

  • No key-pop animation. When a key is pressed in the real keyboard, the letter renders larger above the row briefly. v1 skips this.
  • Lowercase QWERTY default. Uppercase/numbers variants supported via layout but are visual-only — the molecule decides which to show.
  • No emoji panel. The emoji button is rendered but doesn't expand.
Show full SKILL.md (374 more words)Show less

Quality Checks

  • renderKeyboardHTML() returns a single root element starting with <div class="ios-keyboard" and carrying the matching data-layout attribute (qwerty-lower | qwerty-upper | numbers).
  • The fragment contains exactly one .kb-suggestions bar, three letter rows (.row-1, .row-2, .row-3), one .row-bottom, and one .kb-system-row — in that DOM order.
  • Suggestion count and text match the suggestions array (default ['I', 'The', "I'm"]); the bar renders one .kb-suggestion span per entry with vertical dividers between adjacent pills.
  • qwerty-lower renders lowercase letters and a shift glyph; qwerty-upper renders uppercase letters; numbers renders the digit/symbol rows with the #+= modifier and an ABC switch key instead of 123.
  • User-supplied strings are HTML-escaped — passing '<b>' or '"He"' yields &lt;b&gt; / &quot;He&quot;, never raw markup.
  • renderKeyboardCSS() returns the full contents of templates/keyboard.css, scoped under .ios-keyboard, and the fragment carries no inline style except the two 18px row-2 spacer divs.
  • Rendered at 750px stage width, the keyboard occupies roughly 518px of vertical space; shift/backspace/123/emoji/return modifier keys are visibly wider than letter keys; space is one wide white pill; the globe sits bottom-left and mic bottom-right in the system strip.
  • The output is pure HTML/CSS — no <script> and no JS event handlers — so a recorder can slide it with a CSS transform without re-rendering.

Failure Modes

  • Unknown layout value → ROWS[layout] is undefined, so the renderer silently falls back to qwerty-lower. Symptom: you asked for uppercase or numbers and got lowercase letters. Fix: pass exactly 'qwerty-lower', 'qwerty-upper', or 'numbers'.
  • More than three suggestions → every entry still renders as a .kb-suggestion (they flex: 1 1 0), so a long array squashes the pills and breaks the iOS-accurate 3-up layout. Keep suggestions to three or fewer; long strings are clipped with text-overflow: ellipsis.
  • CSS not injected → calling renderKeyboardHTML() without also emitting renderKeyboardCSS() produces an unstyled stack of divs (no rounded keys, no gray tray). Always include both on the page.
  • templates/keyboard.css missing or unreadable → renderKeyboardCSS() calls fs.readFileSync and will throw ENOENT. Run from a checkout where templates/keyboard.css sits next to generate.js.
  • render.js run without --out → the CLI prints the usage line and exits with code 1; nothing is written. Always pass --out <path>.
  • Expecting animation or interactivity → there is none. No key-pop, no emoji panel, no caps-lock toggle. The molecule owns slide-up/down and which layout to show; this atom is static by design.

© gooseworks-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 9 other files in skills/ads/packs/video-ad-formats/render-ios-keyboard of gooseworks-ai/goose-skills.

  • SKILL.md
  • generate.js
  • render.js
  • skill.meta.json
  • templates/keyboard.css
  • tests/expected-output.md
  • tests/human-test.md
  • tests/sample-input.md
  • tests/smoke-test.md
  • tests/verifier.md

Open the folder on GitHubat commit c650c6d

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in gooseworks-ai/goose-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Render iOS Keyboard next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Render iOS Keyboard compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Render iOS Keyboard this skillgooseworks-ai/goose-skills1.2k1 repos~1.9kAutomated safety check: PassMIT
Create Chatgpt Video Adcriptogus/agent-evolve-network288—~5kAutomated safety check: PassCustom licence
Image To Editable Pptningzimu/image-to-editable-ppt-skill2.9k—~4.3kAutomated safety check: PassMIT
Slidesfcakyon/claude-codex-settings1.2k1 repos~1.1kAutomated safety check: PassMIT
Ppt Image FirstNyxTides/ppt-image-first1.2k—~1.6kAutomated safety check: PassApache-2.0
Vibe to Agentic Engineering Frameworkshanraisshan/claude-code-best-practice67k—~3.3kAutomated safety check: PassMIT

Similar skills

  • Create Chatgpt Video Ad

    criptogus/agent-evolve-network

    Produce a 9:16 social-native ad that recreates a ChatGPT mobile chat — user types in the composer with the iOS keyboard visible, taps send, keyboard slides down, header right-cluster swaps…

    288 GitHub stars~5k tokensUpdated 2 days ago
    Testing & QAAuto-check passed

  • Image To Editable Ppt

    ningzimu/image-to-editable-ppt-skill

    Rebuild slide images, scanned or image-based PPT/PPTX files, and PDF decks into object-level editable PowerPoint (.pptx), preserving speaker notes when supplied.

    2.9k GitHub stars~4.3k tokensUpdated 25 days ago
    Documents & OfficeAuto-check passed

  • Slides

    fcakyon/claude-codex-settings

    Create and edit presentation slide decks (.pptx) with PptxGenJS, bundled layout helpers, and render/validation utilities.

    1.2k GitHub starsUsed in 1 repo~1.1k tokens
    Documents & OfficeAuto-check passed

  • Ppt Image First

    NyxTides/ppt-image-first

    Build presentation plans for PPT / slides / decks through a conversation-first workflow, then propose multiple visual directions with preview images before writing deck specs.

    1.2k GitHub stars~1.6k tokensUpdated 5 mo ago
    Documents & OfficeAuto-check passed

  • Vibe to Agentic Engineering Framework

    shanraisshan/claude-code-best-practice

    Explains the conceptual model behind a presentation on moving from unstructured vibe coding to fully configured agentic engineering, including its 4-level scoring system and slide conventions.

    67k GitHub stars~3.3k tokensUpdated today
    Documents & OfficeAuto-check passed

  • Gpt Image2 Ppt

    JuneYaooo/gpt-image2-ppt-skills

    Generate visually striking PPT slides via OpenAI's gpt-image-2 -- use any style in styles/<collection/STYLEID.md or mimic a user-supplied .pptx template; outputs high-res slide PNGs and a 16:9 .pptx.

    1.3k GitHub stars~8.9k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes

More from gooseworks-ai/goose-skills

All 273 skills in this repo

  • Reddit Post Finder

    gooseworks-ai/goose-skills

    Scrape and search Reddit posts using Apify. An agent skill from gooseworks-ai/goose-skills.

    1.2k GitHub starsUsed in 1 repo~1.2k tokens
    Auto-check passed

  • Create Image Fal

    gooseworks-ai/goose-skills

    Generate or edit an image via any FAL image model (nano-banana edit, gpt-image, flux, ...), ROUTED THROUGH THE fal-proxy so it bills the Ads agent.

    1.2k GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Render Hook Replacement

    gooseworks-ai/goose-skills

    Replace an existing video's opening with a supplied clip or free kinetic text hook while retaining and verifying every original body frame, audio, captions and ending.

    1.2k GitHub stars~2.3k tokensUpdated today
    Auto-check passed

  • Blog Feed Monitor

    gooseworks-ai/goose-skills

    Scrape blog posts via RSS feeds (free, no API key) with Apify fallback for JS-heavy sites.

    1.2k GitHub starsUsed in 1 repo~578 tokens
    Auto-check passed

  • Competitor Post Engagers

    gooseworks-ai/goose-skills

    Find leads by scraping engagers from a competitor's top LinkedIn posts.

    1.2k GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check: notes

  • Render Chatgpt Chat

    gooseworks-ai/goose-skills

    Assemble a ChatGPT chat-reveal video ad from a thread + timeline JSON — one continuous Playwright recording of a ChatGPT mobile chat (user types with the iOS keyboard up → taps send → keyboard…

    1.2k GitHub stars~2.3k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Render iOS Keyboard

What does Render iOS Keyboard do?

Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage. Render iOS Keyboard is an agent skill from gooseworks-ai/goose-skills. Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage.

When should I use Render iOS Keyboard?

Render iOS Keyboard fits situations like: tasks that involve Slides and decks.

How do I install Render iOS Keyboard in Claude Code?

Run `npx skills add gooseworks-ai/goose-skills --skill render-ios-keyboard -a claude-code`. Or copy the skill folder (skills/ads/packs/video-ad-formats/render-ios-keyboard in gooseworks-ai/goose-skills) into .claude/skills/render-ios-keyboard in your project. Claude Code loads it when a task matches its description.

How do I install Render iOS Keyboard in Codex?

Run `npx skills add gooseworks-ai/goose-skills --skill render-ios-keyboard -a codex`. Or copy the skill folder (skills/ads/packs/video-ad-formats/render-ios-keyboard in gooseworks-ai/goose-skills) into .agents/skills/render-ios-keyboard in your project. Codex loads it when a task matches its description.

Can I use Render iOS Keyboard in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add gooseworks-ai/goose-skills --skill render-ios-keyboard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/render-ios-keyboard, .gemini/skills/render-ios-keyboard, .github/skills/render-ios-keyboard and .opencode/skills/render-ios-keyboard in your project.

What does Render iOS Keyboard need to run?

Going by SKILL.md and its folder, Render iOS Keyboard needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.

Does Render iOS Keyboard access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Render iOS Keyboard safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Render iOS Keyboard use?

Render iOS Keyboard is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Render iOS Keyboard use?

About 1.9k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Render iOS Keyboard?

Skills that share tags, products or a category with Render iOS Keyboard: Create Chatgpt Video Ad (criptogus/agent-evolve-network, 288 stars), Image To Editable Ppt (ningzimu/image-to-editable-ppt-skill, 2.9k stars), Slides (fcakyon/claude-codex-settings, 1.2k stars) and Ppt Image First (NyxTides/ppt-image-first, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Render iOS Keyboard?

gooseworks-ai (a GitHub organization) maintains it in gooseworks-ai/goose-skills, which has 1,240 GitHub stars. The repository holds 273 skills in this directory. The repository was last updated on October 8, 2026.

Source: gooseworks-ai/goose-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.