skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

tweaks

Wraps HTML artifacts with a side panel of live controls that rewrite CSS custom properties and persist to localStorage.

Updated May 20, 2026
Search Tags:#html#prototyping#localstorage#dark mode#css custom properties#design variants#theme panel
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill tweaks-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tweaks
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/tweaks
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill tweaks-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? When a generated HTML design is 80% right, users normally must re-prompt the agent for every small visual change. This Skill wraps the artifact with a panel of live controls so users can adjust accent color, type scale, density, theme, and motion themselves without another generation round. ## Core Features & Use Cases - Parameterized Controls: Adds up to five curated knobs (accent swatches, type scale, layout density, light/dark mode, motion level) bound to CSS custom properties via a vanilla-JS bridge. - Persistent Preferences: Saves every adjustment to localStorage keyed by artifact slug, so choices survive page refreshes and never leak between artifacts. - Use Case: You generated a landing page the user mostly likes. Wrap it with a 3-knob tweak panel (accent, scale, mode) so they can explore variants live, press T to hide the panel, and R to reset to defaults. ## Quick Start Wrap this landing page HTML with a tweak panel offering accent color, type scale, and light/dark mode controls that persist to localStorage.

Frequently Asked Questions about tweaks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add live theme controls to an HTML page?▼

Convert hard-coded colors, font sizes, and spacing into CSS custom properties like --accent and --scale, then bind form controls to them with a small JavaScript bridge using document.documentElement.style.setProperty. Changes apply instantly without re-rendering.

How to persist user theme preferences in localStorage?▼

Serialize the control state as JSON and save it under a unique key such as tweaks-<artifact-slug> on every change. On page load, read the stored JSON, merge it over defaults, and apply the values as CSS custom properties before first paint.

Which design parameters should be exposed as tweak controls?▼

Choose based on the artifact: accent color if one color repeats, type scale for text-heavy pages, density for layouts with consistent spacing rhythm, mode if dark tokens exist, and motion if transitions are present. Three knobs is the recommended sweet spot; never exceed five.

Does the tweak panel respect prefers-reduced-motion?▼

Yes. When the user has prefers-reduced-motion set, the motion control defaults to Off regardless of stored preference, and only an explicit click overrides it. The CSS also zeroes --motion-mult under that media query.

When should I not add a tweak panel to an artifact?▼

Skip it for one-shot artifacts like runbooks that will not be iterated, and for artifacts whose value depends on fixed ratios such as carefully balanced data visualizations, where user-adjustable knobs would degrade the design.

Related Skills

Explore More Design & Creative Skills→
nexu-ionexu-io
93.2k

swiss-user-research-video-template

Generate Swiss-style editorial user research decks as self-contained HTML artifacts.

Official
Intermediate
PiercingXXPiercingXX
1

tweaks

Wrap HTML artifacts with a live tweak panel for design tokens.

Community
Intermediate
pipixia-labspipixia-labs
38

tweaks

Wrap HTML artifacts with a live control panel for CSS custom properties.

Official
Advanced
truongnattruongnat

design-system-patterns

Implement design tokens, theme switching, and component architecture patterns for design systems.

Community
Intermediate