This skill should be used when the user asks to "create hyper plugin", "hyper plugin", "hyper extension", "decorateConfig", "hyper middleware", "hyper redux", "hyper react", "hyper electron", "hyper api", or mentions developing plugins for Hyper terminal.
From hyper-devnpx claudepluginhub nthplusio/functional-claude --plugin hyper-devThis skill uses the workspace's default tool permissions.
references/api.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides idea refinement into designs: explores context, asks questions one-by-one, proposes approaches, presents sections for approval, writes/review specs before coding.
Develop plugins for Hyper terminal using JavaScript, React, and Redux.
Hyper plugins are npm packages that run in both Electron main process and renderer. They use a composition-based API with decorators and hooks.
hyper-plugin-name/
├── package.json # npm package manifest
├── index.js # Main entry point
├── README.md # Documentation
└── lib/ # Optional: additional modules
{
"name": "hyper-your-plugin",
"version": "1.0.0",
"description": "Brief description",
"main": "index.js",
"keywords": ["hyper", "hyper-plugin"],
"author": "Your Name",
"license": "MIT"
}
Required: The hyper keyword is needed for plugin discovery.
Modify user configuration:
exports.decorateConfig = (config) => {
return Object.assign({}, config, {
// Your config modifications
myPluginOption: config.myPluginOption || 'default',
});
};
Always preserve user config with spread:
exports.decorateConfig = (config) => ({
...config,
css: `${config.css || ''} .custom { color: red; }`,
});
Called when Electron app is ready:
exports.onApp = (app) => {
app.on('before-quit', () => {
// Cleanup
});
};
Called when window is created:
exports.onWindow = (window) => {
window.on('focus', () => {
// Handle window focus
});
};
Called before plugin is unloaded:
exports.onUnload = (window) => {
// Cleanup resources, remove listeners
};
Wrap the terminal component:
exports.decorateTerm = (Term, { React, notify }) => {
return class extends React.Component {
render() {
return React.createElement(Term, this.props);
}
};
};
decorateHeader - Window headerdecorateTabs - Tab bardecorateTab - Individual tabsdecorateHyper - Main Hyper componentIntercept Redux actions:
exports.middleware = (store) => (next) => (action) => {
if (action.type === 'SESSION_ADD') {
console.log('New session:', action.uid);
}
return next(action);
};
exports.reduceUI = (state, action) => {
switch (action.type) {
case 'CUSTOM_ACTION':
return state.set('customState', action.payload);
default:
return state;
}
};
| Action | Description |
|---|---|
SESSION_ADD | Session created |
SESSION_PTY_DATA | Terminal output |
SESSION_PTY_EXIT | Session ended |
SESSION_SET_ACTIVE | Session focused |
See references/api.md for complete action reference.
.hyper.js:
localPlugins: ['/path/to/your/plugin'],
Cmd+Shift+R / Ctrl+Shift+RCmd+Alt+I / Ctrl+Shift+Ihyper keyword in package.jsonnpm publishplugins array