Back to skills
SKILL.md
202 Fn 911 B1fa84c4
ASecurityCreate Header component with two-row layout.
- 9 stars
- 0 votes
- 0 copies
- 1 view
- Added October 11, 2026
Security analysis
100/100npx -y skills add tools-only/X-Skills --skill 202-fn-911_b1fa84c4 --agent claude-codeAre you the author of 202 Fn 911 B1fa84c4?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tools-only-202-fn-911-b1fa84c4)# fn-9.11 Header component
## Description
Create Header component with two-row layout.
### File
`src/components/header.ts`
### Layout
Row 1:
- Status icon (▸ running, ⏸ idle, ✓ done)
- "flow-next" branding (left)
- Current task ID + title in 「brackets」(right, truncated)
- Timer MM:SS (far right)
Row 2:
- Iteration number + progress (e.g., "Iter #3 · 3/7 tasks")
- Epic ID and title (truncated)
### Interface
```typescript
interface HeaderProps {
state: 'running' | 'idle' | 'complete';
task?: Task;
epic?: Epic;
iteration: number;
taskProgress: {done: number, total: number};
elapsed: number; // seconds
theme: Theme;
}
class Header implements Component {
render(width: number): string[]
}
```
### Timer
Update via external interval, format as MM:SS.
## Acceptance
- [ ] Two rows render correctly
- [ ] Status icon matches state
- [ ] Task title truncated when needed
- [ ] Timer shows MM:SS format
- [ ] Progress shows X/Y tasks format
- [ ] Epic title truncated when needed
## Done summary
- Added Header component with two-row layout per spec
- Row 1: status icon + branding, task in brackets, timer MM:SS
- Row 2: iteration + progress, epic ID + title
- Supports ASCII icons via useAscii prop
- All tests (21) pass
## Evidence
- Commits: 4c9b9d7aa2091e5609652c2f0e7e7a364c222b28
- Tests: bun test src/components/header.test.ts
- PRs:Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.