CtrlK
BlogDocsLog inGet started
Tessl Logo

open-design-landing

Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.

53

Quality

61%

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

Fix and improve this skill with Tessl

tessl review fix ./design-templates/open-design-landing/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

63%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 a well-sequenced, mostly executable recipe with a solid validation checklist, but it is somewhat padded and — more seriously — points to several bundle files (styles.css, schema.ts, inputs.example.json, README.md, example.html) that are not actually present, which undermines progressive disclosure and slightly weakens actionability.

Suggestions

Ship the missing bundle files referenced by the body and composer (styles.css, schema.ts, inputs.example.json, README.md, example.html) — compose.ts reads styles.css at runtime, so the skill is currently non-functional as bundled; this is the single highest-impact fix for progressive_disclosure and actionability.

Trim redundant restatement — the 'What you get' section repeats the frontmatter's section/asset inventory, and the ASCII pipeline diagram re-states the preceding paragraph; collapse these to lift conciseness.

Turn the imagegen no-FAL_KEY fallback into an explicit executable step (the exact slash-command invocation) instead of narrating 'route them through the /gpt-image-fal slash-command skill manually', and add an explicit validate→fix→re-run loop to step 4's fork-and-edit to push workflow_clarity to 5.

DimensionReasoningScore

Conciseness

Mostly efficient and well-organized, but the body pads with explanation Claude doesn't need — e.g. 'Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically', restating the asset list in both the frontmatter and 'What you get', and an ASCII pipeline diagram that re-states the prior paragraph. Not a 2 because the core is genuinely useful; not a 4 because several sections could be trimmed without losing clarity.

3 / 5

Actionability

Provides concrete, executable commands for each path — 'npx tsx scripts/placeholder.ts <out>/assets/', 'FAL_KEY=... npx tsx scripts/imagegen.ts <inputs.json> --out=<out>/assets/', 'npx tsx scripts/compose.ts <inputs.json> <out>/index.html', 'pnpm --filter @open-design/landing-page build' — with copy-paste-ready invocations. Not a 5 because several commands depend on files absent from the bundle (styles.css, schema.ts, inputs.example.json) and the imagegen fallback path is described narratively rather than as an executable command.

4 / 5

Workflow Clarity

A clear four-step sequence (Gather → Decide image strategy → Compose → Optional mirror) with explicit numbered ordering ('complete each step before moving on'), a decision table for image strategy, and a strong 'Self-check before delivering' validation checklist with concrete checkpoints (no 404s, CLS < 0.05, prefers-reduced-motion). Not a 5 because the validation feedback loop (fail → fix → re-run) is a checklist rather than an explicit validate-then-retry cycle, and step 4's fork-and-edit has no verification step.

4 / 5

Progressive Disclosure

Structure and signaling are good — clear section headers, a 'Files in this skill' tree, and one-level-deep references to scripts/assets — but the bundle is incomplete: the body and the composer itself reference ./styles.css, ./schema.ts, ./inputs.example.json, README.md, and example.html, all of which are missing from the actual bundle (only scripts/ and assets/ exist). Per the guideline to score against the actual bundle structure, missing/broken references pull this down from a 4 to a 3.

3 / 5

Total

14

/

20

Passed

Description

58%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 specific and third-person with a clear, concrete account of what the skill produces, but it omits an explicit "Use when…" trigger clause, relegating triggers to a separate field — which caps completeness. It is distinct but slightly verbose.

Suggestions

Add an explicit 'Use when…' sentence to the description itself (e.g. 'Use when the user wants an editorial or magazine-style landing page, a hero-collage marketing site, or an Atelier Zero/Open Design landing surface.'), so the when-to-use guidance is not split off into the triggers: field.

Weave one or two natural user phrasings ('landing page', 'editorial site') into the description prose rather than relying on technical terms like 'pure-function composer' and 'Headroom-style sticky nav'.

Tighten the description by trimming runtime-implementation detail (e.g. the composer/Headroom mechanics) to lift specificity toward 5 without losing the concrete action list.

DimensionReasoningScore

Specificity

Lists several concrete actions — "fills a typed inputs.json from a brand brief", "optionally generates 16 collage assets via gpt-image-2", "runs a pure-function composer that emits a self-contained HTML file", "mirror the Astro marketing site" — with only minor coverage gaps (e.g. the placeholder/bring-your-own image paths are named in the body but not the description). Not a 5 because the action set is not fully comprehensive in the description itself.

4 / 5

Completeness

The "what" is clearly and concretely stated, but there is no "Use when…" clause or equivalent explicit trigger guidance inside the description — the when-to-use intent is offloaded to a separate triggers: field, which the rubric says caps completeness at 3. Per the guideline "A missing 'Use when...' clause or equivalent explicit trigger guidance should cap completeness at 3," this cannot rise above 3 even though the what is strong.

3 / 5

Trigger Term Quality

The description uses technical phrasing ("Atelier Zero visual language", "pure-function composer", "Headroom-style sticky nav") rather than the natural keywords a user would say; the natural trigger terms live in a separate triggers: list ("landing page", "editorial site", "magazine layout") rather than in the description prose. Some relevant keywords are present but common user phrasings are not woven into the description.

3 / 5

Distinctiveness Conflict Risk

The niche is fairly distinct — "editorial landing site in the Atelier Zero visual language" with collage-asset generation and a specific composer pipeline — with only minor overlap risk against a sibling deck skill. Not a 5 because the marketing-landing-page framing overlaps broadly with general landing-page skills absent the Atelier Zero qualifier.

4 / 5

Total

14

/

20

Passed

Validation

87%

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

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

relative_links

Relative link issues: 2 missing, 4 suspicious

Warning

Total

14

/

16

Passed

Repository
nexu-io/open-design
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.