graphic-output

What this skill does

# Graphic Output Skill

Generate interactive HTML dashboards and visualizations from structured LimaCharlie data. This skill transforms JSON report data into professional, self-contained HTML documents with D3.js charts and interactive elements.

**Core Philosophy**: Visualize ONLY what exists. This skill has strict guardrails that make data fabrication impossible. Every chart, number, and label must come directly from the input data.

---

## LimaCharlie Integration

> **Prerequisites**: Run `/init-lc` to initialize LimaCharlie context.

### Critical Rules

| Rule | Wrong | Right |
|------|-------|-------|
| **Data Fabrication** | Generate, estimate, or infer missing data | Show "N/A" or "Data unavailable" |
| **Data Modification** | Round, truncate, or rename values | Display values exactly as provided |
| **Missing Fields** | Show zero for missing values | Show empty state with clear messaging |

---

## Data Accuracy Guardrails

### CRITICAL: These Rules Are Absolute

#### Principle 1: NEVER Fabricate Data

**Absolute Rules:**
- NEVER generate, estimate, infer, or extrapolate data not in the input
- NEVER fill in missing values with assumptions
- NEVER create "example" or "placeholder" data
- NEVER calculate derived metrics not explicitly provided
- NEVER guess at trends, patterns, or projections

**Always:**
- Show "N/A" or "Data unavailable" for missing fields
- Display empty chart states with clear messaging
- Document what data is missing in the output
- Pass through data exactly as received

#### Principle 2: Represent Data As-Is

**Absolute Rules:**
- Display values EXACTLY as provided in input
- Do NOT round, truncate, or modify numeric values (except for display formatting)
- Do NOT reorder, filter, or exclude data without explicit instruction
- Do NOT combine or aggregate data that wasn't pre-aggregated
- Do NOT rename categories or labels

**Display Formatting Allowed:**
- Adding thousand separators (1234567 → 1,234,567)
- Converting bytes to human-readable (1073741824 → 1 GB) with original shown
- Date formatting (Unix timestamp → readable date)
- Percentage formatting (0.945 → 94.5%)

**NOT Allowed:**
- Changing "unknown" to a guessed value
- Interpolating missing data points in time series
- Creating trend lines from insufficient data
- Smoothing or averaging values

#### Principle 3: Explicit Data Provenance

Every visualization MUST indicate:
- Source of the data (which skill/API provided it)
- Timestamp when data was collected
- Time window the data covers
- Any known limitations or caveats

**Example:**
```
Data Source: reporting skill (org-reporter agents)
Collected: 2025-11-27 14:32:45 UTC
Time Window: Nov 1-30, 2025 (30 days)
Note: 4 organizations hit detection limit - actual counts higher
```

#### Principle 4: Handle Missing Data Explicitly

When data is missing or unavailable:

**For Charts:**
- Show empty chart with message: "No data available"
- Do NOT show chart with zero values (unless zero is the actual value)
- Do NOT substitute placeholder data

**For Metrics/Cards:**
- Display "N/A" or "—" for missing values
- Include note explaining why data is unavailable
- Do NOT show "0" unless zero is the actual value

**For Tables:**
- Show empty rows with "N/A" in cells
- Include row even if partial data available
- Mark incomplete rows visually

#### Principle 5: Warning Propagation

All warnings from source data MUST be displayed:
- Detection limit warnings
- Partial data warnings
- Permission errors
- Failed organization notices

Warnings must be:
- Prominently displayed (not hidden in footnotes)
- Associated with affected visualizations
- Actionable (explain what user can do)

#### Principle 6: No Calculations

**Do NOT perform:**
- Cost calculations from usage metrics
- Growth rate calculations
- Percentage changes between periods
- Statistical analysis (mean, median, std dev)
- Trend predictions

**Exception:** The following display-only calculations are permitted:
- Percentage of total (for pie charts) when total is provided
- Health percentage when online/total counts provided
- These must use ONLY values from input data

### Validation Checklist

Before rendering any visualization, verify:

```
[ ] Every value traces to input data
[ ] No fields contain fabricated content
[ ] Missing data shows as "N/A" not zero
[ ] All warnings from input are displayed
[ ] Data source and timestamp shown
[ ] Time window clearly indicated
[ ] Detection limits flagged if present
[ ] Failed organizations documented
```

### Error Messages for Violations

If the skill detects a guardrail violation:

```
ERROR: Data Accuracy Violation

Attempted to render chart with fabricated data.
Field 'detection_trend' was not provided in input.

Resolution: Either provide the required data from a source skill,
or use a template that doesn't require this field.

This skill will NOT generate placeholder, example, or estimated data.
```

## When to Use This Skill

Use this skill when the user needs to:

### Visual Reports
- **"Generate a visual report for all my organizations"** - Multi-tenant dashboard
- **"Create an HTML dashboard from the report"** - Convert text report to visual
- **"Make an interactive chart of detections"** - Detection analytics visualization
- **"Export as HTML with graphs"** - Visual export format

### Dashboard Generation
- **"Show me a dashboard of sensor health"** - Fleet health gauges and charts
- **"Create a visual overview of my MSSP clients"** - Multi-org summary
- **"Generate billing dashboard"** - Usage metrics visualization

### Integration with Other Skills
- After running the `reporting` skill - visualize the collected data
- After running `sensor-health` skill - create health dashboard
- After `detection-engineering` testing - visualize test results

## What This Skill Does

This skill:
1. Accepts structured JSON data from source skills (reporting, sensor-health, etc.)
2. **Validates data completeness** - checks all required fields exist
3. Selects the appropriate visualization template
4. Spawns the `html-renderer` subagent to generate HTML
5. **Enforces data accuracy guardrails** throughout rendering
6. Returns the path to the self-contained HTML file

**Output Characteristics:**
- Self-contained HTML (no external dependencies)
- Embedded D3.js visualizations
- Interactive charts (hover, click, tooltips)
- Responsive layout (works on any screen size)
- Print-friendly styles
- Sortable data tables
- **Data provenance clearly shown**
- **All warnings prominently displayed**

## Available Templates

| Template | Description | Best For |
|----------|-------------|----------|
| `mssp-dashboard` | Multi-tenant overview with aggregate metrics, org table, charts | MSSP/multi-org reports |
| `security-overview` | Single-org comprehensive security report with platform breakdown, MITRE coverage, detection timeline, rules inventory | Individual org deep-dive |
| `billing-summary` | Multi-tenant billing roll-up with per-tenant breakdown, SKU details, cost distribution charts | Billing/cost analysis |
| `custom-report` | **Component-based flexible reports** - build any report by specifying which components to include | Ad-hoc/custom reports |

**Note:** Use `custom-report` when none of the predefined templates fit your needs. It supports composable components that can be arranged in any order.

### Custom Report Components

The `custom-report` template supports these component types:

| Component | Description |
|-----------|-------------|
| `summary_cards` | Grid of metric cards with icons, values, labels |
| `chart` | Pie, doughnut, bar, or line charts |
| `two_column` | Side-by-side charts layout |
| `table` | Data tables with optional sorting |
| `metric_grid` | Compact grid of small metrics |
| `platform_table` | Platform breakdown with sensors/detections |
| `alert_banner` | Info/warning/danger/success banners |
| `text_section` | Free-form HTML content |
| `divider` | Visual separator |

**Example custom report reques