CtrlK
BlogDocsLog inGet started
Tessl Logo

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).

64

Quality

81%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

77%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is highly actionable — concrete API, CLI, defaults, explicit validation checks, and thorough failure-mode documentation — and the workflow is cleanly sequenced. Its weaknesses are redundancy (two overlapping Quality checks sections and an Output table repeating the workflow) and a Files table pointing at bundle files that are not present. Consolidating the checks and shipping the referenced files would move this to excellent.

Suggestions

Merge the checkbox "Quality checks" section into the detailed "Quality Checks" section — the 518px fit, suggestion pills, wide space bar, globe/mic strip, and no-JS items are each stated twice.

Ship the referenced bundle files (generate.js, render.js, templates/keyboard.css) or correct the Files table so the one-level-deep references actually resolve; alternatively inline the CSS template reference as a pointer to wherever it lives.

Drop or shrink the "Output" table, since steps 4–5 of the workflow already state the return shapes (one root `<div class="ios-keyboard">` plus a scoped CSS string).

DimensionReasoningScore

Conciseness

The body is mostly efficient and project-specific (no explanations of concepts Claude already knows), but it carries clear waste: a checkbox "Quality checks" section ("Keyboard fits in 518px…", "No JS — pure HTML/CSS…") that substantially duplicates the later detailed "Quality Checks" section, and an "Output" table that restates what steps 4–5 of the workflow already said. This matches "mostly efficient but could be tightened" rather than level 4, which presumes only minor trims.

3 / 5

Actionability

Guidance is fully executable: a copy-paste `require('./generate')` call with concrete options and defaults (`suggestions: ['"He"', 'Hey', 'Heating']`, `layout: 'qwerty-lower'`), a runnable CLI (`node render.js --out /tmp/kb.html`), exact output shapes, and concrete behavioral specs like "passing `'<b>'` … yields `&lt;b&gt;` …, never raw markup". Specific examples cover the common cases, matching the level-5 anchor.

5 / 5

Workflow Clarity

The 7-step workflow is clearly sequenced (require → pick layout → pass suggestions → receive fragment → inject CSS → animate externally → optional preview), and the "Quality Checks" section provides explicit validation (single root element, exact DOM order, escaping behavior, 518px footprint, no `<script>`), while "Failure Modes" gives symptom→fix recovery loops (e.g., unknown `layout` fallback, missing CSS → ENOENT). This is a non-destructive single-purpose skill whose sequence plus checklist plus error recovery matches the level-5 anchor.

5 / 5

Progressive Disclosure

Section structure is clean and the Files table clearly signals one-level-deep references (`generate.js`, `render.js`, `templates/keyboard.css`), but none of those files exist in the bundle (no references/, scripts/, or assets/ directories are present), so the navigation targets are unresolvable. Combined with inline duplicated quality-check content that should be consolidated, this fits "some structure but could be better organized" rather than level 4, which requires references to be mostly clear and resolvable.

3 / 5

Total

16

/

20

Passed

Description

75%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is highly specific and distinct, enumerating the exact UI components rendered and an explicit scope boundary (no animation). Its main weakness is the absence of any "Use when…" trigger clause, which caps completeness and limits discoverability. Adding explicit usage triggers (e.g., "Use when a video mockup needs to show someone typing on an iPhone") would raise it to a top-tier description.

Suggestions

Add an explicit trigger clause, e.g. "Use when building iPhone/message mockups (ChatGPT, iMessage) that need to show an on-screen keyboard or someone typing."

Include natural synonyms users might say — "iPhone keyboard", "typing", "texting screen" — alongside the existing "iOS QWERTY keyboard" phrasing.

Replace the opaque jargon "slide up/down is the molecule's job" with plainer wording (e.g., "animation/interactivity is intentionally excluded") so the description reads clearly outside its internal project context.

DimensionReasoningScore

Specificity

"Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage" names a concrete deliverable, and the description enumerates the full component inventory ("3-suggestion bar, alpha keys, shift/backspace, 123/emoji/space/return row, and the bottom globe+mic strip") plus an explicit non-goal ("No animation logic"). Coverage of what the render includes is comprehensive for its narrow domain, matching the level-5 anchor; it is above level 4 because nothing in scope is left as a minor gap.

5 / 5

Completeness

The "what" is clear and concrete (render a static iOS QWERTY keyboard as HTML+CSS), but there is no "Use when…" clause or equivalent explicit trigger guidance anywhere in the description — the pairing context with mockup molecules lives only in the body. Per the judging guideline, a missing explicit trigger clause caps completeness at 3.

3 / 5

Trigger Term Quality

"iOS QWERTY keyboard", "suggestion bar", and "HTML+CSS" are natural phrases a user would say when needing this skill, giving good keyword coverage. It falls short of level 5 because common variations like "iPhone keyboard", "typing", "texting", or "message mockup" are absent, leaving a few natural terms missing.

4 / 5

Distinctiveness Conflict Risk

"Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage" carves out a clear niche (a static keyboard fragment, explicitly not an interactive component) with distinct triggers and minimal overlap with sibling mockup-page skills. It clearly fits the level-5 anchor rather than level 4, which implies residual overlap with closely related skills.

5 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
gooseworks-ai/goose-skills
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.