{"id":"8ebbd45e-7fe7-4263-a5da-299cfad47383","shortId":"yUzZ4z","kind":"skill","title":"tweaks","tagline":"Wrap any HTML artifact with a side panel of live, parameterized\ncontrols — accent color, type scale, density, motion, theme — that\nrewrite CSS custom properties in real time and persist to\nlocalStorage. Lets the user explore variants of a design without\nre-prompting the agent. Us","description":"# Tweaks Skill · 参数化变体面板\n\nWrap any HTML artifact with a side panel of live controls that rewrite\nCSS custom properties in real time and persist to `localStorage`.\nInspired by the *huashu-design* tweak pattern.\n\n## What you produce\n\nA single self-contained HTML file with two layers:\n\n1. **Stage** — the original artifact (landing page / deck / dashboard)\n re-keyed so all visual decisions read from CSS custom properties:\n `--accent`, `--scale`, `--density`, `--mode`, `--motion`.\n2. **Panel** — a fixed sidebar (or drawer on small viewports) with\n form controls bound to those custom properties via a tiny\n vanilla-JS bridge. Persists every change to `localStorage` keyed\n by the artifact identifier.\n\nThe user can:\n\n- Open the artifact and see the stage rendered with their saved\n preferences (or sensible defaults).\n- Adjust accent / scale / density / mode / motion in the panel and\n watch the stage update instantly — no rerender.\n- Press T to hide / reveal the panel; R to\n reset to defaults.\n- Refresh the page — every choice is persisted.\n\n## When to use\n\n- The user generated something they like 80% of, and wants to dial\n in the last 20% themselves.\n- You're presenting a design system / brand and want the audience to\n feel the variants live (instead of you re-running the agent).\n- You're shipping a stand-alone demo (e.g. a portfolio piece) and\n want viewers to play.\n\n## When *not* to use\n\n- One-shot artifacts that won't be iterated on (e.g. a runbook —\n parameters don't help).\n- When the artifact's value is in fixed ratios (e.g. an infographic\n with carefully balanced data viz — knobs would degrade it).\n\n## The 5 standard knobs\n\n> Pick a subset that suits the artifact. Don't ship all 5 if only 2\n> matter — clutter is a regression.\n\n### 1. `--accent` — Accent color\n\nA select with 5–8 curated swatches (don't ship a free color picker —\nthe user will pick a bad color and blame you).\n\n```js\nconst ACCENT_PRESETS = [\n { id: 'rust', val: '#c96442', label: 'Rust' },\n { id: 'cobalt', val: '#2c4d8e', label: 'Cobalt' },\n { id: 'sage', val: '#4a7a3f', label: 'Sage' },\n { id: 'plum', val: '#7a3f6a', label: 'Plum' },\n { id: 'graphite',val: '#3a3a3a', label: 'Graphite' },\n];\n```\n\nThe artifact uses `var(--accent)` everywhere it had a hard-coded\naccent before. Border / link / pull-quote rule / CTA all flip\ntogether.\n\n### 2. `--scale` — Type scale (0.85 / 1.0 / 1.15)\n\nThree settings: *Compact* (0.85), *Normal* (1.0), *Generous* (1.15).\nAll `font-size` declarations multiply by `var(--scale)` via\n`calc(... * var(--scale))`.\n\nDon't go beyond ±15% — beyond that the layout breaks (column flow,\nbreakpoints, line counts).\n\n### 3. `--density` — Layout density (Tight / Normal / Roomy)\n\nThree settings that swap the spacing scale: *Tight* (0.75) /\n*Normal* (1.0) / *Roomy* (1.4). All `padding` / `gap` / `margin`\ndeclarations multiply by `var(--density)`.\n\nThis is the highest-impact knob — it's also the most fragile, so\n**every layout-critical container must declare its base spacing in\ncustom properties** before you wrap.\n\n### 4. `--mode` — Light / Dark\n\nA 2-state toggle. Sets `data-mode=\"light\"` vs `\"dark\"` on the\n`` element and the artifact's `:root` selector responds with\ntwo color sets.\n\nIf the artifact already has a media-query-based dark mode, *replace*\nit with the data-attr version — the user's choice should win over\ntheir OS.\n\n### 5. `--motion` — Off / Subtle / Lively\n\nThree settings. Maps to a CSS variable `--motion-mult` that scales\nall `transition-duration` / `animation-duration` declarations:\n\n- *Off* — `0s` (also disables WebGL canvases / decorative animation).\n- *Subtle* — `1.0` (the artifact's authored timing).\n- *Lively* — `1.6` (slower transitions, more visible motion).\n\nRespect `prefers-reduced-motion`: default to *Off* if the user has\nthat set, regardless of stored preference.\n\n## Implementation primitives\n\nRead `assets/wrap.html` — it ships the panel + bridge as an\ninert template. Your job is to:\n\n1. Take the user's existing artifact HTML.\n2. Lift its accent / mode / spacing / scale into custom properties\n (search for hard-coded `#hex` / `Npx` / `Nrem` and convert).\n3. Paste the contents into the marked region of `wrap.html`.\n4. Edit `assets/wrap.html`'s `KNOBS` array to keep only the knobs\n you decided are relevant to *this* artifact. Don't ship 5 if 2\n matter.\n5. Patch the `STORAGE_KEY` to a unique slug (`tweaks-`).\n\nThe bridge in `wrap.html`:\n- Loads `localStorage[STORAGE_KEY]` JSON on first paint.\n- Applies values as `document.documentElement.style.setProperty('--accent', ...)`.\n- Listens to every form control's `change` event and writes back.\n- Exposes T (toggle panel) and R (reset).\n\n## Workflow\n\n### Step 1 — Acquire the artifact\n\nSame options as the critique skill:\n\n1. Project file (`index.html` in the project folder).\n2. Pasted HTML in the chat.\n3. Generated by you in this turn.\n\n### Step 2 — Decide which knobs apply\n\nRead the artifact's CSS first. For each knob, decide *yes / no*:\n\n- `--accent` — yes if the artifact has 1 accent color used ≥ 3 times.\n- `--scale` — yes if the artifact is type-driven (article, deck,\n pricing page).\n- `--density` — yes if the artifact has consistent gap / padding\n rhythm (deck, dashboard, landing). No for runbooks (already dense).\n- `--mode` — yes if the artifact has authored dark mode tokens, or\n you're willing to derive them.\n- `--motion` — yes if the artifact has any transition / animation\n worth scaling. No for static reports / critique reports.\n\nDefault: **3 knobs is the sweet spot.** Five is too busy, one is\nnot worth a panel.\n\n### Step 3 — Lift hard-coded values into custom properties\n\nOpen `assets/wrap.html`'s `