# timeline-creator

Собирает интерактивный HTML-таймлайн проекта с диаграммой Ганта, фазами и вехами. Пригодится, когда нужно показать план на кварталы в одном файле.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 327 установок · ★ 689
- Автор: mhattingpete
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/mhattingpete/claude-skills-marketplace/tree/HEAD/visual-documentation-plugin/skills/timeline-creator/SKILL.md
- Обновлён: 2026-07-25
- HTML: https://affpapa.org/nevibecode/skills/timeline-creator

## Что делает

Скилл превращает список задач и дат в готовую HTML-страницу: шапка с названием проекта, диапазоном дат и процентом готовности, группы фаз (кварталы или свои), задачи с началом и концом, прогрессом и статусом, отдельный блок вех и полосы Ганта, длина которых считается в процентах от срока.

Внутри лежит описание структуры и готовые шаблоны разметки. Есть паттерн полосы таймлайна с шириной в процентах и цветом по статусу, палитра для трёх состояний: выполнено, в работе, запланировано. Скилл советует держать вёрстку адаптивной и писать результат в файл вида `[project]-timeline.html`.

Порядок работы такой: вытащить задачи, даты и фазы из проекта, посчитать проценты длительности, сгруппировать по фазам, собрать HTML с полосами, добавить секцию вех. Данные скилл берёт из того, что вы ему дали, поэтому расплывчатое «сделай роадмап» без дат даст такую же расплывчатую картинку.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/timeline-creator/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/timeline-creator/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/timeline-creator/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/timeline-creator/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mhattingpete/claude-skills-marketplace timeline-creator
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/timeline-creator/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/timeline-creator
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/timeline-creator/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/mhattingpete/claude-skills-marketplace/tree/HEAD/visual-documentation-plugin/skills/timeline-creator/SKILL.md

## Когда брать
- собрать роадмап проекта на четыре квартала в один HTML-файл
- показать сроки задач полосами Ганта с процентом выполнения
- вынести ключевые поставки в отдельный блок вех
- сгруппировать задачи по фазам и подкрасить их по статусу
- отдать заказчику наглядный план вместо таблицы в переписке

## Примеры запросов агенту
- Сделай таймлайн для проекта миграции на новый API, фазы по кварталам
- Собери Gantt-диаграмму по этим задачам и датам, статусы подкрась
- Покажи вехи проекта и процент готовности в HTML-файле

## Похожие
- [gantt-chart-visualization](https://affpapa.org/nevibecode/skills/gantt-chart-visualization.md) — скилл · 9 установок
- [gsap-timeline](https://affpapa.org/nevibecode/skills/gsap-timeline.md) — скилл · 69100 установок
- [timeline-report](https://affpapa.org/nevibecode/skills/timeline-report.md) — скилл · 6800 установок
- [scroll-progress-timeline](https://affpapa.org/nevibecode/skills/scroll-progress-timeline.md) — скилл · 1400 установок
- [syncfusion-react-timeline](https://affpapa.org/nevibecode/skills/syncfusion-react-timeline.md) — скилл · 650 установок
- [event-planning-timeline](https://affpapa.org/nevibecode/skills/event-planning-timeline.md) — скилл · 4900 установок

Из того же набора: [mhattingpete/claude-skills-marketplace](https://affpapa.org/nevibecode/by/mhattingpete/claude-skills-marketplace.md) — 7 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md