timeline-creator — скилл для Claude Code: HTML-таймлайны и роадмапы
Собирает интерактивный HTML-таймлайн проекта с диаграммой Ганта, фазами и вехами. Пригодится, когда нужно показать план на кварталы в одном файле.
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-codeЧто делает timeline-creator
Скилл превращает список задач и дат в готовую HTML-страницу: шапка с названием проекта, диапазоном дат и процентом готовности, группы фаз (кварталы или свои), задачи с началом и концом, прогрессом и статусом, отдельный блок вех и полосы Ганта, длина которых считается в процентах от срока.
Внутри лежит описание структуры и готовые шаблоны разметки. Есть паттерн полосы таймлайна с шириной в процентах и цветом по статусу, палитра для трёх состояний: выполнено, в работе, запланировано. Скилл советует держать вёрстку адаптивной и писать результат в файл вида [project]-timeline.html.
Порядок работы такой: вытащить задачи, даты и фазы из проекта, посчитать проценты длительности, сгруппировать по фазам, собрать HTML с полосами, добавить секцию вех. Данные скилл берёт из того, что вы ему дали, поэтому расплывчатое «сделай роадмап» без дат даст такую же расплывчатую картинку.
Какие задачи решает
- собрать роадмап проекта на четыре квартала в один HTML-файл
- показать сроки задач полосами Ганта с процентом выполнения
- вынести ключевые поставки в отдельный блок вех
- сгруппировать задачи по фазам и подкрасить их по статусу
- отдать заказчику наглядный план вместо таблицы в переписке
Примеры запросов агенту
- Сделай таймлайн для проекта миграции на новый API, фазы по кварталам
- Собери Gantt-диаграмму по этим задачам и датам, статусы подкрась
- Покажи вехи проекта и процент готовности в HTML-файле
Как установить timeline-creator
1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-code2Вручную: положить файлы
~/.claude/skills/timeline-creator/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/timeline-creator/
1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a codex2Вручную: положить файлы
.agents/skills/timeline-creator/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a cursor2Вручную: положить файлы
.cursor/skills/timeline-creator/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mhattingpete/claude-skills-marketplace timeline-creator2Вручную: положить файлы
.github/skills/timeline-creator/SKILL.md1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a gemini-cli2Командой платформы
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/timeline-creatorВручную: положить файлы
.devin/skills/timeline-creator/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о timeline-creator
Как установить timeline-creator в Claude?
Выполните npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-code. После этого файл скилла окажется по пути ~/.claude/skills/timeline-creator/SKILL.md.
Что делает timeline-creator?
Создаёт HTML-таймлайны и роадмапы проектов: диаграмму Ганта, группы фаз, вехи и индикаторы прогресса.
На каких платформах работает этот скилл?
Кроме Claude есть варианты установки для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.
Исходный текст
SKILL.md · Apache-2.0
---
name: timeline-creator
description: Create HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. Use when users request timelines, roadmaps, Gantt charts, project schedules, or milestone visualizations.
---
# Timeline Creator
Create interactive HTML timelines and project roadmaps with Gantt charts and milestones.
## When to Use
- "Create timeline for [project]"
- "Generate roadmap for Q1-Q4"
- "Make Gantt chart for schedule"
- "Show project milestones"
## Components
1. **Timeline Header**: project name, date range, completion %
2. **Phase Groups**: Q1, Q2, Q3, Q4 or custom phases
3. **Timeline Items**: tasks with start/end dates, progress, status
4. **Milestones**: key deliverables with dates
5. **Gantt Visualization**: horizontal bars showing duration
## HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<title>[Project] Timeline</title>
<style>
body { font-family: system-ui; max-width: 1400px; margin: 0 auto; }
.timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; }
.milestone { border-left: 3px solid #e53e3e; padding-left: 10px; }
/* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */
</style>
</head>
<body>
<h1>[Project] Timeline</h1>
<!-- Phase sections with timeline bars -->
<!-- Milestones list -->
</body>
</html>
```
## Timeline Bar Pattern
```html
<div class="timeline-item">
<span>Task Name</span>
<div class="timeline-bar" style="width: [percentage]%; background: [status-color];"></div>
<span>[start] - [end]</span>
</div>
```
## Workflow
1. Extract tasks, dates, phases from project
2. Calculate duration percentages
3. Group by phases (quarters or custom)
4. Create HTML with Gantt-style bars
5. Add milestones section
6. Write to `[project]-timeline.html`
Use semantic colors for status, keep layout responsive.
© mhattingpete · Apache-2.0 · mhattingpete/claude-skills-marketplace
