CtrlK
BlogDocsLog inGet started
Tessl Logo

create-apple-notes-mockup

Render pixel-accurate Apple Notes (iPhone, light mode) screenshot mockups from a JSON note spec. Outputs HTML + PNG at the iPhone 16/15 Pro native 1180×2556. Supports paragraphs, images, checklists, dividers, autocorrect underline, smart quotes, and an optional iOS keyboard chrome overlay used by the parent video-ad molecule.

66

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

88%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 an exemplary operational skill: fully executable CLI guidance, a complete input schema, an explicit verify-and-re-render feedback loop, and deep domain fidelity details (failure modes, quality checklist) that Claude could not infer. Its only deductions are minor redundancy between the intro, Purpose, and When-to-use sections and small bundle-hygiene gaps (an unreferenced reference-frames directory and a cited build-review HTML not present in the bundle).

DimensionReasoningScore

Conciseness

Nearly all content is skill-specific fidelity knowledge Claude cannot know (smart punctuation mappings, #FFCC00 vs #FFC107, scroll-mask verification, failure modes), presented in tight tables and checklists. Minor trimmable padding exists: the opening paragraph duplicates the frontmatter description, and the Purpose section restates the "When to use" territory ("deterministic, no-LLM renderer... standalone tool for one-off 'noted to self' beats"). Not 5: those two redundant prose passages cost tokens without adding guidance; not 3: there is no explanation of concepts Claude already knows.

4 / 5

Actionability

"node render.js --note examples/mid.json", a complete copy-paste-ready JSON spec example, a full flags table ("--out-html <path> / --out-png <path>"), exact output folder layout, one-time setup commands ("npm install; npx playwright install chromium"), and a Files table mapping every script to its purpose. Everything is executable with specific values (1180×2556, DPR 2, #FFCC00) and the 6 examples cover the common cases. Not 4: there are no gaps — even edge flags like --viewport and --dpr are documented with defaults.

5 / 5

Workflow Clarity

The Workflow section sequences receive → compose note.json → run render.js → "Open the resulting PNG to verify the layout. If something looks wrong (wrong wrap, wrong cursor position, wrong battery color), edit the JSON and re-render" — an explicit validate-fix-retry feedback loop, reinforced by an 11-item Quality Checks checklist (including the DevTools scroll-mask verification) and a symptom/cause/fix Failure Modes table. Not 4: validation checkpoints are explicit and error recovery is fully specified, not merely implied.

5 / 5

Progressive Disclosure

The body is a well-sectioned overview (Purpose, When to use, Inputs, CLI, Output, Workflow, Setup, Files, Quality Checks, Failure Modes) with a Files table that clearly signals each bundle file's purpose, and references are one level deep with no nesting. Scored against the actual bundle: assets/samples/sample-landscape.jpg is correctly referenced and present, but references/reference-frames/ (3 JPGs) exists in the bundle and is never mentioned in SKILL.md, and apple-notes-skill-build.html is cited twice but absent from the provided bundle — minor organization/discovery gaps. Not 5: those unreferenced/dangling paths prevent fully clean navigation; not 3: structure and signaling are clearly good, not merely present.

4 / 5

Total

18

/

20

Passed

Description

71%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 distinctive, with concrete outputs, exact resolution, and an enumerated feature list, all in appropriately concise third person. Its one structural weakness is the absence of any explicit "Use when..." trigger clause, which caps completeness and leaves invocation guidance implicit.

Suggestions

Append an explicit trigger clause, e.g., "Use when the user asks for a fake Apple Notes / Notes-app screenshot, a typing-animation frame sequence for a video ad, or a 'noted to self' beat in a storyboard."

Add one or two natural synonym phrases users would say ("Notes app", "fake iPhone Notes screenshot") to improve trigger-term coverage.

Consider noting when NOT to use it (e.g., iMessage threads) in the description to reduce overlap with sibling mockup skills.

DimensionReasoningScore

Specificity

"Render pixel-accurate Apple Notes (iPhone, light mode) screenshot mockups from a JSON note spec. Outputs HTML + PNG at the iPhone 16/15 Pro native 1180×2556" plus an enumerated feature list ("paragraphs, images, checklists, dividers, autocorrect underline, smart quotes, and an optional iOS keyboard chrome overlay") names multiple concrete actions with comprehensive coverage of the tool's capabilities. Not 4: the coverage has no minor gaps — input format, outputs, and every supported block type are named.

5 / 5

Completeness

The "what" is explicit and concrete (render Apple Notes mockups from JSON, output HTML+PNG at 1180×2556), but there is no "Use when..." clause or equivalent explicit trigger guidance anywhere in the description — the only usage hint is the oblique "used by the parent video-ad molecule". Per the judging guidelines, a missing when-clause caps completeness at 3. Not 4: the when cannot be considered present even implicitly for a standalone reader.

3 / 5

Trigger Term Quality

"Apple Notes", "screenshot mockups", "iPhone", "HTML + PNG" are natural terms a user would say, but common variations like "Notes app", "fake Notes screenshot", "typing animation", or "note mockup" are absent. Not 5: the anchor requires synonyms/extensions-level coverage, which this lacks; not 3: keyword coverage is good and domain-accurate, not merely "some relevant keywords".

4 / 5

Distinctiveness Conflict Risk

"Apple Notes (iPhone, light mode)" carves a clear, near-unique niche, but the generic phrase "screenshot mockups" and the mentioned sibling rendering domain create minor overlap risk with closely related mockup skills (e.g., an iMessage mockup skill referenced in the body). Not 5: a user asking generically for an "iPhone screenshot mockup" could plausibly trigger a sibling skill; not 3: the Apple Notes domain is far more specific than the anchor's "Works with document files".

4 / 5

Total

16

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 1 deeper-than-1-level

Warning

Total

15

/

16

Passed

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.