ink-component-generator

name	ink-component-generator
description	Generate Ink (React for CLI) components for terminal UIs with hooks, state management, and layout components.
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"]}

Ink Component Generator

Generate Ink (React) components for terminal UIs.

Capabilities

• Generate Ink React components
• Create custom hooks for CLI state
• Set up layout components (Box, Text)
• Implement input handling
• Create loading and progress components
• Set up testing with ink-testing-library

Usage

Invoke this skill when you need to:

• Build terminal UIs with React patterns
• Create interactive CLI components
• Implement stateful terminal interfaces
• Set up Ink project structure

Inputs

Parameter	Type	Required	Description
projectName	string	Yes	Project name
components	array	Yes	Component definitions
includeHooks	boolean	No	Generate custom hooks

Component Structure

{
  "components": [
    {
      "name": "SelectList",
      "type": "interactive",
      "props": ["items", "onSelect"],
      "state": ["selectedIndex"]
    }
  ]
}

Generated Patterns

Select List Component

import React, { useState, useCallback } from 'react';
import { Box, Text, useInput, useApp } from 'ink';

interface SelectListProps {
  items: string[];
  onSelect: (item: string, index: number) => void;
}

export const SelectList: React.FC<SelectListProps> = ({ items, onSelect }) => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const { exit } = useApp();

  useInput((input, key) => {
    if (key.upArrow) {
      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
    } else if (key.downArrow) {
      setSelectedIndex((prev) => (prev < items.length -  ? prev +  : ));
    }   (key.) {
      (items[selectedIndex], selectedIndex);
    }   (input ===  || key.) {
      ();
    }
  });

   (
    
  );
};

Text Input Component

import React, { useState } from 'react';
import { Box, Text, useInput } from 'ink';

interface TextInputProps {
  placeholder?: string;
  onSubmit: (value: string) => void;
  mask?: string;
}

export const TextInput: React.FC<TextInputProps> = ({
  placeholder = '',
  onSubmit,
  mask,
}) => {
  const [value, setValue] = useState('');
  const [cursor, setCursor] = useState(0);

  useInput((input, key) => {
    if (key.return) {
      onSubmit(value);
      return;
    }
    if (key.backspace || key.delete) {
      setValue((prev) => prev.slice(0, -1));
      setCursor( .(, prev - ));
      ;
    }
     (!key. && !key. && input) {
      ( prev + input);
      ( prev + );
    }
  });

   displayValue = mask ? mask.(value.) : value;

   (
    
  );
};

Spinner Component

import React, { useState, useEffect } from 'react';
import { Text } from 'ink';

const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];

interface SpinnerProps {
  label?: string;
}

export const Spinner: React.FC<SpinnerProps> = ({ label }) => {
  const [frame, setFrame] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setFrame((prev) => (prev + 1) % frames.length);
    }, 80);
    return () => clearInterval(timer);
  }, []);

  return (
    <Text>
      <Text color=>{frames[frame]}
      {label &&  {label}}
    
  );
};

Custom Hook - useAsync

import { useState, useEffect, useCallback } from 'react';

interface AsyncState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

export function useAsync<T>(
  asyncFn: () => Promise<T>,
  deps: any[] = []
): AsyncState<T> & { refetch: () => void } {
  const [state, setState] = useState<AsyncState<T>>({
    data: null,
    loading: true,
    error: null,
  });

  const execute = useCallback(async () => {
    setState({ data: null, loading: true, error: null });
    try {
      const data = await asyncFn();
      setState({ data, loading: false, error: null });
    } catch (error) {
      setState({ : , : , : error   });
    }
  }, deps);

  ( {
    ();
  }, [execute]);

   { ...state, : execute };
}

Dependencies

{
  "dependencies": {
    "ink": "^4.0.0",
    "react": "^18.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "ink-testing-library": "^3.0.0"
  }
}

Target Processes

• tui-application-framework
• interactive-form-implementation
• dashboard-monitoring-tui