frontend-design-system

Terminal UI Conventions

worclaude has no web frontend. This skill covers the terminal UI system — the equivalent of a design system for CLI output: display utilities, styling, interactive prompts, and spinner management.

Display System (src/utils/display.js)

All user-facing output goes through the display namespace. Import as:

import * as display from '../utils/display.js';

Bold + Badges visual system

The CLI uses a "Bold + Badges" restyle for all output. Key display functions:

• display.success(msg) — green checkmark + message
• display.error(msg) — red styled error
• display.info(msg) — info badge
• display.warning(msg) — warning badge
• display.newline() — empty line for spacing
• display.header(title) — section headers with styling

Rule: Never use console.log() for user-facing output. Always display.*. Console is only acceptable in test files.

Chalk Styling

Using Chalk ^5.4.1 (ESM-only version). Colors are applied via chalk.hex() for brand-consistent styling, not via named colors.

No custom theme object — colors are defined inline in display.js functions. If you add a new display function, match the existing visual weight and color scheme.

Ora Spinners

Spinners provide progress feedback during non-interactive operations (file copying, backup creation, merge processing).

Critical rule: spinner/prompt ordering

Ora spinners must be stopped before any Inquirer prompt fires. If a spinner is animating when Inquirer renders a prompt, the terminal gets corrupted.

// CORRECT
spinner.stop();  // or spinner.succeed() / spinner.fail()
const answer = await inquirer.prompt([...]);
spinner = ora('Continuing...').start();

// WRONG — terminal corruption
// spinner is still running
const answer = await inquirer.prompt([...]);

Spinner lifecycle

const spinner = ora('Creating backup...').start();
try {
  await doWork();
  spinner.succeed('Backup created');
} catch (err) {
  spinner.fail('Backup failed');
  display.error(err.message);
}