Skip to content
Back to skills

189 Fn 98 C12090b3

ASecurity

Create TaskList component implementing navigable task list with status icons. Uses pi-tui Component interface with custom rendering (not wrapping SelectList due to different rendering requirements: status icons, blocked indicators, etc.)

  • 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 189-fn-98_c12090b3 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 189 Fn 98 C12090b3?

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

Security grade badge for 189 Fn 98 C12090b3
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-189-fn-98-c12090b3/badge)](https://www.skillsdirectory.com/skills/tools-only-189-fn-98-c12090b3)

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.8 TaskList component

## Description

Create TaskList component implementing navigable task list with status icons.
Uses pi-tui Component interface with custom rendering (not wrapping SelectList
due to different rendering requirements: status icons, blocked indicators, etc.)

### File

`src/components/task-list.ts`

### Features

- Status icons: ● done, ◉ in_progress, ○ todo, ⊘ blocked
- Full task ID (fn-N.M) + truncated title
- Blocked tasks (status: blocked) show dependency indicator: `→ 1.3`
- Selected row background highlight (manual bg+fg per segment to preserve status colors)
- j/k and arrow navigation with wrap-around
- Scroll indicator when tasks exceed maxVisible

### Interface

```typescript
interface TaskListProps {
  tasks: EpicTask[];
  selectedIndex: number;
  onSelect: (task: EpicTask) => void;
  theme: Theme;
  // Optional extensions
  onSelectionChange?: (task: EpicTask, index: number) => void;
  maxVisible?: number;  // default: 10
  useAscii?: boolean;   // default: false
}

class TaskList implements Component {
  render(width: number): string[]
  handleInput(data: string): void
  invalidate(): void
  // Helpers
  setTasks(tasks: EpicTask[]): void
  getSelectedTask(): EpicTask | undefined
  getSelectedIndex(): number
  setSelectedIndex(index: number): void
}
```

### Rendering

For each task:
```
◉ fn-1.3 Add validation...
⊘ fn-1.4 Fix bug → 1.3
```

Use theme colors for status icons.
## Acceptance
- [ ] Status icons render with correct colors
- [ ] j/k changes selection
- [ ] Selected row has background highlight
- [ ] Blocked tasks show dependency indicator
- [ ] Long titles truncated with ellipsis
- [ ] onSelect callback fires on Enter
## Done summary
- Added TaskList component with status icons (●/◉/○/⊘)
- Implemented j/k and arrow navigation with wrap-around
- Added selected row background highlight

- Matches pi-tui Component interface for integration
- ASCII mode (--no-emoji) support included

- 44 tests passing
- Lint clean
## Evidence
- Commits: 83ac1bc75db3c7e8d5979793f1d4be7e1652dde7
- Tests: bun test src/components/task-list.test.ts
- PRs:

Files in this skill

  • README.md997 B
  • skill.md2.1 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.