make-tweakable

Name: make-tweakable
Author: bluzir

42installs10forks

How to install make-tweakable?

bluzir/claude-code-design/make-tweakable

$npx -y skills add bluzir/claude-code-design --skill make-tweakable

Installs into the current project.

Summary

Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview. Persists via claude-pipe pattern (pending.yaml + apply-tweaks skill).

Files · 1

View on GitHub

SKILL.md

1	# Make Tweakable
2
3	Inject a floating Tweaks panel into an existing HTML artifact. Panel lives in-artifact (no iframe), uses File System Access API for persistence (with copy-paste fallback).
4
5	## Pattern
6
7	1. Wrap tweakable defaults in CSS custom properties with `--tweak-` prefix on `:root`
8	2. Add marker block `<script id="__tweak_schema" type="application/json">{...}</script>` with the defaults
9	3. Inject floating panel (`<div id="tweaks-panel">`) with controls bound to each key
10	4. Panel writes updates to `pending.yaml` via File System Access API (asks user to select target file on first use)
11	5. `Shift+T` toggles panel visibility
12	6. User invokes `/apply-tweaks <html-path>` or says "save tweaks" — Claude reads `pending.yaml`, edits HTML via `Edit` tool, clears pending
13
14	## Phase 1 — Decide keys
15
16	If user specified keys (`$ARGUMENTS`), use those. Otherwise infer from the artifact:
17	- Colors (primaryColor, accentColor, bgColor, textColor)
18	- Typography (fontFamily, fontSize, lineHeight)
19	- Spacing (gap, padding)
20	- Layout variants (dense/comfortable/spacious)
21	- Dark mode toggle
22
23	Keep it tight — 4-7 knobs, not 20.
24
25	## Phase 2 — Refactor HTML to use `--tweak-` vars
26
27	For each key, find hard-coded values in the HTML and replace with `var(--tweak-keyName)`. Set defaults on `:root`:
28
29	```css
30	:root {
31	--tweak-primaryColor: #D97757;
32	--tweak-fontSize: 16px;
33	--tweak-density: 1; /* multiplier */
34	}
35	```
36
37	Add schema block:
38	```html
39	<script id="__tweak_schema" type="application/json">
40	{
41	"primaryColor": { "type": "color", "default": "#D97757" },
42	"fontSize": { "type": "number", "default": 16, "min": 12, "max": 32, "step": 1, "unit": "px" },
43	"density": { "type": "number", "default": 1, "min": 0.75, "max": 1.5, "step": 0.05 },
44	"dark": { "type": "boolean", "default": false }
45	}
46	</script>
47	```
48
49	## Phase 3 — Inject Tweaks panel
50
51	Append before `</body>`:
52
53	```html
54	<script>
55	(async () => {
56	const schemaEl = document.getElementById('__tweak_schema');
57	if (!schemaEl) return;
58	const schema = JSON.parse(schemaEl.textContent);
59	const values = Object.fromEntries(Object.entries(schema).map(([k, v]) => [k, v.default]));
60
61	// Restore from localStorage for in-browser state
62	const lsKey = '__tweaks_' + location.pathname;
63	try { Object.assign(values, JSON.parse(localStorage.getItem(lsKey) \|\| '{}')); } catch {}
64
65	const panel = document.createElement('div');
66	panel.id = 'tweaks-panel';
67	panel.hidden = true;
68	panel.style.cssText = `
69	position: fixed; right: 16px; bottom: 16px; z-index: 99999;
70	font: 13px/1.4 ui-sans-serif, system-ui;
71	background: #fff; color: #111;
72	border: 1px solid #ddd; border-radius: 10px;
73	padding: 14px; min-width: 240px;
74	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
75	`;
76
77	const applyValues = () => {
78	const root = document.documentElement;
79	for (const [k, v] of Object.entries(values)) {
80	const meta = schema[k];
81	if (meta.type === 'color' \|\| meta.type === 'string') root.style.setProperty('--tweak-' + k, v);
82	else if (meta.type === 'number') root.style.setProperty('--tweak-' + k, v + (meta.unit \|\| ''));
83	else if (meta.type === 'boolean') root.classList.toggle('tweak-' + k, !!v);
84	}
85	try { localStorage.setItem(lsKey, JSON.stringify(values)); } catch {}
86	};
87
88	const header = document.createElement('div');
89	header.style.cssText = 'font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center';
90	header.innerHTML = `<span>Tweaks</span><span style="opacity:0.5;font-weight:400;font-size:11px">Shift+T to toggle</span>`;
91	panel.appendChild(header);
92
93	for (const [key, meta] of Object.entries(schema)) {
94	const row = document.createElement('label');
95	row.style.cssText = 'display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0';
96	const label = document.createElement('span');
97	label.textContent = key;
98	label.style.cssText = 'font-family:ui-monospace,Menlo;font-size:11px;opacity:0.7';
99	row.appendChild(label);
100
101	let input;
102	if (meta.type === 'color') {
103	input = document.createElement('input');
104	input.type = 'color';
105	input.value = values[key];
106	} else if (meta.type === 'number') {
107	input = document.createElement('input');
108	input.type = 'range';
109	input.min = meta.min; input.max = meta.max; input.step = meta.step;
110	input.value = values[key];
111	input.style.width = '100px';
112	} else if (meta.type === 'boolean') {
113	input = document.createElement('input');
114	input.type = 'checkbox';
115	input.checked = !!values[key];
116	} else {
117	input = document.createElement('input');
118	input.type

People who liked this also viewed

6 picks

Type

make-tweakable

42installs10forks

View on GitHub

How to install make-tweakable?

bluzir/claude-code-design/make-tweakable

$npx -y skills add bluzir/claude-code-design --skill make-tweakable

Installs into the current project.

Summary

Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview. Persists via claude-pipe pattern (pending.yaml + apply-tweaks skill).

Files · 1

View on GitHub

SKILL.md

1	# Make Tweakable
2
3	Inject a floating Tweaks panel into an existing HTML artifact. Panel lives in-artifact (no iframe), uses File System Access API for persistence (with copy-paste fallback).
4
5	## Pattern
6
7	1. Wrap tweakable defaults in CSS custom properties with `--tweak-` prefix on `:root`
8	2. Add marker block `<script id="__tweak_schema" type="application/json">{...}</script>` with the defaults
9	3. Inject floating panel (`<div id="tweaks-panel">`) with controls bound to each key
10	4. Panel writes updates to `pending.yaml` via File System Access API (asks user to select target file on first use)
11	5. `Shift+T` toggles panel visibility
12	6. User invokes `/apply-tweaks <html-path>` or says "save tweaks" — Claude reads `pending.yaml`, edits HTML via `Edit` tool, clears pending
13
14	## Phase 1 — Decide keys
15
16	If user specified keys (`$ARGUMENTS`), use those. Otherwise infer from the artifact:
17	- Colors (primaryColor, accentColor, bgColor, textColor)
18	- Typography (fontFamily, fontSize, lineHeight)
19	- Spacing (gap, padding)
20	- Layout variants (dense/comfortable/spacious)
21	- Dark mode toggle
22
23	Keep it tight — 4-7 knobs, not 20.
24
25	## Phase 2 — Refactor HTML to use `--tweak-` vars
26
27	For each key, find hard-coded values in the HTML and replace with `var(--tweak-keyName)`. Set defaults on `:root`:
28
29	```css
30	:root {
31	--tweak-primaryColor: #D97757;
32	--tweak-fontSize: 16px;
33	--tweak-density: 1; /* multiplier */
34	}
35	```
36
37	Add schema block:
38	```html
39	<script id="__tweak_schema" type="application/json">
40	{
41	"primaryColor": { "type": "color", "default": "#D97757" },
42	"fontSize": { "type": "number", "default": 16, "min": 12, "max": 32, "step": 1, "unit": "px" },
43	"density": { "type": "number", "default": 1, "min": 0.75, "max": 1.5, "step": 0.05 },
44	"dark": { "type": "boolean", "default": false }
45	}
46	</script>
47	```
48
49	## Phase 3 — Inject Tweaks panel
50
51	Append before `</body>`:
52
53	```html
54	<script>
55	(async () => {
56	const schemaEl = document.getElementById('__tweak_schema');
57	if (!schemaEl) return;
58	const schema = JSON.parse(schemaEl.textContent);
59	const values = Object.fromEntries(Object.entries(schema).map(([k, v]) => [k, v.default]));
60
61	// Restore from localStorage for in-browser state
62	const lsKey = '__tweaks_' + location.pathname;
63	try { Object.assign(values, JSON.parse(localStorage.getItem(lsKey) \|\| '{}')); } catch {}
64
65	const panel = document.createElement('div');
66	panel.id = 'tweaks-panel';
67	panel.hidden = true;
68	panel.style.cssText = `
69	position: fixed; right: 16px; bottom: 16px; z-index: 99999;
70	font: 13px/1.4 ui-sans-serif, system-ui;
71	background: #fff; color: #111;
72	border: 1px solid #ddd; border-radius: 10px;
73	padding: 14px; min-width: 240px;
74	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
75	`;
76
77	const applyValues = () => {
78	const root = document.documentElement;
79	for (const [k, v] of Object.entries(values)) {
80	const meta = schema[k];
81	if (meta.type === 'color' \|\| meta.type === 'string') root.style.setProperty('--tweak-' + k, v);
82	else if (meta.type === 'number') root.style.setProperty('--tweak-' + k, v + (meta.unit \|\| ''));
83	else if (meta.type === 'boolean') root.classList.toggle('tweak-' + k, !!v);
84	}
85	try { localStorage.setItem(lsKey, JSON.stringify(values)); } catch {}
86	};
87
88	const header = document.createElement('div');
89	header.style.cssText = 'font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center';
90	header.innerHTML = `<span>Tweaks</span><span style="opacity:0.5;font-weight:400;font-size:11px">Shift+T to toggle</span>`;
91	panel.appendChild(header);
92
93	for (const [key, meta] of Object.entries(schema)) {
94	const row = document.createElement('label');
95	row.style.cssText = 'display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0';
96	const label = document.createElement('span');
97	label.textContent = key;
98	label.style.cssText = 'font-family:ui-monospace,Menlo;font-size:11px;opacity:0.7';
99	row.appendChild(label);
100
101	let input;
102	if (meta.type === 'color') {
103	input = document.createElement('input');
104	input.type = 'color';
105	input.value = values[key];
106	} else if (meta.type === 'number') {
107	input = document.createElement('input');
108	input.type = 'range';
109	input.min = meta.min; input.max = meta.max; input.step = meta.step;
110	input.value = values[key];
111	input.style.width = '100px';
112	} else if (meta.type === 'boolean') {
113	input = document.createElement('input');
114	input.type = 'checkbox';
115	input.checked = !!values[key];
116	} else {
117	input = document.createElement('input');
118	input.type

People who liked this also viewed

6 picks

Type