npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

opencode-skills-tui

v1.0.3

Published

OpenCode TUI plugin that shows skills and loaded state in the sidebar

Readme

🧩 opencode-skills-tui

给 OpenCode 的侧边栏加一份技能列表。看看有哪些技能、当前会话加载了哪些,再点开 SKILL.md,在终端里就能搞定。

技能面板演示

✨ 功能

  • 查看当前项目可用的技能。
  • 已加载技能标绿置顶,各会话独立记录。
  • 点击技能即可预览 SKILL.md,支持滚动阅读。
  • 列表自动更新,面板可折叠并记住你的偏好。

📦 安装

请根据已安装的 OpenCode 版本选择下方指导。OpenCode V1 使用固定的旧版插件,V2 使用当前版本。

让 Agent 帮你装(推荐)

把下面这段话发给 OpenCode 或你常用的编程 Agent:

请按照这份 README 的手动安装部分安装 opencode-skills-tui。先检查我已安装的 OpenCode 版本,再选择对应指导,保留已有配置:
https://raw.githubusercontent.com/aihaipeng/opencode-skills-tui/main/README.zh-CN.md

手动安装

先检查你正在使用的 OpenCode 版本:

opencode --version

| OpenCode 版本 | 插件包 | 配置文件与字段 | | --- | --- | --- | | 1.x(V1) | [email protected] | ~/.config/opencode/tui.json → plugin | | 2.x(V2) | opencode-skills-tui | ~/.config/opencode/cli.json → plugins |

如果无法确定版本,请先确认再修改配置。将对应条目合并到已有文件,保留其他插件和设置;若已配置本插件,更新原条目即可,避免重复添加。

OpenCode V2

在 ~/.config/opencode/cli.json 中添加以下条目:

{
  "$schema": "https://opencode.ai/v2/cli.json",
  "plugins": [
    {
      "package": "opencode-skills-tui"
    }
  ]
}

OpenCode 会自动从 npm 下载插件,并重载受监控的配置变更。

OpenCode V1

在 ~/.config/opencode/tui.json 中添加固定版本:

{
  "$schema": "https://opencode.ai/tui.json",
  "plugin": [
    "[email protected]"
  ]
}

重启 OpenCode 后会自动下载并加载插件。使用 V1 时,即使出现更新提示也请保留 @0.4.4,不带版本号会安装面向 V2 的版本。

下方使用说明面向 V2。V1 需要右键点击技能来预览,其他功能请参考 V1 使用说明。

🖱️ 怎么用

| 操作 | 效果 | | --- | --- | | 点击技能 | 预览它的 SKILL.md | | 在预览中滚动 | 继续阅读 | | 按 esc 或点击预览窗口外 | 关闭预览 | | 点击 Skills | 折叠 / 展开面板 |

🟢 已加载状态

绿色表示 OpenCode 已在当前会话中加载该技能。点开预览不会加载技能。每个会话独立记录,重启后再次打开会话,也会恢复已有标记。

🔧 小提示

  • 没有 Skills 面板? 检查 OpenCode 版本及上方对应配置,再重启确认。运行 opencode --print-logs 可查看插件加载日志。
  • 列表是空的? 确认 OpenCode 能发现当前项目或全局配置中的技能。
  • 已加载的技能没变绿? 切换到对应会话,稍等片刻,让加载状态恢复。
  • 改动没生效? V2 会重载受监控的插件和配置文件;未受监控的本地依赖可能仍需重启。

🛠️ 开发

想改插件代码?克隆仓库,再装好开发工具需要的 Bun:

git clone https://github.com/aihaipeng/opencode-skills-tui.git
cd opencode-skills-tui
bun install
bun run typecheck
bun run test
bun run test:package

作为本地插件加载仓库前,请先运行 bun run build。npm 发布包包含预编译的 Solid 代码,确保点击后面板能更新。bun run test:package 会从 node_modules 路径测试实际 npm 压缩包。

插件安装 · V2 插件 API · MIT 许可证