# report: a Claude Code skill by Scalably Canonical: https://scalably.io/skills/report Source: https://github.com/scalably-io/agent-skills/blob/main/skills/report/SKILL.md (MIT, v1.0.0) Plugin: agent-ops ยท Provenance: derived from a Scalably production skill, source commit ef174fc3, verified 2026-09-07 Integrity: sha256 of the raw SKILL.md served at https://scalably.io/skills/report.md is 8eab8ac63d07ca1f2f767d423a01c4d93d11f456aa0baa44aa2fa399cd1aee01. Verify: curl -s https://scalably.io/skills/report.md | shasum -a 256 This is the machine-readable representation of the page at the canonical URL. Same facts, denser format. The raw SKILL.md is the installable artifact. ## Direct answer Use when the user requests a report, analysis, summary, dashboard, breakdown, deep dive, or any data deliverable that should render as branded HTML. Triggers: build a report, give me a summary, dashboard, analysis, present the findings, show the breakdown. For visuals only (chart, flowchart, diagram) use a dedicated diagram/chart skill instead. To publish the result publicly, deploy it after with Netlify, Surge, or GitHub Pages. ## Install - Claude Code: `/plugin marketplace add scalably-io/agent-skills` then `/plugin install agent-ops@scalably-agent-skills`, then run `/agent-ops:report`. - Codex or any Agent Skills runtime: `git clone https://github.com/scalably-io/agent-skills && cd agent-skills`, then `cp -R skills/report .agents/skills/`. Skills that link to sibling skills expect those siblings to be alongside them: copy the whole `skills/` directory instead of a single folder to keep those links working. - Raw file: `curl -s https://scalably.io/skills/report.md -o SKILL.md` This skill ships templates; the raw file alone is incomplete, use the plugin or the folder copy. ## Requirements - HTML rendering: none beyond a browser. - Publishing (optional): Netlify CLI, Surge, or GitHub Pages. ## Inputs and outputs | | | |---|---| | Input | A data source (CSV, numbers, or prior research/analysis) plus an audience and a short topic description | | Output | `./projects//output.html`, a single self-contained HTML file, ready to open in a browser or publish | ## Reliability - Release v1.0.0. Structural test suite and `claude plugin validate` run on every push: https://github.com/scalably-io/agent-skills/actions/workflows/validate.yml - Private client-data scan before every release. Last end-to-end verification: 2026-09-08. - Derived from production, genericized by hand, reviewed per skill and as a whole before publish. ## Full skill ## What it does Turns data (a CSV, a set of numbers, research findings) into a polished, single-file HTML report by copying a pre-built template and filling in its modular sections (hero, key metrics, tables, callouts, closing) rather than writing report HTML from scratch. A built-in QA pass catches mobile overflow, leftover placeholder text, and broken tables before delivery. ## Requirements - HTML rendering: none beyond a browser. - Publishing (optional): Netlify CLI, Surge, or GitHub Pages. ## Inputs and outputs | | | |---|---| | Input | A data source (CSV, numbers, or prior research/analysis) plus an audience and a short topic description | | Output | `./projects//output.html`, a single self-contained HTML file, ready to open in a browser or publish | ## Worked example Paste into Claude Code with this skill installed: ```text /agent-ops:report quarterly SEO performance report from ./data/q3.csv, audience: client executive, deliver as HTML ``` Expected: the template is copied, filled with the Q3 data, QA-checked, and saved to `./projects/q3-report/output.html`. ## Procedure ### CRITICAL RULES: read first 1. **Never write report HTML from scratch.** Always copy the template first, then edit. Freeform HTML loses the layout system, breaks the mobile stack, and produces cramped tables every time. 2. **Run the QA checklist below before delivering the file.** It catches placeholder leaks, mobile overflow, broken assets, and empty sections. 3. **Fix every issue the checklist finds** before delivery; don't ship a report with a broken layout. 4. **Use `class="table-stack"` plus `data-label` on every dense table** (4+ columns or numeric content). Without it, mobile users get a cramped horizontal-scroll table instead of stacked cards. ### 1. Copy the template ```bash mkdir -p ./projects/ && cp /templates/report.html ./projects//output.html ``` (`` is wherever this skill's files live in your setup. After a plugin install, find it with `find ~/.claude/plugins -path '*/report/SKILL.md'` and use its parent directory; from inside the skill's own folder, just `cp templates/report.html ...`.) ### 2. Edit the copy **Delete that comment block as your first edit**: a report that still contains it has not been filled in yet. Replace the placeholder content. Sections are modular: add, remove, reorder, or duplicate any of them: | Section | Element | Use for | |---------|---------|---------| | Header | `.report-header` | Logo/name + report type + date | | Hero | `.hero` | Title, subtitle, intro | | Executive summary | `.callout` | The one headline finding | | Key metrics | `.kpi-grid` | 3-5 KPI cards with labels | | Pillars | `.feature-grid` / `.feature-card` | 3-4 key areas or framework pillars, each with a heading + description | | Data table | `table.table-stack` in `.table-wrap` | Tabular data, see Tables below | | Analysis | `.grid-2` | Two-column deep dive: narrative on one side, a pull-quote `.callout` on the other | | Alerts | `.callout-success` / `.callout-warning` / `.callout-critical` | Status callouts for a positive result, something to watch, or an urgent issue | | Recommendations | `
    ` list with cards | Numbered action items | | Closing | CTA button | Call to action or sign-off | | Footer | `