Back to skills
SKILL.md
189 Fn 98 C12090b3
ASecurityCreate 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
Security analysis
100/100Pro scans all 2 files and shows the line behind each finding
npx -y skills add tools-only/X-Skills --skill 189-fn-98_c12090b3 --agent claude-codeAre you the author of 189 Fn 98 C12090b3?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tools-only-189-fn-98-c12090b3)# 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.md
- skill.md
Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.