skilly. Buy ad slot
All skills
Nodejs · Design / AGENT SKILL

cli-ux-polish

krafteq/infraglue
0 installs 2 GitHub stars
0

Improve Node.js CLI usability with interactive prompts, update notices, and clearer help text.
Polish CLI user experience with @clack/prompts for interactive flows, update-notifier for version awareness, and enhanced Commander.js help text with examples and colors. Generic patterns for any Node.js CLI.

BEFORE YOU INSTALL

Understand the trade-offs.

SECURITY REVIEW

Not yet assessed

Review the original instructions and requested permissions before installing.

No security review is available for this catalog entry yet.

SKILL QUALITY

Not yet assessed

How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.

No quality assessment is available for this catalog entry yet.

The full skill.

Original instructions from the publisher’s SKILL.md

# CLI UX Polish

## Goal

Improve the interactive experience with polished prompts, update notifications, and better help text.

## 1. Interactive Prompts with @clack/prompts

### Install

```bash
pnpm add @clack/prompts
```

### Confirmation Flow

```ts
import * as p from '@clack/prompts'

async function promptConfirmation(message: string): Promise<boolean> {
  const result = await p.confirm({ message })

  if (p.isCancel(result)) {
    p.cancel('Operation cancelled.')
    process.exit(130)
  }

  return result
}
```

### Selection Flow

```ts
async function promptSelect<T extends string>(
  message: string,
  options: Array<{ value: T; label: string }>,
): Promise<T> {
  const result = await p.select({ message, options })

  if (p.isCancel(result)) {
    p.cancel('Operation cancelled.')
    process.exit(130)
  }

  return result as T
}
```

### Spinner

```ts
const s = p.spinner()
s.start('Processing...')
await doWork()
s.stop('Done')
```

### Important

- Only use @clack/prompts when `process.stdout.isTTY` is true (interactive terminal)
- In non-TTY / CI modes, skip prompts and auto-approve or fail with a clear message
- Always handle `p.isCancel()` — it returns a symbol when user presses Ctrl+C

## 2. Update Notifications

### Install

```bash
pnpm add update-notifier
```

### Usage

Add to the CLI entry point (before command parsing):

```ts
import updateNotifier from 'update-notifier'

const pkg = { name: 'your-package-name', version: currentVersion }
updateNotifier({ pkg }).notify()
```

This:

- Checks npm registry in the background (non-blocking)
- Caches the result for 24h
- Shows notification only when a new version exists
- Automatically respects `NO_UPDATE_NOTIFIER=1` and CI environments

## 3. Enhanced Help Text

### Add Examples to Commands

```ts
program
  .command('apply')
  .description('Apply changes')
  .addHelpText(
    'after',
    `
Examples:
  $ mycli apply --env staging
  $ mycli apply --env production --approve
  $ mycli apply --env dev --json`,
  )
```

### Global Help Epilog

```ts
program.addHelpText(
  'after',
  `
Documentation: https://github.com/YOUR_ORG/YOUR_REPO
Report bugs:   https://github.com/YOUR_ORG/YOUR_REPO/issues`,
)
```

### Colored Help (Optional)

```ts
import pc from 'picocolors'

program.configureHelp({
  formatHelp: (cmd, helper) => {
    const defaultHelp = helper.formatHelp(cmd, helper)
    if (process.stdout.isTTY) {
      return defaultHelp
        .replace(/^Usage:/m, pc.bold('Usage:'))
        .replace(/^Commands:/m, pc.bold('Commands:'))
        .replace(/^Options:/m, pc.bold('Options:'))
    }
    return defaultHelp
  },
})
```