ink-component-generator
Generate Ink (React for CLI) components for terminal UIs with hooks, state management, and layout components.
npx skills add a5c-ai/babysitter --skill ink-component-generator --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 Selec
- Capabilities
- Usage
- Inputs
- Component Structure
- Generated Patterns
- Select List Component
- Text Input Component
- Spinner Component
- Custom Hook - useAsync
- Dependencies
- Target Processes
What does the ink-component-generator skill do?
Generate Ink (React for CLI) components for terminal UIs with hooks, state management, and layout components.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill ink-component-generator --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.