skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tweaks

Add a live tweak panel to HTML artifacts with five knobs mapped to CSS custom properties.

84.7k|9.9k|Updated Apr 28, 2026
Search Tags:#design#theming#ui#localstorage#css-variables#variants#tweaks
One-click install
npx skills add https://github.com/nexu-io/open-design --skill tweaks-nexu-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tweaks
Source: https://github.com/nexu-io/open-design/tree/main/skills/tweaks
Command: npx skills add https://github.com/nexu-io/open-design --skill tweaks-nexu-io

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Wrap any HTML artifact with a side panel of live controls that rewrite CSS custom properties in real time and persist to localStorage. Designed to let teams explore design variants quickly without re-running agents.

Core Features & Use Cases

  • Live knobs for accent, scale, density, mode, and motion that map to CSS custom properties in real time.
  • Persist user choices per artifact to localStorage using a unique storage key.
  • Toggle the tweaks panel with keyboard shortcuts (T) and reset (R) to demonstrate design variants during reviews.

Quick Start

Wrap an HTML artifact with the tweaks panel and persist user choices in 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 controls to adjust CSS custom properties on an HTML page?▼

Live design tweaks map panel knob changes directly to CSS custom properties on your HTML artifact, rewriting visual styles in real time and persisting user choices to localStorage across sessions.

Can I persist design variant choices for a landing page across browser sessions?▼

Yes, the tweak panel saves user adjustments to localStorage using a unique storage key, ensuring your selected accent, scale, and density variants persist across browser sessions for the specific artifact.

Does the live tweak panel respect the prefers-reduced-motion accessibility setting?▼

Yes, the tweak panel honors the prefers-reduced-motion setting, automatically adjusting motion controls to ensure accessibility compliance while presenting design variants during reviews.

What visual properties can I adjust in real time for a design demo?▼

You can adjust five live knobs for design demos: accent, mode, scale, density, and motion. These knobs map directly to CSS variables, letting teams explore visual variants without re-running agents.

How do I toggle or reset a parameterized tweak panel during a design review?▼

You can toggle or reset the parameterized tweak panel during design reviews using keyboard shortcuts: press T to show or hide the controls and R to instantly restore the default visual properties.

What is the best way to explore design variants for dashboards without modifying code?▼

The best way to explore design variants for dashboards without modifying code is wrapping the artifact with a fixed side panel of live knobs that rewrite CSS custom properties, enabling real-time visual adjustments.

Related Skills

Explore More Design & Creative Skills→
pipixia-labspipixia-labs
38

tweaks

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

Official
Advanced
az9713az9713

tweaks

Wrap HTML artifacts with a live tweak panel that mutates CSS custom properties.

Community
Intermediate
datamonsterrdatamonsterr

radix-ui-design-system

Build accessible design systems with Radix UI primitives in React.

Community
Advanced
dthompsonfldthompsonfl

tailwind-css

Implement token-driven Tailwind CSS styling for Next.js 16 and React 19 App Router projects.

Community
Advanced