CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

mockup-device-3d

Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.

64

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

High

Do not use without reviewing

Fix and improve this skill with Tessl

tessl review fix ./skills/mockup-device-3d/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

86%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 content is a dense, token-efficient design spec with exact CSS values, viewport dimensions, input-handling branches, and explicit prohibitions (no external mockup images, no lorem ipsum, no srcdoc nesting). It is a strong single-file skill whose only notable gap is the absence of a complete HTML starting example and a final output check.

DimensionReasoningScore

Conciseness

The body is a lean imperative spec with exact values ('rotateY(-12deg) rotateX(4deg) translateZ(40px)', '#a8a8ad', '375×812') and explains nothing Claude already knows — every token earns its place. Not below 5 because no section is padded and no concept is over-explained.

5 / 5

Actionability

Guidance is mostly executable: concrete CSS transforms, gradient definitions, viewport dimensions, and explicit branching rules for input types ('text/data → render mock app UI', 'HTML → embed as-is with scaling'). Not 5 because there is no complete copy-paste HTML skeleton — the snippets are real CSS values but fragmentary; not 3 because the fragments given are directly usable, not pseudocode.

4 / 5

Workflow Clarity

A single-purpose generation task with well-separated sections (intent → hard composition → screen content source → optional elements → design details) and explicit decision points for input types, so the action is unambiguous. Not 5 because there is no final output verification step (e.g. check the embedded content fits the screen viewport); not 3 because the sequence and constraints are clearly laid out with no destructive or batch operation requiring validation.

4 / 5

Progressive Disclosure

The skill is under 50 lines with no external references needed, and the body is organized into clear labeled sections; per the rubric's guideline this earns a 5. No bundle files exist to reference, and none are needed at this size.

5 / 5

Total

18

/

20

Passed

Description

66%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 concise, concrete, and uses third person with specific output features, making the skill's niche clear. Its main weakness is the absence of any 'Use when...' trigger guidance, which both caps completeness and leaves natural trigger phrases like 'mockup' or 'device mockup' unavailable for matching.

Suggestions

Add an explicit 'Use when...' clause, e.g. 'Use when the user wants a device mockup, product showcase, or app screenshot composition featuring iPhone/MacBook screens.'

Include the natural synonyms users would say — 'mockup', 'device mockup', 'product screenshot' — to improve trigger-term coverage.

Lead with an action verb describing what the skill does (e.g. 'Create static iPhone and MacBook 3D-style mockups...') so the 'what' reads as a capability, not just a list of output attributes.

DimensionReasoningScore

Specificity

The description lists several concrete output elements — 'real HTML embedded on screens', 'glass-lens refraction', '360-degree turntable composition' — which are specific rather than vague. It falls short of 5 because the capability is expressed as output attributes rather than multiple explicit actions, and exceeds 3 because coverage goes beyond 1-2 concrete items and nothing is generic.

4 / 5

Completeness

The 'what' is clearly and concretely answered (a static 3D-style device showcase with embedded HTML), but there is no 'Use when...' clause or equivalent trigger guidance, which the guidelines state caps completeness at 3. It is not 2 because the 'what' half is strong, not just vague.

3 / 5

Trigger Term Quality

Natural terms users would say are present: 'iPhone', 'MacBook', '3D', 'showcase', 'HTML'. Not 5, because common variations users actually say ('mockup', 'device mockup', 'app screenshot') are absent; not 3, because coverage is more than partial — the core device terms are all there.

4 / 5

Distinctiveness Conflict Risk

The device-mockup niche with HTML-in-canvas is fairly distinct and unlikely to trigger the wrong skill. Not 5, because terms like 'showcase' and 'product' overlap with other poster/mockup skills; not 3, because the iPhone/MacBook + embedded-HTML combination is clearly distinguishable.

4 / 5

Total

15

/

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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

nexu-io/open-design

Path

skills/mockup-device-3d/SKILL.md

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.