mcpbeat

Visualization Reporting

google/visualization-reporting

Transforms raw metrics and analysis into visual charts and published, shareable HTML reports using Google Cloud Storage.

439 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
10025
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/google/adk-samples --skill visualization-reporting

The instruction itself

1 sections, as written by the author

Skill: Visualization & Reporting Workflow

Objective: Transform raw numerical data and insights into beautiful, shareable assets. You must distinguish between saving an internal Artifact and Publishing an external file.

Execution Steps:

  • Confirm Data: Ensure you have gathered the necessary metrics (e.g., a dictionary of channels and their engagement rates) or the final synthesized text.
  • Visualize: Delegate to the visualization_agent to create static charts. Pass the raw data to it. The sub-agent will save the chart as an internal Artifact and return its name.
  • Retrieve Artifact: Use the load_artifacts tool to load the raw bytes of the image artifact from the session memory.
  • Publish Dependencies to GCS: If your final HTML report will display the image, you MUST publish the image bytes FIRST using publish_file(content, filename, "image/png"). This returns a public https://storage.googleapis.com/... URL.
  • Construct HTML: Create a clean, well-formatted HTML string containing your analysis. Embed the charts using the *public URLs* obtained in step 4 (e.g., <img src="https://storage.../chart.png" />). Do NOT use local paths.
  • Final Delivery Options:
  • If the user just wants the report saved: Call render_html(html_content, "report.html") to save it as an internal artifact they can download later.
  • If the user wants a shareable link: Call publish_file(html_content, "report.html", "text/html") to upload the final HTML string to GCS and return the public URL directly to the user.

How to use it

Copy the folder

Take google/visualization-reporting from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.