Menu
Extract a npm dependency into the shared vendor bundle
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Tinker desktop toolbox CLI for AI agents. Use when the user needs to open a Tinker plugin, create a new Tinker plugin, list installed plugins, control plugin windows from the command line, call plugin MCP tools, debug a plugin UI, or integrate Tinker with an AI agent via MCP. Triggers include "open a Tinker plugin", "create a Tinker plugin", "list tinker plugins", "tinker open", "call a plugin tool", "tinker MCP", "automate JSON editor", or any task requiring programmatic control of the Tinker Electron app and its plugins. Prefer tinker CLI over guessing IPC or UI steps.
Core Tinker CLI usage guide. Read this before running any tinker commands. Covers discovering installed plugins, opening and closing plugin windows, listing running plugins, and controlling the Tinker desktop app from the command line. Use when the user asks to open a Tinker plugin, list plugins, check what is running, restart or close a plugin, or quit Tinker.
Implement or audit MCP tools for a Tinker plugin. Use when adding MCP support, writing src/mcp.ts, defining tinker.mcp.tools in package.json, reviewing plugin MCP conventions, or checking whether an MCP implementation follows project standards.
Tinker development CLI for working in the tinker repo. Use when developing Tinker itself or its plugins and you need to open plugins, list installed plugins, control plugin windows, or call plugin MCP tools via `./bin/tinker-dev`. Do not use the packaged `tinker` CLI in this repo. Triggers include tasks in the tinker-utm repo requiring programmatic control of the dev Tinker app. Prefer `./bin/tinker-dev` over the global `tinker` skill or guessing IPC/UI steps.
Debug Tinker plugins with agent-browser. Use when the user needs to open, inspect, interact with, restart, or close a plugin in the running Tinker Electron app.
Check code against Tinker plugin coding standards
| name | vendor-dep |
| description | Extract a npm dependency into the shared vendor bundle |
| argument-hint | <package-name> <global-camel-name> <plugin-name> [plugin-name2 ...] |
Extract a plugin's npm dependency into the shared vendor/ bundle so it can be reused across plugins.
package-name: the npm package name (e.g. html-to-image)global-camel-name: camelCase name for globalThis and IIFE export (e.g. htmlToImage)plugin-name: one or more plugin folder names that use this dependency (e.g. tinker-code-image tinker-photo-collage)The vendor entry file name and build mode/script name are derived from global-camel-name lowercased (e.g. htmltoimage).
lowerName = global-camel-name lowercased (e.g. htmlToImage → htmltoimage)pluginVendorName = PluginVendor + PascalCase of global-camel-name (e.g. PluginVendorHtmlToImage)First check how the plugin imports the package:
import { foo } from '...' or import * as foo from '...'): use import *import Foo from '...'): use default importCreate vendor/<lowerName>.ts:
Named exports:
import * as <global-camel-name> from '<package-name>'
import { expose } from './util'
expose('<global-camel-name>', <global-camel-name>)
export { <global-camel-name> }
Default export:
import <global-camel-name> from '<package-name>'
import { expose } from './util'
expose('<global-camel-name>', <global-camel-name>)
export default <global-camel-name>
vendor/vite.config.tsAdd to globals map:
'<package-name>': '<global-camel-name>',
Add build target (before the final return createConfig('react', ...)):
if (target === '<lowerName>') {
return createConfig('<lowerName>', '<pluginVendorName>')
}
vendor/package.jsonAdd to devDependencies:
"<package-name>": "<version>"
Use the same version string currently in the plugin's package.json. Renderer libraries must always be installed as devDependencies, never dependencies.
Add build script:
"build:<lowerName>": "vite build --config vite.config.ts --mode <lowerName>"
Append to build script chain:
&& npm run build:<lowerName>
package.jsonFor each <plugin-name>, remove <package-name> from devDependencies. If devDependencies becomes empty, keep the key with an empty object {}.
index.htmlFor each <plugin-name>, add the following <script> tag in <head> after existing vendor scripts:
<script src="/vendor/<lowerName>.js"></script>