Imported from BoardAI/vallor-plugins (vallor/skills/contract-interactive-html/SKILL.md). Install upstream with npx skills add BoardAI/vallor-plugins --skill contract-interactive-html. Copyright stays with the author.

/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

1. Read ~/.claude/plugins/config/vallor/CLAUDE.md.
2. Apply the /design skill — same palette, but the layout is two-column (sidebar 280px + main pane).
3. 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

1. Build the read-only PDF — /vallor:contract-report-html then print to PDF.
2. Build the approval deck — /vallor:contract-approval-deck.
3. Stop here — file saved.

Examples

/vallor:contract-interactive-html redlines/acme-msa.md

/vallor:contract-interactive-html redlines/acme-msa.md --mode drill-down