ReddRadar
Agent skill
blessed-widget-generator
Generate blessed widgets for Node.js terminal UIs with boxes, lists, forms, and dashboard layouts.
Install this agent skill to your Project
npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/cli-mcp-development/skills/blessed-widget-generator
SKILL.md
Blessed Widget Generator
Generate blessed widgets for Node.js terminal UIs.
Capabilities
- Generate blessed widget definitions
- Create dashboard layouts
- Set up interactive forms
- Implement custom components
- Configure styling and borders
- Create event handling patterns
Usage
Invoke this skill when you need to:
- Build terminal dashboards with Node.js
- Create complex TUI layouts
- Implement monitoring interfaces
- Set up blessed project structure
Inputs
| Parameter | Type | Required | Description |
|---|---|---|---|
| projectName | string | Yes | Project name |
| layout | string | No | Layout type (dashboard, form, list) |
| widgets | array | No | Widget definitions |
Generated Patterns
Dashboard Layout
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();
Form Widget
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
{
"dependencies": {
"blessed": "^0.1.81",
"blessed-contrib": "^4.10.1"
}
}
Target Processes
- tui-application-framework
- dashboard-monitoring-tui
- interactive-form-implementation
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
a5c-ai/babysitter
gsd-tools
Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).
a5c-ai/babysitter
model-profile-resolution
Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.
a5c-ai/babysitter
verification-suite
Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.
a5c-ai/babysitter
state-management
STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.
a5c-ai/babysitter
git-integration
Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.
a5c-ai/babysitter
frontmatter-parsing
YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.
Didn't find tool you were looking for?