html-throwaway-editor

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: html-throwaway-editor
description: Build single-purpose, throwaway HTML editors for one specific piece of data — drag-and-drop boards, form-based config editors, side-by-side prompt tuners, dataset curators, annotation tools. Always end with a Submit button (calls `submitToClaude`) so the result can be sent back to the agent. Use whenever the user wants to triage, reorder, edit, annotate, curate, prioritize, or pick values where typing prose would be tedious — Linear tickets, feature flags, prompts, datasets, transcripts, anything. Secret values (API keys, tokens, passwords) are never embedded verbatim — they are masked to references; the artifact and submit payload carry key names and masked previews only.
metadata:
  version: "1.2.1"
---

# HTML Throwaway Editor

When describing what you want to do is harder than just doing it, build a one-off editor. Not a product. Not a reusable tool. A single HTML file purpose-built for this one piece of data, with an export button at the end that turns the result back into something pasteable.

## Pre-flight — run BEFORE writing the artifact

This skill produces an interactive artifact. **Invoke the `html-skills-listen` skill from this plugin first** (Skill tool: `html-skills:html-skills-listen`). It sets up a per-session local receiver and arms a `Monitor` so user submissions arrive as session notifications instead of as copy-paste round-trips. It's idempotent — invoke every time you fire this skill.

Capture the URL it returns. If it returned one, inject it as `window.__CLAUDE_SUBMIT_URL__` in the HTML you're about to write. If it reported web/sandbox mode (no URL returned), generate the HTML *without* `__CLAUDE_SUBMIT_URL__` set — `submitToClaude` will fall back to clipboard mode automatically.

Skipping this step costs the user a copy-paste round-trip on every submit. Invoking the skill is cheap and idempotent.


## When to use this skill

- "I need to reprioritize / reorder / triage these N things"
- "Help me edit / curate / annotate / tag this dataset"
- "I want to tune / pick / configure these values" (where the values aren't simple text)
- "Build me a quick editor for X"
- Any time the user describes a manipulation that would be painful to do in chat but easy with a UI

## Output requirements

Pre-populate with the actual data the user provided (after the secrets pass below) — never make them paste it again. End with an export button that copies a structured representation to the clipboard: JSON, markdown, or a natural-language prompt.

The export is non-negotiable. An editor without export is a dead-end; "throwaway" means the result lives outside the artifact, not inside it.

### Secrets are never embedded

Before pre-populating, scan the input for secret-shaped values. Mask anything that matches:

- **Key names** matching `/(key|secret|token|passw|credential|private|auth|dsn|connection[_-]?string)/i`.
- **Known prefixes**: `AKIA`, `ghp_`/`gho_`, `sk-`, `xox`, `AIza`, `eyJ`-prefixed JWTs, PEM `PRIVATE KEY` blocks.
- **URLs with userinfo** — `scheme://user:pass@host` connection strings.
- **Secret-bearing sources**: if the source file is secret-bearing by convention (`.env`, `*credentials*`, `*secret*`, `.npmrc`, key/PEM files), treat **every** value in it as secret by default — don't rely on the regexes alone.
- **High-entropy strings ≥ 20 chars** — in config/env-shaped inputs (Pattern B) only; treat a bare entropy hit as "mask unless the user confirms it's not a secret". Don't apply this heuristic to dataset or annotation rows (Patterns D/E), where hashes, UUIDs, and base64 are legitimate payload.

For each match, replace the **value** with a masked preview (`••••` + last 4 chars when the value is ≥ 12 chars; full mask otherwise) and a stable reference id, e.g. `{{SECRET:STRIPE_API_KEY}}`. Render those fields read-only with a "secret — value withheld" badge. The real value must never appear in the HTML source, the DOM, the live state preview, the export, or the `submi