DevTools

When Nuxt DevTools is enabled, Nuxt Skeletonizer adds a Skeletonizer tab.

It surfaces the live runtime state exposed by useSkeletonizer().stats:

When the adaptive engine is active, stats also carries renderMode (always 'svg'), score, fps, animationTier, memoryMB, cacheHits/cacheMisses, degraded and per-stage timings ({ scanMs, renderMs, totalMs }).

Runtime intelligence (Step 3)

useSkeletonPerformance() exposes everything a DevTools panel needs:

• Pipeline visualizer — per-stage timings (scan / render time), the SVG node count and the live metric series (perf.series('fps')), plus the cache hit ratio.
• SVG Blueprint Inspector — the exact <svg> blueprint the engine produced (perf.blueprint()): the locked viewBox, the namespaced gradient id and every <rect>/<circle> shape, with a flag showing whether it was served from cache.
• Explain Mode — natural-language sentences for every engine decision, e.g. “Blueprint SVG servito dalla cache — scansione saltata” or “Gradiente degradato a pulse: FPS sceso a 24” (perf.explanations()).
• Bottleneck detection — hosts ranked by scan/render cost (perf.bottlenecks()), so you can spot the slowest component to skeletonize.

You can drive all of it interactively in the Performance Lab.

Using stats in your app

The same data is reactive and available anywhere:

<script setup lang="ts">
const { stats } = useSkeletonizer()
</script>

<template>
  <p>{{ stats.bones }} bones · last scan {{ stats.lastScanMs.toFixed(1) }} ms</p>
</template>

This is the data shown live in the Playground.

The DevTools integration is dependency-free — it registers through Nuxt's public devtools:customTabs hook and adds zero overhead to production builds.