本文へ移動
cccskills
無料GitHub で公開

timeline-creator

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.

インストール方法を見る

含まれるファイル(5)

  • SKILL.md1.9 KB
  • assets/templates/base_template.html7.8 KB
  • assets/templates/timeline_components.html18.9 KB
  • references/design_patterns.md10.8 KB
  • references/svg_library.md17.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

<!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

<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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

Performs comprehensive codebase analysis covering architecture, code quality, security, performance, testing, and maintainability. Use when user wants to audit code quality, identify technical debt, find security issues, assess test coverage, or get a codebase health check.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

Perform bulk code refactoring operations like renaming variables/functions across files, replacing patterns, and updating API calls. Use when users request renaming identifiers, replacing deprecated code patterns, updating method calls, or making consistent changes across multiple locations.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving functions or classes between files, extracting code blocks, or inserting code at specific line numbers.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

Generates comprehensive documentation explaining how a codebase works, including architecture, key components, data flow, and development guidelines. Use when user wants to understand unfamiliar code, create onboarding docs, document architecture, or explain how the system works.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

mhattingpete のスキルをすべて見る

このスキルの問題を報告する