Invoke Ink.js CLI design patterns and component guidance
Provides Ink.js CLI design patterns, component guidance, and troubleshooting tips.
/plugin marketplace add akiojin/skills/plugin install cli-design@akiojin-skillsThis command provides access to Ink.js (React for CLI) design patterns and implementation guidance.
/cli-design:inkjs-cli [topic]
component - Component classification and patternsscreen - Screen component patternspart - Part component patternscommon - Common input component patternsnavigation - Multi-screen navigation patternsanimation - Spinner and progress bar patternsstate - State management patternslayout - Responsive layout patternsperformance - Performance optimizationinput - Input handling patternsgotchas - Common issues and solutionsemoji - Emoji/icon width handlingctrlc - Ctrl+C handlinguseinput - useInput conflict resolutiontesting - ink-testing-library patterns/cli-design:inkjs-cli component
/cli-design:inkjs-cli emoji
/cli-design:inkjs-cli navigation
| Type | Purpose | Key Features |
|---|---|---|
| Screen | Full-page view | useInput, Header/Content/Footer |
| Part | Reusable element | React.memo, pure/stateless |
| Common | Input component | Controlled/uncontrolled modes |
src/cli/ui/
├── components/
│ ├── App.tsx # Root component
│ ├── common/ # Common components
│ ├── parts/ # Part components
│ └── screens/ # Screen components
├── hooks/ # Custom hooks
├── utils/ # Utilities
└── types.ts # Type definitions
| Hook | Purpose |
|---|---|
useInput | Keyboard input handling |
useApp | App lifecycle (exit) |
useFocus | Focus management |
useStdin | Raw stdin access |
isActive option or early returnexitOnCtrlC: false and handle manuallyFor detailed documentation, reference the inkjs-design skill:
skills/inkjs-design/SKILL.md - Core skill documentskills/inkjs-design/references/ - Detailed reference documentsskills/inkjs-design/examples/ - Practical examples