render-incident-report-image

Included with Lifetime

$97 forever

Render a verbose monospace "incident report" PNG tuned for reading on an iPhone 13 mini in a Pushover notification (72-column wrap, dark theme, green headings, no horizontal cut-off, unlimited scrollable height). Use when the user wants a detailed text briefing/report rendered as an image to attach to a push notification, or asks for a Pushover-friendly report image. TRIGGERS - render report, incident report image, pushover briefing image, report png.

Image & Video

What this skill does


# render-incident-report-image

> **Self-Evolving Skill**: This skill improves through use. If instructions are wrong, parameters drifted, or a workaround was needed — fix this file immediately, don't defer. Only update for real, reproducible issues.

Render a clean monospace report PNG via the TS core `pushover_core.ts render` (Satori → vector SVG → @resvg/resvg-js → PNG).

## Device-calibrated facts (verified on a physical iPhone 13 mini, 2026-05-30)

- **72-column hard wrap** is comfortably legible inline without pinch-zoom (40/56/72 all tested; 72 confirmed fine).
- Pushover **fits images to width** — it never crops horizontally. Earlier "right-edge trimmed" images were a _renderer_ bug (no wrapping), not Pushover.
- **No practical pixel-height ceiling**: a 30,000 px-tall image scrolls/zooms fine, far under the **5 MB** attachment cap → render the whole report in one tall image, never paginate.
- **Auto-fit width (2026-06-01)**: 72 cols is the **MAX wrap**, not a fixed canvas width. The canvas is sized to the _longest actual line_ (`maxChars × 18px advance + 48px pad`, monospace ⇒ exact/deterministic), so short reports don't waste right-margin whitespace — Pushover scales the snug image up, rendering text larger. (e.g. a 43-char digest: 1344 → 822 px, ~1.6× bigger on screen.) No image post-processing needed.

## Usage

```bash
env -u HTTPS_PROXY -u HTTP_PROXY bun "${CLAUDE_PLUGIN_ROOT}/skills/_lib/pushover_core.ts" render \
  --in report.txt --out /tmp/report.png            # or: cat report.txt | bun .../pushover_core.ts render --out /tmp/report.png
# then attach with send-notification --attach /tmp/report.png
```

## Line markup (first 2 chars)

| Prefix | Style              |
| ------ | ------------------ |
| `#`    | heading (green)    |
| `!`    | subheading (amber) |
| `>`    | accent (cyan)      |
| `.`    | dim/muted          |
| (none) | body (light grey)  |

Wrapping is **word-aware** (greedy, `fold -s` semantics): lines break at spaces and
NEVER mid-word. Only a single token that ALONE exceeds the column width (paths,
hashes, URLs) is hard-broken so nothing overflows the canvas. Lines already within
the width keep their exact spacing (aligned tables stay aligned). Greedy is the
correct algorithm for left-aligned monospace — Knuth-Plass optimizes _justified_
paragraphs and adds nothing to ragged-right fixed-width text.

## Post-Execution Reflection

After this skill completes, check before closing:

1. **Did the PNG render with correct word-wrap and no horizontal cut-off at the target device width?** If text overflowed, fix the wrap/width.
2. **Did the Satori to resvg pipeline complete without error?** A blank or partial image means a rendering regression to fix.

Only update if the issue is real and reproducible — not speculative.

Files: 1

Size: 3.3 KB

Complexity: 10/100

Category: Image & Video

Source: https://github.com/terrylica/cc-skills/tree/main/plugins/pushover-commander/skills/render-incident-report-image

Related in Image & Video

watch

Included

Watch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions about what's in the video.

Image & Videoscriptsfeatured

physical-ai-defect-image-generation

Included

Use when the user wants to orchestrate defect image generation, run associated setup, or handle outputs on OSMO. The Day 0 path handles cold-start with USD-to-ROI, image-edit augmentation, and AnomalyGen to create initial PCBA datasets. The Day 1 path performs inference and labeling on real images. This skill helps with first-time asset setup, creation of finetuning checkpoints, and configuring deployment. Trigger keywords: defect image generation, dig workflow, dig pipeline, defect image detection workflow, aoi pipeline, aoi anomalygen, usd2roi anomalygen, day 0 pcba, day 1 pcba, day 1 real-photo alignment, day 1 manual roi, metal surface anomaly, glass defect, anomalygen finetune, setup_pcb, setup_metal, setup_glass, setup_pretrained, dig setup, dig datasets, dig pretrained checkpoint, dig image-edit endpoint.

Image & Videoscripts

accelint-react-best-practices

Included

React performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimizing re-renders, memoization, state management; reviewing for performance; fixing hydration mismatches; debugging infinite re-renders, stale closures, input focus loss, animations restarting; preventing remounting; implementing transitions, lazy initialization, effect dependencies. Even simple React tasks benefit from these patterns. Covers React 19+ (useEffectEvent, Activity, ref props). Triggers - useEffect, useState, useMemo, useCallback, memo, inline components, nested components, components inside components, re-render, performance, hydration, SSR, Next.js, useDeferredValue, combined hooks.

Image & Videoscripts

elevenlabs-agents

Included

Build conversational AI voice agents with ElevenLabs Platform using React, JavaScript, React Native, or Swift SDKs. Configure agents, tools (client/server/MCP), RAG knowledge bases, multi-voice, and Scribe real-time STT. Use when: building voice chat interfaces, implementing AI phone agents with Twilio, configuring agent workflows or tools, adding RAG knowledge bases, testing with CLI "agents as code", or troubleshooting deprecated @11labs packages, Android audio cutoff, CSP violations, dynamic variables, or WebRTC config. Keywords: ElevenLabs Agents, ElevenLabs voice agents, AI voice agents, conversational AI, @elevenlabs/react, @elevenlabs/client, @elevenlabs/react-native, @elevenlabs/elevenlabs-js, @elevenlabs/agents-cli, elevenlabs SDK, voice AI, TTS, text-to-speech, ASR, speech recognition, turn-taking model, WebRTC voice, WebSocket voice, ElevenLabs conversation, agent system prompt, agent tools, agent knowledge base, RAG voice agents, multi-voice agents, pronunciation dictionary, voice speed control, elevenlabs scribe, @11labs deprecated, Android audio cutoff, CSP violation elevenlabs, dynamic variables elevenlabs, case-sensitive tool names, webhook authentication

Image & Videoscripts

humanizer

Included

Humanize AI-generated text by detecting and removing patterns typical of LLM output. Rewrites text to sound natural, specific, and human. Uses 28 pattern detectors, 560+ AI vocabulary terms across 3 tiers, and statistical analysis (burstiness, type-token ratio, readability) for comprehensive detection. Use when asked to humanize text, de-AI writing, make content sound more natural/human, review writing for AI patterns, score text for AI detection, or improve AI-generated drafts. Covers content, language, style, communication, and filler categories.

Image & Videoscripts

generating-mermaid-diagrams

Included

Salesforce architecture diagrams using Mermaid with ASCII fallback. Use this skill when generating text-based diagrams for Salesforce architecture, OAuth flows, ERDs, integration sequences, or Agentforce structure. TRIGGER when: user says "diagram", "visualize", "ERD", or asks for sequence diagrams, flowcharts, class diagrams, or architecture visualizations in Mermaid. DO NOT TRIGGER when: user wants PNG/SVG image output (use generating-visual-diagrams), or asks about non-Salesforce systems.

Image & Videoscripts