How do I install the Dev Tweaker skill?

Run npx skillmds@latest add mehdibha/dev-tweaker in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Dev Tweaker safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Dev Tweaker?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Dev Tweaker free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Dev Tweaker?

mehdibha (@mehdibha) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Dev Tweaker by mehdibha — Agent Skill

Name: Dev Tweaker
Author: mehdibha

Dev Tweaker

Add throwaway useTweak() controls to a www feature component so the user can flip design/layout options live in the dev-only tweaker panel and pick one, then bake the choice in and remove the scaffolding. Use only when they explicitly ask for tweaks or options on a specific feature during PR/feature-branch work.

mehdibha c6f7656 1.9 KB Updated Sep 17, 2026

File contents

Dev tweaker (design exploration)

www/src/dev/tweaker is a floating panel for exploring designs/layouts live: you add useTweak() calls to a feature component, the user flips the options in the panel and picks one. It runs in dev and on Vercel previews, and is dead-code-eliminated from production builds. Full API + workflow: www/src/dev/tweaker/README.md.

When (strict): only during active PR/feature-branch work, and only when the user explicitly asks for tweaks/options on a specific feature. Never unprompted, never on main, never as a way to add real config.
How: add useTweak('Label', { type, default, group? }) in the relevant www feature component and branch the JSX/styles on the returned value. Keep each default equal to the current look (nothing changes until a control moves); offer a small set (≤~5) of meaningful named variants per axis; group related controls. Types: select, boolean, number, color, text.
Boundaries: never author useTweak in www/src/registry/ — the product source stays clean (the panel reuses registry UI, but the calls live only in site/feature/module code). It's throwaway scaffolding, not a /create axis: adding a real axis/variant/token is still a product decision (propose-and-approve — see CLAUDE.md).
Cleanup: once the user picks (their "Copy for AI" output or a verbal choice), bake the values into the code and remove the useTweak scaffolding before finalizing the PR — unless they want to keep iterating. Don't merge useTweak calls into feature code.

Frequently asked questions