| name | contract-interactive-html |
| description | Generates an interactive HTML view of a contract review with clause drill-down, severity filters, side-by-side comparison (their language vs proposed), and inline comment threads. Self-contained, vanilla JS, no frameworks. Use when the user says "interactive report", "interactive html", "let me click through this", "build the clickable version", "interactive review", or when a reviewer needs to explore a long redline rather than read top-to-bottom.
|
| argument-hint | [source-redline-md] [--mode side-by-side|stacked|drill-down] |
/vallor:contract-interactive-html
Purpose
A 30-page MSA with 80 redline entries is unreadable as a single column. This
skill turns the same content into a clickable view: sidebar of issues, click a
row to see the clause in context with their language next to the proposed
language, severity filter at the top, inline comment thread per clause.
It's the reviewer-facing counterpart to contract-report-html (which is the
read-only, printable distribution copy).
Load context
- Read
~/.claude/plugins/config/vallor/CLAUDE.md.
- Apply the /design skill — same palette, but the layout is two-column
(sidebar 280px + main pane).
- Read the source markdown redline. If the source is a contract PDF without a
redline, surface: "I need a redline to build this. Run
/vallor:contract-redline first."
Ask the user for context (optional but encouraged)
Use the AskUserQuestion tool to calibrate the layout and emphasis. A long redline can be sliced many ways — questions up front avoid a rebuild.
Up front (before rendering):
Ask 1-3 short questions when not obvious from the redline:
- Primary reader: lawyer-reviewer / business owner / external counsel
- Layout preference: side-by-side / stacked / drill-down (if
--mode not passed)
- Default severity filter on load: all / 🔴 only / 🔴+🟠
- Whether to include inline comment threads (yes/no)
- Whether to include the playbook reference column
Mid-flight (after parsing the redline):
Once you've indexed all issues, surface concrete asks before guessing on:
- Whether to group by clause vs by severity vs by section
- How to handle very long counterparty paragraphs (truncate with reveal vs full text)
- Whether to add a "deal-breakers only" preset filter
Rules:
- Every question must offer a reasonable default the user can pick to skip ahead.
- Ask follow-ups when answers reveal more depth or a non-default choice.
- Cap a single round at ~3 questions.
- Skip when the user has signaled a fast / default run.
Layout
┌──────────────────────────────────────────────────────────────────────────┐
│ [Client] · Commercial Contracts [PRIVILEGED] │
│ Acme Vendor MSA — Interactive Review │
│ ───────────────────────────────────────────────────────────────────── │
│ Recommendation: Push back · N findings (3 ● HIGH, 8 ● MED, 2 ● LOW) │
│ │
│ Filter: [All] [● BLOCKING] [● HIGH] [● MEDIUM] [● LOW] │
│ │
│ ┌─────────────────────┬───────────────────────────────────────────────┐ │
│ │ § 8.2 Indemnification│ CLAUSE 8.2 — INDEMNIFICATION ● HIGH │ │
│ │ ● HIGH │ ───────────────────────────────────────── │ │
│ │ Cap base too short │ │ │
│ ├─────────────────────┤ THEIR LANGUAGE │ │
│ │ § 10.1 Liability cap │ "Vendor's indemnification obligations are │ │
│ │ ● BLOCKING │ limited to direct damages and shall not │ │
│ │ On Never-accept list │ exceed fees paid in the three (3) months │ │
│ ├─────────────────────┤ preceding the claim." │ │
│ │ § 14 Audit (missing) │ │ │
│ │ ● MEDIUM │ PROPOSED REPLACEMENT │ │
│ │ Insert audit right │ "Vendor shall indemnify, defend, and hold │ │
│ ├─────────────────────┤ harmless Customer..." │ │
│ │ ... │ │ │
│ │ │ WHY │ │
│ │ │ Three-month cap base is on the Never-accept │ │
│ │ │ list per playbook position [Limitation of │ │
│ │ │ liability → Never accept]. │ │
│ │ │ │ │
│ │ │ FALLBACK │ │
│ │ │ Cap base at 12 months of fees paid; carve │ │
│ │ │ out IP and data above the cap. │ │
│ │ │ │ │
│ │ │ COMMENTS │ │
│ │ │ [+ add comment] │ │
│ └─────────────────────┴───────────────────────────────────────────────┘ │
│ │
│ Footer · PRIVILEGED & CONFIDENTIAL · Page X · [Reviewer] │
└──────────────────────────────────────────────────────────────────────────┘
Interactivity
- Sidebar: Clickable list of findings. Severity dot on the left. Click a row
to scroll the main pane to that clause.
- Filter bar: Vanilla JS show/hide by severity. State is preserved in the URL
hash so a reviewer can bookmark "all blocking issues" and share the link.
- Side-by-side mode (default): Two columns inside the main pane — their
language on the left, proposed on the right, with a synced scroll for long
clauses.
- Stacked mode: Their language above, proposed below — better on narrow
screens.
- Drill-down mode: Sidebar always visible; clicking expands the clause and
collapses the others. Good for very long redlines (80+ entries).
- Inline comments: Each clause has a
[+ add comment] button. Comments are
stored in localStorage keyed by the file URL. Not shared — single-reviewer
notes. Surfaces a warning if localStorage is empty when the file is opened
from a different device.
- Keyboard shortcuts:
j / k move between findings, / focuses the
filter, c toggles the comment thread for the current clause.
Tech constraints
- Single HTML file. Embedded CSS and JS.
- No frameworks — vanilla JS, ~150 lines.
- Sanitize untrusted input. Counterparty text, vendor names, OSS data — all
set via
textContent, never innerHTML. Use DOMPurify (vendored, ~20kb)
if any retrieved content might contain HTML; otherwise plain textContent.
- Print-friendly:
@media print collapses sidebar, expands all clauses, hides
the comment widget.
- Works offline.
Output
Save to:
~/.claude/plugins/config/vallor/reports/<YYYY-MM-DD>-<slug>-interactive.html
Open in browser if --open is passed.
Decision tree
- Build the read-only PDF —
/vallor:contract-report-html then
print to PDF.
- Build the approval deck —
/vallor:contract-approval-deck.
- Stop here — file saved.
Examples
/vallor:contract-interactive-html redlines/acme-msa.md
/vallor:contract-interactive-html redlines/acme-msa.md --mode drill-down
