Name: design-previews-creator
Rating: 56.00000000000001 (1 reviews)
Author: Automattic

design-previews-creator

Generate three parallel design preview options for a Studio-backed site and collect the user's preferred direction before theme implementation.

Quality

63%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/claude-code/skills/design-previews-creator/SKILL.md

The canonical home for this skill is design-previews-creator in Automattic/build-with-wordpress

Quality

Content

72%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-structured, lean orchestration guide with concrete file paths and specific technical requirements, and it correctly defers theme-generation detail to other skills. Its main gap is the absence of validation/verification in a parallel batch-write workflow.

Suggestions

Add an explicit validation checkpoint after the parallel generation step, e.g. confirm each design-N.html was written and is non-empty before presenting options, with a retry loop if a subagent fails.

Tighten hedging phrases ('when that adds value', 'when distinctive typography helps') into decisive guidance to improve token efficiency.

Optionally include a minimal self-contained HTML skeleton snippet to make the per-subagent file requirement copy-paste ready.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence (no explaining what HTML or CSS custom properties are), with only minor hedging phrases like 'when that adds value' and 'when distinctive typography helps' that could be trimmed.	4 / 5
Actionability	Concrete file paths and specific technical requirements (inline CSS, CSS custom properties for colors, Google Fonts, prefers-reduced-motion fallback, one subagent per file) give mostly executable guidance, though no literal code snippet is provided for an instruction-only orchestration skill.	4 / 5
Workflow Clarity	The five-step sequence is clearly ordered, but generating three preview files in parallel is a batch operation with no validation or verification step (e.g. confirming files were written, subagents succeeded, HTML renders), which caps workflow clarity at 3 per the batch-operation rule.	3 / 5
Progressive Disclosure	A single coherent file with well-organized sections (Ownership, numbered Workflow, Important) and no need for external bundle references; it appropriately defers detail to theme-creator and studio rather than duplicating it.	5 / 5
	Total	16 / 20 Passed

Description

53%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 states a clear purpose and two concrete actions in proper third-person voice, but it lacks an explicit 'Use when...' trigger clause and natural synonyms that would help it fire at the right moments. It is solid but leaves the 'when' only weakly implied.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the user wants visual or design options before a site theme is built, or asks for mockups/previews of a Studio site.'

Include natural synonyms users actually say — 'mockups', 'visual options', 'design directions' — alongside 'design preview options' to broaden trigger coverage.

Sharpen the 'what' with one more concrete action (e.g. writing self-contained HTML preview files) to push specificity toward comprehensive coverage.

Dimension	Reasoning	Score
Specificity	Names the domain ('design preview options for a Studio-backed site') and two concrete actions ('Generate three parallel design preview options', 'collect the user's preferred direction'), matching the anchor for 1-2 concrete actions without being comprehensive.	3 / 5
Completeness	The 'what' is clear, but 'when' is only weakly implied — 'before theme implementation' describes sequencing rather than a trigger, and the absence of a 'Use when...' clause caps completeness at 3 per the guidelines.	3 / 5
Trigger Term Quality	Relevant keywords like 'design preview options' and 'preferred direction' appear, but common synonyms users would say ('mockups', 'visual options', 'design directions') are missing and no explicit trigger phrase grounds the terms.	3 / 5
Distinctiveness Conflict Risk	It carves a clear niche (preview generation before theme implementation) distinct from a related theme-creator skill, with only minor overlap risk; not a 5 because the trigger phrasing is not sharply distinct.	4 / 5
	Total	13 / 20 Passed

Validation

100%

Warnings & errors only

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: Automattic/build-with-wordpress
Path: plugins/claude-code/skills/design-previews-creator/SKILL.md
Commit: b4fc8b7

Reviewed: 7 days ago

Table of Contents

Discovery Implementation Validation

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.