skills.rest
tarabakz25
tarabakz25COMMUNITY
Explore all skills by this author →
Website𝕏@kz25_kmcGitHub

design-tweaks-ui

Adds a dev-only popup panel to switch design candidates via CSS variables in React and Next.js apps.

1|Updated Jul 2, 2026
Search Tags:#theming#react#next.js#devtools#tailwind#css variables#design comparison
One-click install
npx skills add https://github.com/tarabakz25/my-skills --skill design-tweaks-ui-tarabakz25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tweaks-ui
Source: https://github.com/tarabakz25/my-skills/tree/main/design-tweaks-ui
Command: npx skills add https://github.com/tarabakz25/my-skills --skill design-tweaks-ui-tarabakz25

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Comparing multiple design directions (color, layout, typography, spacing, density) normally requires editing existing components or maintaining throwaway branches. This Skill adds a floating dev-only tweaks panel that switches between design candidates with one click, without modifying existing UI code. ## Core Features & Use Cases - Non-destructive integration: Candidates are injected from outside via CSS custom properties and data attributes on the document root; existing components keep their structure and only swap hardcoded values for token references. - Candidate preset system: Each candidate is a typed object in candidates.ts defining CSS variables and data attributes, covering color, layout mode, typography, radius, shadow, and density axes. - Dev-only isolation: The panel is guarded by NODE_ENV or a feature flag and lazy-loaded with dynamic import so it stays out of production bundles. - Use Case: Before a design review, a team defines three candidates (baseline, warm editorial, cool wide) and lets stakeholders click through them live on the real app, then promotes the winning candidate's variables into the Tailwind config. ## Quick Start Add a dev-only design tweaks popup to my Next.js app so I can switch between color and layout candidates with buttons without changing my existing components.

Frequently Asked Questions about design-tweaks-ui

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

FAQPage Schema
How do I compare multiple design candidates in a React app without changing components?▼

Define each candidate as an object of CSS variables and data attributes, then apply them to document.documentElement when a button is clicked. Existing components only need hardcoded values swapped for var(--token) references, keeping their structure untouched.

How to add a dev-only theme switcher in Next.js?▼

Wrap the root layout with a provider that renders the panel only when NODE_ENV is development or a feature flag is set. Load the panel with next/dynamic using ssr: false so it is excluded from production bundles.

Does this approach work with Tailwind CSS?▼

Yes. Define semantic utility classes like .bg-surface that map to CSS variables, then replace hardcoded Tailwind color classes one-to-one on components you want to compare. Layout differences are handled with data-attribute selectors instead of conditional classNames.

Can I use this with Vite or CRA instead of Next.js?▼

Yes. Replace the Next.js dynamic import with React.lazy and Suspense, and gate the panel with import.meta.env.DEV or a VITE_ prefixed environment variable. The candidate application logic is framework-agnostic DOM manipulation.

Why does the candidate not persist after page reload?▼

Persistence requires reading localStorage inside a useEffect after mount, not during SSR or initial render. The restore logic must run client-side only, then apply the stored candidate to the document root.

When should I not use a dev-only tweaks panel?▼

Do not use it for production user-facing theme switching like dark mode settings, which belongs in the project's real theme implementation. It is also not suited for design system audits or initial visual direction exploration.

Related Skills

Explore More Design & Creative Skills→
paulinett1508-devpaulinett1508-dev

Frontend Design (Autoridade Estética)

Design production-ready frontend interfaces with CSS variables and accessible responsive patterns.

Community
Advanced
TOBIASpuchitoTOBIASpuchito

citec-tailwind-system

Applies Tailwind tokens and CSS variables to CITEC Astro and React styling.

Community
Intermediate
adilkalamadilkalam

design-qa-skill

Automate design QA checks across breakpoints and generate severity-scored reports.

Community
Basic
vitakilivitakili
9

theme-visitor-components

Provide visitor-facing color mode and theme preset switching in Payload CMS.

Community
Intermediate