186 Fn 913 03610e66

Name: 186 Fn 913 03610e66
Author: tools-only

ASecurity

Create HelpOverlay component showing keybindings.

9 stars
0 votes
0 copies
1 view
Added May 31, 2026

developmenttypescript

Security analysis

A100/100

Pro scans all 2 files and shows the line behind each finding

Scanned May 31, 2026

npx -y skills add tools-only/X-Skills --skill 186-fn-913_03610e66 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 186 Fn 913 03610e66?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for 186 Fn 913 03610e66

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-186-fn-913-03610e66/badge)](https://www.skillsdirectory.com/skills/tools-only-186-fn-913-03610e66)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# fn-9.13 HelpOverlay component

## Description

Create HelpOverlay component showing keybindings.

### File

`src/components/help-overlay.ts`

### Features

- Modal overlay on ? key
- Lists all keyboard shortcuts
- Dismiss with Esc or ?

### Interface

```typescript
class HelpOverlay implements Component {
  render(width: number): string[]
  handleInput(data: string): void
}
```

### Content

```
┌─ Help ─────────────────────────────┐
│                                     │
│  j/k      Navigate task list        │
│  ?        Show/hide this help       │
│  q        Quit (detach if running)  │
│  Esc      Close overlay             │
│  Ctrl+C   Same as q                 │
│                                     │
│         Press ? or Esc to close     │
└─────────────────────────────────────┘
```

Use pi-tui overlay system if available, or render centered box.
## Acceptance
- [ ] Overlay renders centered
- [ ] All keybindings listed
- [ ] Esc dismisses overlay
- [ ] ? toggles overlay
- [ ] Theme colors applied
## Done summary
- Added HelpOverlay component with keybinding list
- Centered modal box, toggles on ? key
- Esc or ? dismisses overlay
- 26 tests covering visibility, input, centering
## Evidence
- Commits: 8ddf481
- Tests: bun test src/components/help-overlay.test.ts
- PRs: