tweaks

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

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 "实时调参".

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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:

Stage — the original artifact (landing page / deck / dashboard) re-keyed so all visual decisions read from CSS custom properties: --accent, --scale, --density, --mode, --motion.
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:

Take the user's existing artifact HTML.
Lift its accent / mode / spacing / scale into custom properties (search for hard-coded #hex / Npx / Nrem and convert).
Paste the contents into the marked region of wrap.html.
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.
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:

Project file (index.html in the project folder).
Pasted HTML in the chat.
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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/tweaks · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/tweaks" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/tweaks" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/tweaks

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so tweaks is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

tweaks

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

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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:

Stage — the original artifact (landing page / deck / dashboard) re-keyed so all visual decisions read from CSS custom properties: --accent, --scale, --density, --mode, --motion.
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:

Take the user's existing artifact HTML.
Lift its accent / mode / spacing / scale into custom properties (search for hard-coded #hex / Npx / Nrem and convert).
Paste the contents into the marked region of wrap.html.
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.
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:

Project file (index.html in the project folder).
Pasted HTML in the chat.
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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/tweaks · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/tweaks" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/tweaks" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/tweaks

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so tweaks is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

tweaks

What this skill does

Tweaks Skill · 参数化变体面板

What you produce

When to use

When not to use

The 5 standard knobs

1. --accent — Accent color

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

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

4. --mode — Light / Dark

5. --motion — Off / Subtle / Lively

Implementation primitives

Workflow

Step 1 — Acquire the artifact

Step 2 — Decide which knobs apply

Step 3 — Lift hard-coded values into custom properties

Step 4 — Paste into the wrap

Step 5 — Test the loop

Output contract

Hard rules

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

tweaks

What this skill does

Tweaks Skill · 参数化变体面板

What you produce

When to use

When not to use

The 5 standard knobs

1. --accent — Accent color

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

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

4. --mode — Light / Dark

5. --motion — Off / Subtle / Lively

Implementation primitives

Workflow

Step 1 — Acquire the artifact

Step 2 — Decide which knobs apply

Step 3 — Lift hard-coded values into custom properties

Step 4 — Paste into the wrap

Step 5 — Test the loop

Output contract

Hard rules

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

1. `--accent` — Accent color

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

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

4. `--mode` — Light / Dark

5. `--motion` — Off / Subtle / Lively

1. `--accent` — Accent color

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

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

4. `--mode` — Light / Dark

5. `--motion` — Off / Subtle / Lively