skills.rest
aphrody-code
aphrody-codeCOMMUNITY
Explore all skills by this author →
Website𝕏@yoyo__goatGitHub

gemini-cli-jsx

Migrates Ink/React .tsx components from gemini-cli to Bun native JSX runtime.

Updated Apr 17, 2026
Search Tags:#react#bun#tsconfig#ink#hot reload#jsx migration#tty stdin
One-click install
npx skills add https://github.com/aphrody-code/n2b --skill gemini-cli-jsx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gemini-cli-jsx
Source: https://github.com/aphrody-code/n2b/tree/main/skills/gemini-cli-jsx
Command: npx skills add https://github.com/aphrody-code/n2b --skill gemini-cli-jsx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill migrates an Ink/React codebase from gemini-cli’s 414 .tsx components to Bun’s native JSX runtime, removing redundant transpilation tooling and fixing common runtime integration pitfalls.

Core Features & Use Cases

  • Bulk JSX migration runbook for an Ink/React-heavy monorepo, targeting all gemini-cli CLI .tsx sources.
  • tsconfig alignment for Bun native JSX by configuring compilerOptions.jsx, jsxImportSource, and Bun types so Bun uses its runtime JSX pipeline.
  • Bun setup guidance including optional bunfig.toml tuning and safe removal of esbuild/tsconfig build artifacts that become unnecessary.
  • Ink-specific trap handling for raw-mode stdin compatibility, alt-screen behavior, and React Fast Refresh under bun --hot.
  • ESM resolution correctness by addressing require.resolve to import.meta.resolve where applicable after aggressive codemods.

Quick Start

Run the Skill to apply Bun-native JSX migration steps to tests/targets/gemini-cli/packages/cli/src/**/*.tsx, then start development with hot reload using bun --hot.

Frequently Asked Questions about gemini-cli-jsx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Ink React components to Bun native JSX runtime?▼

Migrate Ink React components to Bun native JSX by configuring `compilerOptions.jsx` and `jsxImportSource` in tsconfig, then removing redundant transpilation tooling. This aligns React 19-style automatic JSX runtime usage with Bun's native pipeline.

Does bun --hot work with Ink terminal UI components?▼

Yes, `bun --hot` works with Ink terminal UI components but requires trap handling for raw-mode stdin compatibility and alt-screen behavior. React Fast Refresh under Bun's hot reload needs specific configuration to function correctly.

What is the best way to handle require.resolve in ESM after a Bun migration?▼

Handle `require.resolve` in ESM by migrating to `import.meta.resolve` where applicable after aggressive codemods. This ensures ESM-safe resolution correctness when moving Ink/React .tsx components to Bun native runtime.

Can I remove esbuild and tsconfig build artifacts when using Bun native JSX?▼

Yes, you can remove esbuild and tsconfig build artifacts when using Bun native JSX. The migration provides optional `bunfig.toml` tuning guidance and safely removes redundant transpilation tooling that becomes unnecessary.

Why does my Ink stdin raw mode break after migrating to Bun?▼

Ink stdin raw mode breaks after migrating to Bun due to TTY behavior differences. The migration addresses raw-mode stdin compatibility and alt-screen behavior constraints specific to Ink terminal UI under Bun's runtime.

Related Skills

Explore More Software Engineering Skills→
HyperxqHyperxq
1

preact

Enforce Preact-specific imports and build settings in monorepo TypeScript projects.

Community
Intermediate
pwarnockpwarnock
2

bun-development

Set up and configure Bun development environments with TypeScript and hot-reloading workflows.

Community
Advanced
DaleSeoDaleSeo
4

bun-dev-server

Set up a Bun development server with HMR and React Fast Refresh.

Community
Intermediate
STier-AiSTier-Ai
5

bun-development

Set up, bundle, test, and migrate JavaScript/TypeScript projects using Bun runtime.

Official
Advanced