HTML ERD & Schema Explorer

Database schemas are inherently visual — tables connected by foreign keys, with cardinality and direction. ERDs in markdown are awkward; in dedicated tools they're heavy. An HTML ERD is portable, embeddable in a doc, and click-to-explore.

Pre-flight — run BEFORE writing the artifact

Invoke html-skills:html-skills-listen (Skill tool) first; it is idempotent. If it returns a URL, inject it verbatim as window.__CLAUDE_SUBMIT_URL__ in the HTML you are about to write, ?t= query string included (a local, single-session loopback handshake — not a credential). If it reported web/sandbox mode, leave that line out; submitToClaude then falls back to clipboard mode.

When to use this skill

• "Diagram our [schema, data model, database, tables]"
• "Show me how [table X] relates to [table Y]"
• "Document the schema for [feature/service]"
• "Plan the migration from this schema to that one"
• "Explain how a query touches the schema"
• Any time a database structure with ≥3 tables enters the conversation