UI Demo Video Recorder

Record polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.

When to Use

• User asks for a "demo video", "screen recording", "walkthrough", or "tutorial"
• User wants to showcase a feature or workflow visually
• User needs a video for documentation, onboarding, or stakeholder presentation

Three-Phase Process

Every demo goes through three phases: Discover -> Rehearse -> Record. Never skip straight to recording.

Phase 1: Discover

Before writing any script, explore the target pages to understand what is actually there.

Why

You cannot script what you have not seen. Fields may be not </code>, dropdowns may be custom components not <code><select></code>, and comment boxes may support <code>@mentions</code> or <code>#tags</code>. Assumptions break recordings silently.</p><p><h3>How</h3></p><p>Navigate to each page in the flow and dump its interactive elements:</p><p><pre><code class="lang-javascript">// Run this for each page in the flow BEFORE writing the demo script const fields = await page.evaluate(() => { const els = []; document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => { if (el.offsetParent !== null) { els.push({ tag: el.tagName, type: el.type || '', name: el.name || '', placeholder: el.placeholder || '', text: el.textContent?.trim().substring(0, 40) || '', contentEditable: el.contentEditable === 'true', role: el.getAttribute('role') || '', }); } }); return els; }); console.log(JSON.stringify(fields, null, 2)); </code></pre></p><p><h3>What to look for</h3></p><p><ul><li><strong>Form fields</strong>: Are they <code><select></code>, <code><input></code>, custom dropdowns, or comboboxes?</li> <li><strong>Select options</strong>: Dump option values AND text. Placeholders often have <code>value="0"</code> or <code>value=""</code> which looks non-empty. Use <code>Array.from(el.options).map(o => ({ value: o.value, text: o.text }))</code>. Skip options where text includes "Select" or value is <code>"0"</code>.</li> <li><strong>Rich text</strong>: Does the comment box support <code>@mentions</code>, <code>#tags</code>, markdown, or emoji? Check placeholder text.</li> <li><strong>Required fields</strong>: Which fields block form submission? Check <code>required</code>, <code>*</code> in labels, and try submitting empty to see validation errors.</li> <li><strong>Dynamic content</strong>: Do fields appear after other fields are filled?</li> <li><strong>Button labels</strong>: Exact text such as <code>"Submit"</code>, <code>"Submit Request"</code>, or <code>"Send"</code>.</li> <li><strong>Table column headers</strong>: For table-driven modals, map each <code>input[type="number"]</code> to its column header instead of assuming all numeric inputs mean the same thing.</li> </ul> <h3>Output</h3></p><p>A field map for each page, used to write correct selectors in the script. Example:</p><p><pre><code class="lang-text">/purchase-requests/new: - Budget Code: <select> (first select on page, 4 options) - Desired Delivery: <input type="date"> - Context: <textarea> (not input) - BOM table: inline-editable cells with span.cursor-pointer -> input pattern - Submit: <button> text="Submit"</p><p>/purchase-requests/N (detail): - Comment: <input placeholder="Type a message..."> supports @user and #PR tags - Send: <button> text="Send" (disabled until input has content) </code></pre></p><p><hr /></p><p><h2>Phase 2: Rehearse</h2></p><p>Run through all steps without recording. Verify every selector resolves.</p><p><h3>Why</h3></p><p>Silent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording.</p><p><h3>How</h3></p><p>Use <code>ensureVisible</code>, a wrapper that logs and fails loudly:</p><p><pre><code class="lang-javascript">async function ensureVisible(page, locator, label) { const el = typeof locator === 'string' ? page.locator(locator).first() : locator; const visible = await el.isVisible().catch(() => false); if (!visible) { const msg = <code>REHEARSAL FAIL: "${label}" not found - selector: ${typeof locator === 'string' ? locator : '(locator object)'}</code>; console.error(msg); const found = await page.evaluate(() => { return Array.from(document.querySelectorAll('button, input, select, textarea, a')) .filter(el => el.offsetParent !== null) .map(el => <code>${el.tagName}[${el.type || ''}] "${el.textContent?.trim().substring(0, 30)}"</code>) .join('\n '); }); console.error(' Visible elements:\n ' + found); return false; } console.log(<code>REHEARSAL OK: "${label}"</code>); return true; } </code></pre></p><p><h3>Rehearsal script structure</h3></p><p><pre><code class="lang-javascript">const steps = [ { label: 'Login email field', selector: '#email' }, { label: 'Login submit', selector: 'button[type="submit"]' }, { label: 'New Request button', selector: 'button:has-text("New Request")' }, { label: 'Budget Code select', selector: 'select' }, { label: 'Delivery date', selector: 'input[type="date"]:visible' }, { label: 'Description field', selector: 'textarea:visible' }, { label: 'Add Item button', selector: 'button:has-text("Add Item")' }, { label: 'Submit button', selector: 'button:has-text("Submit")' }, ];</p><p>let allOk = true; for (const step of steps) { if (!await ensureVisible(page, step.selector, step.label)) { allOk = false; } } if (!allOk) { console.error('REHEARSAL FAILED - fix selectors before recording'); process.exit(1); } console.log('REHEARSAL PASSED - all selectors verified'); </code></pre></p><p><h3>When rehearsal fails</h3></p><p><ul><li>Read the visible-element dump.</li> <li>Find the correct selector.</li> <li>Update the script.</li> <li>Re-run rehearsal.</li> <li>Only proceed when every selector passes.</li> </ul> <hr /></p><p><h2>Phase 3: Record</h2></p><p>Only after discovery and rehearsal pass should you create the recording.</p><p><h3>Recording Principles</h3></p><p>#### 1. Storytelling Flow</p><p>Plan the video as a story. Follow user-specified order, or use this default:</p><p><ul><li><strong>Entry</strong>: Login or navigate to the starting point</li> <li><strong>Context</strong>: Pan the surroundings so viewers orient themselves</li> <li><strong>Action</strong>: Perform the main workflow steps</li> <li><strong>Variation</strong>: Show a secondary feature such as settings, theme, or localization</li> <li><strong>Result</strong>: Show the outcome, confirmation, or new state</li> </ul> #### 2. Pacing</p><p><ul><li>After login: <code>4s</code></li> <li>After navigation: <code>3s</code></li> <li>After clicking a button: <code>2s</code></li> <li>Between major steps: <code>1.5-2s</code></li> <li>After the final action: <code>3s</code></li> <li>Typing delay: <code>25-40ms</code> per character</li> </ul> #### 3. Cursor Overlay</p><p>Inject an SVG arrow cursor that follows mouse movements:</p><p><pre><code class="lang-javascript">async function injectCursor(page) { await page.evaluate(() => { if (document.getElementById('demo-cursor')) return; const cursor = document.createElement('div'); cursor.id = 'demo-cursor'; cursor.innerHTML = <code><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 3L19 12L12 13L9 20L5 3Z" fill="white" stroke="black" stroke-width="1.5" stroke-linejoin="round"/> </svg></code>; cursor.style.cssText = <code> position: fixed; z-index: 999999; pointer-events: none; width: 24px; height: 24px; transition: left 0.1s, top 0.1s; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)); </code>; cursor.style.left = '0px'; cursor.style.top = '0px'; document.body.appendChild(cursor); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); }); } </code></pre></p><p>Call <code>injectCursor(page)</code> after every page navigation because the overlay is destroyed on navigate.</p><p>#### 4. Mouse Movement</p><p>Never teleport the cursor. Move to the target before clicking:</p><p><pre><code class="lang-javascript">async function moveAndClick(page, locator, label, opts = {}) { const { postClickDelay = 800, ...clickOpts } = opts; const el = typeof locator === 'string' ? page.locator(locator).first() : locator; const visible = await el.isVisible().catch(() => false); if (!visible) { console.error(<code>WARNING: moveAndClick skipped - "${label}" not visible</code>); return false; } try { await el.scrollIntoViewIfNeeded(); await page.waitForTimeout(300); const box = await el.boundingBox(); if (box) { await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 10 }); await page.waitForTimeout(400); } await el.click(clickOpts); } catch (e) { console.error(<code>WARNING: moveAndClick failed on "${label}": ${e.message}</code>); return false; } await page.waitForTimeout(postClickDelay); return true; } </code></pre></p><p>Every call should include a descriptive <code>label</code> for debugging.</p><p>#### 5. Typing</p><p>Type visibly, not instant-fill:</p><p><pre><code class="lang-javascript">async function typeSlowly(page, locator, text, label, charDelay = 35) { const el = typeof locator === 'string' ? page.locator(locator).first() : locator; const visible = await el.isVisible().catch(() => false); if (!visible) { console.error(<code>WARNING: typeSlowly skipped - "${label}" not visible</code>); return false; } await moveAndClick(page, el, label); await el.fill(''); await el.pressSequentially(text, { delay: charDelay }); await page.waitForTimeout(500); return true; } </code></pre></p><p>#### 6. Scrolling</p><p>Use smooth scroll instead of jumps:</p><p><pre><code class="lang-javascript">await page.evaluate(() => window.scrollTo({ top: 400, behavior: 'smooth' })); await page.waitForTimeout(1500); </code></pre></p><p>#### 7. Dashboard Panning</p><p>When showing a dashboard or overview page, move the cursor across key elements:</p><p><pre><code class="lang-javascript">async function panElements(page, selector, maxCount = 6) { const elements = await page.locator(selector).all(); for (let i = 0; i < Math.min(elements.length, maxCount); i++) { try { const box = await elements[i].boundingBox(); if (box && box.y < 700) { await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 8 }); await page.waitForTimeout(600); } } catch (e) { console.warn(<code>WARNING: panElements skipped element ${i} (selector: "${selector}"): ${e.message}</code>); } } } </code></pre></p><p>#### 8. Subtitles</p><p>Inject a subtitle bar at the bottom of the viewport:</p><p><pre><code class="lang-javascript">async function injectSubtitleBar(page) { await page.evaluate(() => { if (document.getElementById('demo-subtitle')) return; const bar = document.createElement('div'); bar.id = 'demo-subtitle'; bar.style.cssText = <code> position: fixed; bottom: 0; left: 0; right: 0; z-index: 999998; text-align: center; padding: 12px 24px; background: rgba(0, 0, 0, 0.75); color: white; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0.3px; transition: opacity 0.3s; pointer-events: none; </code>; bar.textContent = ''; bar.style.opacity = '0'; document.body.appendChild(bar); }); }</p><p>async function showSubtitle(page, text) { await page.evaluate((t) => { const bar = document.getElementById('demo-subtitle'); if (!bar) return; if (t) { bar.textContent = t; bar.style.opacity = '1'; } else { bar.style.opacity = '0'; } }, text); if (text) await page.waitForTimeout(800); } </code></pre></p><p>Call <code>injectSubtitleBar(page)</code> alongside <code>injectCursor(page)</code> after every navigation.</p><p>Usage pattern:</p><p><pre><code class="lang-javascript">await showSubtitle(page, 'Step 1 - Logging in'); await showSubtitle(page, 'Step 2 - Dashboard overview'); await showSubtitle(page, ''); </code></pre></p><p>Guidelines:</p><p><ul><li>Keep subtitle text short, ideally under 60 characters.</li> <li>Use <code>Step N - Action</code> format for consistency.</li> <li>Clear the subtitle during long pauses where the UI can speak for itself.</li> </ul> <h2>Script Template</h2></p><p><pre><code class="lang-javascript">'use strict'; const { chromium } = require('playwright'); const path = require('path'); const fs = require('fs');</p><p>const BASE_URL = process.env.QA_BASE_URL || 'http://localhost:3000'; const VIDEO_DIR = path.join(__dirname, 'screenshots'); const OUTPUT_NAME = 'demo-FEATURE.webm'; const REHEARSAL = process.argv.includes('--rehearse');</p><p>// Paste injectCursor, injectSubtitleBar, showSubtitle, moveAndClick, // typeSlowly, ensureVisible, and panElements here.</p><p>(async () => { const browser = await chromium.launch({ headless: true });</p><p> if (REHEARSAL) { const context = await browser.newContext({ viewport: { width: 1280, height: 720 } }); const page = await context.newPage(); // Navigate through the flow and run ensureVisible for each selector. await browser.close(); return; }</p><p> const context = await browser.newContext({ recordVideo: { dir: VIDEO_DIR, size: { width: 1280, height: 720 } }, viewport: { width: 1280, height: 720 } }); const page = await context.newPage();</p><p> try { await injectCursor(page); await injectSubtitleBar(page);</p><p> await showSubtitle(page, 'Step 1 - Logging in'); // login actions</p><p> await page.goto(<code>${BASE_URL}/dashboard</code>); await injectCursor(page); await injectSubtitleBar(page); await showSubtitle(page, 'Step 2 - Dashboard overview'); // pan dashboard</p><p> await showSubtitle(page, 'Step 3 - Main workflow'); // action sequence</p><p> await showSubtitle(page, 'Step 4 - Result'); // final reveal await showSubtitle(page, ''); } catch (err) { console.error('DEMO ERROR:', err.message); } finally { await context.close(); const video = page.video(); if (video) { const src = await video.path(); const dest = path.join(VIDEO_DIR, OUTPUT_NAME); try { fs.copyFileSync(src, dest); console.log('Video saved:', dest); } catch (e) { console.error('ERROR: Failed to copy video:', e.message); console.error(' Source:', src); console.error(' Destination:', dest); } } await browser.close(); } })(); </code></pre></p><p>Usage:</p><p><pre><code class="lang-bash"># Phase 2: Rehearse node demo-script.cjs --rehearse</p><p><h1>Phase 3: Record</h1> node demo-script.cjs </code></pre></p><p><h2>Checklist Before Recording</h2></p><p><ul><li>[ ] Discovery phase completed</li> <li>[ ] Rehearsal passes with all selectors OK</li> <li>[ ] Headless mode enabled</li> <li>[ ] Resolution set to <code>1280x720</code></li> <li>[ ] Cursor and subtitle overlays re-injected after every navigation</li> <li>[ ] <code>showSubtitle(page, 'Step N - ...')</code> used at major transitions</li> <li>[ ] <code>moveAndClick</code> used for all clicks with descriptive labels</li> <li>[ ] <code>typeSlowly</code> used for visible input</li> <li>[ ] No silent catches; helpers log warnings</li> <li>[ ] Smooth scrolling used for content reveal</li> <li>[ ] Key pauses are visible to a human viewer</li> <li>[ ] Flow matches the requested story order</li> <li>[ ] Script reflects the actual UI discovered in phase 1</li> </ul> <h2>Common Pitfalls</h2></p><p><ul><li>Cursor disappears after navigation - re-inject it.</li> <li>Video is too fast - add pauses.</li> <li>Cursor is a dot instead of an arrow - use the SVG overlay.</li> <li>Cursor teleports - move before clicking.</li> <li>Select dropdowns look wrong - show the move, then pick the option.</li> <li>Modals feel abrupt - add a read pause before confirming.</li> <li>Video file path is random - copy it to a stable output name.</li> <li>Selector failures are swallowed - never use silent catch blocks.</li> <li>Field types were assumed - discover them first.</li> <li>Features were assumed - inspect the actual UI before scripting.</li> <li>Placeholder select values look real - watch for <code>"0"</code> and <code>"Select..."</code>.</li> <li>Popups create separate videos - capture popup pages explicitly and merge later if needed.</li> </ul></p></article><div class="mt-16 pt-8 border-t border-[color:var(--line)]"><a class="text-sm text-[color:var(--brand)] font-medium" href="/skills">← All skills</a></div></div></div><!--$--><!--/$--></main><footer class="border-t border-[var(--line)] bg-[var(--paper-2)]"><div class="container-page py-16 lg:py-20"><div class="grid gap-10 sm:gap-12 lg:grid-cols-[1.6fr_repeat(4,_1fr)]"><div><a aria-label="Kodelyth ECC — AI coding toolkit" class="inline-flex text-[var(--ink)]" href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 120" width="153" height="40" aria-label="Kodelyth" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="49,38 68,60 49,82" stroke-width="3.5" stroke-opacity="0.18"></polyline><polyline points="64,35 95,60 64,85" stroke-width="11"></polyline></g><text x="125" y="73" font-size="36" font-weight="700" fill="currentColor" letter-spacing="3" font-family="var(--font-display), 'Space Grotesk', system-ui, sans-serif">KODELYTH</text></svg></a><p class="mt-5 max-w-[34ch] text-[14.5px] leading-[1.65] text-[var(--ink-2)]">Production-grade AI coding toolkit. <!-- -->70<!-- --> agents, <!-- -->195<!-- --> skills, MCP server, codebase graph. Local, zero telemetry. MIT licensed.</p><div class="mt-5 flex flex-wrap items-center gap-2"><span class="pill">v<!-- -->2.4.2</span><span class="pill">70<!-- --> agents</span><span class="pill">195<!-- --> skills</span><span class="pill">MIT</span></div><div class="mt-5 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail text-[var(--ink-3)]" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><a class="text-[14px] font-medium text-[var(--ink-2)] underline-offset-[3px] transition-colors hover:text-[var(--ink)] hover:underline" href="mailto:support@kodelyth.com">support@kodelyth.com</a></div></div><div class="col-span-1 grid grid-cols-2 gap-8 sm:gap-10 lg:col-span-4 lg:grid-cols-4"><nav aria-label="Product"><h3 class="text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]">Product</h3><ul class="mt-5 space-y-3.5"><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/agents">Agents</a></li><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/skills">Skills</a></li><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/install">Install</a></li><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/docs">Documentation</a></li></ul></nav><nav aria-label="Docs"><h3 class="text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]">Docs</h3><ul class="mt-5 space-y-3.5"><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/docs/getting-started">Getting Started</a></li><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/docs/intent-routing">Intent Routing</a></li><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/docs/rtk">RTK Compression</a></li><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/docs/codebase-graph">Codebase Graph</a></li></ul></nav><nav aria-label="Project"><h3 class="text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]">Project</h3><ul class="mt-5 space-y-3.5"><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/changelog">Changelog</a></li><li><a target="_blank" rel="noopener noreferrer" class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="https://github.com/sifxprime/kodelyth-ecc">GitHub</a></li><li><a target="_blank" rel="noopener noreferrer" class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="https://www.npmjs.com/package/kodelyth-ecc">npm</a></li><li><a target="_blank" rel="noopener noreferrer" class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="https://krouter.kodelyth.com">kRouter</a></li></ul></nav><nav aria-label="Legal"><h3 class="text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]">Legal</h3><ul class="mt-5 space-y-3.5"><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/legal/privacy">Privacy</a></li><li><a class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="/legal/terms">Terms</a></li><li><a target="_blank" rel="noopener noreferrer" class="text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]" href="https://github.com/sifxprime/kodelyth-ecc/blob/main/LICENSE">MIT License</a></li></ul></nav></div></div><div class="mt-14 flex flex-col gap-5 border-t border-[var(--line)] pt-6 text-[13px] text-[var(--ink-3)] md:flex-row md:items-center md:justify-between md:gap-6"><p>© <!-- -->2026<!-- --> <a target="_blank" rel="noopener noreferrer" class="font-semibold text-[var(--ink-2)] transition-colors hover:text-[var(--brand)]" href="https://facebook.com/kodelyth">Kodelyth AI Infrastructure</a>. All rights reserved.</p><p class="inline-flex flex-wrap items-center gap-2"><span>Designed and built by</span><a target="_blank" rel="noopener noreferrer" class="font-semibold text-[var(--ink-2)] transition-colors hover:text-[var(--brand)]" href="https://github.com/sifxprime">Shofiqul Islam</a><span aria-hidden="true" class="inline-flex items-center gap-1.5 pl-1"><a target="_blank" rel="noopener noreferrer" aria-label="Shofiqul Islam on GitHub" class="inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]" href="https://github.com/sifxprime"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="13" height="13"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.92.58.11.79-.25.79-.55 0-.27-.01-.99-.02-1.94-3.2.69-3.88-1.54-3.88-1.54-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.2-1.49 3.17-1.18 3.17-1.18.64 1.59.24 2.77.12 3.06.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.41-5.27 5.69.41.35.78 1.05.78 2.12 0 1.53-.01 2.77-.01 3.14 0 .3.21.67.8.55C20.71 21.39 24 17.08 24 12c0-6.35-5.15-11.5-12-11.5z"></path></svg></a><a target="_blank" rel="noopener noreferrer" aria-label="Shofiqul Islam on X" class="inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]" href="https://x.com/sifxprime"><svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z"></path></svg></a><a target="_blank" rel="noopener noreferrer" aria-label="Shofiqul Islam on Facebook" class="inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]" href="https://facebook.com/sifxprime"><svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.16 8.44 9.94v-7.03h-2.54v-2.91h2.54V9.84c0-2.52 1.49-3.91 3.78-3.91 1.09 0 2.24.2 2.24.2v2.47H17.2c-1.24 0-1.63.78-1.63 1.57v1.89h2.77l-.44 2.91h-2.33V22c4.78-.78 8.43-4.94 8.43-9.94z"></path></svg></a><a target="_blank" rel="noopener noreferrer" aria-label="Shofiqul Islam on Instagram" class="inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]" href="https://instagram.com/sifxprime"><svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.71 3.71 0 0 1-1.38-.9 3.71 3.71 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.6c-3.13 0-3.5.01-4.74.07-1.07.05-1.65.23-2.04.38-.51.2-.88.44-1.27.83-.39.39-.63.76-.83 1.27-.15.39-.33.97-.38 2.04C2.68 8.5 2.67 8.87 2.67 12s.01 3.5.07 4.74c.05 1.07.23 1.65.38 2.04.2.51.44.88.83 1.27.39.39.76.63 1.27.83.39.15.97.33 2.04.38 1.24.06 1.61.07 4.74.07s3.5-.01 4.74-.07c1.07-.05 1.65-.23 2.04-.38.51-.2.88-.44 1.27-.83.39-.39.63-.76.83-1.27.15-.39.33-.97.38-2.04.06-1.24.07-1.61.07-4.74s-.01-3.5-.07-4.74c-.05-1.07-.23-1.65-.38-2.04-.2-.51-.44-.88-.83-1.27a3.42 3.42 0 0 0-1.27-.83c-.39-.15-.97-.33-2.04-.38-1.24-.06-1.61-.07-4.74-.07zm0 2.72a5.52 5.52 0 1 1 0 11.04 5.52 5.52 0 0 1 0-11.04zm0 9.1a3.58 3.58 0 1 0 0-7.16 3.58 3.58 0 0 0 0 7.16zm5.74-9.32a1.29 1.29 0 1 1-2.58 0 1.29 1.29 0 0 1 2.58 0z"></path></svg></a></span></p><p class="font-display font-semibold text-[var(--ink-2)]">Build Everything.</p></div></div></footer><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Kodelyth ECC","applicationCategory":"DeveloperApplication","operatingSystem":"macOS, Windows, Linux","description":"Kodelyth Elite Code Crew — 70 specialist AI agents, 194 skills, 97 commands, and universal MCP adapter. Bundled RTK input compression + Terse output compression + codebase graph. Runs locally in Claude Code, Cursor, Windsurf, Codex, Antigravity, and 6 more AI IDEs.","url":"https://ecc.kodelyth.com","downloadUrl":"https://www.npmjs.com/package/kodelyth-ecc","softwareVersion":"2.4.2","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"publisher":{"@type":"Organization","name":"Kodelyth AI Infrastructure","url":"https://kodelyth.com"},"license":"https://github.com/sifxprime/kodelyth-ecc/blob/main/LICENSE"}</script><script src="/_next/static/chunks/2ksctwzxaxsfk.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[39756,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"default\"]\n6:I[97367,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"OutletBoundary\"]\n7:\"$Sreact.suspense\"\na:I[97367,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"ViewportBoundary\"]\nc:I[97367,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"MetadataBoundary\"]\ne:I[68027,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/3tvy2p85cvfd9.css\",\"style\"]\n:HL[\"/_next/static/media/051742360c26797e-s.p.1bkzbscqrt8rl.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/fba5a26ea33df6a3-s.p.18rizl4rsrl42.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"skills\",\"ui-demo\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skills\",{\"children\":[[\"slug\",\"ui-demo\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/3tvy2p85cvfd9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/1xmuzorrosruj.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/18sotvvmcs59d.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",null,[\"$\",\"$L6\",null,{\"children\":[\"$\",\"$7\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@8\"}]}]]}],{},null,false,null]},null,false,\"$@9\"]},null,false,\"$@9\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$7\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Ld\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$e\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/3tvy2p85cvfd9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"Oyj7rnc1L40SZsdxCG-RG\"}\n"])</script><script>self.__next_f.push([1,"f:[]\n9:\"$Wf\"\n"])</script><script>self.__next_f.push([1,"10:T42dc,"])</script><script>self.__next_f.push([1,"\u003cp\u003e\n\u003ch1\u003eUI Demo Video Recorder\u003c/h1\u003e\u003c/p\u003e\u003cp\u003eRecord polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.\u003c/p\u003e\u003cp\u003e\u003ch2\u003eWhen to Use\u003c/h2\u003e\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003eUser asks for a \"demo video\", \"screen recording\", \"walkthrough\", or \"tutorial\"\u003c/li\u003e\n\u003cli\u003eUser wants to showcase a feature or workflow visually\u003c/li\u003e\n\u003cli\u003eUser needs a video for documentation, onboarding, or stakeholder presentation\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eThree-Phase Process\u003c/h2\u003e\u003c/p\u003e\u003cp\u003eEvery demo goes through three phases: \u003cstrong\u003eDiscover -\u003e Rehearse -\u003e Record\u003c/strong\u003e. Never skip straight to recording.\u003c/p\u003e\u003cp\u003e\u003chr /\u003e\u003c/p\u003e\u003cp\u003e\u003ch2\u003ePhase 1: Discover\u003c/h2\u003e\u003c/p\u003e\u003cp\u003eBefore writing any script, explore the target pages to understand what is actually there.\u003c/p\u003e\u003cp\u003e\u003ch3\u003eWhy\u003c/h3\u003e\u003c/p\u003e\u003cp\u003eYou cannot script what you have not seen. Fields may be \u003ccode\u003e\u003cinput\u003e\u003c/code\u003e not \u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e, dropdowns may be custom components not \u003ccode\u003e\u003cselect\u003e\u003c/code\u003e, and comment boxes may support \u003ccode\u003e@mentions\u003c/code\u003e or \u003ccode\u003e#tags\u003c/code\u003e. Assumptions break recordings silently.\u003c/p\u003e\u003cp\u003e\u003ch3\u003eHow\u003c/h3\u003e\u003c/p\u003e\u003cp\u003eNavigate to each page in the flow and dump its interactive elements:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e// Run this for each page in the flow BEFORE writing the demo script\nconst fields = await page.evaluate(() =\u0026gt; {\n const els = [];\n document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el =\u0026gt; {\n if (el.offsetParent !== null) {\n els.push({\n tag: el.tagName,\n type: el.type || '',\n name: el.name || '',\n placeholder: el.placeholder || '',\n text: el.textContent?.trim().substring(0, 40) || '',\n contentEditable: el.contentEditable === 'true',\n role: el.getAttribute('role') || '',\n });\n }\n });\n return els;\n});\nconsole.log(JSON.stringify(fields, null, 2));\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e\u003ch3\u003eWhat to look for\u003c/h3\u003e\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003e\u003cstrong\u003eForm fields\u003c/strong\u003e: Are they \u003ccode\u003e\u003cselect\u003e\u003c/code\u003e, \u003ccode\u003e\u003cinput\u003e\u003c/code\u003e, custom dropdowns, or comboboxes?\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSelect options\u003c/strong\u003e: Dump option values AND text. Placeholders often have \u003ccode\u003evalue=\"0\"\u003c/code\u003e or \u003ccode\u003evalue=\"\"\u003c/code\u003e which looks non-empty. Use \u003ccode\u003eArray.from(el.options).map(o =\u003e ({ value: o.value, text: o.text }))\u003c/code\u003e. Skip options where text includes \"Select\" or value is \u003ccode\u003e\"0\"\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eRich text\u003c/strong\u003e: Does the comment box support \u003ccode\u003e@mentions\u003c/code\u003e, \u003ccode\u003e#tags\u003c/code\u003e, markdown, or emoji? Check placeholder text.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eRequired fields\u003c/strong\u003e: Which fields block form submission? Check \u003ccode\u003erequired\u003c/code\u003e, \u003ccode\u003e*\u003c/code\u003e in labels, and try submitting empty to see validation errors.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDynamic content\u003c/strong\u003e: Do fields appear after other fields are filled?\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eButton labels\u003c/strong\u003e: Exact text such as \u003ccode\u003e\"Submit\"\u003c/code\u003e, \u003ccode\u003e\"Submit Request\"\u003c/code\u003e, or \u003ccode\u003e\"Send\"\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eTable column headers\u003c/strong\u003e: For table-driven modals, map each \u003ccode\u003einput[type=\"number\"]\u003c/code\u003e to its column header instead of assuming all numeric inputs mean the same thing.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003eOutput\u003c/h3\u003e\u003c/p\u003e\u003cp\u003eA field map for each page, used to write correct selectors in the script. Example:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-text\"\u003e/purchase-requests/new:\n - Budget Code: \u0026lt;select\u0026gt; (first select on page, 4 options)\n - Desired Delivery: \u0026lt;input type=\"date\"\u0026gt;\n - Context: \u0026lt;textarea\u0026gt; (not input)\n - BOM table: inline-editable cells with span.cursor-pointer -\u0026gt; input pattern\n - Submit: \u0026lt;button\u0026gt; text=\"Submit\"\u003c/p\u003e\u003cp\u003e/purchase-requests/N (detail):\n - Comment: \u0026lt;input placeholder=\"Type a message...\"\u0026gt; supports @user and #PR tags\n - Send: \u0026lt;button\u0026gt; text=\"Send\" (disabled until input has content)\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e\u003chr /\u003e\u003c/p\u003e\u003cp\u003e\u003ch2\u003ePhase 2: Rehearse\u003c/h2\u003e\u003c/p\u003e\u003cp\u003eRun through all steps without recording. Verify every selector resolves.\u003c/p\u003e\u003cp\u003e\u003ch3\u003eWhy\u003c/h3\u003e\u003c/p\u003e\u003cp\u003eSilent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording.\u003c/p\u003e\u003cp\u003e\u003ch3\u003eHow\u003c/h3\u003e\u003c/p\u003e\u003cp\u003eUse \u003ccode\u003eensureVisible\u003c/code\u003e, a wrapper that logs and fails loudly:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003easync function ensureVisible(page, locator, label) {\n const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n const visible = await el.isVisible().catch(() =\u0026gt; false);\n if (!visible) {\n const msg = \u003ccode\u003eREHEARSAL FAIL: \"${label}\" not found - selector: ${typeof locator === 'string' ? locator : '(locator object)'}\u003c/code\u003e;\n console.error(msg);\n const found = await page.evaluate(() =\u0026gt; {\n return Array.from(document.querySelectorAll('button, input, select, textarea, a'))\n .filter(el =\u0026gt; el.offsetParent !== null)\n .map(el =\u0026gt; \u003ccode\u003e${el.tagName}[${el.type || ''}] \"${el.textContent?.trim().substring(0, 30)}\"\u003c/code\u003e)\n .join('\\n ');\n });\n console.error(' Visible elements:\\n ' + found);\n return false;\n }\n console.log(\u003ccode\u003eREHEARSAL OK: \"${label}\"\u003c/code\u003e);\n return true;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e\u003ch3\u003eRehearsal script structure\u003c/h3\u003e\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003econst steps = [\n { label: 'Login email field', selector: '#email' },\n { label: 'Login submit', selector: 'button[type=\"submit\"]' },\n { label: 'New Request button', selector: 'button:has-text(\"New Request\")' },\n { label: 'Budget Code select', selector: 'select' },\n { label: 'Delivery date', selector: 'input[type=\"date\"]:visible' },\n { label: 'Description field', selector: 'textarea:visible' },\n { label: 'Add Item button', selector: 'button:has-text(\"Add Item\")' },\n { label: 'Submit button', selector: 'button:has-text(\"Submit\")' },\n];\u003c/p\u003e\u003cp\u003elet allOk = true;\nfor (const step of steps) {\n if (!await ensureVisible(page, step.selector, step.label)) {\n allOk = false;\n }\n}\nif (!allOk) {\n console.error('REHEARSAL FAILED - fix selectors before recording');\n process.exit(1);\n}\nconsole.log('REHEARSAL PASSED - all selectors verified');\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e\u003ch3\u003eWhen rehearsal fails\u003c/h3\u003e\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003eRead the visible-element dump.\u003c/li\u003e\n\u003cli\u003eFind the correct selector.\u003c/li\u003e\n\u003cli\u003eUpdate the script.\u003c/li\u003e\n\u003cli\u003eRe-run rehearsal.\u003c/li\u003e\n\u003cli\u003eOnly proceed when every selector passes.\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr /\u003e\u003c/p\u003e\u003cp\u003e\u003ch2\u003ePhase 3: Record\u003c/h2\u003e\u003c/p\u003e\u003cp\u003eOnly after discovery and rehearsal pass should you create the recording.\u003c/p\u003e\u003cp\u003e\u003ch3\u003eRecording Principles\u003c/h3\u003e\u003c/p\u003e\u003cp\u003e#### 1. Storytelling Flow\u003c/p\u003e\u003cp\u003ePlan the video as a story. Follow user-specified order, or use this default:\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003e\u003cstrong\u003eEntry\u003c/strong\u003e: Login or navigate to the starting point\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eContext\u003c/strong\u003e: Pan the surroundings so viewers orient themselves\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAction\u003c/strong\u003e: Perform the main workflow steps\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eVariation\u003c/strong\u003e: Show a secondary feature such as settings, theme, or localization\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eResult\u003c/strong\u003e: Show the outcome, confirmation, or new state\u003c/li\u003e\n\u003c/ul\u003e\n#### 2. Pacing\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003eAfter login: \u003ccode\u003e4s\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eAfter navigation: \u003ccode\u003e3s\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eAfter clicking a button: \u003ccode\u003e2s\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eBetween major steps: \u003ccode\u003e1.5-2s\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eAfter the final action: \u003ccode\u003e3s\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eTyping delay: \u003ccode\u003e25-40ms\u003c/code\u003e per character\u003c/li\u003e\n\u003c/ul\u003e\n#### 3. Cursor Overlay\u003c/p\u003e\u003cp\u003eInject an SVG arrow cursor that follows mouse movements:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003easync function injectCursor(page) {\n await page.evaluate(() =\u0026gt; {\n if (document.getElementById('demo-cursor')) return;\n const cursor = document.createElement('div');\n cursor.id = 'demo-cursor';\n cursor.innerHTML = \u003ccode\u003e\u0026lt;svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\u0026gt;\n \u0026lt;path d=\"M5 3L19 12L12 13L9 20L5 3Z\" fill=\"white\" stroke=\"black\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/\u0026gt;\n \u0026lt;/svg\u0026gt;\u003c/code\u003e;\n cursor.style.cssText = \u003ccode\u003e\n position: fixed; z-index: 999999; pointer-events: none;\n width: 24px; height: 24px;\n transition: left 0.1s, top 0.1s;\n filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));\n \u003c/code\u003e;\n cursor.style.left = '0px';\n cursor.style.top = '0px';\n document.body.appendChild(cursor);\n document.addEventListener('mousemove', (e) =\u0026gt; {\n cursor.style.left = e.clientX + 'px';\n cursor.style.top = e.clientY + 'px';\n });\n });\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003eCall \u003ccode\u003einjectCursor(page)\u003c/code\u003e after every page navigation because the overlay is destroyed on navigate.\u003c/p\u003e\u003cp\u003e#### 4. Mouse Movement\u003c/p\u003e\u003cp\u003eNever teleport the cursor. Move to the target before clicking:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003easync function moveAndClick(page, locator, label, opts = {}) {\n const { postClickDelay = 800, ...clickOpts } = opts;\n const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n const visible = await el.isVisible().catch(() =\u0026gt; false);\n if (!visible) {\n console.error(\u003ccode\u003eWARNING: moveAndClick skipped - \"${label}\" not visible\u003c/code\u003e);\n return false;\n }\n try {\n await el.scrollIntoViewIfNeeded();\n await page.waitForTimeout(300);\n const box = await el.boundingBox();\n if (box) {\n await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 10 });\n await page.waitForTimeout(400);\n }\n await el.click(clickOpts);\n } catch (e) {\n console.error(\u003ccode\u003eWARNING: moveAndClick failed on \"${label}\": ${e.message}\u003c/code\u003e);\n return false;\n }\n await page.waitForTimeout(postClickDelay);\n return true;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003eEvery call should include a descriptive \u003ccode\u003elabel\u003c/code\u003e for debugging.\u003c/p\u003e\u003cp\u003e#### 5. Typing\u003c/p\u003e\u003cp\u003eType visibly, not instant-fill:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003easync function typeSlowly(page, locator, text, label, charDelay = 35) {\n const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n const visible = await el.isVisible().catch(() =\u0026gt; false);\n if (!visible) {\n console.error(\u003ccode\u003eWARNING: typeSlowly skipped - \"${label}\" not visible\u003c/code\u003e);\n return false;\n }\n await moveAndClick(page, el, label);\n await el.fill('');\n await el.pressSequentially(text, { delay: charDelay });\n await page.waitForTimeout(500);\n return true;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e#### 6. Scrolling\u003c/p\u003e\u003cp\u003eUse smooth scroll instead of jumps:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003eawait page.evaluate(() =\u0026gt; window.scrollTo({ top: 400, behavior: 'smooth' }));\nawait page.waitForTimeout(1500);\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e#### 7. Dashboard Panning\u003c/p\u003e\u003cp\u003eWhen showing a dashboard or overview page, move the cursor across key elements:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003easync function panElements(page, selector, maxCount = 6) {\n const elements = await page.locator(selector).all();\n for (let i = 0; i \u0026lt; Math.min(elements.length, maxCount); i++) {\n try {\n const box = await elements[i].boundingBox();\n if (box \u0026amp;\u0026amp; box.y \u0026lt; 700) {\n await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 8 });\n await page.waitForTimeout(600);\n }\n } catch (e) {\n console.warn(\u003ccode\u003eWARNING: panElements skipped element ${i} (selector: \"${selector}\"): ${e.message}\u003c/code\u003e);\n }\n }\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e#### 8. Subtitles\u003c/p\u003e\u003cp\u003eInject a subtitle bar at the bottom of the viewport:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003easync function injectSubtitleBar(page) {\n await page.evaluate(() =\u0026gt; {\n if (document.getElementById('demo-subtitle')) return;\n const bar = document.createElement('div');\n bar.id = 'demo-subtitle';\n bar.style.cssText = \u003ccode\u003e\n position: fixed; bottom: 0; left: 0; right: 0; z-index: 999998;\n text-align: center; padding: 12px 24px;\n background: rgba(0, 0, 0, 0.75);\n color: white; font-family: -apple-system, \"Segoe UI\", sans-serif;\n font-size: 16px; font-weight: 500; letter-spacing: 0.3px;\n transition: opacity 0.3s;\n pointer-events: none;\n \u003c/code\u003e;\n bar.textContent = '';\n bar.style.opacity = '0';\n document.body.appendChild(bar);\n });\n}\u003c/p\u003e\u003cp\u003easync function showSubtitle(page, text) {\n await page.evaluate((t) =\u0026gt; {\n const bar = document.getElementById('demo-subtitle');\n if (!bar) return;\n if (t) {\n bar.textContent = t;\n bar.style.opacity = '1';\n } else {\n bar.style.opacity = '0';\n }\n }, text);\n if (text) await page.waitForTimeout(800);\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003eCall \u003ccode\u003einjectSubtitleBar(page)\u003c/code\u003e alongside \u003ccode\u003einjectCursor(page)\u003c/code\u003e after every navigation.\u003c/p\u003e\u003cp\u003eUsage pattern:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003eawait showSubtitle(page, 'Step 1 - Logging in');\nawait showSubtitle(page, 'Step 2 - Dashboard overview');\nawait showSubtitle(page, '');\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003eGuidelines:\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003eKeep subtitle text short, ideally under 60 characters.\u003c/li\u003e\n\u003cli\u003eUse \u003ccode\u003eStep N - Action\u003c/code\u003e format for consistency.\u003c/li\u003e\n\u003cli\u003eClear the subtitle during long pauses where the UI can speak for itself.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eScript Template\u003c/h2\u003e\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e'use strict';\nconst { chromium } = require('playwright');\nconst path = require('path');\nconst fs = require('fs');\u003c/p\u003e\u003cp\u003econst BASE_URL = process.env.QA_BASE_URL || 'http://localhost:3000';\nconst VIDEO_DIR = path.join(__dirname, 'screenshots');\nconst OUTPUT_NAME = 'demo-FEATURE.webm';\nconst REHEARSAL = process.argv.includes('--rehearse');\u003c/p\u003e\u003cp\u003e// Paste injectCursor, injectSubtitleBar, showSubtitle, moveAndClick,\n// typeSlowly, ensureVisible, and panElements here.\u003c/p\u003e\u003cp\u003e(async () =\u0026gt; {\n const browser = await chromium.launch({ headless: true });\u003c/p\u003e\u003cp\u003e if (REHEARSAL) {\n const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });\n const page = await context.newPage();\n // Navigate through the flow and run ensureVisible for each selector.\n await browser.close();\n return;\n }\u003c/p\u003e\u003cp\u003e const context = await browser.newContext({\n recordVideo: { dir: VIDEO_DIR, size: { width: 1280, height: 720 } },\n viewport: { width: 1280, height: 720 }\n });\n const page = await context.newPage();\u003c/p\u003e\u003cp\u003e try {\n await injectCursor(page);\n await injectSubtitleBar(page);\u003c/p\u003e\u003cp\u003e await showSubtitle(page, 'Step 1 - Logging in');\n // login actions\u003c/p\u003e\u003cp\u003e await page.goto(\u003ccode\u003e${BASE_URL}/dashboard\u003c/code\u003e);\n await injectCursor(page);\n await injectSubtitleBar(page);\n await showSubtitle(page, 'Step 2 - Dashboard overview');\n // pan dashboard\u003c/p\u003e\u003cp\u003e await showSubtitle(page, 'Step 3 - Main workflow');\n // action sequence\u003c/p\u003e\u003cp\u003e await showSubtitle(page, 'Step 4 - Result');\n // final reveal\n await showSubtitle(page, '');\n } catch (err) {\n console.error('DEMO ERROR:', err.message);\n } finally {\n await context.close();\n const video = page.video();\n if (video) {\n const src = await video.path();\n const dest = path.join(VIDEO_DIR, OUTPUT_NAME);\n try {\n fs.copyFileSync(src, dest);\n console.log('Video saved:', dest);\n } catch (e) {\n console.error('ERROR: Failed to copy video:', e.message);\n console.error(' Source:', src);\n console.error(' Destination:', dest);\n }\n }\n await browser.close();\n }\n})();\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003eUsage:\u003c/p\u003e\u003cp\u003e\u003cpre\u003e\u003ccode class=\"lang-bash\"\u003e# Phase 2: Rehearse\nnode demo-script.cjs --rehearse\u003c/p\u003e\u003cp\u003e\u003ch1\u003ePhase 3: Record\u003c/h1\u003e\nnode demo-script.cjs\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp\u003e\u003ch2\u003eChecklist Before Recording\u003c/h2\u003e\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003e[ ] Discovery phase completed\u003c/li\u003e\n\u003cli\u003e[ ] Rehearsal passes with all selectors OK\u003c/li\u003e\n\u003cli\u003e[ ] Headless mode enabled\u003c/li\u003e\n\u003cli\u003e[ ] Resolution set to \u003ccode\u003e1280x720\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e[ ] Cursor and subtitle overlays re-injected after every navigation\u003c/li\u003e\n\u003cli\u003e[ ] \u003ccode\u003eshowSubtitle(page, 'Step N - ...')\u003c/code\u003e used at major transitions\u003c/li\u003e\n\u003cli\u003e[ ] \u003ccode\u003emoveAndClick\u003c/code\u003e used for all clicks with descriptive labels\u003c/li\u003e\n\u003cli\u003e[ ] \u003ccode\u003etypeSlowly\u003c/code\u003e used for visible input\u003c/li\u003e\n\u003cli\u003e[ ] No silent catches; helpers log warnings\u003c/li\u003e\n\u003cli\u003e[ ] Smooth scrolling used for content reveal\u003c/li\u003e\n\u003cli\u003e[ ] Key pauses are visible to a human viewer\u003c/li\u003e\n\u003cli\u003e[ ] Flow matches the requested story order\u003c/li\u003e\n\u003cli\u003e[ ] Script reflects the actual UI discovered in phase 1\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eCommon Pitfalls\u003c/h2\u003e\u003c/p\u003e\u003cp\u003e\u003cul\u003e\u003cli\u003eCursor disappears after navigation - re-inject it.\u003c/li\u003e\n\u003cli\u003eVideo is too fast - add pauses.\u003c/li\u003e\n\u003cli\u003eCursor is a dot instead of an arrow - use the SVG overlay.\u003c/li\u003e\n\u003cli\u003eCursor teleports - move before clicking.\u003c/li\u003e\n\u003cli\u003eSelect dropdowns look wrong - show the move, then pick the option.\u003c/li\u003e\n\u003cli\u003eModals feel abrupt - add a read pause before confirming.\u003c/li\u003e\n\u003cli\u003eVideo file path is random - copy it to a stable output name.\u003c/li\u003e\n\u003cli\u003eSelector failures are swallowed - never use silent catch blocks.\u003c/li\u003e\n\u003cli\u003eField types were assumed - discover them first.\u003c/li\u003e\n\u003cli\u003eFeatures were assumed - inspect the actual UI before scripting.\u003c/li\u003e\n\u003cli\u003ePlaceholder select values look real - watch for \u003ccode\u003e\"0\"\u003c/code\u003e and \u003ccode\u003e\"Select...\"\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003ePopups create separate videos - capture popup pages explicitly and merge later if needed.\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e"])</script><script>self.__next_f.push([1,"5:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"ui-demo — Kodelyth ECC Skill\\\",\\\"applicationCategory\\\":\\\"DeveloperApplication\\\",\\\"operatingSystem\\\":\\\"macOS, Windows, Linux\\\",\\\"description\\\":\\\"Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.\\\",\\\"url\\\":\\\"https://ecc.kodelyth.com/skills/ui-demo\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Kodelyth AI Infrastructure\\\",\\\"url\\\":\\\"https://kodelyth.com\\\"}}\"}}],[\"$\",\"header\",null,{\"className\":\"container-page pt-14 pb-10\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-end justify-between gap-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"max-w-3xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"eyebrow\",\"children\":\"Skill\"}],[\"$\",\"h1\",null,{\"className\":\"text-4xl md:text-5xl font-extrabold tracking-tight text-[color:var(--ink)]\",\"children\":\"ui-demo\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-lg text-[color:var(--ink-2)] leading-relaxed\",\"children\":\"Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.\"}]]}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"container-page pb-20\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-3xl mx-auto\",\"children\":[[\"$\",\"div\",null,{\"className\":\"card bg-[color:var(--paper-2)] p-4 mb-8 flex flex-wrap items-center gap-6 text-sm border-l-4 border-l-[color:var(--brand)]\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[color:var(--ink-4)] font-mono text-xs uppercase mr-2 block mb-1\",\"children\":\"Invoke via:\"}],[\"$\",\"code\",null,{\"className\":\"text-[color:var(--ink)] font-mono font-semibold\",\"children\":[\"use \",\"ui-demo\"]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[color:var(--ink-4)] font-mono text-xs uppercase mr-2 block mb-1\",\"children\":\"Origin:\"}],[\"$\",\"span\",null,{\"className\":\"text-[color:var(--ink-2)] text-sm\",\"children\":\"ECC\"}]]}]]}],[\"$\",\"article\",null,{\"className\":\"prose-doc\",\"dangerouslySetInnerHTML\":{\"__html\":\"$10\"}}],\"$L11\"]}]}]]\n"])</script><script>self.__next_f.push([1,"12:I[22016,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"\"]\n11:[\"$\",\"div\",null,{\"className\":\"mt-16 pt-8 border-t border-[color:var(--line)]\",\"children\":[\"$\",\"$L12\",null,{\"href\":\"/skills\",\"className\":\"text-sm text-[color:var(--brand)] font-medium\",\"children\":\"← All skills\"}]}]\n"])</script><script>self.__next_f.push([1,"2:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"plus_jakarta_sans_24bed2e2-module__wbXiTW__variable jetbrains_mono_7b876037-module__oaonyG__variable\",\"style\":{\"colorScheme\":\"light\"},\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-screen flex flex-col\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#main\",\"className\":\"sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-50 focus:px-4 focus:py-2 focus:bg-[var(--brand)] focus:text-white focus:rounded\",\"children\":\"Skip to main content\"}],\"$L13\",[\"$\",\"main\",null,{\"id\":\"main\",\"className\":\"flex-1\",\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"container-page py-32 text-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"eyebrow\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"text-4xl font-extrabold text-[color:var(--ink)] mb-4\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"text-[color:var(--ink-2)] mb-8\",\"children\":\"The URL you're looking for doesn't exist.\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center gap-3\",\"children\":[[\"$\",\"$L12\",null,{\"href\":\"/\",\"className\":\"btn btn-md btn-brand\",\"children\":\"Home\"}],[\"$\",\"$L12\",null,{\"href\":\"/docs\",\"className\":\"btn btn-md btn-secondary\",\"children\":\"Docs\"}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],\"$L14\",[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"Kodelyth ECC\\\",\\\"applicationCategory\\\":\\\"DeveloperApplication\\\",\\\"operatingSystem\\\":\\\"macOS, Windows, Linux\\\",\\\"description\\\":\\\"Kodelyth Elite Code Crew — 70 specialist AI agents, 194 skills, 97 commands, and universal MCP adapter. Bundled RTK input compression + Terse output compression + codebase graph. Runs locally in Claude Code, Cursor, Windsurf, Codex, Antigravity, and 6 more AI IDEs.\\\",\\\"url\\\":\\\"https://ecc.kodelyth.com\\\",\\\"downloadUrl\\\":\\\"https://www.npmjs.com/package/kodelyth-ecc\\\",\\\"softwareVersion\\\":\\\"2.4.2\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Kodelyth AI Infrastructure\\\",\\\"url\\\":\\\"https://kodelyth.com\\\"},\\\"license\\\":\\\"https://github.com/sifxprime/kodelyth-ecc/blob/main/LICENSE\\\"}\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#ffffff\"}],[\"$\",\"meta\",\"3\",{\"name\":\"color-scheme\",\"content\":\"light\"}]]\n"])</script><script>self.__next_f.push([1,"13:[\"$\",\"header\",null,{\"className\":\"sticky top-0 z-40 w-full border-b border-[var(--line)] bg-[var(--paper)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--paper)]/75\",\"children\":[\"$\",\"div\",null,{\"className\":\"container-page flex h-[60px] items-center justify-between sm:h-[68px]\",\"children\":[[\"$\",\"$L12\",null,{\"href\":\"/\",\"aria-label\":\"Kodelyth ECC — AI coding toolkit\",\"className\":\"group flex items-center gap-2.5 focus:outline-none sm:gap-3\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"relative inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-[10px] bg-[var(--ink)] text-white transition-transform duration-[var(--duration-fast)] group-hover:scale-[1.04]\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 400 400\",\"width\":20,\"height\":20,\"className\":\"$undefined\",\"aria-hidden\":true,\"children\":[[\"$\",\"polyline\",null,{\"points\":\"128,104 184,200 128,296\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":10,\"strokeOpacity\":0.15,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}],[\"$\",\"polyline\",null,{\"points\":\"172,100 260,200 172,300\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":32,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"flex flex-col leading-none\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-display text-[16px] font-bold tracking-[-0.025em] text-[var(--ink)] sm:text-[17px]\",\"children\":\"Kodelyth ECC\"}],[\"$\",\"span\",null,{\"className\":\"mt-[3px] hidden font-mono text-[10px] font-semibold tracking-[0.06em] text-[var(--ink-3)] sm:inline\",\"children\":[\"v\",\"2.4.2\"]}]]}]]}],[\"$\",\"nav\",null,{\"className\":\"hidden items-center md:flex\",\"aria-label\":\"Primary\",\"children\":[[\"$\",\"$L12\",\"/docs\",{\"href\":\"/docs\",\"className\":\"rounded-[var(--radius-sm)] px-3.5 py-2 text-[14px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--ink)]\",\"children\":\"Docs\"}],[\"$\",\"$L12\",\"/agents\",{\"href\":\"/agents\",\"className\":\"rounded-[var(--radius-sm)] px-3.5 py-2 text-[14px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--ink)]\",\"children\":\"Agents\"}],[\"$\",\"$L12\",\"/skills\",{\"href\":\"/skills\",\"className\":\"rounded-[var(--radius-sm)] px-3.5 py-2 text-[14px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--ink)]\",\"children\":\"Skills\"}],[\"$\",\"$L12\",\"/changelog\",{\"href\":\"/changelog\",\"className\":\"rounded-[var(--radius-sm)] px-3.5 py-2 text-[14px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--ink)]\",\"children\":\"Changelog\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5 sm:gap-2\",\"children\":[[\"$\",\"$L12\",null,{\"href\":\"https://github.com/sifxprime/kodelyth-ecc\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Kodelyth ECC on GitHub\",\"className\":\"hidden h-9 w-9 items-center justify-center rounded-[var(--radius-sm)] text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:bg-[var(--paper-3)] hover:text-[var(--ink)] sm:inline-flex\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"width\":17,\"height\":17,\"children\":[\"$\",\"path\",null,{\"d\":\"M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.92.58.11.79-.25.79-.55 0-.27-.01-.99-.02-1.94-3.2.69-3.88-1.54-3.88-1.54-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.2-1.49 3.17-1.18 3.17-1.18.64 1.59.24 2.77.12 3.06.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.41-5.27 5.69.41.35.78 1.05.78 2.12 0 1.53-.01 2.77-.01 3.14 0 .3.21.67.8.55C20.71 21.39 24 17.08 24 12c0-6.35-5.15-11.5-12-11.5z\"}]}]}],\"$L15\",\"$L16\",\"$L17\"]}]]}]}]\n"])</script><script>self.__next_f.push([1,"18:I[28350,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"MobileNav\"]\n15:[\"$\",\"$L12\",null,{\"href\":\"https://www.npmjs.com/package/kodelyth-ecc\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Kodelyth ECC on npm\",\"className\":\"hidden h-9 w-9 items-center justify-center rounded-[var(--radius-sm)] text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:bg-[var(--paper-3)] hover:text-[var(--ink)] sm:inline-flex\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"width\":19,\"height\":19,\"children\":[\"$\",\"path\",null,{\"d\":\"M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z\"}]}]}]\n16:[\"$\",\"$L12\",null,{\"href\":\"/install\",\"className\":\"btn btn-md btn-primary hidden sm:inline-flex\",\"children\":\"Install\"}]\n17:[\"$\",\"$L18\",null,{\"nav\":[{\"href\":\"/docs\",\"label\":\"Docs\"},{\"href\":\"/agents\",\"label\":\"Agents\"},{\"href\":\"/skills\",\"label\":\"Skills\"},{\"href\":\"/changelog\",\"label\":\"Changelog\"}],\"version\":\"2.4.2\"}]\n"])</script><script>self.__next_f.push([1,"19:I[5014,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"14:[\"$\",\"footer\",null,{\"className\":\"border-t border-[var(--line)] bg-[var(--paper-2)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"container-page py-16 lg:py-20\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid gap-10 sm:gap-12 lg:grid-cols-[1.6fr_repeat(4,_1fr)]\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"$L12\",null,{\"href\":\"/\",\"aria-label\":\"Kodelyth ECC — AI coding toolkit\",\"className\":\"inline-flex text-[var(--ink)]\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 460 120\",\"width\":153,\"height\":40,\"className\":\"$undefined\",\"aria-label\":\"Kodelyth\",\"role\":\"img\",\"children\":[[\"$\",\"g\",null,{\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"children\":[[\"$\",\"polyline\",null,{\"points\":\"49,38 68,60 49,82\",\"strokeWidth\":3.5,\"strokeOpacity\":0.18}],[\"$\",\"polyline\",null,{\"points\":\"64,35 95,60 64,85\",\"strokeWidth\":11}]]}],[\"$\",\"text\",null,{\"x\":125,\"y\":73,\"fontSize\":36,\"fontWeight\":700,\"fill\":\"currentColor\",\"letterSpacing\":3,\"fontFamily\":\"var(--font-display), 'Space Grotesk', system-ui, sans-serif\",\"children\":\"KODELYTH\"}]]}]}],[\"$\",\"p\",null,{\"className\":\"mt-5 max-w-[34ch] text-[14.5px] leading-[1.65] text-[var(--ink-2)]\",\"children\":[\"Production-grade AI coding toolkit. \",70,\" agents, \",195,\" skills, MCP server, codebase graph. Local, zero telemetry. MIT licensed.\"]}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"pill\",\"children\":[\"v\",\"2.4.2\"]}],[\"$\",\"span\",null,{\"className\":\"pill\",\"children\":[70,\" agents\"]}],[\"$\",\"span\",null,{\"className\":\"pill\",\"children\":[195,\" skills\"]}],[\"$\",\"span\",null,{\"className\":\"pill\",\"children\":\"MIT\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-2\",\"children\":[[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7\",\"key\":\"132q7q\"}],[\"rect\",{\"x\":\"2\",\"y\":\"4\",\"width\":\"20\",\"height\":\"16\",\"rx\":\"2\",\"key\":\"izxlao\"}]],\"className\":\"lucide-mail text-[var(--ink-3)]\",\"size\":14,\"aria-hidden\":true}],[\"$\",\"$L12\",null,{\"href\":\"mailto:support@kodelyth.com\",\"className\":\"text-[14px] font-medium text-[var(--ink-2)] underline-offset-[3px] transition-colors hover:text-[var(--ink)] hover:underline\",\"children\":\"support@kodelyth.com\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"col-span-1 grid grid-cols-2 gap-8 sm:gap-10 lg:col-span-4 lg:grid-cols-4\",\"children\":[[\"$\",\"nav\",\"Product\",{\"aria-label\":\"Product\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]\",\"children\":\"Product\"}],[\"$\",\"ul\",null,{\"className\":\"mt-5 space-y-3.5\",\"children\":[[\"$\",\"li\",\"/agents\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/agents\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Agents\"}]}],[\"$\",\"li\",\"/skills\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/skills\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Skills\"}]}],[\"$\",\"li\",\"/install\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/install\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Install\"}]}],[\"$\",\"li\",\"/docs\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/docs\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Documentation\"}]}]]}]]}],[\"$\",\"nav\",\"Docs\",{\"aria-label\":\"Docs\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]\",\"children\":\"Docs\"}],[\"$\",\"ul\",null,{\"className\":\"mt-5 space-y-3.5\",\"children\":[[\"$\",\"li\",\"/docs/getting-started\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/docs/getting-started\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Getting Started\"}]}],[\"$\",\"li\",\"/docs/intent-routing\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/docs/intent-routing\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Intent Routing\"}]}],\"$L1a\",\"$L1b\"]}]]}],\"$L1c\",\"$L1d\"]}]]}],\"$L1e\"]}]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"li\",\"/docs/rtk\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/docs/rtk\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"RTK Compression\"}]}]\n1b:[\"$\",\"li\",\"/docs/codebase-graph\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/docs/codebase-graph\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Codebase Graph\"}]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"nav\",\"Project\",{\"aria-label\":\"Project\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]\",\"children\":\"Project\"}],[\"$\",\"ul\",null,{\"className\":\"mt-5 space-y-3.5\",\"children\":[[\"$\",\"li\",\"/changelog\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/changelog\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Changelog\"}]}],[\"$\",\"li\",\"https://github.com/sifxprime/kodelyth-ecc\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"https://github.com/sifxprime/kodelyth-ecc\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",\"https://www.npmjs.com/package/kodelyth-ecc\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"https://www.npmjs.com/package/kodelyth-ecc\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"npm\"}]}],[\"$\",\"li\",\"https://krouter.kodelyth.com\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"https://krouter.kodelyth.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"kRouter\"}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"1d:[\"$\",\"nav\",\"Legal\",{\"aria-label\":\"Legal\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-[11.5px] font-bold uppercase tracking-[0.15em] text-[var(--ink-3)]\",\"children\":\"Legal\"}],[\"$\",\"ul\",null,{\"className\":\"mt-5 space-y-3.5\",\"children\":[[\"$\",\"li\",\"/legal/privacy\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/legal/privacy\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Privacy\"}]}],[\"$\",\"li\",\"/legal/terms\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/legal/terms\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"Terms\"}]}],[\"$\",\"li\",\"https://github.com/sifxprime/kodelyth-ecc/blob/main/LICENSE\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"https://github.com/sifxprime/kodelyth-ecc/blob/main/LICENSE\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-[14.5px] font-medium text-[var(--ink-2)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--brand)]\",\"children\":\"MIT License\"}]}]]}]]}]\n1f:T500,M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.71 3.71 0 0 1-1.38-.9 3.71 3.71 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.6c-3.13 0-3.5.01-4.74.07-1.07.05-1.65.23-2.04.38-.51.2-.88.44-1.27.83-.39.39-.63.76-.83 1.27-.15.39-.33.97-.38 2.04C2.68 8.5 2.67 8.87 2.67 12s.01 3.5.07 4.74c.05 1.07.23 1.65.38 2.04.2.51.44.88.83 1.27.39.39.76.63 1.27.83.39.15.97.33 2.04.38 1.24.06 1.61.07 4.74.07s3.5-.01 4.74-.07c1.07-.05 1.65-.23 2.04-.38.51-.2.88-.44 1.27-.83.39-.39.63-.76.83-1.27.15-.39.33-.97.38-2.04.06-1.24.07-1.61.07-4.74s-.01-3.5-.07-4.74c-.05-1.07-.23-1.65-.38-2.04-.2-.51-.44-.88-.83-1.27a3.42 3.42 0 0 0-1.27-.83c-.39-.15-.97-.33-2.04-.38-1.24-.06-1.61-.07-4.74-.07zm0 2.72a5.52 5.52 0 1 1 0 11.04 5.52 5.52 0 0 1 0-11.04zm0 9.1a3.58 3.58 0 1 0 0-7.16 3.58 3.58 0 0 0 0 7.16zm5.74-9.32a1.29 1.29 0 1 1-2.58 0 1.29 1.29 0 0 1 2.58 0z"])</script><script>self.__next_f.push([1,"1e:[\"$\",\"div\",null,{\"className\":\"mt-14 flex flex-col gap-5 border-t border-[var(--line)] pt-6 text-[13px] text-[var(--ink-3)] md:flex-row md:items-center md:justify-between md:gap-6\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"© \",2026,\" \",[\"$\",\"$L12\",null,{\"href\":\"https://facebook.com/kodelyth\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"font-semibold text-[var(--ink-2)] transition-colors hover:text-[var(--brand)]\",\"children\":\"Kodelyth AI Infrastructure\"}],\". All rights reserved.\"]}],[\"$\",\"p\",null,{\"className\":\"inline-flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Designed and built by\"}],[\"$\",\"$L12\",null,{\"href\":\"https://github.com/sifxprime\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"font-semibold text-[var(--ink-2)] transition-colors hover:text-[var(--brand)]\",\"children\":\"Shofiqul Islam\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"inline-flex items-center gap-1.5 pl-1\",\"children\":[[\"$\",\"$L12\",\"https://github.com/sifxprime\",{\"href\":\"https://github.com/sifxprime\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Shofiqul Islam on GitHub\",\"className\":\"inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"width\":13,\"height\":13,\"children\":[\"$\",\"path\",null,{\"d\":\"M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.92.58.11.79-.25.79-.55 0-.27-.01-.99-.02-1.94-3.2.69-3.88-1.54-3.88-1.54-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.2-1.49 3.17-1.18 3.17-1.18.64 1.59.24 2.77.12 3.06.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.41-5.27 5.69.41.35.78 1.05.78 2.12 0 1.53-.01 2.77-.01 3.14 0 .3.21.67.8.55C20.71 21.39 24 17.08 24 12c0-6.35-5.15-11.5-12-11.5z\"}]}]}],[\"$\",\"$L12\",\"https://x.com/sifxprime\",{\"href\":\"https://x.com/sifxprime\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Shofiqul Islam on X\",\"className\":\"inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"width\":13,\"height\":13,\"fill\":\"currentColor\",\"aria-hidden\":true,\"children\":[\"$\",\"path\",null,{\"d\":\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z\"}]}]}],[\"$\",\"$L12\",\"https://facebook.com/sifxprime\",{\"href\":\"https://facebook.com/sifxprime\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Shofiqul Islam on Facebook\",\"className\":\"inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"width\":13,\"height\":13,\"fill\":\"currentColor\",\"aria-hidden\":true,\"children\":[\"$\",\"path\",null,{\"d\":\"M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.16 8.44 9.94v-7.03h-2.54v-2.91h2.54V9.84c0-2.52 1.49-3.91 3.78-3.91 1.09 0 2.24.2 2.24.2v2.47H17.2c-1.24 0-1.63.78-1.63 1.57v1.89h2.77l-.44 2.91h-2.33V22c4.78-.78 8.43-4.94 8.43-9.94z\"}]}]}],[\"$\",\"$L12\",\"https://instagram.com/sifxprime\",{\"href\":\"https://instagram.com/sifxprime\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Shofiqul Islam on Instagram\",\"className\":\"inline-flex h-6 w-6 items-center justify-center rounded text-[var(--ink-3)] transition-colors hover:text-[var(--ink)]\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"width\":13,\"height\":13,\"fill\":\"currentColor\",\"aria-hidden\":true,\"children\":[\"$\",\"path\",null,{\"d\":\"$1f\"}]}]}]]}]]}],\"$L20\"]}]\n"])</script><script>self.__next_f.push([1,"20:[\"$\",\"p\",null,{\"className\":\"font-display font-semibold text-[var(--ink-2)]\",\"children\":\"Build Everything.\"}]\n"])</script><script>self.__next_f.push([1,"21:I[27201,[\"/_next/static/chunks/1xmuzorrosruj.js\",\"/_next/static/chunks/18sotvvmcs59d.js\"],\"IconMark\"]\n8:null\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"title\",\"0\",{\"children\":\"ui-demo — Kodelyth ECC skill · Kodelyth ECC\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"Kodelyth ECC\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Kodelyth AI Infrastructure\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"generator\",\"content\":\"Next.js\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"ui-demo,Kodelyth skill,AI skill,Claude Code skill,Cursor skill\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"8\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"9\",{\"name\":\"category\",\"content\":\"developer tools\"}],[\"$\",\"link\",\"10\",{\"rel\":\"canonical\",\"href\":\"https://ecc.kodelyth.com/skills/ui-demo\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:title\",\"content\":\"ui-demo — Kodelyth ECC\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:description\",\"content\":\"Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:url\",\"content\":\"https://ecc.kodelyth.com/skills/ui-demo\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:title\",\"content\":\"ui-demo\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:description\",\"content\":\"Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.\"}],[\"$\",\"link\",\"18\",{\"rel\":\"shortcut icon\",\"href\":\"/brand/kodelyth-mark.svg\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/brand/kodelyth-mark.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/icon-192.png\",\"type\":\"image/png\",\"sizes\":\"192x192\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/icon-512.png\",\"type\":\"image/png\",\"sizes\":\"512x512\"}],[\"$\",\"link\",\"22\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\"}],[\"$\",\"$L21\",\"23\",{}]]\n"])</script></body></html>