JHamidun Tweaks panel
Готовые React-компоненты для in-design панели настроек: ползунки, переключатели, цвета, варианты-радио.
Файлы
templates/tweaks-panel.jsx—<TweaksPanel>, хукuseTweaks, контролыTweakSlider,TweakToggle,TweakRadio,TweakSelect,TweakColor,TweakText,TweakNumber.templates/example.html— рабочий пример, где меняются цвет, размер шрифта, тёмная тема.
Использование
function App() {
const [tweaks, setTweak] = useTweaks({
primary: '#D97757',
fontSize: 16,
dark: false,
layout: 'A',
});
return (
<div style={{
background: tweaks.dark ? '#111' : '#fff',
color: tweaks.dark ? '#fff' : '#111',
fontSize: tweaks.fontSize,
}}>
...макет...
<TweaksPanel>
<TweakSection title="Цвет">
<TweakColor label="Primary" value={tweaks.primary} => setTweak('primary', v)} />
</TweakSection>
<TweakSection title="Текст">
<TweakSlider label="Размер" min={12} max={24} step={1}
value={tweaks.fontSize} => setTweak('fontSize', v)} />
</TweakSection>
<TweakSection title="Тема">
<TweakToggle label="Тёмная" value={tweaks.dark} => setTweak('dark', v)} />
</TweakSection>
<TweakSection title="Layout">
<TweakRadio value={tweaks.layout} options={['A', 'B', 'C']}
=> setTweak('layout', v)} />
</TweakSection>
</TweaksPanel>
</div>
);
}
Persistence
useTweaks пишет состояние в localStorage под ключом tweaks.<page-path>. Рефреш страницы — состояние остаётся. Чтобы сбросить: кнопка «Reset» в углу панели или localStorage.clear().
Persistence на диск (бывший скилл tweaks-persist)
Если нужно, чтобы значения переживали не только refresh, но и попадали в исходник (EDITMODE-маркеры + WebSocket-сервер на :5175) — полная инструкция в references/tweaks-persist-file-writeback.md. Прежняя расширенная версия (запись в tokens.css через HTTP :8082, sidecar JSON .tweaks/, multi-state сравнение версий, reset, антипаттерны) — references/legacy-tweaks-persist.md.
Когда добавлять
- Если пользователь явно просит варианты, а сразу делать N HTML-файлов — оверкилл.
- Если хочется дать манагеру/клиенту повертеть прототип самому.
- Если в дизайне есть параметры, которые трудно решить без живого превью (плотность, цвет, копирайт).
Чего не делать
- Не пихай в Tweaks ВСЕ возможные параметры. Это не настройки приложения. 4–8 ключевых тумблеров — потолок.
- Не делай Tweaks основным UI. Это инструмент дизайнера, не пользователя.
- Если параметров много — группируй в секции, не вали в один длинный список.
Legacy reference
Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-tweaks-panel.md. Секции там: Каркас, Использование в App, Какие тёрлы стоит давать, tweaks-persist (если установлен), Антипаттерны.