ink-component-generator

# 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 ```json { "components": [ { "name": "SelectList", "type": "interactive", "props": ["items", "onSelect"], "state": ["selectedIndex"] } ] } ``` ## Generated Patterns ### Select List Component ```tsx 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 ? ...