skills.rest
Mjlike123
Mjlike123COMMUNITY
Explore all skills by this author →
GitHub

make-tweakable

Adds a floating control panel to HTML prototypes for live tweaking of design parameters.

Updated Aug 13, 2026
Search Tags:#html#deprecated#css custom properties#control panel#postmessage#design prototype#live tweaking
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill make-tweakable-mjlike123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: make-tweakable
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/monkren-design/skills/_deprecated/make-tweakable
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill make-tweakable-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When presenting a design prototype, stakeholders often want to explore variations—different colors, fonts, spacing, or copy—without asking for separate v1/v2/v3 files. This Skill embeds a floating tweak panel directly into a single HTML prototype so viewers can adjust selected dimensions in real time and persist their choices. ## Core Features & Use Cases - Tweakable Dimension Selection: Identifies 3–8 meaningful axes to expose (colors, typography, density, layout variants, copy, feature flags) instead of scattering variant files. - Host Protocol Integration: Implements the postMessage handshake (__edit_mode_available, __activate_edit_mode, __edit_mode_set_keys) so a host toolbar can toggle the panel and persist edits. - Disk Persistence: Wraps default values in /*EDITMODE-BEGIN*/ ... /*EDITMODE-END*/ JSON markers inside an inline script so the host can merge edits back into the file across refreshes. - Use Case: A designer finishes a landing page prototype and wants the team to compare dark vs. light themes and two headline options live during review, without maintaining multiple HTML files. ## Quick Start Ask the agent to add a tweakable control panel to your HTML prototype exposing the primary color, font size, and dark mode toggle. Note: This Skill is deprecated as of v5.0; the maintainers recommend Figma Plugin or tldraw for live adjustment panels, or the 5-dim-review route for reviewing existing panels.

Frequently Asked Questions about make-tweakable

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

FAQPage Schema
How do I add a live adjustment panel to an HTML prototype?▼

Identify 3–8 tweakable dimensions such as colors, fonts, and feature flags, then bind them to CSS custom properties or JS state. Add a floating panel with matching controls (color pickers, sliders, toggles) that updates values in real time.

How does the tweak panel communicate with the host toolbar?▼

The prototype registers a window message listener first, then posts `__edit_mode_available` to the parent. It responds to `__activate_edit_mode` and `__deactivate_edit_mode` to show or hide the panel, and posts `__edit_mode_set_keys` when values change.

How are tweak default values persisted across page refreshes?▼

Defaults are wrapped in `/*EDITMODE-BEGIN*/` and `/*EDITMODE-END*/` comment markers containing valid JSON inside an inline script tag. The host merges edits into that block and writes the file back, so changes survive reloads.

Is the make-tweakable skill still maintained?▼

No. It was marked deprecated in v5.0 and will be physically deleted after six months without usage. The maintainers suggest Figma Plugin or tldraw for live adjustment panels, or the 5-dim-review route for reviewing existing panels.

Why does the tweak panel toggle silently fail in the host?▼

The failure happens when the prototype announces availability before registering its message listener, so the host's activation message is lost. Always register the window message listener first, then post the availability message.

Related Skills

Explore More Design & Creative Skills→
jnlanahanjnlanahan

prototype

Generate three clickable Tailwind CDN HTML UI prototype variants.

Community
Intermediate
imclabimclab
1

start

Detect project state and route users to the correct XR development workflow phase.

Official
Intermediate
makyua-sanmakyua-san

design-review

Audit live interface design quality and produce atomic fixes with before/after validation.

Community
Advanced
nexu-ionexu-io
93.2k

tweaks

Implement live, parameterized CSS custom property controls for real-time design variant exploration.

Official
Intermediate