Skip to content
Back to skills

202 Fn 911 B1fa84c4

ASecurity

Create Header component with two-row layout.

  • 9 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added October 11, 2026
developmenttypescript

Security analysis

A100/100

Scanned October 11, 2026

npx -y skills add tools-only/X-Skills --skill 202-fn-911_b1fa84c4 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 202 Fn 911 B1fa84c4?

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

Security grade badge for 202 Fn 911 B1fa84c4
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-202-fn-911-b1fa84c4/badge)](https://www.skillsdirectory.com/skills/tools-only-202-fn-911-b1fa84c4)

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

SKILL.md
# 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

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.