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

F3 · Jira-style sprint board

Full login flow: credentials → 2FA → sprint board with drag-between-columns, side flyout with rich-text comments + drag-to-upload attachments, embedded wiki iframe, print preview in new tab.

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

Try this

  1. Enter a password (anything) on the login screen. Submit.
  2. 2FA modal appears — type any 6 digits. Click Verify.
  3. On the sprint board, drag a card from "To Do" to "In Progress".
  4. Drag another card around — board state persists.
  5. Click the project picker top-left → switch to AUTH project, then back.
  6. Click any card to open the side flyout (mounts after 200ms).
  7. In the comment composer: select some text, click Bold. Paste a URL like https://example.com.
  8. Drag a file from your desktop onto the attachment zone.
  9. Click the Status combobox → change the status.
  10. Click the Due-date trigger → pick a date.
  11. Scroll down inside the flyout — the linked wiki iframe loads its own content.
  12. Click "Print preview" — opens a new tab with the sprint summary.

Why this is hard

A login cascade is the worst case for naïve recorders: password input must be redacted (C2), the 2FA modal lazy-mounts (B3), and the post-login URL doesn't exist until both steps succeed. On the board, identical-looking sub-tasks need fingerprintIndex (A3), every card carries dynamic `atl-${hash}` classes (A2), and status badges have `data-i18n-key` so selectors survive locale changes (A4). The side flyout exercises the heaviest combination: contenteditable comment editor with B/I/Link toolbar (D4), pasting a URL auto-linkifies (D5), the attach zone accepts both click-to-pick (D2) and drag-to-drop (D1) files, the due-date picker is a custom flyout (D6 datepicker-flavored), assignee/status are inline comboboxes (D6), the embedded Confluence-like wiki is a same-origin iframe (C1), the user profile dropdown holds a sensitive phone field (C2), and "Print preview" opens a new tab via target=_blank (C4). The URL becomes `/browse/BROW-123` as you click around (B1 + 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.

A2A3A4B1B3C1C2C4D1D2D3D4D5D6E2
Replay log · claude code · stdoutsimulated · not live data
▸ Reading ~/.claude/skills/jira-update-sprint-card/SKILL.md
  ✓ 12 steps · 3 params · 2 preconditions (cookie + 2FA)

▸ Precondition 1 · supplier-portal cookie
  ✓ resolved
▸ Precondition 2 · 2FA challenge
  ⏸  paused for human, code received
  ✓ resumed
▸ Step 1/12 · drag card "To Do" → "In Progress"
▸ Step 2/12 · project picker → switch back
  ✓ B1 SPA transition awaited
▸ Step 3/12 · open card → side flyout (200ms)
▸ Step 4/12 · select + bold (D4 contenteditable)
▸ Step 5/12 · paste URL · auto-linkify
▸ Step 6/12 · drag file → attach zone
  ✓ fileMeta only · bytes not transmitted
▸ Step 7/12 · pencil-icon: phone — input mounted
  ⚠ sensitive field detected · masked: true (***)
▸ Step 8/12 · due-date picker (custom combobox)
▸ Step 9/12 · scroll → wiki iframe loaded
  ✓ frameId 4 re-resolved by URL
▸ Step 10/12 · "Print preview" target=_blank
  ✓ chrome.tabs.onCreated · openerTabId tracked
▸ done in 14.2s · 0 retries