skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

tweaks

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

1|Updated Jul 9, 2026
Search Tags:#html#design system#localStorage#ui controls#css custom properties#live preview#theme mode
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill tweaks-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tweaks
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/tweaks
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill tweaks-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill lets users explore design variants interactively without repeatedly re-prompting the agent, by wrapping an HTML artifact with a parameter panel that updates styling in real time and remembers choices.

Core Features & Use Cases

  • Interactive side-panel controls for accent color, type scale, density, light/dark mode, and motion.
  • CSS custom property rewriting so the stage updates instantly using a tiny vanilla-JS bridge rather than rerendering.
  • Persistent localStorage state keyed to the specific artifact identifier, enabling reliable refresh behavior and safe multi-tab independence.
  • Use cases: producing “variants” for a landing page, presenting side-by-side options for review, letting users “tweak this” before finalizing, and supporting “live knobs” demos.

Quick Start

Wrap the user’s provided HTML artifact using the tweaks skill prompt so the output becomes a single self-contained HTML file with a live tweak panel and localStorage persistence.

Frequently Asked Questions about tweaks

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

FAQPage Schema
How do I add live design controls to an HTML artifact without re-prompting?▼

Live design controls let you adjust design tokens interactively by wrapping your HTML artifact with a tweak panel that maps knobs to CSS custom properties, updating styling in real time without re-prompting the agent.

Can I persist UI theme mode and accent color choices across browser refreshes?▼

Yes, UI theme mode and accent color choices persist across refreshes by saving state to localStorage under a per-artifact storage key, ensuring reliable refresh behavior and safe multi-tab independence.

What is the best way to explore landing page variants like type scale and density?▼

Exploring landing page variants like type scale and density is best done by applying interactive side-panel controls that rewrite CSS custom properties instantly, letting you preview options side-by-side before finalizing.

Does the live preview panel respect prefers-reduced-motion for the motion knob?▼

Yes, the live preview panel respects prefers-reduced-motion by applying it as the default for the motion knob, ensuring accessible animation behavior while mapping remaining settings to CSS custom properties.

Do I need extra dependencies to generate a self-contained HTML file with a tweak panel?▼

No extra dependencies are needed; the process produces a single self-contained HTML file using a tiny vanilla-JS bridge to handle CSS custom property rewriting and localStorage persistence natively.

Why use CSS custom properties for interactive UI controls instead of rerendering?▼

CSS custom properties enable instant live preview updates because a tiny vanilla-JS bridge rewrites variables directly, avoiding the performance cost and latency of rerendering the entire HTML stage.

Related Skills

Explore More Design & Creative Skills→
Clos01Clos01
3

tweaks

Add interactive CSS custom property controls to HTML prototypes.

Community
Advanced
pipixia-labspipixia-labs
38

tweaks

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

Official
Advanced
Hack23Hack23
9

html-css-best-practices

Generate semantic HTML5 and CSS custom properties for accessible web projects.

Official
Basic
Maccio-huangMaccio-huang

tweaks

Adjust CSS custom properties live in HTML documents with persistent localStorage.

Community
Advanced