mcpField
O
opentui-design

opentui-design

github.com/akiojin开发761 次安装34 周前更新
代码仓库

关于 opentui-design

面向使用 OpenTUI 和 SolidJS 构建及排查 CLI 界面的参考技能，涵盖组件、输入与鼠标行为、导航、状态、测试和性能。

主要功能

  1. 01OpenTUI 组件模式
  2. 02键盘输入处理
  3. 03鼠标事件指南
  4. 04多屏幕导航
  5. 05SolidJS 状态与 Hooks
  6. 06布局、测试与性能优化

适用场景

  1. 01构建 CLI 屏幕和组件
  2. 02排查输入行为问题
  3. 03添加屏幕导航
  4. 04提升 CLI 响应性能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/akiojin/skills --skill opentui-design

安装后在 Claude Code 中输入/opentui-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
component-patterns.md
hooks-guide.md
input-handling.md
mouse-handling.md
multi-screen-navigation.md
opentui-gotchas.md
performance-optimization.md
responsive-layout.md
state-management.md
testing-patterns.md

详细介绍

OpenTUI 设计技能

描述

用于使用 OpenTUI 和 SolidJS 设计和实现 CLI 应用程序的综合工具包。

适用场景

  • 使用 OpenTUI 构建新的 CLI 屏幕或组件
  • 调试输入处理问题
  • 实现屏幕导航
  • 处理鼠标事件及其限制
  • 优化 CLI 性能

关键参考资料

  • input-handling.md - 按键输入模式和阻止事件传播
  • mouse-handling.md - 鼠标事件和 Selection API 的限制
  • opentui-gotchas.md - 常见问题和解决方法
  • component-patterns.md - 组件结构和组合
  • multi-screen-navigation.md - 屏幕切换模式
  • state-management.md - SolidJS 状态模式
  • hooks-guide.md - OpenTUI hooks 参考
  • performance-optimization.md - 性能最佳实践
  • responsive-layout.md - 终端布局模式
  • testing-patterns.md - CLI 组件测试

关键知识

阻止按键事件传播

使用 Enter 键在屏幕之间导航时，同一次按键可能会传播到新屏幕。请务必：

  1. 在事件源处使用 key.preventDefault()
  2. 在目标屏幕添加初始帧延迟
  3. 使用 focused 属性控制交互元素
SolidJS 响应性

切勿解构 props；始终通过 props.xxx 访问，以保持响应性。

鼠标限制

OpenTUI 的 Selection API（useSelectionHandler）无法可靠运行。将 useMouse: false 设置为允许操作系统级复制，但这会禁用滚轮滚动。

评论

支持 Markdown