@iamdangavin/claude-skill-vitepress-docs 3.1.0 → 3.1.4

package/commands/vitedocs/capture.md

@@ -123,6 +123,10 @@ for (const cap of captures) {
   const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
   await page.goto(cap.url, { waitUntil: 'load', timeout: 60000 });
   await page.waitForTimeout(cap.settle);
+  await page.evaluate(() => {
+    const el = document.getElementById('devtools-indicator');
+    if (el) el.style.setProperty('display', 'none', 'important');
+  });
   await page.screenshot({ path: cap.path, fullPage: false });
   await page.close();
   console.log('Captured', cap.path);
@@ -134,6 +138,8 @@ SCRIPT
 
 Adjust `settle` based on stack: WordPress/non-SPA → `500`, Next.js/SPA → `2000`–`4000`.
 
+The `devtools-indicator` hide call is safe to include for all stacks — it's a no-op when the element doesn't exist. It specifically targets the Next.js Turbopack dev tools badge (`id="devtools-indicator"`) which is injected at runtime during development and would otherwise appear in every capture.
+
 After the batch completes, display each captured image inline with the Read tool for verification.
 
 ---
@@ -174,12 +180,33 @@ const context = await browser.newContext({
 });
 const page = await context.newPage();
 
+// Inject visible cursor overlay for video recordings
+await page.addInitScript(() => {
+  const dot = document.createElement('div')
+  dot.style.cssText = [
+    'position:fixed', 'width:24px', 'height:24px',
+    'background:#7C3AED', 'border:12px solid rgba(196,181,253,0.55)',
+    'border-radius:50%', 'pointer-events:none', 'z-index:2147483647',
+    'transform:translate(-50%,-50%)', 'transition:left 0.05s,top 0.05s',
+    'box-sizing:content-box'
+  ].join(';')
+  document.addEventListener('DOMContentLoaded', () => document.body.appendChild(dot))
+  document.addEventListener('mousemove', e => {
+    dot.style.left = e.clientX + 'px'
+    dot.style.top  = e.clientY + 'px'
+  })
+});
+
 const t0 = Date.now();
 const elapsed = () => (Date.now() - t0) / 1000;
 const stepTimings = [];
 
 await page.goto(`${BASE_URL}${CAPTURE_URL}`, { waitUntil: 'load', timeout: 60000 });
 await page.waitForTimeout(800);
+await page.evaluate(() => {
+  const el = document.getElementById('devtools-indicator');
+  if (el) el.style.setProperty('display', 'none', 'important');
+});
 
 // STEPS — substituted from manifest steps array:
 // stepTimings.push({ caption: 'CAPTION', time: elapsed() }); await page.click('SELECTOR'); await page.waitForTimeout(MS);

package/commands/vitedocs/generate.md

@@ -597,7 +597,7 @@ const highlightedResponse = computed(() =>
         preload="metadata"
         @timeupdate="onTimeUpdate"
       >
-        <track v-if="vtt" kind="subtitles" :src="vtt" default label="Steps" />
+        <track v-if="vtt" kind="captions" :src="vtt" default label="Steps" />
       </video>
     </div>
     <ol v-if="steps && steps.length" class="vd__steps">
@@ -616,7 +616,7 @@ const highlightedResponse = computed(() =>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const props = defineProps({
   src:     { type: String, required: true },
@@ -626,9 +626,19 @@ const props = defineProps({
   steps:   { type: Array,  default: () => [] },
 })
 
-const videoEl   = ref(null)
+const videoEl    = ref(null)
 const activeStep = ref(-1)
 
+onMounted(() => {
+  if (!videoEl.value || !props.vtt) return
+  videoEl.value.addEventListener('loadedmetadata', () => {
+    const tracks = videoEl.value.textTracks
+    for (let i = 0; i < tracks.length; i++) {
+      tracks[i].mode = 'showing'
+    }
+  })
+})
+
 const onTimeUpdate = () => {
   if (!props.steps.length || !videoEl.value) return
   const t = videoEl.value.currentTime

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iamdangavin/claude-skill-vitepress-docs",
-  "version": "3.1.0",
+  "version": "3.1.4",
   "description": "Installs the vitedocs: Claude Code skill suite — VitePress docs setup, generate, screenshot, sync, brand, and update.",
   "type": "module",
   "bin": {