Source profileQuality 85/100

nexu-io/open-design/plugins/_official/examples/tweaks/SKILL.md

tweaks

Use it for design tasks; the detail page covers purpose, installation, and practical steps.

Source repository stars
82,073
Declared platforms
0
Static risk flags
0
Last source update
2026-07-28
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

Wrap any HTML artifact with a side panel of live controls that rewrite CSS custom properties in real time and persist to localStorage. Inspired by the huashu-design tweak pattern.

Best for

  • The user generated something they like 80% of, and wants to dial
  • You're presenting a design system / brand and want the audience to
  • You're shipping a stand-alone demo (e.g. a portfolio piece) and

Not for

  • One-shot artifacts that won't be iterated on (e.g. a runbook —
  • When the artifact's value is in fixed ratios (e.g. an infographic

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/tweaks"
Safe inspection promptEditorial

Inspect the Agent Skill "tweaks" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/plugins/_official/examples/tweaks/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

  1. 01

    Implementation primitives

    Read assets/wrap.html — it ships the panel + bridge as an inert template. Your job is to:

    Take the user's existing artifact HTML.Lift its accent / mode / spacing / scale into custom propertiesPaste the contents into the marked region of wrap.html.
  2. 02

    Workflow

    Same options as the critique skill:

    Project file (index.html in the project folder).Pasted HTML in the chat.Generated by you in this turn.
  3. 03

    Step 1 — Acquire the artifact

    Same options as the critique skill:

    Project file (index.html in the project folder).Pasted HTML in the chat.Generated by you in this turn.
  4. 04

    Step 2 — Decide which knobs apply

    Read the artifact's CSS first. For each knob, decide yes / no:

    --accent — yes if the artifact has 1 accent color used ≥ 3 times.--scale — yes if the artifact is type-driven (article, deck,--density — yes if the artifact has consistent gap / padding
  5. 05

    Step 3 — Lift hard-coded values into custom properties

    Open assets/wrap.html's block — copy its custom-property naming scheme (--accent, --scale, etc.). In the user's artifact, find every place those concerns live and rewrite:

    color: c96442 → color: var(--accent)font-size: 18px → font-size: calc(18px var(--scale))padding: 24px 32px → padding: calc(24px var(--density)) calc(32px var(--density))

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score85/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars82,073SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
nexu-io/open-design
Skill path
plugins/_official/examples/tweaks/SKILL.md
Commit
89d6d4ef21baf80f871595abdf6f7de6e941dd44
License
Apache-2.0
Collected
2026-07-28
Default branch
main
View the original SKILL.md

Tweaks Skill · 参数化变体面板

Wrap any HTML artifact with a side panel of live controls that rewrite CSS custom properties in real time and persist to localStorage. Inspired by the huashu-design tweak pattern.

What you produce

A single self-contained HTML file with two layers:

  1. Stage — the original artifact (landing page / deck / dashboard) re-keyed so all visual decisions read from CSS custom properties: --accent, --scale, --density, --mode, --motion.
  2. Panel — a fixed sidebar (or drawer on small viewports) with form controls bound to those custom properties via a tiny vanilla-JS bridge. Persists every change to localStorage keyed by the artifact identifier.

The user can:

  • Open the artifact and see the stage rendered with their saved preferences (or sensible defaults).
  • Adjust accent / scale / density / mode / motion in the panel and watch the stage update instantly — no rerender.
  • Press T to hide / reveal the panel; R to reset to defaults.
  • Refresh the page — every choice is persisted.

When to use

  • The user generated something they like 80% of, and wants to dial in the last 20% themselves.
  • You're presenting a design system / brand and want the audience to feel the variants live (instead of you re-running the agent).
  • You're shipping a stand-alone demo (e.g. a portfolio piece) and want viewers to play.

When not to use

  • One-shot artifacts that won't be iterated on (e.g. a runbook — parameters don't help).
  • When the artifact's value is in fixed ratios (e.g. an infographic with carefully balanced data viz — knobs would degrade it).

The 5 standard knobs

Pick a subset that suits the artifact. Don't ship all 5 if only 2 matter — clutter is a regression.

1. --accent — Accent color

A select with 5–8 curated swatches (don't ship a free color picker — the user will pick a bad color and blame you).

const ACCENT_PRESETS = [
  { id: 'rust',    val: '#c96442', label: 'Rust' },
  { id: 'cobalt',  val: '#2c4d8e', label: 'Cobalt' },
  { id: 'sage',    val: '#4a7a3f', label: 'Sage' },
  { id: 'plum',    val: '#7a3f6a', label: 'Plum' },
  { id: 'graphite',val: '#3a3a3a', label: 'Graphite' },
];

The artifact uses var(--accent) everywhere it had a hard-coded accent before. Border / link / pull-quote rule / CTA all flip together.

2. --scale — Type scale (0.85 / 1.0 / 1.15)

Three settings: Compact (0.85), Normal (1.0), Generous (1.15). All font-size declarations multiply by var(--scale) via calc(... * var(--scale)).

Don't go beyond ±15% — beyond that the layout breaks (column flow, breakpoints, line counts).

3. --density — Layout density (Tight / Normal / Roomy)

Three settings that swap the spacing scale: Tight (0.75) / Normal (1.0) / Roomy (1.4). All padding / gap / margin declarations multiply by var(--density).

This is the highest-impact knob — it's also the most fragile, so every layout-critical container must declare its base spacing in custom properties before you wrap.

4. --mode — Light / Dark

A 2-state toggle. Sets data-mode="light" vs "dark" on the <html> element and the artifact's :root selector responds with two color sets.

If the artifact already has a media-query-based dark mode, replace it with the data-attr version — the user's choice should win over their OS.

5. --motion — Off / Subtle / Lively

Three settings. Maps to a CSS variable --motion-mult that scales all transition-duration / animation-duration declarations:

  • Off — 0s (also disables WebGL canvases / decorative animation).
  • Subtle — 1.0 (the artifact's authored timing).
  • Lively — 1.6 (slower transitions, more visible motion).

Respect prefers-reduced-motion: default to Off if the user has that set, regardless of stored preference.

Implementation primitives

Read assets/wrap.html — it ships the panel + bridge as an inert template. Your job is to:

  1. Take the user's existing artifact HTML.
  2. Lift its accent / mode / spacing / scale into custom properties (search for hard-coded #hex / Npx / Nrem and convert).
  3. Paste the contents into the marked region of wrap.html.
  4. Edit assets/wrap.html's KNOBS array to keep only the knobs you decided are relevant to this artifact. Don't ship 5 if 2 matter.
  5. Patch the STORAGE_KEY to a unique slug (tweaks-<artifact-slug>).

The bridge in wrap.html:

  • Loads localStorage[STORAGE_KEY] JSON on first paint.
  • Applies values as document.documentElement.style.setProperty('--accent', ...).
  • Listens to every form control's change event and writes back.
  • Exposes T (toggle panel) and R (reset).

Workflow

Step 1 — Acquire the artifact

Same options as the critique skill:

  1. Project file (index.html in the project folder).
  2. Pasted HTML in the chat.
  3. Generated by you in this turn.

Step 2 — Decide which knobs apply

Read the artifact's CSS first. For each knob, decide yes / no:

  • --accent — yes if the artifact has 1 accent color used ≥ 3 times.
  • --scale — yes if the artifact is type-driven (article, deck, pricing page).
  • --density — yes if the artifact has consistent gap / padding rhythm (deck, dashboard, landing). No for runbooks (already dense).
  • --mode — yes if the artifact has authored dark mode tokens, or you're willing to derive them.
  • --motion — yes if the artifact has any transition / animation worth scaling. No for static reports / critique reports.

Default: 3 knobs is the sweet spot. Five is too busy, one is not worth a panel.

Step 3 — Lift hard-coded values into custom properties

Open assets/wrap.html's <style> block — copy its custom-property naming scheme (--accent, --scale, etc.). In the user's artifact, find every place those concerns live and rewrite:

  • color: #c96442 → color: var(--accent)
  • font-size: 18px → font-size: calc(18px * var(--scale))
  • padding: 24px 32px → padding: calc(24px * var(--density)) calc(32px * var(--density))
  • transition: opacity 200ms → transition: opacity calc(200ms * var(--motion-mult))

If the artifact uses clamp() or vw already, multiply the outer value by the custom property — don't tear apart clamp(...).

Step 4 — Paste into the wrap

Copy the artifact's <style> and <body> into the marked regions of wrap.html. Keep the panel + bridge intact.

Step 5 — Test the loop

Open the result, click each knob at least once, refresh the page, confirm the choice persists. If a knob breaks the layout — remove it, don't ship it.

Output contract

<artifact identifier="tweaks-<artifact-slug>" type="text/html" title="<Artifact Title> · Tweaks">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact ("Wrapped X with a 3-knob tweak panel — accent / scale / mode."). Stop after </artifact>.

Hard rules

  • Don't ship a free color picker — only curated swatches. Users pick bad colors when given freedom; saving them from that is the whole point.
  • Persist by artifact identifier — tweaks-<slug>, not a global key. Two artifacts open in two tabs must not share state.
  • Respect prefers-reduced-motion — default to Off for motion if the user has that set, override only on explicit click.
  • Single-file — no external CSS / JS / fonts beyond the artifact's existing imports. Inline the panel + bridge.
  • Panel hidden by default on viewports < 720px — slide-in drawer via a "T" button at top-right.
  • Don't ship more than 5 knobs. Three is the sweet spot.

Alternatives

Compare before choosing

Computed 8782,073

nexu-io/open-design

tweaks

Use it for design tasks; the detail page covers purpose, installation, and practical steps.

2026-07-280 platforms
Computed 10042,015

coreyhaines31/marketingskills

ab-testing

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program

2026-07-270 platforms
Computed 10042,015

coreyhaines31/marketingskills

churn-prevention

When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o

2026-07-270 platforms
Computed 1007

event4u-app/agent-config

design-intelligence

Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.

2026-07-280 platforms