Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Tweaks Skill · 参数化变体面板 · nexu-io | DecimalAI

frontendby nexu-io

Tweaks Skill · 参数化变体面板

nexu-io/tweaks

Source nexu-io/open-design ↗License Apache-2.0

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.

SkillScore68Maintained

Automatic

Frontend / UI pack

Last verified 8/28/2026

What it changes

Passed 15 of 22 test cases with the skill, and 4 of 22 without it.

Without skill18%

With skill68%

Checks it passed that the model alone missed

The artifact title attribute ends with · Tweaks.
The panel root element uses the class name tw-panel.
The artifact identifier attribute starts with tweaks-.

and 21 more in the full report

13 fixed2 passed either way5 still failing2 broke

Pass-rate lift: +50 pp
Tokens: +51%
Agent turns: 0%
Response time: -5%

Model gemini-3.6-flashMeasured 8/28/2026v315 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/nexu-io-tweaks/SKILL.md https://app.decimal.ai/s/nexu-io-tweaks/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add nexu-io-tweaks, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/nexu-io-tweaks/ and pins it in .decimal/skills.lock

decimalai skills add nexu-io-tweaks

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-tweaks/SKILL.md https://app.decimal.ai/s/nexu-io-tweaks/SKILL.md

Raw file: /s/nexu-io-tweaks/SKILL.md ↗ · machine-readable summary at /s/nexu-io-tweaks.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 13 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 13

Prompt

I have a single-page landing page HTML snippet that I am presenting to clients. Convert it into an interactive standalone HTML file equipped with a control panel for real-time style adjustments. Extract fixed visual properties like colors, font sizing, and spacing layout into root CSS variables, and link form controls to update those variables on the fly. User selections should save to local storage under a unique key for this artifact, and the sidebar must send and receive messages with the parent iframe to sync toggle state with the host toolbar. Format the output inside an `<artifact>` XML block, preceded by one short explanatory sentence.

What was checked, without and with the skill
Checked	Without skill	With skill
The artifact tag identifier attribute starts with the prefix tweaks-.	Missed	Passed
The artifact tag type attribute is set to text/html.	Passed	Passed
The artifact tag title attribute ends with the exact text · Tweaks.	Missed	Passed

case-01 · gemini-3.6-flash · 8/28/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md271 lines2 files

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 —

Track record

Benchmark

15 / 22

test cases passed, vs 4 / 22 without

Adoption

Users: 1
Times used: 18

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/22/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / open-design

design-templates/tweaks/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/22/2026Version v3Bundled 1 file

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Tweaks Skill · 参数化变体面板

What you produce

When to use

When not to use

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills