Skip to content

Instantly share code, notes, and snippets.

@dubrod

dubrod/visualize.md

Created April 13, 2026 17:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dubrod/a89e5f9020ee141e99cbfa6a3163d22b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dubrod/a89e5f9020ee141e99cbfa6a3163d22b to your computer and use it in GitHub Desktop.
Download ZIP
Visualize Agent for Claude Analytics Dashboard from Daniel Rosehill
Raw
visualize.md

Generate Visual Report

Create a modern clean UI. Format all markdown using Tailwind CSS, Chart JS and Alpine JS that has neutral colors and table sort options.

Instructions

  1. Gather Report Inputs:

    • Read context/project-config.json for website and analysis context
    • Find the most recent analysis in output/reports/
    • Check for available visualizations in output/visualizations/
    • Review any notes in context/notes.md

  2. Generate HTML Website:

    • Parse all Markdown elements to HTML first
    • The 'Primary recommendation' should be a block quote with alert styling
    • 'Site-Level Summary' should be rounded grid items with large numbers, small captions, max of 4 grid columns. Check the project config for matching goals, if the item has a goal, indicate via a green or red label (green for goal met, red for goal not met) in the top right corner of the grid item the goal value.

  3. Format and Save:

    • Save as HTML to output/visualizations/visual-report-<date>.html

Archive Previous Reports

Before generating a new report with the same scope:

  • Move existing report to archive/old-reports/
  • Preserve date in filename for reference

Output

  • Any new visualizations in output/visualizations/
  • Confirmation of report location
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment