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

animated-infographic

Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.

インストール方法を見る

含まれるファイル(6)

  • SKILL.md5.4 KB
  • LICENSE.txt264 B
  • scripts/helper.py4.6 KB
  • scripts/requirements.txt11 B
  • scripts/test_helper.py2.4 KB
  • skill-license.json712 B

SKILL.md(原文)

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

Animated Infographic

When to Use

  • JSON / CSV / benchmark resultsからGIFや動く図を作る。
  • カード移動、ランキング、比較棒、状態遷移をアニメーションで見せる。
  • 数値の正確性と、演出時間・実測時間の区別が重要な記事 / SNS資産を作る。

対象外: 静止PNGだけのインフォグラフィック、既存動画の分析、編集可能な構成図。

Inputs

  • Source artifact: JSON / CSV / text。測定値がある場合はこれをSSOTにする。
  • Audience language and target medium: Japanese blog、X、slideなど。
  • Timing mode:
    • illustrative: 動きは演出。処理速度を表さない。
    • measured: frame timingを実測timestampから作る。
    • mixed: 数値は実測、カードや棒の動きは演出。
  • Output size。既定はblog/X向け1200x675、必要なら静止fallbackも作る。

Workflow

  1. Freeze the evidence

    • source artifact、取得日時、対象件数、測定境界を固定する。
    • latencyは1 request、serial total、fresh-process end to endなど、何を測った値か決める。
    • 外部mediaを加工する場合は元URL、取得日、source相対path、SHA-256をmanifestへ記録し、生成前にhashを照合する。
  2. Design the story

    • 1 GIFは1つの主張に絞る。長文説明は本文へ戻す。
    • 入力 → 判断 → 次処理、before → after、比較 → 結論など、読み順を固定する。
    • 狭いdecision gateが主題なら、accent色、太いoutline、中央配置、calloutのいずれかで視覚階層の主役にする。入力と出力を両側に置き、gateが決める値を箱内へ書く。
    • 公式用語と作者独自の層・分類を同じ見た目で断定しない。独自モデルはasset内でこの記事での整理などscopeを示し、製品包含や成熟度に見える矢印・入れ子を避ける。
  3. Localize before rendering

    • 説明UI、status、captionは読者言語へ合わせる。日本語記事に汎用英語UIを残さない。
    • 製品名、API field、model IDなどの固有名詞は公式表記を保つ。
    • 直訳調を避ける。例: 段階で採点ではなく定義した基準のどの段階に近いか。
  4. Make timing explicit inside the asset

    • illustrative: カード移動は演出(実測速度ではありません)を表示する。
    • measured: 測定境界と単位を表示し、frame durationを実測値から作る。
    • mixed: 表示値は実測 / 棒・カードの動きは演出の両方を書く。
  5. Generate reproducibly

    • generator script、GIF、静止fallback、必要ならsource snapshotを残す。
    • 数値を手入力せずsource artifactから読む。
    • 第三者動画は主張に必要な最小frame(例: before / operation / after)へ絞り、無関係なbrowser chromeを除く。出典と、ダミーデータ・未送信・筆者追加注記などの誤読防止情報をasset内で区別して表示する。
  6. Validate mechanically

    python scripts/helper.py output.gif `
      --expected-width 1200 --expected-height 675 `
      --timing-mode illustrative `
      --contact-sheet output-contact.jpg `
      --report output-validation.json
    
    • --timing-mode measured also requires --measured-ms <total>; --duration-tolerance defaults to 0.1. Pillow is required.
  7. Inspect visually

    • 開始・中間・終了frameを原寸とtarget embed幅(mobileは約360px)で確認する。
    • text overlap、clip、順序、空白、読めない注記、英語UI残存を直して再生成する。

Timing Rules

  • GIFの総再生時間がAPI latencyと一致するとは限らない。自動で同一視しない。
  • 複数requestの合計は、並列か直列かを表示する。
  • 比較対象の測定境界が違う場合は、model speedではなくobserved end-to-end timeとして扱う。
  • 推定費用、正解率、token数もsource artifactと照合し、asset単体で誤読しない注記を入れる。

Done Criteria

  • GIFがanimatedで、期待寸法・最小frame数を満たす。
  • timing modeと測定境界がasset内に見える。
  • source artifactの数値と表示値が一致する。
  • 外部media由来ならsource URL / 取得日 / SHA-256がmanifestと一致する。
  • 説明UIが読者言語に統一されている。
  • 主題のdecision gateが最初に見え、何を受け取り何を返すか読める。
  • 公式定義と作者独自の整理がasset単体でも区別できる。
  • 開始・中間・終了frameとループ再生を確認した。
  • target embed幅で文字が読める。
  • generator、GIF、静止fallback、validation reportの所在を報告した。

レビュー

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

同じリポジトリのスキル

概要と使いどころ

agentic-workflow-guide

無料日本語概要

Design, review, and debug agent workflows, and decide when a request should use a prompt, instruction, skill, agent, or hook before escalating to multi-agent design. Use for .agent.md / .instructions.md / .prompt.md / AGENTS.md work, workflow architecture, orchestration planning, scheduled automation model allocation, or when agent workflows may be overkill. Triggers on 'agent workflow', 'create agent', 'automation models', 'ワークフロー設計', 'orchestrator'.

aktsmm/Agent-Skills262026年10月10日 更新

Design, run, and review fair performance, token, and cost comparisons across GitHub Copilot CLI, Codex CLI, and direct model APIs. Use for AI CLI benchmark, Copilot vs Codex, prompt-cache diagnosis, cache read/write analysis, fresh-process latency measurement, token-cost comparison, or when a benchmark must separate provider caching from local CLI caches.

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

aktsmm/Agent-Skills262026年10月10日 更新

Analyze historical VS Code GitHub Copilot Chat sessions by model, reasoning effort, AIU, time, reliability, workflow behavior, and external quality evidence, or safely prune workspace-scoped local chat history by age. Use for session analysis, repeated-task retrospectives, model evaluation, cost/performance analysis, and old session cleanup.

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

aktsmm/Agent-Skills262026年10月10日 更新

archify

無料日本語概要

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Also use for Archify, interactive or animated HTML diagrams, インタラクティブ図, 動く構成図. When an editable .drawio file is required, use the draw.io workflow instead and treat Archify HTML only as a supplement.

aktsmm/Agent-Skills262026年10月10日 更新

ascii-banner

無料日本語概要

Generate ASCII-art text banners for terminals, READMEs, and CLI startup messages. Use when a user asks for an ASCII banner, text art, バナー, アスキーアート, or a decorative header for a script/README.

aktsmm/Agent-Skills262026年10月10日 更新

azure-advisor-report

無料日本語概要

Generate Azure environment monthly report (Markdown + PowerPoint) from Azure Advisor and Cost Management API. Use when creating Advisor recommendations report, cost trend analysis, or security/reliability assessment for a customer subscription. Triggers on 'Advisor report', 'Azure monthly report', 'subscription report', 'Azure環境レポート', '簡易月次レポート'.

aktsmm/Agent-Skills262026年10月10日 更新

aktsmm のスキルをすべて見る

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