fix: skill builder ctrl+i keybind, ESC navigation, docs screenshots (#386)

* fix: [AI-385] skill builder `ctrl+i` global keybind, ESC navigation, and docs screenshots

- Add `skill_list` keybind (default `ctrl+i`) to open skill browser globally
- Fix ESC in Create/Install sub-dialogs to return to skill list instead of main
- Remove dead `onCancel` callbacks from `DialogSkillCreate` and `DialogSkillInstall`
- Add TUI screenshots to skills documentation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address code review feedback — docs wording, dialog.clear() timing, comments

- Narrow ctrl+i docs scope: "when no other dialog is open" (CodeRabbit)
- Merge duplicate ctrl+i rows in keybind table (consensus review)
- Move dialog.clear() after validation in Create/Install onConfirm (Gemini)
- Add explanatory comments for setTimeout tick deferral pattern

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: correct TypeScript errors in `training-import.test.ts` mock types

- Fix `TrainingStore.count` mock: replace invalid `naming` key with `rule`, add missing `context`
- Fix `fs.readFile` mock: return `Buffer.from()` instead of raw string

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: anandgupta42

docs/docs/assets/images/skills/tui-skill-browser.png

@@ -120,16 +120,28 @@ altimate-code skill remove my-tool          # remove skill + paired tool
 
 ### TUI
 
-Type `/skills` in the TUI prompt to open the skill browser. From there:
+Open the skill browser with `ctrl+i` when no other dialog is open, or type `/skills` in the prompt:
+
+![Skill Browser](../assets/images/skills/tui-skill-browser.png)
+
+**Keyboard shortcuts:**
 
 | Key | Action |
 |-----|--------|
+| `ctrl+i` | Open skill browser (when no dialog is open) / Install skill (when inside browser) |
 | Enter | Use — inserts `/<skill-name>` into the prompt |
 | `ctrl+a` | Actions — show, edit, test, or remove the selected skill |
 | `ctrl+n` | New — scaffold a new skill + CLI tool |
-| `ctrl+i` | Install — install skills from a GitHub repo or URL |
 | Esc | Back — returns to previous screen |
 
+**Create skill** (`ctrl+n`):
+
+![Create Skill Dialog](../assets/images/skills/tui-skill-create.png)
+
+**Install skill** (`ctrl+i` inside browser):
+
+![Install Skill Dialog](../assets/images/skills/tui-skill-install.png)
+
 ## Adding Custom Skills
 
 The fastest way to create a custom skill is with the scaffolder:

docs/docs/assets/images/skills/tui-skill-create.png

@@ -258,11 +258,14 @@ function DialogSkillCreate() {
       placeholder="my-tool"
       onConfirm={async (rawName) => {
         const name = rawName.trim()
-        dialog.clear()
         if (!name) {
+          dialog.clear()
           toast.show({ message: "No name provided.", variant: "error", duration: 4000 })
           return
         }
+        // Close dialog after validation but before async work to avoid premature
+        // onClose callback triggering reopenSkillList during the operation
+        dialog.clear()
         toast.show({ message: `Creating "${name}"...`, variant: "info", duration: 30000 })
         try {
           const result = await createSkillDirect(name, gitRoot(sdk.directory ?? process.cwd()))
@@ -289,7 +292,6 @@ function DialogSkillCreate() {
           toast.show({ message: `Create error: ${msg.slice(0, 200)}`, variant: "error", duration: 8000 })
         }
       }}
-      onCancel={() => dialog.clear()}
     />
   )
 }
@@ -306,11 +308,13 @@ function DialogSkillInstall() {
       onConfirm={async (rawSource) => {
         // Strip trailing dots, whitespace, and .git suffix that users might paste
         const source = rawSource.trim().replace(/\.+$/, "").replace(/\.git$/, "")
-        dialog.clear()
         if (!source) {
+          dialog.clear()
           toast.show({ message: "No source provided.", variant: "error", duration: 4000 })
           return
         }
+        // Close dialog after validation to avoid premature onClose callback
+        dialog.clear()
         const progress = (status: string) => {
           toast.show({ message: `Installing from ${source}\n\n${status}`, variant: "info", duration: 600000 })
         }
@@ -341,7 +345,6 @@ function DialogSkillInstall() {
           toast.show({ message: `Install error: ${msg.slice(0, 200)}`, variant: "error", duration: 8000 })
         }
       }}
-      onCancel={() => dialog.clear()}
     />
   )
 }
@@ -525,14 +528,22 @@ export function DialogSkill(props: DialogSkillProps) {
       keybind: Keybind.parse("ctrl+n")[0],
       title: "new",
       onTrigger: async () => {
-        dialog.replace(() => <DialogSkillCreate />)
+        dialog.replace(
+          () => <DialogSkillCreate />,
+          // defer to next tick so dialog stack is fully cleared before reopening
+          () => setTimeout(() => reopenSkillList(), 0),
+        )
       },
     },
     {
       keybind: Keybind.parse("ctrl+i")[0],
       title: "install",
       onTrigger: async () => {
-        dialog.replace(() => <DialogSkillInstall />)
+        dialog.replace(
+          () => <DialogSkillInstall />,
+          // defer to next tick so dialog stack is fully cleared before reopening
+          () => setTimeout(() => reopenSkillList(), 0),
+        )
       },
     },
   ])

docs/docs/assets/images/skills/tui-skill-install.png

@@ -390,6 +390,9 @@ export function Prompt(props: PromptProps) {
         title: "Skills",
         value: "prompt.skills",
         category: "Prompt",
+        // altimate_change start — global keybind to open skills dialog
+        keybind: "skill_list",
+        // altimate_change end
         slash: {
           name: "skills",
         },

docs/docs/configure/skills.md

@@ -881,6 +881,9 @@ export namespace Config {
       model_cycle_favorite_reverse: z.string().optional().default("none").describe("Previous favorite model"),
       command_list: z.string().optional().default("ctrl+p").describe("List available commands"),
       agent_list: z.string().optional().default("<leader>a").describe("List agents"),
+      // altimate_change start — global keybind to open skills dialog
+      skill_list: z.string().optional().default("ctrl+i").describe("Open skill browser"),
+      // altimate_change end
       agent_cycle: z.string().optional().default("tab").describe("Next agent"),
       agent_cycle_reverse: z.string().optional().default("shift+tab").describe("Previous agent"),
       variant_cycle: z.string().optional().default("ctrl+t").describe("Cycle model variants"),

packages/opencode/src/cli/cmd/tui/component/dialog-skill.tsx

@@ -48,16 +48,14 @@ function setupMocks(opts: {
   saveSpy?.mockRestore()
   budgetSpy?.mockRestore()
 
-  readFileSpy = spyOn(fs, "readFile").mockImplementation(async () => opts.fileContent as any)
+  readFileSpy = spyOn(fs, "readFile").mockImplementation(async () => Buffer.from(opts.fileContent) as any)
   countSpy = spyOn(TrainingStore, "count").mockImplementation(async () => ({
     standard: opts.currentCount ?? 0,
     glossary: opts.currentCount ?? 0,
     playbook: opts.currentCount ?? 0,
-    context: opts.currentCount ?? 0,
     rule: opts.currentCount ?? 0,
     pattern: opts.currentCount ?? 0,
     context: opts.currentCount ?? 0,
-    rule: opts.currentCount ?? 0,
   }))
   saveSpy = spyOn(TrainingStore, "save").mockImplementation(async () => {
     if (opts.saveShouldFail) throw new Error("store write failed")