Export HTML Report
Generate a self-contained, presentation-ready HTML file that summarises the analysis or findings from the current conversation. The output must be visually clean, well-structured, and suitable for sharing with customers or stakeholders without further editing.
When to Use
Invoke this skill when:
- The engineer asks to "generate a report", "export to HTML", "create a summary", "make this presentable", or similar
Required Inputs (read from conversation context)
All inputs are derived from the current conversation — do not ask the user for content that is already present:
| Input |
Source |
| Product and update level |
Intake |
| Analysis type |
Incident / Query / Security Scan / General |
| Key findings |
The analysis already produced in this session |
| Recommendations / next steps |
The analysis already produced in this session |
| Root cause and workaround (if incident) |
Incident analysis output |
Output File
- Filename:
report.html (or a more descriptive name if the issue type warrants it, e.g. security-report.html, incident-report.html)
- Format: Single self-contained HTML file — all CSS inlined in a
<style> block, no external dependencies, no JavaScript required for reading
HTML Design Guidelines
Overall Aesthetic
- Clean, professional, corporate look — suitable for a customer-facing document
- Colour palette: dark navy header (
#0d1b2a / #1b3a5c), white content cards, light grey background (#f4f6f9), blue accent (#2e86de)
Required Structural Elements
Header bar — dark navy background, contains:
- Report title (e.g. "Impact Assessment Report", "Incident Analysis Report", "Query Analysis Report")
- Metadata chips: Issue ID, Product, Update Level, Date, Issue Type
Overall Verdict / Summary banner — coloured left-border card (green for low/resolved, amber for medium/in-progress, red for high/critical):
- Icon + bold verdict heading + one-sentence explanation
- Border colour:
- Green (
#27ae60): Low risk / Resolved / No action required
- Amber (
#f39c12): Medium risk / Action recommended
- Red (
#e74c3c): High / Critical / Immediate action required
Section headings
Content cards
Tables
Code blocks — <code> inline snippets with monospace font and light grey background; for multi-line config use <pre><code> with slightly darker background and padding
Step-by-Step Generation Process
- Read the conversation — identify the analysis type, issue metadata, and all key findings already produced
- Determine the output path
- Draft the section list — map findings to the appropriate sections for this analysis type
- Write the HTML file using the Write tool — single file, all CSS in
<style>, no external links
- Confirm to the engineer — state the full file path
1---2name: export-html-report3description: Generate a self-contained, presentation-ready HTML report from any completed analysis or conversation output. Use after finishing an investigation, security scan, query analysis, or incident analysis when the engineer wants to share findings with a customer or stakeholder as a polished document.4---56# Export HTML Report78Generate a self-contained, presentation-ready HTML file that summarises the analysis or findings from the current conversation. The output must be visually clean, well-structured, and suitable for sharing with customers or stakeholders without further editing.910## When to Use1112Invoke this skill when:13- The engineer asks to "generate a report", "export to HTML", "create a summary", "make this presentable", or similar1415## Required Inputs (read from conversation context)1617All inputs are derived from the current conversation — do **not** ask the user for content that is already present:1819| Input | Source |20|---|---|21| Product and update level | Intake |22| Analysis type | Incident / Query / Security Scan / General |23| Key findings | The analysis already produced in this session |24| Recommendations / next steps | The analysis already produced in this session |25| Root cause and workaround (if incident) | Incident analysis output |2627## Output File2829- **Filename:** `report.html` (or a more descriptive name if the issue type warrants it, e.g. `security-report.html`, `incident-report.html`)30- **Format:** Single self-contained HTML file — all CSS inlined in a `<style>` block, no external dependencies, no JavaScript required for reading3132## HTML Design Guidelines3334### Overall Aesthetic35- Clean, professional, corporate look — suitable for a customer-facing document36- Colour palette: dark navy header (`#0d1b2a` / `#1b3a5c`), white content cards, light grey background (`#f4f6f9`), blue accent (`#2e86de`)3738### Required Structural Elements39401. **Header bar** — dark navy background, contains:41 - Report title (e.g. "Impact Assessment Report", "Incident Analysis Report", "Query Analysis Report")42 - Metadata chips: Issue ID, Product, Update Level, Date, Issue Type43442. **Overall Verdict / Summary banner** — coloured left-border card (green for low/resolved, amber for medium/in-progress, red for high/critical):45 - Icon + bold verdict heading + one-sentence explanation46 - Border colour:47 - Green (`#27ae60`): Low risk / Resolved / No action required48 - Amber (`#f39c12`): Medium risk / Action recommended49 - Red (`#e74c3c`): High / Critical / Immediate action required50513. **Section headings**52534. **Content cards**54555. **Tables**56576. **Code blocks** — `<code>` inline snippets with monospace font and light grey background; for multi-line config use `<pre><code>` with slightly darker background and padding5859## Step-by-Step Generation Process60611. **Read the conversation** — identify the analysis type, issue metadata, and all key findings already produced622. **Determine the output path**633. **Draft the section list** — map findings to the appropriate sections for this analysis type644. **Write the HTML file** using the Write tool — single file, all CSS in `<style>`, no external links655. **Confirm to the engineer** — state the full file path
pabasara-mahindapala