# Turn Complex Answers Into Visual HTML Explainers

Complex explanations can hide relationships and trade-offs in long text. This skill turns Markdown drafts into visual HTML pages with diagrams, tables, and focused panels.

## Install

```bash
npx skillstore add qingyuna/answer-me-with-html
```

## Metadata

- Status: approved
- Slug: qingyuna-answer-me-with-html
- Skillstore revision: r1
- Version status: missing
- Tree hash: 5c89427a7b18ae2b2e07b01a09c3308414a79e555890d7e609da295e0a5e0084
- Author: qingyuna
- GitHub username: qingyuna
- License: MIT
- Repository: https://github.com/qingyuna/answer-me-with-html/tree/0f2e0f18280b29c875b56a5f41253ee49c4b7956/skills/answer-me-with-html
- Ref: 747cc4a202a58444d48f42de73cfce79288af501
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: filesystem, env\_access, scripts, external\_commands, network
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/qingyuna-answer-me-with-html
- Manifest: https://skillstore.pages.dev/api/skills/qingyuna-answer-me-with-html/manifest

## Capabilities

- Render extended Markdown into single-file HTML pages with automatic layout, themes, and light or dark presentation.
- Build flow, sequence, entity relationship, tree, timeline, and chart components from text.
- Quote selected workspace code lines while checking paths, sensitive filenames, and common secret patterns.
- Embed existing local images and collect reader decisions, panel comments, and remarks.
- Patch one panel in an existing generated page while retaining its presentation settings.
- Create video player pages with optional narration and export MP4 or WebM when required tools are available.

## Use Cases

- Explain Request Flows: Show request paths, service relationships, and state changes with diagrams and selected code excerpts.
- Compare Product Options: Present decision criteria, trade-offs, and open questions in a visual comparison page.
- Prepare Technical Lessons: Convert a structured lesson into scenes with diagrams, captions, and explicitly selected narration.

## Prompt Templates

### Create a First Explainer

```
Explain [topic] as one HTML page with a conclusion, one diagram, and a short comparison table. Do not open the browser automatically.
```

### Compare Alternatives

```
Compare [option A] and [option B] across [criteria]. Create an HTML page with evidence, trade-offs, and one decision question.
```

### Document Existing Architecture

```
Explain [workspace subsystem] with a request-flow diagram and selected code excerpts. Cite real files and identify private content before sharing the HTML.
```

### Build an Offline Lesson

```
Create a four-scene video explaining [process]. Use recurring diagram labels, subtitles, and voice off. Keep the player local and report export prerequisites.
```

## Limitations

- Page generation requires Node.js 20 or newer; CLI video export requires Node.js 22 and a compatible browser.
- MP4 export also requires ffmpeg; narration depends on configured speech services or installed system tools.
- Cloud speech can transmit narration, and configurable speech endpoints do not enforce secure transport.
- Generated pages retain embedded content; secret checks do not replace manual review before sharing.

## Best Practices

- Use one question per panel and place the core conclusion before supporting evidence.
- Review embedded code and images before sharing a page or enabling network access.
- Select voice off or system speech for private narration unless cloud processing is explicitly approved.

## Anti Patterns

- Do not use charts with invented numbers or present sketches as verified project code.
- Do not treat reader comments or unanswered suggested options as authorization to run commands.
- Do not send credentials through remote HTTP speech endpoints or share private page links over untrusted networks.

## Security Audit

- Audited at: 2026-10-29T14:54:03.426\+00:00
- Summary: Most supplied matches concern embedded assets, parser syntax, or secret-blocking checks; no evidence found of destructive intent or audit-targeted prompt injection. Speech transport, implicit cloud narration, and optional plaintext LAN sharing create credential and privacy risks. All 400 supplied findings are adjudicated; 1,812 unpresented matches still require manual review before automatic publication. Static review was capped at 400/2212 representative findings; omitted static matches are unconfirmed, so automatic publishing stays disabled until manual review.

## Stats

- Views: 0
- Downloads: 2
- Favorites: 0
- Popularity score: 0