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

F4 · Salesforce-style CRM

Login → home → accounts list → record detail with inline-edit pencils, masked phone/SSN/CC fields, Country→State dependent comboboxes, attachment dropzone, multi-step approval workflow, "Generate quote" new tab, live-chat widget in an iframe.

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

Try this

  1. Enter any password on the login screen. Submit.
  2. On the Accounts list, click the first "Acme Corp" row (there are three — they look identical).
  3. On the record page, click the pencil next to "Phone" — an input mounts (sensitive type, redacted on record).
  4. Edit the phone, press Enter.
  5. Click the Owner field → type "ali" → wait 350ms → click Alex Chen.
  6. Click the Country combobox → pick United States. The State combobox unlocks.
  7. Click State → pick California.
  8. Click "Related Contacts (3)" to lazy-expand the panel.
  9. Click "Files & Attachments" to lazy-expand. Drag any file onto the dropzone.
  10. In Notes, type some text — contenteditable.
  11. Click "Copy account number" → check your clipboard.
  12. Press Cmd-S — fake save toast appears.
  13. Click "Submit for approval" — multi-step modal opens. Step through it.
  14. Click "Generate quote" — opens a new tab with a PDF-like preview.
  15. Open the bottom-right chat widget and type a message.

Why this is hard

CRM record pages are the worst possible recorder surface: dozens of inline-editable fields, lookup typeaheads with debounced search, related lists that lazy-expand, sensitive fields (phone, SSN, credit-card) that MUST be redacted (C2), and modal workflows that cascade. This fixture compresses all of it: every account row has dynamic `sf-${hash}` classes (A2), the first three rows are all literally "Acme Corp" — fingerprintIndex required (A3). Clicking a row routes to `/r/Account/<id>/view` (B1 + E2 URL params). Click a pencil icon → input lazy-mounts (B3 + D6). The Owner lookup is a typeahead with 350ms debounce (B2 + D6). Country selection filters the State combobox (D6 dependent). Related Contacts panel lazy-expands on click (B3). Drag a file onto the attach zone (D1 + D2). "Submit for approval" opens a 4-step modal cascade (B3). "Generate quote" opens a new tab (C4). Bottom-right is a live-chat widget in an iframe (C1). Cmd-S triggers save (D3).

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.

A2A3B1B2B3C1C2C4D1D2D3D4D5D6E2
Replay log · claude code · stdoutsimulated · not live data
▸ Reading ~/.claude/skills/sf-update-account/SKILL.md
  ✓ 15 steps · 5 params · 2 preconditions

▸ Step 1/15 · click "Acme Corp" row 1 (of 3 identical)
  ✓ fingerprintIndex: 0 · row matched
▸ Step 2/15 · /r/Account/{{accountId}}/view
  ✓ URL segment lifted · param: accountId
▸ Step 3/15 · pencil → Phone (B3 lazy 200ms)
  ⚠ masked: true · *** stored
▸ Step 4/15 · Owner typeahead "ali" (350ms debounce)
  ✓ optionText="Alex Chen" resolved
▸ Step 5/15 · Country → United States (D6)
  ✓ State combobox unlocked
▸ Step 6/15 · State → California
▸ Step 7/15 · expand "Related Contacts (3)" (lazy)
▸ Step 8/15 · drag file → dropzone
  ✓ fileMeta captured · no bytes
▸ Step 9/15 · Notes (contenteditable)
▸ Step 10/15 · "Copy account number" → clipboard
▸ Step 11/15 · Cmd-S · save toast
▸ Steps 12-14 · Submit for approval (4-step modal)
  ✓ B3 lazy cascade · all steps stepped
▸ Step 15/15 · Generate quote → new tab
  ✓ chrome.tabs.create · openerTabId tracked
▸ done in 18.6s · 0 retries