Skill Recorder
Add to Chrome
Playground  /  Category F
← All scenarios

F1 · Notion-style block editor

A workspace with a sidebar of pages, a block-based contenteditable doc, slash commands, @-mentions, and drag-handle reordering.

Live fixture · interact with it while the recorder is runningOpen in new tab ↗

Try this

  1. Click into the page title and rename the page.
  2. Click into an empty block, type `/` to open the slash menu, pick "Heading 1".
  3. Type the heading text. Press Cmd-Enter (or Ctrl-Enter) to insert a new block below.
  4. In the new block, type some text including `@al` to open the mention picker, pick Alex Chen.
  5. Click the toggle block "Engineering tasks" — child blocks lazy-mount.
  6. Hover over any block to reveal its drag handle on the left. Drag it to a new position.
  7. Drag any image file onto the cover area at the top of the page.
  8. Click one of the To-do checkboxes — done state toggles.
  9. Click a different sub-page in the sidebar — URL changes to `/page/<uuid>`.
  10. Copy text from anywhere and paste it into a block (Cmd-V).

Why this is hard

This is the canonical "every block is its own contenteditable" model — the recorder must coalesce typing into per-block change steps (D4), capture slash-menu and @-mention selections as combobox interactions (D6), follow drag-handle reordering as drag steps (D1), survive each block getting a fresh `block-${hash}` class on every render (A2), and tiebreak between the three identical-looking To-do rows by fingerprintIndex (A3). On top of all that, the page title carries a `data-i18n-key` (A4), sub-pages switch via pushState without a real navigation (B1), the toggle block lazy-mounts its children 200ms after click (B3), and the URL is `/page/<uuid>` so the parameterizer should template the ID (E2).

Difficulty points covered

Each tag below links to the isolated demo for that single difficulty point — useful if the composite breaks somewhere and you want to bisect.

A2A3A4B1B3D1D2D3D4D5D6E2
Replay log · claude code · stdoutsimulated · not live data
▸ Reading ~/.claude/skills/notion-rename-and-publish/SKILL.md
  ✓ 9 steps · 3 params · 1 precondition (workspace cookie)

▸ Step 1/9 · rename page title  ({{title}})
  ✓ matched [contenteditable] via fingerprintIndex
▸ Step 2/9 · open slash menu, pick "Heading 1"
  ✓ comboboxContext.optionText="Heading 1" (filtered list)
▸ Step 3/9 · type heading + Cmd-Enter
  ✓ chord captured · new block inserted
▸ Step 4/9 · @-mention "Alex Chen"
  ✓ debounced typeahead resolved by optionText
▸ Step 5/9 · toggle "Engineering tasks" (lazy 200ms)
  ✓ elementVisible polled · child blocks mounted
▸ Step 6/9 · drag block — reordered
  ✓ dragstart → drop · dataTransfer.types=["text/html"]
▸ Step 7/9 · click sub-page (pushState → /page/{{uuid}})
  ✓ E2 parameter lifted · URL templated
▸ Step 8/9 · paste from clipboard
  ✓ navigator.clipboard.readText() restored
▸ Step 9/9 · save
  ✓ done in 6.4s · 0 retries