timeline-creator
Timeline Creator builds interactive HTML visualizations for project planning, rendering Gantt charts with task durations, phase groupings, and milestone markers. It extracts project dates and schedules, calculates progress percentages, and applies semantic color coding to show task status at a glance.
Timeline Creator generates interactive HTML Gantt charts and project timelines with phases, milestones, and progress tracking.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-25
Timeline Creator generates interactive HTML Gantt charts and project timelines with phases, milestones, and progress tracking. Timeline Creator builds interactive HTML visualizations for project planning, rendering Gantt charts with task durations, phase groupings, and milestone markers. It extracts project dates and schedules, calculates progress percentages, and applies semantic color coding to show task status at a glance.
Use it when
- Timeline Creator applies semantic color coding to display task status at a glance.
- Timeline Creator organizes project tasks into quarterly phases (Q1, Q2, Q3, Q4) with deliverable milestones.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Similar skills
Install
mhattingpete/claude-skills-marketplace/timeline-creator · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can timeline-creator generate a gantt chart for my project?
Yes. Timeline Creator builds interactive HTML Gantt charts that visualize your project tasks with duration bars, phase groupings, and milestone markers. It extracts project dates and schedules, then renders them as interactive visualizations you can embed or share.
What does timeline-creator use to show task status?
Timeline Creator applies semantic color coding to display task status at a glance. It calculates progress percentages for each task and uses these colors to indicate completion state, making it easy to spot which tasks are on track, delayed, or complete.
How does timeline-creator organize quarterly phases?
Timeline Creator organizes project tasks into quarterly phases (Q1, Q2, Q3, Q4) with deliverable milestones. It groups related tasks by phase, displays them hierarchically, and marks key milestones so stakeholders can see both the big picture and detailed scheduling.
Can I create a project roadmap with milestones using timeline-creator?
Absolutely. Timeline Creator generates visual project roadmaps with progress indicators and milestone markers. You can define phases, set deliverable dates, and the tool renders an interactive roadmap showing your project's path from start to completion with clear milestone visibility.
Does timeline-creator support responsive timeline layouts?
Yes. Timeline Creator builds responsive timeline layouts that adapt to different screen sizes. Duration bars and date ranges scale properly, and the interactive HTML visualizations work across desktop and mobile devices, making your project schedules accessible anywhere.
What license does timeline-creator use?
Timeline Creator is released under the Apache-2.0 license, allowing you to use, modify, and distribute it freely while maintaining attribution to the original project.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
- Timeline Header: project name, date range, completion %
- Phase Groups: Q1, Q2, Q3, Q4 or custom phases
- Timeline Items: tasks with start/end dates, progress, status
- Milestones: key deliverables with dates
- 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
(truncated - see the full file via the links below)
File tree — 5 files
visual-documentation-plugin/skills/timeline-creator/SKILL.md
visual-documentation-plugin/skills/timeline-creator/assets/templates/base_template.html
visual-documentation-plugin/skills/timeline-creator/assets/templates/timeline_components.html
visual-documentation-plugin/skills/timeline-creator/references/design_patterns.md
visual-documentation-plugin/skills/timeline-creator/references/svg_library.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create interactive Gantt charts and project timelines with phases and milestones”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Dashboard Creator generates self-contained HTML dashboards featuring KPI metric cards with trend indicators, SVG-based bar/pie/line charts, and progress bars. Perfect for building performance monitoring interfaces and analytics displays from your data.
This skill spawns three independent subagents to tackle problems from different angles—prioritizing simplicity, performance, or extensibility for code; top-down, bottom-up, or lateral thinking for design; or expert, pragmatic, or innovative perspectives for creative work. Each solution is scored against correctness, completeness, quality, clarity, and elegance, then the winner is returned with trade-off analysis and guidance on when alternatives might suit better.
Build interactive HTML flowcharts and process diagrams with color-coded nodes, decision points, and connectors. The skill breaks down workflows into visual steps, identifies decision branches, and renders clean layouts with consistent spacing for easy comprehension.
Technical Doc Creator builds polished HTML documentation for APIs and systems, complete with endpoint references, code samples, and architecture diagrams. It structures content with getting started guides, request/response examples, and syntax-highlighted code blocks. Perfect for creating developer-facing documentation that's ready to share.
This skill produces comprehensive HTML architecture diagrams that map business objectives, data flows, processing pipelines, and system components in a single visual document. It structures technical architecture across layers—data, processing, services, and outputs—with SVG visualizations and semantic color coding for clarity.
Code Refactor handles systematic refactoring operations like renaming identifiers, replacing deprecated patterns, and updating method calls across your codebase. It intelligently switches to execution mode for larger jobs (10+ files), delivering significant token savings while maintaining accuracy through a safe find-analyze-execute-verify workflow.
More skills code-transfer (Apache-2.0) · file-operations (Apache-2.0) · codebase-documenter (Apache-2.0) · test-fixing (Apache-2.0)