tweaks

Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".

Quality

92%

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

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.

A strong, highly actionable skill body: concrete code, exact CSS transformation recipes, a clearly sequenced 5-step workflow with a real validation loop, and a genuine template asset that matches every reference made to it. The deductions are minor — some duplicated guidance and inline host-protocol detail that slightly inflate token cost and blur navigation.

Dimension	Reasoning	Score
Conciseness	The body is largely directive and assumes Claude's competence — exact CSS rewrites, a message-protocol spec, a ready-to-use template asset — with no primer material on concepts Claude already knows. It is not a 5 because of repeated guidance ("don't ship a free color picker" and "3 knobs is the sweet spot" each appear twice) and editorial asides ("the user will pick a bad color and blame you") that could be trimmed.	4 / 5
Actionability	Guidance is copy-paste ready throughout: a concrete ACCENT_PRESETS array, exact before/after rewrites ("color: #c96442 → color: var(--accent)", "font-size: 18px → font-size: calc(18px * var(--scale))"), a minimal postMessage listener code block, a verified real template asset (assets/wrap.html) with marked paste regions, and a STORAGE_KEY patching step. The common cases are fully covered.	5 / 5
Workflow Clarity	Steps 1–5 are clearly sequenced (acquire → decide knobs → lift hard-coded values → paste into wrap → test), each with concrete criteria, and Step 5 is an explicit validation checkpoint with an error-recovery rule ("click each knob at least once, refresh, confirm persistence; if a knob breaks the layout — remove it, don't ship it"). This matches the anchor with validation steps and feedback for error recovery, not the minor-gaps anchor below.	5 / 5
Progressive Disclosure	Structure is good: the heavy template lives in the real, clearly signaled one-level-deep asset `assets/wrap.html` (verified present with matching `.tw-panel`/`.tw-hidden`/STORAGE_KEY/`prefers-reduced-motion` contents), and the body is well-sectioned. Not a 5 because of minor organization gaps: the body tells the agent to edit "wrap.html's KNOBS array" while the file's own header calls it `KNOBS_LIBRARY`, and the full host-integration contract (two protocols plus anti-pattern) is inline detail that could sit in a reference file.	4 / 5
	Total	18 / 20 Passed

Description

96%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.

A strong description: concrete and comprehensive on what the skill does, with an explicit 'Use when...' clause carrying natural, synonym-rich trigger phrases. Third person throughout, no fluff. The only minor risk is that generic design words like 'variants' could also match sibling design skills.

Dimension	Reasoning	Score
Specificity	The description lists multiple concrete, comprehensive actions — "Wrap any HTML artifact with a side panel of live, parameterized controls", "rewrite CSS custom properties in real time", "persist to localStorage" — and enumerates the exact knob set (accent color, type scale, density, motion, theme). It matches the anchor for multiple specific concrete actions with comprehensive coverage; nothing is vague or padded.	5 / 5
Completeness	It explicitly answers both questions: 'what' is concretely stated (side panel of live parameterized controls rewriting CSS custom properties, persisted to localStorage) and 'when' is explicit — "Use when the brief asks for 'variants', 'side-by-side options', 'tweak this'..." with concrete trigger phrases. This is the anchor-5 pattern (cf. the PDF example).	5 / 5
Trigger Term Quality	Trigger phrases are natural user language with synonym coverage: "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", plus the bilingual "实时调参". These are exactly what a user would say when they need this skill, matching the comprehensive-synonyms anchor rather than the 'a few natural terms missing' anchor below.	5 / 5
Distinctiveness Conflict Risk	The niche (a live parameter panel wrapping HTML artifacts) is distinct, but the broad design-brief terms "variants" and "side-by-side options" carry minor overlap risk with adjacent design/iteration skills. It fits 'mostly distinct; minor overlap risk with closely related skills' better than the minimal-conflict anchor, which would require trigger terms uniquely owned by this skill.	4 / 5
	Total	19 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
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: design-templates/tweaks/SKILL.md
Commit: 1b47e60

Reviewed: 3 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.