ora-spinner-integration

name	ora-spinner-integration
description	Integrate ora spinners with consistent styling, promise handling, and status updates for CLI progress feedback.
allowed-tools	Read, Write, Edit, Bash, Glob, Grep
graph	{"domains":["domain:software-engineering"],"specializations":["specialization:cli-mcp-development"],"skillAreas":["skill-area:cli-design","skill-area:command-line-interface-tools"],"roles":["role:backend-engineer","role:platform-engineer"],"workflows":["workflow:feature-development"],"topics":["topic:developer-experience"]}

Ora Spinner Integration

Integrate ora spinners for consistent CLI progress feedback.

Capabilities

• Configure ora spinner styling
• Create promise-based spinners
• Set up spinner sequences
• Implement status transitions
• Create custom spinner types
• Generate spinner utilities

Usage

Invoke this skill when you need to:

• Add loading indicators to CLI
• Show progress during async operations
• Create consistent spinner styling
• Implement status transitions

Inputs

Parameter	Type	Required	Description
language	string	Yes	Target language (typescript, javascript)
style	object	No	Spinner styling options
spinners	array	No	Custom spinner definitions

Generated Patterns

TypeScript Spinner Utilities

import ora, { Ora, Options } from 'ora';
import chalk from 'chalk';

// Spinner configuration
const defaultOptions: Options = {
  color: 'cyan',
  spinner: 'dots',
  prefixText: '',
};

// Create spinner with consistent styling
export function createSpinner(text: string, options?: Partial<Options>): Ora {
  return ora({
    ...defaultOptions,
    ...options,
    text,
  });
}

// Spinner with promise
export async function withSpinner<T>(
  text: string,
  fn: () => Promise<T>,
  options?: {
    successText?: string | ((result: T) => string);
    failText?: string | ((error: Error) => string);
  }
): <T> {
   spinner = (text);
  spinner.();

   {
     result =  ();
     successText =  options?. === 
      ? options.(result)
      : options?. || text;
    spinner.(successText);
     result;
  }  (error) {
     failText =  options?. === 
      ? options.(error  )
      : options?. || ;
    spinner.(failText);
     error;
  }
}


   withSequentialSpinners<T>(
  : <{
    : ;
    :  <>;
    ?: ;
  }>
): <T[]> {
   : T[] = [];

   ( step  steps) {
     result =  (step., step., {
      : step.,
    });
    results.(result);
  }

   results;
}


   {
   : ;
   : <,  |  |  | >;

  () {
    . = (title);
    . =  ();
  }

  (: ):  {
    ..(id, );
    .();
  }

  (: ):  {
    ..(id, );
    .();
  }

  (: ):  {
    ..(id, );
    .();
  }

  (: ):  {
    ..(id, );
    .();
  }

   ():  {
     lines = .(..()).( {
       icon = {
        : chalk.(),
        : chalk.(),
        : chalk.(),
        : chalk.(),
      }[status];
       ;
    });

    .. =  + lines.();
  }

  ():  {
    ..();
  }

  ():  {
     failed = .(..()).( s === );
     (failed) {
      ..();
    }  {
      ..();
    }
  }
}

Usage Examples

// Simple spinner
const spinner = createSpinner('Loading...');
spinner.start();
// ... do work
spinner.succeed('Loaded!');

// Promise wrapper
const data = await withSpinner(
  'Fetching data...',
  () => fetchData(),
  { successText: (data) => `Loaded ${data.length} items` }
);

// Sequential steps
await withSequentialSpinners([
  { text: 'Installing dependencies...', fn: () => installDeps() },
  { text: 'Building project...', fn: () => build() },
  { text: 'Running tests...', fn: () => test() },
]);

// Task tracking
const tasks = new TaskSpinner('Processing files');
tasks.addTask('file1.ts');
tasks.addTask('file2.ts');
tasks.start();
tasks.startTask('file1.ts');

tasks.();
tasks.();
tasks.();
tasks.();

Dependencies

{
  "dependencies": {
    "ora": "^7.0.0",
    "chalk": "^5.0.0"
  }
}

Target Processes

• progress-status-indicators
• cli-output-formatting
• cli-application-bootstrap