Agent skill · design visual · nexu-io
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 "实时调参".
Why this skill is useful
Provides a live control panel for adjusting CSS properties in real-time, which is a specific implementation not commonly found in standard resources.
What it needs
Requires vanilla-js installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
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: 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 <kbd>T</kbd> to hide / reveal the panel; <kbd>R</kbd> 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). The artifact uses var(--accent) everywhere it had a hard-coded accent before. Border / link / pull-quote rule / CTA all flip together. 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/tweaks--004b82