Generate blessed widgets for Node.js terminal UIs with boxes, lists, forms, and dashboard layouts.
Generates blessed terminal UI widgets for Node.js dashboards, forms, and interactive layouts.
npx claudepluginhub a5c-ai/babysitterThis skill is limited to using the following tools:
README.mdGenerate blessed widgets for Node.js terminal UIs.
Invoke this skill when you need to:
| Parameter | Type | Required | Description |
|---|---|---|---|
| projectName | string | Yes | Project name |
| layout | string | No | Layout type (dashboard, form, list) |
| widgets | array | No | Widget definitions |
const blessed = require('blessed');
const contrib = require('blessed-contrib');
// Create screen
const screen = blessed.screen({
smartCSR: true,
title: 'System Dashboard',
});
// Create grid layout
const grid = new contrib.grid({
rows: 12,
cols: 12,
screen: screen,
});
// CPU Line Chart
const cpuLine = grid.set(0, 0, 4, 6, contrib.line, {
style: { line: 'yellow', text: 'green', baseline: 'black' },
xLabelPadding: 3,
xPadding: 5,
showLegend: true,
label: 'CPU Usage',
});
// Memory Gauge
const memGauge = grid.set(0, 6, 4, 6, contrib.gauge, {
label: 'Memory Usage',
stroke: 'green',
fill: 'white',
});
// Log Box
const logBox = grid.set(4, 0, 4, 12, contrib.log, {
fg: 'green',
selectedFg: 'green',
label: 'Logs',
});
// Process Table
const processTable = grid.set(8, 0, 4, 12, contrib.table, {
keys: true,
fg: 'white',
selectedFg: 'white',
selectedBg: 'blue',
interactive: true,
label: 'Processes',
columnSpacing: 4,
columnWidth: [10, 30, 10, 10],
});
// Update data
function updateDashboard() {
// CPU data
cpuLine.setData([{
title: 'CPU',
x: ['1', '2', '3', '4', '5'],
y: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100],
}]);
// Memory
memGauge.setPercent(Math.random() * 100);
// Logs
logBox.log(`[${new Date().toISOString()}] System event`);
// Processes
processTable.setData({
headers: ['PID', 'Name', 'CPU', 'MEM'],
data: [
['1234', 'node', '2.5%', '150MB'],
['5678', 'chrome', '15.2%', '500MB'],
],
});
screen.render();
}
// Key bindings
screen.key(['escape', 'q', 'C-c'], () => process.exit(0));
// Update interval
setInterval(updateDashboard, 1000);
updateDashboard();
screen.render();
const blessed = require('blessed');
const screen = blessed.screen({
smartCSR: true,
title: 'Configuration Form',
});
const form = blessed.form({
parent: screen,
keys: true,
left: 'center',
top: 'center',
width: 60,
height: 20,
border: { type: 'line' },
style: { border: { fg: 'blue' } },
});
// Input field
blessed.text({
parent: form,
top: 1,
left: 2,
content: 'Username:',
});
const usernameInput = blessed.textbox({
parent: form,
name: 'username',
top: 1,
left: 12,
height: 1,
width: 40,
inputOnFocus: true,
style: { fg: 'white', bg: 'black' },
});
// Password field
blessed.text({
parent: form,
top: 3,
left: 2,
content: 'Password:',
});
const passwordInput = blessed.textbox({
parent: form,
name: 'password',
top: 3,
left: 12,
height: 1,
width: 40,
censor: true,
inputOnFocus: true,
style: { fg: 'white', bg: 'black' },
});
// Submit button
const submitBtn = blessed.button({
parent: form,
name: 'submit',
content: ' Submit ',
top: 6,
left: 'center',
shrink: true,
style: {
fg: 'white',
bg: 'blue',
focus: { bg: 'green' },
},
});
submitBtn.on('press', () => {
form.submit();
});
form.on('submit', (data) => {
console.log('Form data:', data);
process.exit(0);
});
screen.key(['escape', 'q'], () => process.exit(0));
screen.render();
{
"dependencies": {
"blessed": "^0.1.81",
"blessed-contrib": "^4.10.1"
}
}
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.