The Interaction Log

1 What it is

The Interaction Log lives as Interaction-Log.html at your workspace root. It is one self-contained page: no server, no database, no external dependencies. It captures what was worked on across every project in that workspace, so the whole history opens straight from disk in a browser.

Each logging run adds one combined entry for the session: the folder that changed most, every prompt that was sent, and a short summary of what changed. Entries are grouped inside a collapsible block per folder, and the newest folder and newest date always sit on top.

2 Anatomy of an entry

One entry is three nested layers: a folder block holds one or more dated sections, and each dated section holds the prompts and a summary of changes. This is exactly how it renders in the log:

• Folder block · the project path, plus a count of how many dated entries it holds. In the real log it collapses on click.
• Date section · one per day, headed by the ISO date, newest at the top.
• Prompts · every prompt sent that day, verbatim and numbered.
• Summary of changes · green bullets, with files and identifiers wrapped in code.

The markup behind that date section:

<!-- inside .folder-body, newest date first -->
<section class="entry" data-date="2026-07-01">
  <h2 class="entry-date">2026-07-01</h2>
  <p class="lbl">Prompts</p>
  <ol class="prompts">
    <li>Create a new folder in CC_infographics named Interaction-Log.</li>
  </ol>
  <p class="lbl">Summary of changes</p>
  <ul class="changes">
    <li><code>Interaction-Log/index.html</code>: built the explainer.</li>
  </ul>
</section>

3 How to create it

You do not edit the file by hand. Run the skill's slash command and it does the rest:

It reads the current session and updates Interaction-Log.html in five moves:

1. Capture today's date, checked live and never hardcoded, and the primary folder: the one that changed most, written as a path relative to your workspace root.
2. Gather every prompt from the session in order and verbatim, plus a short bullet list of what changed.
3. Find that folder's <details> block. If it exists, move it to the top of the log; if not, create one and insert it first.
4. Inside the folder, find the section for today. Append the new prompts and changes if it is present, or prepend a fresh dated section if it is not.
5. Refresh the folder's date count, then report one line: folder, date, and how many prompts and changes were logged.

If Interaction-Log.html does not exist yet, the skill first creates it from a built-in base template, so the very first run just works.

A generic version is published as the interaction-log skill in the claude-skills repo.

4 House rules

• HTML-escape everything logged: & becomes &, < becomes <, > becomes >.
• Wrap file paths and identifiers in <code> so they read as code.
• No em dashes in the summary prose; use commas, colons, periods, or middots.
• Newest first, always: newest folder at the top of the log, newest date at the top of its folder.
• No external or network resources, ever. The page stays fully self-contained.
• Do not commit or push. The skill leaves version control to you, since the log may sit outside a git repository.

5 Why it's used

• One browsable, searchable record of work across every project in your workspace, held in a single file.
• Accountability: the exact prompts and the resulting changes are captured together, per session.
• Structure that scales: collapsible folders keep it tidy, and newest-first keeps recent work in view.
• Portable and private: no backend, no trackers, opens straight from disk, and it matches the field-guide look of the rest of the collection.