diff --git a/apps/docs/build/generate-nav.ts b/apps/docs/build/generate-nav.ts
index d2fbdecc7..7eb35ee7a 100644
--- a/apps/docs/build/generate-nav.ts
+++ b/apps/docs/build/generate-nav.ts
@@ -231,6 +231,9 @@ async function generateNav (): Promise<NavItem[]> {
     pages.get(key)!.push(pageInfo)
   }
 
+  // Inject non-markdown standalone routes (e.g. .vue pages with no backing .md file)
+  standalonePages.push({ item: { name: 'Playground', to: '/playground' }, order: 1.15 })
+
   const nav: NavItem[] = []
   const sectionEntries = Object.entries(SECTIONS).toSorted((a, b) => a[1].order - b[1].order)
   const standalonesSorted = standalonePages.toSorted((a, b) => a.order - b.order)
diff --git a/apps/docs/build/markdown.ts b/apps/docs/build/markdown.ts
index 4418ecf2e..7fb521e6f 100644
--- a/apps/docs/build/markdown.ts
+++ b/apps/docs/build/markdown.ts
@@ -256,7 +256,7 @@ export default async function MarkdownPlugin () {
         // Look ahead: blockquote_open -> paragraph_open -> inline
         const inlineToken = tokens[index + 2]
         if (inlineToken?.type === 'inline' && inlineToken.content) {
-          const match = inlineToken.content.match(/^\[!(TIP|INFO|WARNING|ERROR|ASKAI|DISCORD|TOUR)\]\s*(.*)/)
+          const match = inlineToken.content.match(/^\[!(TIP|INFO|WARNING|ERROR|ASKAI|DISCORD|TOUR|TRY)\]\s*(.*)/)
           if (match) {
             const type = match[1].toLowerCase()
             env._calloutType = type
@@ -292,8 +292,8 @@ export default async function MarkdownPlugin () {
             if (inlineToken.children?.length) {
               const firstChild = inlineToken.children[0]
               if (firstChild?.type === 'text') {
-                // Only TIP|INFO|WARNING|ERROR reach here - ASKAI, DISCORD, TOUR return early with cleared content
-                firstChild.content = firstChild.content.replace(/^\[!(TIP|INFO|WARNING|ERROR)\]\s*/, '')
+                // Only TIP|INFO|WARNING|ERROR|TRY reach here - ASKAI, DISCORD, TOUR return early with cleared content
+                firstChild.content = firstChild.content.replace(/^\[!(TIP|INFO|WARNING|ERROR|TRY)\]\s*/, '')
               }
             }
 
diff --git a/apps/docs/package.json b/apps/docs/package.json
index bf9cbeb20..eb0ed99c2 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -38,6 +38,7 @@
     "@mdi/js": "catalog:",
     "@octokit/core": "catalog:",
     "@unhead/addons": "catalog:",
+    "@vue/repl": "catalog:",
     "@vuetify/auth": "catalog:",
     "@vuetify/paper": "workspace:*",
     "@vuetify/v0": "workspace:*",
diff --git a/apps/docs/src/App.vue b/apps/docs/src/App.vue
index 7321b7eaf..07746798c 100644
--- a/apps/docs/src/App.vue
+++ b/apps/docs/src/App.vue
@@ -61,7 +61,7 @@
 <template>
   <div v-if="showMesh" aria-hidden="true" class="mesh-bg mesh-bg-top" />
   <div v-if="showMesh" aria-hidden="true" class="mesh-bg mesh-bg-bottom" :class="{ visible: showBottomMesh }" />
-  <main class="min-h-screen pt-[72px] text-on-background" :class="{ 'dot-grid': settings.showDotGrid.value }">
+  <main class="min-h-screen text-on-background" :class="{ 'dot-grid': settings.showDotGrid.value }">
     <router-view />
   </main>
 
diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 3e52800ce..2ed76dde5 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppAccount: typeof import('./components/app/AppAccount.vue')['default']
     AppAskInline: typeof import('./components/app/AppAskInline.vue')['default']
+    AppBackground: typeof import('./components/app/AppBackground.vue')['default']
     AppBanner: typeof import('./components/app/AppBanner.vue')['default']
     AppBar: typeof import('./components/app/AppBar.vue')['default']
     AppBreadcrumbs: typeof import('./components/app/AppBreadcrumbs.vue')['default']
@@ -122,6 +123,13 @@ declare module 'vue' {
     DocsSkeleton: typeof import('./components/docs/DocsSkeleton.vue')['default']
     DocsSkillToggle: typeof import('./components/docs/meta/DocsSkillToggle.vue')['default']
     DocsToc: typeof import('./components/docs/DocsToc.vue')['default']
+    EditorBreadcrumbs: typeof import('./components/editor/EditorBreadcrumbs.vue')['default']
+    EditorExamples: typeof import('./components/editor/EditorExamples.vue')['default']
+    EditorFileTree: typeof import('./components/editor/EditorFileTree.vue')['default']
+    EditorIntroPanel: typeof import('./components/editor/EditorIntroPanel.vue')['default']
+    EditorMarkdownPanel: typeof import('./components/editor/EditorMarkdownPanel.vue')['default']
+    EditorTabs: typeof import('./components/editor/EditorTabs.vue')['default']
+    EditorWorkspace: typeof import('./components/editor/EditorWorkspace.vue')['default']
     HomeAiFirst: typeof import('./components/home/HomeAiFirst.vue')['default']
     HomeArchitecture: typeof import('./components/home/HomeArchitecture.vue')['default']
     HomeAskDialog: typeof import('./components/home/HomeAskDialog.vue')['default']
@@ -132,6 +140,18 @@ declare module 'vue' {
     HomeEcosystem: typeof import('./components/home/HomeEcosystem.vue')['default']
     HomeFoundation: typeof import('./components/home/HomeFoundation.vue')['default']
     HomeHero: typeof import('./components/home/HomeHero.vue')['default']
+    PlaygroundBreadcrumbs: typeof import('./components/playground/PlaygroundBreadcrumbs.vue')['default']
+    PlaygroundEditor: typeof import('./components/playground/PlaygroundEditor.vue')['default']
+    PlaygroundExamples: typeof import('./components/playground/PlaygroundExamples.vue')['default']
+    PlaygroundFileTree: typeof import('./components/playground/PlaygroundFileTree.vue')['default']
+    PlaygroundIntroPanel: typeof import('./components/playground/PlaygroundIntroPanel.vue')['default']
+    PlaygroundMarkdownPanel: typeof import('./components/playground/PlaygroundMarkdownPanel.vue')['default']
+    PlaygroundMobileSidebar: typeof import('./components/playground/PlaygroundMobileSidebar.vue')['default']
+    PlaygroundPreview: typeof import('./components/playground/PlaygroundPreview.vue')['default']
+    PlaygroundResizeHandle: typeof import('./components/playground/PlaygroundResizeHandle.vue')['default']
+    PlaygroundTabBar: typeof import('./components/playground/PlaygroundTabBar.vue')['default']
+    PlaygroundTabs: typeof import('./components/playground/PlaygroundTabs.vue')['default']
+    PlaygroundWorkspace: typeof import('./components/playground/PlaygroundWorkspace.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SkillCard: typeof import('./components/skillz/SkillCard.vue')['default']
@@ -143,6 +163,8 @@ declare module 'vue' {
     SkillMetadata: typeof import('./components/skillz/SkillMetadata.vue')['default']
     SkillModeBadge: typeof import('./components/skillz/SkillModeBadge.vue')['default']
     SkillPrerequisites: typeof import('./components/skillz/SkillPrerequisites.vue')['default']
+    SkillzBadge: typeof import('./components/skillz/SkillzBadge.vue')['default']
+    SkillzComplete: typeof import('./components/skillz/SkillzComplete.vue')['default']
     SkillzResume: typeof import('./components/skillz/SkillzResume.vue')['default']
     SkillzTour: typeof import('./components/skillz/SkillzTour.vue')['default']
   }
diff --git a/apps/docs/src/components/app/AppBrowserIcon.vue b/apps/docs/src/components/app/AppBrowserIcon.vue
index 61da1e1b0..e7b69576e 100644
--- a/apps/docs/src/components/app/AppBrowserIcon.vue
+++ b/apps/docs/src/components/app/AppBrowserIcon.vue
@@ -20,11 +20,9 @@
     size?: number
   }
 
-  const props = withDefaults(defineProps<AppBrowserIconProps>(), {
-    size: 18,
-  })
+  const { browser, size = 18 } = defineProps<AppBrowserIconProps>()
 
-  const config = computed(() => browsers[props.browser])
+  const config = computed(() => browsers[browser])
 </script>
 
 <template>
diff --git a/apps/docs/src/components/discovery/DiscoveryContent.vue b/apps/docs/src/components/discovery/DiscoveryContent.vue
index 4ee6e1e43..0a2bb3ea2 100644
--- a/apps/docs/src/components/discovery/DiscoveryContent.vue
+++ b/apps/docs/src/components/discovery/DiscoveryContent.vue
@@ -31,8 +31,8 @@
 
   const breakpoints = useBreakpoints()
   const activePlacement = toRef(() => {
-    // Last step always uses center placement
-    if (discovery.isLast.value) return 'center'
+    // First and last steps always use center placement
+    if (discovery.isFirst.value || discovery.isLast.value) return 'center'
     if (!isNullOrUndefined(placementMobile) && breakpoints.smAndDown.value) return placementMobile
     return placement
   })
diff --git a/apps/docs/src/components/docs/DocsBadge.vue b/apps/docs/src/components/docs/DocsBadge.vue
index 50c0d232b..dcef4f7e5 100644
--- a/apps/docs/src/components/docs/DocsBadge.vue
+++ b/apps/docs/src/components/docs/DocsBadge.vue
@@ -6,7 +6,7 @@
    */
   import { computed } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { label, icon, color, backgroundOpacity = 15, showIcon = true, showLabel = true, iconSize = 14, shape = 'rounded', title } = defineProps<{
     /** Badge text label */
     label: string
     /** Icon name (optional) */
@@ -25,23 +25,17 @@
     shape?: 'rounded' | 'pill'
     /** Tooltip text */
     title?: string
-  }>(), {
-    backgroundOpacity: 15,
-    showIcon: true,
-    showLabel: true,
-    iconSize: 14,
-    shape: 'rounded',
-  })
+  }>()
 
   const badgeStyle = computed(() => {
-    if (!props.color) return undefined
+    if (!color) return undefined
     return {
-      background: `color-mix(in srgb, ${props.color} ${props.backgroundOpacity}%, transparent)`,
-      color: props.color,
+      background: `color-mix(in srgb, ${color} ${backgroundOpacity}%, transparent)`,
+      color,
     }
   })
 
-  const shapeClass = computed(() => props.shape === 'pill' ? 'rounded-full' : 'rounded')
+  const shapeClass = computed(() => shape === 'pill' ? 'rounded-full' : 'rounded')
 </script>
 
 <template>
diff --git a/apps/docs/src/components/docs/DocsBrowserSupport.vue b/apps/docs/src/components/docs/DocsBrowserSupport.vue
index 113e66e2d..1817060d7 100644
--- a/apps/docs/src/components/docs/DocsBrowserSupport.vue
+++ b/apps/docs/src/components/docs/DocsBrowserSupport.vue
@@ -26,34 +26,32 @@
     anchor?: string
   }
 
-  const props = withDefaults(defineProps<DocsBrowserSupportProps>(), {
-    anchor: undefined,
-  })
+  const { feature, versions, anchor } = defineProps<DocsBrowserSupportProps>()
 
   const browsers = computed(() => {
     const list: { browser: BrowserName, name: string, version: string }[] = []
 
-    if (props.versions.chrome) {
-      list.push({ browser: 'chrome', name: 'Chrome', version: props.versions.chrome })
+    if (versions.chrome) {
+      list.push({ browser: 'chrome', name: 'Chrome', version: versions.chrome })
     }
-    if (props.versions.edge) {
-      list.push({ browser: 'edge', name: 'Edge', version: props.versions.edge })
+    if (versions.edge) {
+      list.push({ browser: 'edge', name: 'Edge', version: versions.edge })
     }
-    if (props.versions.firefox) {
-      list.push({ browser: 'firefox', name: 'Firefox', version: props.versions.firefox })
+    if (versions.firefox) {
+      list.push({ browser: 'firefox', name: 'Firefox', version: versions.firefox })
     }
-    if (props.versions.safari) {
-      list.push({ browser: 'safari', name: 'Safari', version: props.versions.safari })
+    if (versions.safari) {
+      list.push({ browser: 'safari', name: 'Safari', version: versions.safari })
     }
-    if (props.versions.opera) {
-      list.push({ browser: 'opera', name: 'Opera', version: props.versions.opera })
+    if (versions.opera) {
+      list.push({ browser: 'opera', name: 'Opera', version: versions.opera })
     }
 
     return list
   })
 
   const hasLimitedSupport = computed(() => {
-    return !props.versions.safari || props.versions.safari === '—'
+    return !versions.safari || versions.safari === '—'
   })
 </script>
 
diff --git a/apps/docs/src/components/docs/DocsCard.vue b/apps/docs/src/components/docs/DocsCard.vue
index dbb7afd03..02300587c 100644
--- a/apps/docs/src/components/docs/DocsCard.vue
+++ b/apps/docs/src/components/docs/DocsCard.vue
@@ -61,7 +61,7 @@
     class="p-4 border border-divider rounded-lg bg-surface no-underline text-inherit transition-[border-color,box-shadow] duration-200"
     :class="{
       'opacity-60 cursor-not-allowed': disabled,
-      'hover:border-primary hover:shadow-md cursor-pointer': isInteractive && !disabled,
+      'hover:border-primary hover:shadow-md cursor-pointer focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2': isInteractive && !disabled,
     }"
     v-bind="linkProps"
   >
diff --git a/apps/docs/src/components/docs/DocsCodeActions.vue b/apps/docs/src/components/docs/DocsCodeActions.vue
index 82b355bd4..9cb9c34eb 100644
--- a/apps/docs/src/components/docs/DocsCodeActions.vue
+++ b/apps/docs/src/components/docs/DocsCodeActions.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
   // Composables
   import { getBinUrl } from '@/composables/bin'
-  import { usePlayground } from '@/composables/playground'
   import { useClipboard } from '@/composables/useClipboard'
+  import { usePlaygroundLink } from '@/composables/usePlaygroundLink'
 
   const props = defineProps<{
     code: string
     language?: string
+    fileName?: string
     title?: string
     binTitle?: string
     playground?: boolean
@@ -28,8 +29,13 @@
     window.open(url, '_blank')
   }
 
-  function openInPlayground () {
-    const url = usePlayground(props.code)
+  async function openInEditor () {
+    let name = props.fileName
+    // Ensure the file has a proper extension (e.g. "Anatomy" → "Anatomy.vue")
+    if (name && !/\.\w+$/.test(name)) {
+      name = `${name}.${props.language || 'vue'}`
+    }
+    const url = await usePlaygroundLink(props.code, name)
     window.open(url, '_blank')
   }
 </script>
@@ -38,11 +44,11 @@
   <div class="flex gap-1">
     <AppIconButton
       v-if="playground"
-      aria-label="Open in Vuetify Play"
+      aria-label="Open in Editor"
       icon="vuetify-play"
-      title="Open in Vuetify Play"
+      title="Open in Editor"
       type="button"
-      @click="openInPlayground"
+      @click="openInEditor"
     />
 
     <AppIconButton
diff --git a/apps/docs/src/components/docs/DocsDiscoveryStep.vue b/apps/docs/src/components/docs/DocsDiscoveryStep.vue
index 80e7a2954..295a43c39 100644
--- a/apps/docs/src/components/docs/DocsDiscoveryStep.vue
+++ b/apps/docs/src/components/docs/DocsDiscoveryStep.vue
@@ -25,6 +25,7 @@
   // Components
   import AppBurst from '@/components/app/AppBurst.vue'
   import { Discovery } from '@/components/discovery'
+  import SkillzBadge from '@/components/skillz/SkillzBadge.vue'
 
   // Composables
   import { useDiscovery } from '@/composables/useDiscovery'
@@ -32,9 +33,6 @@
   // Utilities
   import { computed, onBeforeUnmount, useAttrs, useTemplateRef, watch } from 'vue'
 
-  // Types
-  import { SKILL_LEVEL_META } from '@/types/skill'
-
   defineOptions({ name: 'DocsDiscoveryStep', inheritAttrs: false })
 
   const props = defineProps<DocsDiscoveryStepProps>()
@@ -51,11 +49,7 @@
   const attrs = useAttrs()
   const discovery = useDiscovery()
 
-  const levelMeta = computed(() => {
-    // const tour = discovery.tours.selected.value
-    // if (!tour) return null
-    return SKILL_LEVEL_META[discovery.tours.selectedItem.value?.level || '']
-  })
+  const tourLevel = computed(() => discovery.tours.selectedItem.value?.level)
 
   const isLastStep = computed(() => {
     const index = discovery.steps.selectedIndex.value
@@ -96,14 +90,7 @@
     >
       <!-- Header -->
       <div v-if="!isLastStep" class="flex justify-between items-center mb-4">
-        <span
-          class="skillz-badge inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide px-2 py-1 rounded"
-          :style="levelMeta ? { '--level-color': levelMeta.color } : undefined"
-          :title="levelMeta ? `${levelMeta.label} level` : undefined"
-        >
-          SKILLZ
-          <AppIcon v-if="levelMeta" :icon="levelMeta.icon" :size="14" />
-        </span>
+        <SkillzBadge :level="tourLevel" />
 
         <Discovery.Progress class="text-xs text-on-surface-variant" />
       </div>
@@ -162,10 +149,3 @@
     </Discovery.Content>
   </Discovery.Root>
 </template>
-
-<style scoped>
-.skillz-badge {
-  background: color-mix(in srgb, var(--level-color, var(--v0-primary)) 15%, transparent);
-  color: var(--level-color, var(--v0-primary));
-}
-</style>
diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index cf0ef5b0c..c81e15130 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -7,8 +7,8 @@
 
   // Composables
   import { getMultiFileBinUrl } from '@/composables/bin'
-  import { usePlaygroundMulti } from '@/composables/playground'
   import { useExamples } from '@/composables/useExamples'
+  import { usePlaygroundLinkMulti } from '@/composables/usePlaygroundLink'
 
   // Utilities
   import { toKebab } from '@/utilities/strings'
@@ -24,7 +24,7 @@
     language?: string
   }
 
-  const props = withDefaults(defineProps<{
+  const { file, filePath, filePaths, fileOrders, title, id, code, collapse, files, peek, peekLines = 6 } = defineProps<{
     file?: string
     filePath?: string
     filePaths?: string[]
@@ -36,31 +36,29 @@
     files?: ExampleFile[]
     peek?: boolean
     peekLines?: number
-  }>(), {
-    peekLines: 6,
-  })
+  }>()
 
   // Auto-resolve component and code from filePath(s)
   const examples = useExamples()
   const auto = computed(() => {
-    if (props.filePaths?.length) return examples.resolveMultiple(props.filePaths)
-    if (props.filePath) return examples.resolve(props.filePath)
+    if (filePaths?.length) return examples.resolveMultiple(filePaths)
+    if (filePath) return examples.resolve(filePath)
     return null
   })
 
   const resolvedCode = computed(() =>
-    props.code ?? ('code' in (auto.value || {}) ? (auto.value as { code?: string }).code : undefined),
+    code ?? ('code' in (auto.value || {}) ? (auto.value as { code?: string }).code : undefined),
   )
   const resolvedFiles = computed(() =>
-    props.files ?? ('files' in (auto.value || {}) ? (auto.value as { files?: ExampleFile[] }).files : undefined),
+    files ?? ('files' in (auto.value || {}) ? (auto.value as { files?: ExampleFile[] }).files : undefined),
   )
 
   // Sort files by display order if fileOrders specified
   const displayFiles = computed(() => {
-    const files = resolvedFiles.value
-    if (!files?.length || !props.fileOrders?.some(o => !isUndefined(o))) return files
-    return files
-      .map((f, i) => ({ file: f, order: props.fileOrders![i] ?? Infinity }))
+    const resolvedFilesList = resolvedFiles.value
+    if (!resolvedFilesList?.length || !fileOrders?.some(o => !isUndefined(o))) return resolvedFilesList
+    return resolvedFilesList
+      .map((f, i) => ({ file: f, order: fileOrders![i] ?? Infinity }))
       .toSorted((a, b) => a.order - b.order)
       .map(x => x.file)
   })
@@ -69,7 +67,7 @@
   const hasDescription = computed(() => !!slots.description)
   const descriptionExpanded = ref(false)
 
-  const anchorId = computed(() => props.id ?? (props.title ? `example-${toKebab(props.title)}` : undefined))
+  const anchorId = computed(() => id ?? (title ? `example-${toKebab(title)}` : undefined))
 
   const uid = useId()
   const showCode = ref(false)
@@ -150,20 +148,30 @@
   }
 
   const fileName = computed(() =>
-    props.file?.split('/').pop() || (props.filePath ? `${props.filePath.split('/').pop()}.vue` : ''),
+    file?.split('/').pop() || (filePath ? `${filePath.split('/').pop()}.vue` : ''),
   )
 
-  function openAllInPlayground () {
-    if (!displayFiles.value?.length) return
-    const files = displayFiles.value.map(f => ({ name: f.name, code: f.code }))
-    const url = usePlaygroundMulti(files)
+  // Extract the feature directory from the example path
+  // e.g. 'components/pagination/basic' → 'pagination'
+  const exampleDir = computed(() => {
+    const path = filePath ?? filePaths?.[0]
+    if (!path) return undefined
+    const parts = path.split('/')
+    return parts.length >= 2 ? parts.at(-2) : undefined
+  })
+
+  async function openAllInEditor () {
+    if (!resolvedFiles.value?.length) return
+    // Reverse so dependencies compile before the files that import them
+    const files = resolvedFiles.value.toReversed().map(f => ({ name: f.name, code: f.code }))
+    const url = await usePlaygroundLinkMulti(files, exampleDir.value)
     window.open(url, '_blank')
   }
 
   function openAllInBin () {
     if (!displayFiles.value?.length) return
     const files = displayFiles.value.map(f => ({ name: f.name, code: f.code, language: f.language }))
-    const url = getMultiFileBinUrl(files, props.title)
+    const url = getMultiFileBinUrl(files, title)
     window.open(url, '_blank')
   }
 </script>
@@ -293,9 +301,9 @@
             <div class="ml-auto flex items-center gap-1">
               <button
                 class="size-[30px] rounded text-on-surface-variant hover:bg-surface-variant transition-colors inline-flex items-center justify-center"
-                title="Open in Playground"
+                title="Open in Editor"
                 type="button"
-                @click="openAllInPlayground"
+                @click="openAllInEditor"
               >
                 <AppIcon icon="vuetify-play" :size="16" />
               </button>
diff --git a/apps/docs/src/components/docs/DocsExampleCodePane.vue b/apps/docs/src/components/docs/DocsExampleCodePane.vue
index 0c1ba896b..e3ed09510 100644
--- a/apps/docs/src/components/docs/DocsExampleCodePane.vue
+++ b/apps/docs/src/components/docs/DocsExampleCodePane.vue
@@ -9,7 +9,7 @@
   // Utilities
   import { computed, onMounted, onScopeDispose, shallowRef, useTemplateRef, watch } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { code, language = 'vue', fileName, title, peek, peekLines = 6, showPlayground = true } = defineProps<{
     code: string
     language?: string
     fileName?: string
@@ -17,11 +17,7 @@
     peek?: boolean
     peekLines?: number
     showPlayground?: boolean
-  }>(), {
-    language: 'vue',
-    peekLines: 6,
-    showPlayground: true,
-  })
+  }>()
 
   const expanded = defineModel<boolean>('expanded', { default: false })
 
@@ -41,10 +37,10 @@
   const { highlight: highlightCode } = useCodeHighlighter()
 
   async function highlight () {
-    if (highlightedCode.value || !props.code) return
+    if (highlightedCode.value || !code) return
     isLoading.value = true
     try {
-      const result = await highlightCode({ code: props.code, language: props.language })
+      const result = await highlightCode({ code, language })
       highlightedCode.value = result.html
     } catch (error) {
       logger.error('Failed to highlight code', error)
@@ -65,15 +61,15 @@
   )
 
   // Re-highlight when code changes
-  watch(() => props.code, () => {
+  watch(() => code, () => {
     highlightedCode.value = undefined
     highlight()
   })
 
   // Peek mode
-  const lineCount = computed(() => props.code?.split('\n').length ?? 0)
-  const shouldPeek = computed(() => props.peek && lineCount.value > props.peekLines)
-  const peekHeight = computed(() => `${props.peekLines * 1.5 + 1}rem`)
+  const lineCount = computed(() => code?.split('\n').length ?? 0)
+  const shouldPeek = computed(() => peek && lineCount.value > peekLines)
+  const peekHeight = computed(() => `${peekLines * 1.5 + 1}rem`)
 
   onScopeDispose(() => {
     highlightedCode.value = undefined
@@ -106,6 +102,7 @@
         v-model:wrap="lineWrap"
         bin
         :code="code"
+        :file-name="fileName"
         :language="language"
         :playground="showPlayground"
         show-copy
diff --git a/apps/docs/src/components/docs/DocsMarkup.vue b/apps/docs/src/components/docs/DocsMarkup.vue
index b875a26b0..27d96ebf9 100644
--- a/apps/docs/src/components/docs/DocsMarkup.vue
+++ b/apps/docs/src/components/docs/DocsMarkup.vue
@@ -9,7 +9,7 @@
   import { decodeBase64 } from '@/utilities/decodeBase64'
   import { computed, ref, shallowRef, watch } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { code, language, title, binTitle, playground, collapse, collapseLines = 15, hideFilename } = defineProps<{
     code: string // base64 encoded
     language?: string
     title?: string
@@ -18,9 +18,7 @@
     collapse?: boolean
     collapseLines?: number
     hideFilename?: boolean
-  }>(), {
-    collapseLines: 15,
-  })
+  }>()
 
   const theme = useTheme()
   const settings = useSettings()
@@ -33,13 +31,13 @@
     lineWrap.value = val
   })
 
-  const decodedCode = computed(() => decodeBase64(props.code))
+  const decodedCode = computed(() => decodeBase64(code))
 
   // Collapse state
   const expanded = ref(false)
   const lineCount = computed(() => decodedCode.value.split('\n').length)
-  const shouldCollapse = computed(() => props.collapse && lineCount.value > props.collapseLines)
-  const collapsedHeight = computed(() => `${props.collapseLines * 1.5 + 2.5}rem`)
+  const shouldCollapse = computed(() => collapse && lineCount.value > collapseLines)
+  const collapsedHeight = computed(() => `${collapseLines * 1.5 + 2.5}rem`)
 </script>
 
 <template>
@@ -65,6 +63,7 @@
           bin
           :bin-title="binTitle"
           :code="decodedCode"
+          :file-name="title"
           :language
           :playground
           show-copy
diff --git a/apps/docs/src/components/docs/DocsProgressBar.vue b/apps/docs/src/components/docs/DocsProgressBar.vue
index 23fdd032c..dd28aa9e0 100644
--- a/apps/docs/src/components/docs/DocsProgressBar.vue
+++ b/apps/docs/src/components/docs/DocsProgressBar.vue
@@ -2,7 +2,7 @@
   /**
    * Simple progress bar component with percentage label.
    */
-  withDefaults(defineProps<{
+  const { value, color = 'primary', showLabel = true, size = 'sm' } = defineProps<{
     /** Progress value (0-100) */
     value: number
     /** Color variant */
@@ -11,11 +11,7 @@
     showLabel?: boolean
     /** Size variant */
     size?: 'sm' | 'md'
-  }>(), {
-    color: 'primary',
-    showLabel: true,
-    size: 'sm',
-  })
+  }>()
 </script>
 
 <template>
diff --git a/apps/docs/src/components/docs/DocsSkeleton.vue b/apps/docs/src/components/docs/DocsSkeleton.vue
index 1d266d8d9..cee26ad16 100644
--- a/apps/docs/src/components/docs/DocsSkeleton.vue
+++ b/apps/docs/src/components/docs/DocsSkeleton.vue
@@ -3,7 +3,7 @@
    * Reusable loading skeleton component.
    * Renders animated placeholder bars for loading states.
    */
-  withDefaults(defineProps<{
+  const { lines = 3, height = 'h-4', widths = ['w-full'], gap = 'gap-2', 'static': noAnimation = false, direction = 'col' } = defineProps<{
     /** Number of skeleton lines to render */
     lines?: number
     /** Height class (e.g., 'h-4', 'h-6') */
@@ -16,14 +16,7 @@
     static?: boolean
     /** Layout direction */
     direction?: 'row' | 'col'
-  }>(), {
-    lines: 3,
-    height: 'h-4',
-    widths: () => ['w-full'],
-    gap: 'gap-2',
-    static: false,
-    direction: 'col',
-  })
+  }>()
 </script>
 
 <template>
@@ -37,7 +30,7 @@
       :class="[
         height,
         widths[(i - 1) % widths.length],
-        !static && 'animate-pulse',
+        !noAnimation && 'animate-pulse',
       ]"
     />
   </div>
diff --git a/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue b/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue
index 1b5416d81..11b0189ce 100644
--- a/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue
+++ b/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue
@@ -5,7 +5,7 @@
   // Utilities
   import { computed, toRef, watch } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { composable, hideSummary, collapsed } = defineProps<{
     /** Restrict to a single composable (embed mode) */
     composable?: string
     /** Hide the filter bar */
@@ -14,9 +14,7 @@
     hideSummary?: boolean
     /** Start with groups collapsed */
     collapsed?: boolean
-  }>(), {
-    collapsed: undefined,
-  })
+  }>()
 
   const {
     isLoading,
@@ -28,10 +26,10 @@
     expandedGroups,
     expandAll,
     collapseAll,
-  } = useBenchmarkData({ composable: () => props.composable })
+  } = useBenchmarkData({ composable: () => composable })
 
   // Default expand behavior: expand all when not collapsed
-  const shouldCollapse = computed(() => props.collapsed ?? !!props.composable)
+  const shouldCollapse = computed(() => collapsed ?? !!composable)
 
   // Auto-expand groups when search is active
   watch(toRef(() => filter.query.value), query => {
diff --git a/apps/docs/src/components/docs/calloutConfig.ts b/apps/docs/src/components/docs/calloutConfig.ts
index 2973a9907..9652613eb 100644
--- a/apps/docs/src/components/docs/calloutConfig.ts
+++ b/apps/docs/src/components/docs/calloutConfig.ts
@@ -9,7 +9,7 @@ export interface CalloutConfig {
   classes: string
 }
 
-export type CalloutType = 'tip' | 'info' | 'warning' | 'error' | 'askai' | 'discord' | 'tour'
+export type CalloutType = 'tip' | 'info' | 'warning' | 'error' | 'askai' | 'discord' | 'tour' | 'try'
 
 const CALLOUT_CONFIG: Record<CalloutType, CalloutConfig> = {
   tip: {
@@ -47,6 +47,11 @@ const CALLOUT_CONFIG: Record<CalloutType, CalloutConfig> = {
     title: 'Interactive Tour',
     classes: 'bg-tour-10 border-tour-50 text-tour cursor-pointer hover:bg-tour-20 transition-colors',
   },
+  try: {
+    icon: 'code',
+    title: 'Try it',
+    classes: 'bg-accent-10 border-accent-50 text-accent',
+  },
 }
 
 const DEFAULT_CALLOUT_CONFIG: CalloutConfig = {
diff --git a/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue b/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue
new file mode 100644
index 000000000..2e3b08290
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+  // Framework
+  import { Breadcrumbs } from '@vuetify/v0'
+
+  // Utilities
+  import { computed } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const props = defineProps<{
+    store: ReplStore
+  }>()
+
+  const segments = computed(() => {
+    return props.store.activeFile?.filename?.split('/') ?? []
+  })
+</script>
+
+<template>
+  <Breadcrumbs.Root
+    as="div"
+    class="flex items-center min-h-[24px] px-3 border-b border-divider bg-surface text-xs"
+    label="File path"
+  >
+    <Breadcrumbs.List class="flex items-center gap-1.5">
+      <template
+        v-for="(segment, i) in segments"
+        :key="i"
+      >
+        <Breadcrumbs.Divider
+          v-if="i > 0"
+          class="text-on-surface-variant opacity-40"
+        />
+
+        <Breadcrumbs.Item :text="segment">
+          <Breadcrumbs.Page
+            v-if="i === segments.length - 1"
+            class="text-on-surface-variant"
+          >
+            {{ segment }}
+          </Breadcrumbs.Page>
+
+          <Breadcrumbs.Link
+            v-else
+            as="span"
+            class="text-on-surface-variant cursor-default"
+          >
+            {{ segment }}
+          </Breadcrumbs.Link>
+        </Breadcrumbs.Item>
+      </template>
+    </Breadcrumbs.List>
+  </Breadcrumbs.Root>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundEditor.vue b/apps/docs/src/components/playground/PlaygroundEditor.vue
new file mode 100644
index 000000000..480087e92
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundEditor.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+  // Components
+  import { Discovery } from '@/components/discovery'
+
+  // Utilities
+  import { Repl } from '@vue/repl'
+  import Monaco from '@vue/repl/monaco-editor'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, replTheme, previewOptions, isDark, anyResizing } = defineProps<{
+    store: ReplStore
+    replTheme: 'dark' | 'light'
+    previewOptions: { headHTML: string }
+    isDark: boolean
+    anyResizing: boolean
+  }>()
+</script>
+
+<template>
+  <Discovery.Activator
+    active-class="rounded-lg"
+    as="div"
+    class="workspace-repl-wrapper flex flex-col min-h-0 min-w-0 editor-repl"
+    :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
+    step="editor"
+  >
+    <Repl
+      :auto-resize="!anyResizing"
+      class="flex-1 min-h-0"
+      :clear-console="true"
+      :editor="Monaco"
+      :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
+      layout="horizontal"
+      :preview-options="previewOptions"
+      :show-compile-output="false"
+      :show-import-map="false"
+      :show-ts-config="false"
+      :store="store"
+      :theme="replTheme"
+    />
+  </Discovery.Activator>
+</template>
+
+<style scoped>
+  /* REPL theme variables */
+  .editor-repl :deep(.vue-repl) {
+    --header-height: 0px;
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Hide REPL's built-in file tabs */
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
+  }
+
+  /* Hide editor floating toggles — we render Sandbox separately */
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  /* Hide the Repl's preview pane — we render Sandbox separately */
+  .workspace-repl-wrapper :deep(.split-pane .right) {
+    display: none !important;
+  }
+
+  .workspace-repl-wrapper :deep(.split-pane .left) {
+    width: 100% !important;
+  }
+
+  /* Hide the SplitPane divider */
+  .workspace-repl-wrapper :deep(.split-pane .divider) {
+    display: none !important;
+  }
+
+  /* Sandbox fills container */
+  .editor-repl :deep(.vue-repl),
+  .editor-repl :deep(.iframe-container),
+  .editor-repl :deep(iframe) {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/apps/docs/src/components/playground/PlaygroundExamples.vue b/apps/docs/src/components/playground/PlaygroundExamples.vue
new file mode 100644
index 000000000..57ef03c53
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundExamples.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+  // Composables
+  import { generateAppWrapper } from '@/composables/usePlaygroundLink'
+
+  const raw = import.meta.glob('@/examples/**/*.{vue,ts,js}', {
+    query: '?raw',
+    import: 'default',
+  }) as Record<string, () => Promise<string>>
+
+  interface ExampleFile {
+    filename: string
+    loader: () => Promise<string>
+  }
+
+  interface ExampleDir {
+    dir: string
+    label: string
+    files: ExampleFile[]
+  }
+
+  interface ExampleCategory {
+    label: string
+    dirs: ExampleDir[]
+  }
+
+  const emit = defineEmits<{
+    select: [files: Record<string, string>]
+  }>()
+
+  // Parse paths and group by directory (no code loaded yet)
+  const dirMap = new Map<string, ExampleFile[]>()
+
+  for (const [key, loader] of Object.entries(raw)) {
+    const marker = '/examples/'
+    const idx = key.indexOf(marker)
+    if (idx === -1) continue
+
+    const relPath = key.slice(idx + marker.length)
+    const lastSlash = relPath.lastIndexOf('/')
+    const dir = lastSlash === -1 ? '' : relPath.slice(0, lastSlash)
+    const filename = lastSlash === -1 ? relPath : relPath.slice(lastSlash + 1)
+
+    if (!dirMap.has(dir)) dirMap.set(dir, [])
+    dirMap.get(dir)!.push({ filename, loader })
+  }
+
+  // Directories with non-vue helpers or PascalCase .vue files are
+  // multi-file examples (e.g. create-context/ with context.ts + NotificationConsumer.vue).
+  // Directories with only lowercase .vue files contain standalone examples.
+  function isMultiFileExample (files: ExampleFile[]) {
+    return files.some(f =>
+      !f.filename.endsWith('.vue') || /^[A-Z]/.test(f.filename),
+    )
+  }
+
+  // Build categories
+  const ORDER = ['components', 'composables', 'guide']
+
+  const categories: ExampleCategory[] = (() => {
+    const grouped = new Map<string, ExampleDir[]>()
+
+    for (const [dir, files] of dirMap) {
+      if (!files.some(f => f.filename.endsWith('.vue'))) continue
+
+      const parts = dir.split('/')
+      const topLevel = parts[0]
+      const dirLabel = parts.slice(1).join(' / ')
+
+      if (!grouped.has(topLevel)) grouped.set(topLevel, [])
+
+      if (isMultiFileExample(files)) {
+        // Group all files as one example entry
+        grouped.get(topLevel)!.push({ dir, label: dirLabel || dir, files })
+      } else {
+        // Each .vue file is its own example entry
+        for (const file of files) {
+          const name = file.filename.replace(/\.vue$/, '')
+          grouped.get(topLevel)!.push({
+            dir,
+            label: dirLabel ? `${dirLabel} / ${name}` : name,
+            files: [file],
+          })
+        }
+      }
+    }
+
+    return ORDER
+      .filter(cat => grouped.has(cat))
+      .map(cat => ({
+        label: cat.charAt(0).toUpperCase() + cat.slice(1),
+        dirs: grouped.get(cat)!.toSorted((a, b) => a.label.localeCompare(b.label)),
+      }))
+  })()
+
+  async function select (dir: ExampleDir) {
+    // Load all file contents in parallel
+    const loaded = await Promise.all(
+      dir.files.map(async f => ({
+        filename: f.filename,
+        code: await f.loader(),
+      })),
+    )
+
+    const result: Record<string, string> = {}
+
+    // Use the last directory segment as the nested folder name
+    // e.g. 'components/dialog' → 'dialog'
+    const parts = dir.dir.split('/')
+    const folder = parts.at(-1) ?? dir.dir
+
+    for (const file of loaded) {
+      result[`src/${folder}/${file.filename}`] = file.code
+    }
+
+    // Generate App.vue wrapper if none exists
+    const hasAppVue = loaded.some(f => f.filename.toLowerCase() === 'app.vue')
+    if (!hasAppVue) {
+      const vueFiles = loaded.filter(f => f.filename.endsWith('.vue'))
+      const entry = vueFiles.find(f => /^[a-z]/.test(f.filename)) ?? vueFiles[0]
+      if (entry) {
+        result['src/App.vue'] = generateAppWrapper(`${folder}/${entry.filename}`)
+      }
+    }
+
+    emit('select', result)
+  }
+</script>
+
+<template>
+  <div class="max-h-[400px] overflow-y-auto py-1">
+    <div v-for="cat in categories" :key="cat.label" class="mb-1">
+      <div class="px-3 py-1.5 text-xs font-semibold text-on-surface-variant uppercase tracking-wide">
+        {{ cat.label }}
+      </div>
+
+      <button
+        v-for="item in cat.dirs"
+        :key="item.label"
+        class="w-full text-left px-3 py-1.5 text-sm text-on-surface opacity-80 hover:opacity-100 hover:bg-surface-tint transition-colors cursor-pointer"
+        @click="select(item)"
+      >
+        {{ item.label }}
+
+        <span v-if="item.files.length > 1" class="text-xs text-on-surface-variant">
+          {{ item.files.length }} files
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundFileTree.vue b/apps/docs/src/components/playground/PlaygroundFileTree.vue
new file mode 100644
index 000000000..c2b0b8215
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundFileTree.vue
@@ -0,0 +1,340 @@
+<script setup lang="ts">
+  // Framework
+  import { createNested, isString, useProxyRegistry } from '@vuetify/v0'
+
+  // Composables
+  import { useFileTreeCrud } from '@/composables/useFileTreeCrud'
+
+  // Utilities
+  import { computed, nextTick, useTemplateRef } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  // Data
+  import { INFRASTRUCTURE_FILES, REPL_BUILTIN_FILES } from '@/data/playground-defaults'
+
+  const props = defineProps<{
+    store: ReplStore
+  }>()
+
+  const tree = createNested()
+
+  // Derive tree from store.files so it works with any loaded file set
+  // Build nested tree structure from file paths
+  // e.g. 'src/pagination/basic.vue' → src > pagination > basic.vue
+  const srcFiles: string[] = []
+  const projectFiles: string[] = []
+
+  for (const [filename, file] of Object.entries(props.store.files)) {
+    if (REPL_BUILTIN_FILES.includes(filename as typeof REPL_BUILTIN_FILES[number])) continue
+
+    if (file.hidden) {
+      // Show main.ts under src/, other infrastructure files under /
+      if (filename === 'src/main.ts') {
+        srcFiles.push(filename)
+      } else if (INFRASTRUCTURE_FILES.has(filename)) {
+        projectFiles.push(filename)
+      }
+      // Skip alias files created for REPL import resolution
+    } else {
+      srcFiles.push(filename)
+    }
+  }
+
+  function buildChildren (files: string[], root: string) {
+    const folders = new Set<string>()
+    const direct: { id: string, value: string }[] = []
+
+    for (const filepath of files) {
+      // Strip root prefix (e.g. 'src/' → 'pagination/basic.vue')
+      const rel = filepath.startsWith(root + '/') ? filepath.slice(root.length + 1) : filepath
+      const slashIdx = rel.indexOf('/')
+
+      if (slashIdx === -1) {
+        // Direct child file
+        direct.push({ id: filepath, value: rel })
+      } else {
+        // Nested — collect intermediate folder
+        folders.add(rel.slice(0, slashIdx))
+      }
+    }
+
+    const children: { id: string, value: string, children?: ReturnType<typeof buildChildren> }[] = []
+
+    // Add folders first (sorted)
+    for (const folder of [...folders].toSorted()) {
+      const folderId = `${root}/${folder}`
+      const nested = files.filter(f => f.startsWith(folderId + '/'))
+      children.push({
+        id: folderId,
+        value: folder,
+        children: buildChildren(nested, folderId),
+      })
+    }
+
+    // Then direct files (sorted)
+    children.push(...direct.toSorted((a, b) => a.value.localeCompare(b.value)))
+    return children
+  }
+
+  tree.onboard([
+    {
+      id: 'src',
+      value: 'src',
+      children: buildChildren(srcFiles, 'src'),
+    },
+    {
+      id: '/',
+      value: '/',
+      children: [
+        ...projectFiles.map(f => ({ id: f, value: f.split('/').pop()! })),
+        ...REPL_BUILTIN_FILES.map(f => ({ id: f, value: f })),
+      ],
+    },
+  ])
+
+  tree.open('src')
+
+  // Auto-open all nested folders under src
+  for (const id of tree.keys()) {
+    if (!isString(id)) continue
+    if (id.startsWith('src/') && !/\.\w+$/.test(id)) {
+      tree.open(id)
+    }
+  }
+
+  const proxy = useProxyRegistry(tree)
+  const activeFile = computed(() => props.store.activeFile?.filename)
+
+  const {
+    creating, creatingType, pending, input, targetFolder,
+    isFile, fileExt, add, confirm, cancel, deletable, remove,
+  } = useFileTreeCrud(tree, props.store)
+
+  function getVisibleNodes (parentId?: string): string[] {
+    const ids = parentId
+      ? tree.children.get(parentId) ?? []
+      : tree.roots.value.map(r => r.id)
+
+    return (ids as readonly (string | number)[]).flatMap(id => {
+      const result = [String(id)]
+      if (!isFile(String(id)) && tree.opened(id)) {
+        result.push(...getVisibleNodes(String(id)))
+      }
+      return result
+    })
+  }
+
+  const visibleNodes = computed(() => {
+    void proxy.keys.length
+    void tree.openedIds.size
+    return getVisibleNodes()
+  })
+
+  // ID after which the inline input should render (last visible descendant of creating folder)
+  const inputAfter = computed(() => {
+    const folder = creating.value
+    if (!folder) return null
+
+    const nodes = visibleNodes.value
+    const folderIdx = nodes.indexOf(folder)
+    if (folderIdx === -1) return null
+
+    let lastIdx = folderIdx
+    for (let i = folderIdx + 1; i < nodes.length; i++) {
+      if (tree.hasAncestor(nodes[i], folder)) {
+        lastIdx = i
+      } else {
+        break
+      }
+    }
+    return nodes[lastIdx]
+  })
+
+  const treeEl = useTemplateRef<HTMLElement>('tree-el')
+
+  function activate (id: string) {
+    if (isFile(id)) {
+      props.store.setActive(id)
+      const parent = tree.parents.get(id)
+      targetFolder.value = (isString(parent) ? parent : null) ?? 'src'
+    } else {
+      tree.flip(id)
+      targetFolder.value = id
+    }
+  }
+
+  function focusNode (id: string) {
+    nextTick(() => {
+      const el = treeEl.value?.querySelector(`[data-id="${CSS.escape(id)}"]`) as HTMLElement | null
+      el?.focus()
+    })
+  }
+
+  function onKeydown (e: KeyboardEvent, id: string) {
+    const nodes = visibleNodes.value
+    const idx = nodes.indexOf(id)
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault()
+        const next = nodes[idx + 1]
+        if (next) focusNode(next)
+        break
+      }
+      case 'ArrowUp': {
+        e.preventDefault()
+        const prev = nodes[idx - 1]
+        if (prev) focusNode(prev)
+        break
+      }
+      case 'ArrowRight': {
+        e.preventDefault()
+        if (!isFile(id)) {
+          if (tree.opened(id)) {
+            const first = nodes[idx + 1]
+            if (first && tree.hasAncestor(first, id)) focusNode(first)
+          } else {
+            tree.open(id)
+          }
+        }
+        break
+      }
+      case 'ArrowLeft': {
+        e.preventDefault()
+        if (!isFile(id) && tree.opened(id)) {
+          tree.close(id)
+        } else {
+          const parent = tree.parents.get(id)
+          if (isString(parent) && parent !== 'src') focusNode(parent)
+        }
+        break
+      }
+      case 'Enter':
+      case ' ': {
+        e.preventDefault()
+        activate(id)
+        break
+      }
+      case 'Home': {
+        e.preventDefault()
+        if (nodes.length > 0) focusNode(nodes[0])
+        break
+      }
+      case 'End': {
+        e.preventDefault()
+        if (nodes.length > 0) focusNode(nodes.at(-1))
+        break
+      }
+    }
+  }
+</script>
+
+<template>
+  <nav
+    ref="tree-el"
+    aria-label="File browser"
+    class="border-r border-divider bg-surface overflow-y-auto shrink-0 h-100%"
+  >
+    <div class="flex items-center justify-between px-3 py-2">
+      <span class="text-xs font-semibold text-on-surface-variant uppercase tracking-wide">Files</span>
+
+      <div class="flex items-center gap-1">
+        <button
+          aria-label="New file"
+          class="opacity-50 hover:opacity-100 transition-opacity"
+          title="New file"
+          @click="add('file')"
+        >
+          <AppIcon icon="file-plus" :size="14" />
+        </button>
+
+        <button
+          aria-label="New folder"
+          class="opacity-50 hover:opacity-100 transition-opacity"
+          title="New folder"
+          @click="add('folder')"
+        >
+          <AppIcon icon="folder-plus" :size="14" />
+        </button>
+      </div>
+    </div>
+
+    <div aria-label="Project files" role="tree">
+      <template
+        v-for="(id, index) in visibleNodes"
+        :key="id"
+      >
+        <div
+          :aria-expanded="!isFile(id) ? tree.opened(id) : undefined"
+          :aria-selected="isFile(id) && id === activeFile ? true : undefined"
+          class="group/row flex items-center gap-1.5 py-1 pr-2 text-sm cursor-pointer select-none hover:bg-surface-tint transition-colors"
+          :class="isFile(id) && id === activeFile ? 'opacity-100 bg-surface-tint' : 'opacity-80'"
+          :data-id="id"
+          role="treeitem"
+          :style="{ paddingLeft: `${tree.getDepth(id) * 8 + 8}px` }"
+          :tabindex="index === 0 ? 0 : -1"
+          @click="activate(id)"
+          @keydown="onKeydown($event, id)"
+        >
+          <template v-if="!isFile(id)">
+            <AppIcon
+              class="transition-transform duration-150"
+              :class="{ 'rotate-90': tree.opened(id) }"
+              icon="chevron-right"
+              :size="14"
+            />
+            <AppIcon
+              :icon="tree.opened(id) ? 'folder-open' : 'folder'"
+              :size="14"
+            />
+          </template>
+          <template v-else>
+            <span class="w-[14px]" />
+            <AppIcon
+              v-if="fileExt(id)"
+              :icon="fileExt(id)!.icon"
+              :size="14"
+              :style="{ color: fileExt(id)!.color }"
+            />
+            <span v-else class="w-[14px]" />
+          </template>
+
+          <span class="flex-1 truncate" :class="isFile(id) ? 'opacity-80' : 'font-medium opacity-60'">
+            {{ tree.get(id)?.value }}
+          </span>
+
+          <!-- Delete item -->
+          <button
+            v-if="deletable(id)"
+            :aria-label="`Delete ${tree.get(id)?.value}`"
+            class="shrink-0 inline-flex items-center justify-center opacity-0 group-hover/row:opacity-60 hover:!opacity-100 transition-opacity"
+            title="Delete"
+            @click.stop="remove(id)"
+          >
+            <AppIcon icon="close" :size="14" />
+          </button>
+        </div>
+
+        <!-- Inline input at bottom of folder children -->
+        <div
+          v-if="inputAfter === id"
+          class="flex items-center gap-1.5 py-1 pr-2"
+          :style="{ paddingLeft: `${(tree.getDepth(creating!) + 1) * 8 + 8}px` }"
+        >
+          <span class="w-[14px]" />
+          <input
+            :ref="el => input = el as HTMLInputElement"
+            v-model="pending"
+            class="flex-1 min-w-0 bg-transparent text-sm text-on-surface outline-none border-b border-primary"
+            :placeholder="creatingType === 'file' ? 'filename.vue' : 'folder-name'"
+            @blur="confirm"
+            @keydown.enter="confirm"
+            @keydown.esc="cancel"
+          >
+        </div>
+      </template>
+    </div>
+  </nav>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundIntroPanel.md b/apps/docs/src/components/playground/PlaygroundIntroPanel.md
new file mode 100644
index 000000000..8bd417afe
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundIntroPanel.md
@@ -0,0 +1,40 @@
+# Welcome to Vuetify0!
+
+[@vuetify/v0](https://www.npmjs.com/package/@vuetify/v0) gives you headless composables — selection, registration, forms, theming — without any markup opinions. You bring the HTML and CSS; v0 handles the logic. This editor is where you build with them: a Monaco-powered workspace with live preview, type checking, and every v0 export ready to import.
+
+## The environment
+
+The editor ships a complete single-file component setup. Your `App.vue` runs inside a Vue 3 app with these already wired in:
+
+- **Monaco editor** with full TypeScript IntelliSense — autocomplete, hover docs, and error checking for every `@vuetify/v0` export
+- **Live preview** that re-renders as you type
+- **UnoCSS runtime** with `presetWind4` (Tailwind v4 syntax) loaded automatically — no config needed
+- **`createThemePlugin`** installed with `light` and `dark` themes; every theme color is defined and reactive to theme switches
+
+> [!TIP] Theme colors work two ways: CSS custom properties (`var(--v0-primary)`) and UnoCSS utilities (`text-primary`, `bg-surface`, `border-divider`). Use the utilities — they're shorter and theme-aware by default.
+
+## Composables
+
+| Category | Composables |
+|---|---|
+| Selection & State | [createSingle](/composables/selection/create-single), [createGroup](/composables/selection/create-group), [createStep](/composables/selection/create-step), [createNested](/composables/selection/create-nested), [useProxyModel](/composables/reactivity/use-proxy-model) |
+| Forms | [createForm](/composables/forms/create-form) |
+| Browser & Events | [useHotkey](/composables/system/use-hotkey), [useEventListener](/composables/system/use-event-listener), [useClickOutside](/composables/system/use-click-outside), [useBreakpoints](/composables/plugins/use-breakpoints), [useStorage](/composables/plugins/use-storage) |
+| Theming | [useTheme](/composables/plugins/use-theme) |
+| Foundation | [createContext](/composables/foundation/create-context), [createRegistry](/composables/registration/create-registry), [createTokens](/composables/registration/create-tokens) |
+
+## Getting started
+
+Open the **examples** menu in the toolbar and load any demo — you'll get a complete, working project with files, imports, and a live preview that updates as you type. Or skip that entirely: open `App.vue` in the editor and start writing a component from scratch. The preview hot-reloads on every keystroke, so you'll see the result before you finish the thought. Either way, you're writing real Vue 3 code against the full v0 API — no stubs, no simulations.
+
+> [!TOUR] using-the-playground
+
+## Tips
+
+- `Ctrl+B` toggles the file tree sidebar on and off
+- **Double-click** any resize handle to snap it back to its default width
+- Switch between **horizontal** and **vertical** layout using the toggle in the toolbar
+- Add new files in the file tree and import them normally — multi-file projects work out of the box
+- The URL updates as you edit — copy it to share exactly what you built
+
+> [!TRY] Build something in the editor, then copy the URL and open it in a new tab — it opens exactly what you built.
diff --git a/apps/docs/src/components/playground/PlaygroundIntroPanel.vue b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
new file mode 100644
index 000000000..8371bf969
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+  // Components
+  import AppCloseButton from '@/components/app/AppCloseButton.vue'
+
+  // Composables
+  import { useMarkdown } from '@/composables/useMarkdown'
+  import { useMarkdownMount } from '@/composables/useMarkdownMount'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
+
+  // Content
+  import PlaygroundIntroPanelRaw from './PlaygroundIntroPanel.md?raw'
+
+  const { isResizing = false } = defineProps<{
+    isResizing?: boolean
+  }>()
+
+  defineEmits<{
+    close: []
+  }>()
+
+  const { html } = useMarkdown(PlaygroundIntroPanelRaw)
+
+  const contentRef = useTemplateRef<HTMLElement>('content')
+  useMarkdownMount(contentRef, html)
+</script>
+
+<template>
+  <div class="relative flex flex-col h-full overflow-hidden">
+    <!-- Header -->
+    <div class="relative z-[1] flex items-center justify-between px-4 py-2.5 border-b border-divider bg-surface shrink-0">
+      <span class="text-sm font-semibold text-on-surface">Getting Started</span>
+      <AppCloseButton label="Close panel" @click="$emit('close')" />
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 px-5 py-4" :class="isResizing ? 'overflow-y-scroll' : 'overflow-y-auto'">
+      <div ref="content" class="markdown-body intro-content" v-html="html" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  /* Base text — markdown-body doesn't set these for the narrow panel context */
+  .intro-content {
+    font-size: 0.9rem;
+    line-height: 1.7;
+    color: var(--v0-on-surface-variant);
+  }
+
+  /* Smaller headings than markdown-body's defaults (2.25rem / 1.875rem) */
+  .intro-content :deep(h1) {
+    font-size: 1.3rem;
+    margin-bottom: 0.75rem;
+    color: var(--v0-on-surface);
+  }
+
+  .intro-content :deep(h2) {
+    font-size: 1rem;
+    margin-top: 1.25rem;
+    margin-bottom: 0.4rem;
+    color: var(--v0-on-surface);
+  }
+
+  .intro-content :deep(strong) {
+    color: var(--v0-on-surface);
+  }
+</style>
diff --git a/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue b/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue
new file mode 100644
index 000000000..dd1fcdae8
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+  // Framework
+  import { useTheme } from '@vuetify/v0'
+
+  // Components
+  import { Discovery } from '@/components/discovery'
+  import SkillzBadge from '@/components/skillz/SkillzBadge.vue'
+
+  // Composables
+  import { useMarkdownMount } from '@/composables/useMarkdownMount'
+
+  // Utilities
+  import { toRef, useTemplateRef, watch } from 'vue'
+
+  // Types
+  import type { SkillLevel } from '@/types/skill'
+
+  const props = defineProps<{
+    html: string
+    stepLabel: string
+    isFirst: boolean
+    isLast: boolean
+    level?: SkillLevel
+  }>()
+
+  const emit = defineEmits<{
+    prev: []
+    next: []
+  }>()
+
+  const theme = useTheme()
+  const dataTheme = toRef(() => theme.isDark.value ? 'dark' : 'light')
+
+  const contentRef = useTemplateRef<HTMLElement>('content')
+  const scrollRef = useTemplateRef<HTMLElement>('scroll')
+
+  // Mounts DocsCallout and DocsMarkup into the placeholder elements produced by useMarkdown
+  const htmlRef = toRef(() => props.html)
+  useMarkdownMount(contentRef, htmlRef)
+
+  // Scroll to top on each step transition
+  watch(() => props.html, () => {
+    scrollRef.value?.scrollTo(0, 0)
+  })
+</script>
+
+<template>
+  <div class="flex flex-col h-full overflow-hidden">
+    <!-- Header -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-divider bg-surface shrink-0">
+      <SkillzBadge :level="props.level" />
+      <span class="text-xs text-on-surface-variant">{{ props.stepLabel }}</span>
+    </div>
+
+    <!-- Markdown content -->
+    <div ref="scroll" class="flex-1 overflow-y-auto px-5 py-4">
+      <div ref="content" class="markdown-body tutorial-markdown" :data-theme="dataTheme" v-html="props.html" />
+    </div>
+
+    <!-- Step navigation -->
+    <Discovery.Activator as="div" class="flex items-center justify-between px-4 py-3 border-t border-divider bg-surface shrink-0" step="step-nav">
+      <button
+        class="px-3 py-1.5 text-sm rounded bg-surface-tint text-on-surface disabled:opacity-40 transition-colors hover:bg-surface-variant"
+        :disabled="props.isFirst"
+        @click="emit('prev')"
+      >
+        <span class="flex items-center gap-1">
+          <AppIcon icon="left" :size="14" />
+          Previous
+        </span>
+      </button>
+
+      <button
+        class="px-3 py-1.5 text-sm rounded bg-primary text-on-primary transition-colors"
+        @click="emit('next')"
+      >
+        <span class="flex items-center gap-1">
+          Next
+          <AppIcon icon="right" :size="14" />
+        </span>
+      </button>
+    </Discovery.Activator>
+  </div>
+</template>
+
+<style scoped>
+  .tutorial-markdown {
+    font-size: 0.9rem;
+    line-height: 1.7;
+  }
+
+  .tutorial-markdown :deep(h1) {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--v0-on-surface);
+  }
+
+  .tutorial-markdown :deep(h2) {
+    font-size: 1.15rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--v0-on-surface);
+  }
+
+  .tutorial-markdown :deep(p) {
+    margin-bottom: 0.75rem;
+    color: var(--v0-on-surface-variant);
+  }
+
+  .tutorial-markdown :deep(ul),
+  .tutorial-markdown :deep(ol) {
+    margin-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    color: var(--v0-on-surface-variant);
+  }
+
+  .tutorial-markdown :deep(li) {
+    margin-bottom: 0.25rem;
+  }
+
+  .tutorial-markdown :deep(code) {
+    font-size: 0.85em;
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+    background: var(--v0-surface-tint);
+    color: var(--v0-primary);
+  }
+
+  .tutorial-markdown :deep(pre code) {
+    background: transparent;
+    color: inherit;
+  }
+
+  .tutorial-markdown :deep(.docs-markup) {
+    margin: 0.75rem 0;
+  }
+
+  .tutorial-markdown :deep(strong) {
+    color: var(--v0-on-surface);
+    font-weight: 600;
+  }
+
+  .tutorial-markdown :deep(a) {
+    color: var(--v0-primary);
+    text-decoration: none;
+  }
+
+  .tutorial-markdown :deep(a:hover) {
+    text-decoration: underline;
+  }
+</style>
+
+<style>
+  /* Unscoped — targets imperatively mounted DocsMarkup components */
+  .tutorial-markdown .docs-markup .shiki code {
+    padding: 0.75rem 1rem 1rem;
+  }
+</style>
diff --git a/apps/docs/src/components/playground/PlaygroundMobileSidebar.vue b/apps/docs/src/components/playground/PlaygroundMobileSidebar.vue
new file mode 100644
index 000000000..47cee4556
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundMobileSidebar.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  // Components
+  import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, fileTreeKey, zIndex } = defineProps<{
+    store: ReplStore
+    fileTreeKey: number
+    zIndex: number
+  }>()
+
+  const emit = defineEmits<{
+    close: []
+  }>()
+</script>
+
+<template>
+  <div
+    aria-label="File browser"
+    class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface border-r border-divider"
+    role="dialog"
+    :style="{ zIndex }"
+  >
+    <div class="flex items-center justify-end px-2 py-1">
+      <button
+        aria-label="Close file browser"
+        class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+        @click="emit('close')"
+      >
+        <AppIcon icon="close" :size="18" />
+      </button>
+    </div>
+
+    <PlaygroundFileTree
+      :key="fileTreeKey"
+      class="flex-1 min-h-0"
+      :store="store"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundPreview.vue b/apps/docs/src/components/playground/PlaygroundPreview.vue
new file mode 100644
index 000000000..97a50b0f5
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundPreview.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+  // Components
+  import { Discovery } from '@/components/discovery'
+
+  // Utilities
+  import { Sandbox } from '@vue/repl'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, replTheme, previewOptions, isDark, anyResizing } = defineProps<{
+    store: ReplStore
+    replTheme: 'dark' | 'light'
+    previewOptions: { headHTML: string }
+    isDark: boolean
+    anyResizing: boolean
+  }>()
+</script>
+
+<template>
+  <Discovery.Activator
+    active-class="rounded-lg"
+    as="div"
+    class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
+    :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
+    step="preview"
+  >
+    <!-- auto-store-init=false: Repl already calls store.init(); a second call
+         from standalone Sandbox would create duplicate watchers (double compilation,
+         double builtinImportMap watches). See patches/@vue__repl@4.7.1.patch. -->
+    <Sandbox
+      :auto-store-init="false"
+      :clear-console="false"
+      :preview-options="previewOptions"
+      :show="true"
+      :store="store"
+      :theme="replTheme"
+    />
+  </Discovery.Activator>
+</template>
+
+<style scoped>
+  /* REPL theme variables */
+  .editor-repl :deep(.vue-repl) {
+    --header-height: 0px;
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Hide REPL's built-in file tabs */
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
+  }
+
+  /* Hide editor floating toggles */
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  /* Sandbox fills container */
+  .editor-repl :deep(.vue-repl),
+  .editor-repl :deep(.iframe-container),
+  .editor-repl :deep(iframe) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Match iframe bg to preview body to prevent flash */
+  .workspace-preview :deep(iframe) {
+    background-color: var(--v0-background) !important;
+  }
+
+  /* Disable @vue/repl's built-in fade transition on preview iframe */
+  .workspace-preview :deep(.fade-enter-active),
+  .workspace-preview :deep(.fade-leave-active) {
+    transition: none !important;
+  }
+</style>
diff --git a/apps/docs/src/components/playground/PlaygroundResizeHandle.vue b/apps/docs/src/components/playground/PlaygroundResizeHandle.vue
new file mode 100644
index 000000000..0b267f9c0
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundResizeHandle.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// Utilities
+  import { computed } from 'vue'
+
+  const { direction, isResizing = false } = defineProps<{
+    direction: 'col' | 'row'
+    isResizing?: boolean
+  }>()
+
+  const emit = defineEmits<{
+    pointerdown: [event: PointerEvent]
+    dblclick: []
+  }>()
+
+  const classes = computed(() => ({
+    'w-[4px]': direction === 'col',
+    'cursor-col-resize': direction === 'col' && !isResizing,
+    'h-[4px]': direction === 'row',
+    'cursor-row-resize': direction === 'row' && !isResizing,
+    'bg-primary cursor-grabbing': isResizing,
+  }))
+</script>
+
+<template>
+  <div
+    class="bg-divider relative z-10 hover:bg-primary transition-colors"
+    :class="classes"
+    @dblclick="emit('dblclick')"
+    @pointerdown="emit('pointerdown', $event)"
+  >
+    <span
+      class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 rounded inline-flex items-center justify-center bg-surface text-on-surface border border-divider"
+      :class="direction === 'col' ? 'w-4 h-6' : 'w-6 h-4'"
+    >
+      <AppIcon
+        :icon="direction === 'col' ? 'drag-vertical' : 'drag-horizontal'"
+        :size="16"
+      />
+    </span>
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundTabBar.vue b/apps/docs/src/components/playground/PlaygroundTabBar.vue
new file mode 100644
index 000000000..b2a03d96f
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundTabBar.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+  // Components
+  import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, isDesktop, isVertical, mobileView, hideTabs } = defineProps<{
+    store: ReplStore
+    isDesktop: boolean
+    isVertical: boolean
+    mobileView: 'editor' | 'preview'
+    hideTabs: boolean
+  }>()
+
+  const emit = defineEmits<{
+    'update:mobileView': ['editor' | 'preview']
+    'toggle-layout': []
+  }>()
+</script>
+
+<template>
+  <div v-if="!hideTabs" class="flex items-stretch">
+    <PlaygroundTabs class="flex-1 min-w-0" :store="store" />
+
+    <template v-if="!isDesktop">
+      <button
+        class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
+        :class="mobileView === 'editor' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
+        @click="emit('update:mobileView', 'editor')"
+      >
+        Code
+      </button>
+      <button
+        class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
+        :class="mobileView === 'preview' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
+        @click="emit('update:mobileView', 'preview')"
+      >
+        Preview
+      </button>
+    </template>
+
+    <button
+      v-else
+      class="shrink-0 flex items-center justify-center w-9 border-b border-l border-divider bg-surface-variant/30 hover:bg-surface-tint transition-colors"
+      :title="isVertical ? 'Switch to side-by-side layout' : 'Switch to stacked layout'"
+      @click="emit('toggle-layout')"
+    >
+      <AppIcon :icon="isVertical ? 'layout-horizontal' : 'layout-vertical'" :size="16" />
+    </button>
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundTabs.vue b/apps/docs/src/components/playground/PlaygroundTabs.vue
new file mode 100644
index 000000000..8249a703b
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundTabs.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+  // Utilities
+  import { computed, shallowRef, watch } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  // Data
+  import { INFRASTRUCTURE_FILES } from '@/data/playground-defaults'
+
+  const props = defineProps<{
+    store: ReplStore
+  }>()
+
+  function isTabbable (f: { filename: string, hidden?: boolean }) {
+    if (f.filename === 'src/main.ts') return true
+    if (INFRASTRUCTURE_FILES.has(f.filename)) return false
+    if (f.hidden) return false
+    return true
+  }
+
+  // Start with only the active file's tab open
+  const initialClosed = new Set<string>()
+  const active = props.store.activeFile.filename
+  for (const f of Object.values(props.store.files)) {
+    if (isTabbable(f) && f.filename !== active) {
+      initialClosed.add(f.filename)
+    }
+  }
+  const closedTabs = shallowRef(initialClosed)
+
+  // Track tab open order so new tabs appear at the end
+  const tabOrder = shallowRef<string[]>([active])
+
+  const tabs = computed(() => {
+    const open = Object.values(props.store.files)
+      .filter(f => isTabbable(f) && !closedTabs.value.has(f.filename))
+    const order = tabOrder.value
+    return open
+      .toSorted((a, b) => {
+        const ai = order.indexOf(a.filename)
+        const bi = order.indexOf(b.filename)
+        return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi)
+      })
+      .map(f => ({
+        id: f.filename,
+        label: f.filename.split('/').pop()!,
+      }))
+  })
+
+  const activeFile = computed(() => props.store.activeFile?.filename)
+
+  // Re-open tab when file is activated from tree
+  watch(activeFile, file => {
+    if (!file) return
+    if (closedTabs.value.has(file)) {
+      const next = new Set(closedTabs.value)
+      next.delete(file)
+      closedTabs.value = next
+    }
+    if (!tabOrder.value.includes(file)) {
+      tabOrder.value = [...tabOrder.value, file]
+    }
+  })
+
+  function closeTab (id: string) {
+    // Find next tab before modifying state
+    const idx = tabs.value.findIndex(t => t.id === id)
+    const nextTab = tabs.value[idx + 1] ?? tabs.value[idx - 1] ?? tabs.value[0]
+
+    const next = new Set(closedTabs.value)
+    next.add(id)
+    closedTabs.value = next
+
+    // If closing the active file, switch to another tab
+    if (id === activeFile.value && nextTab) {
+      props.store.setActive(nextTab.id)
+    }
+  }
+
+  function onTabKeydown (e: KeyboardEvent, index: number) {
+    const list = tabs.value
+    let target: number | null = null
+
+    switch (e.key) {
+      case 'ArrowRight': {
+        target = (index + 1) % list.length
+        break
+      }
+      case 'ArrowLeft': {
+        target = (index - 1 + list.length) % list.length
+        break
+      }
+      case 'Home': {
+        target = 0
+        break
+      }
+      case 'End': {
+        target = list.length - 1
+        break
+      }
+      default: {
+        return
+      }
+    }
+
+    e.preventDefault()
+    props.store.setActive(list[target].id)
+  }
+</script>
+
+<template>
+  <div
+    aria-label="Open files"
+    class="flex items-end gap-px overflow-x-auto border-b border-divider bg-surface-variant/30"
+    role="tablist"
+  >
+    <div
+      v-for="(tab, index) in tabs"
+      :key="tab.id"
+      :aria-selected="tab.id === activeFile"
+      class="group/tab shrink-0 flex items-center gap-1 pl-3 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
+      :class="[
+        tab.id === activeFile
+          ? 'text-on-surface border-primary bg-surface'
+          : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint',
+        tabs.length > 1 ? 'pr-1' : 'pr-3',
+      ]"
+      role="tab"
+      :tabindex="tab.id === activeFile ? 0 : -1"
+      @click="store.setActive(tab.id)"
+      @keydown="onTabKeydown($event, index)"
+    >
+      <span>{{ tab.label }}</span>
+
+      <button
+        v-if="tabs.length > 1"
+        :aria-label="`Close ${tab.label}`"
+        class="inline-flex items-center justify-center size-4 rounded-sm opacity-0 group-hover/tab:opacity-60 hover:!opacity-100 hover:bg-surface-variant focus-visible:opacity-100 focus-visible:outline-1 focus-visible:outline-primary transition-opacity"
+        tabindex="-1"
+        @click.stop="closeTab(tab.id)"
+      >
+        <AppIcon icon="close" :size="12" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
new file mode 100644
index 000000000..19af119ba
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+  // Framework
+  import { useStack, useStorage } from '@vuetify/v0'
+
+  // Components
+  import { Discovery } from '@/components/discovery'
+  import PlaygroundBreadcrumbs from '@/components/playground/PlaygroundBreadcrumbs.vue'
+  import PlaygroundEditor from '@/components/playground/PlaygroundEditor.vue'
+  import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
+  import PlaygroundMobileSidebar from '@/components/playground/PlaygroundMobileSidebar.vue'
+  import PlaygroundPreview from '@/components/playground/PlaygroundPreview.vue'
+  import PlaygroundResizeHandle from '@/components/playground/PlaygroundResizeHandle.vue'
+  import PlaygroundTabBar from '@/components/playground/PlaygroundTabBar.vue'
+  import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
+
+  // Composables
+  import { useResizeHandle } from '@/composables/useResizeHandle'
+
+  // Utilities
+  import { computed, shallowRef, toRef, watch } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const {
+    store, replTheme, previewOptions, isDark, fileTreeKey, sidebarOpen, isDesktop,
+    externalResizing = false, hideFiles = false, hideTabs = false, hideBreadcrumbs = false,
+    defaultLayout,
+  } = defineProps<{
+    store: ReplStore
+    replTheme: 'dark' | 'light'
+    previewOptions: { headHTML: string }
+    isDark: boolean
+    fileTreeKey: number
+    sidebarOpen: boolean
+    isDesktop: boolean
+    externalResizing?: boolean
+    hideFiles?: boolean
+    hideTabs?: boolean
+    hideBreadcrumbs?: boolean
+    defaultLayout?: 'vertical' | 'horizontal'
+  }>()
+
+  const emit = defineEmits<{
+    'update:sidebarOpen': [value: boolean]
+  }>()
+
+  const storage = useStorage()
+
+  // Mobile: which pane is visible (editor or preview)
+  const mobileView = shallowRef<'editor' | 'preview'>('editor')
+
+  // Split layout preference — user's persistent choice (standard mode only)
+  const splitLayout = storage.get<'vertical' | 'horizontal'>('workspace-split-layout', 'vertical')
+
+  // defaultLayout pins the layout without touching the user's stored preference
+  const isVertical = toRef(() => (defaultLayout ?? splitLayout.value) === 'vertical')
+
+  function toggleSplitLayout () {
+    splitLayout.value = isVertical.value ? 'horizontal' : 'vertical'
+  }
+
+  // Vertical split: editor height %, preview fills rest
+  const vSplitHandle = useResizeHandle({
+    storageKey: 'workspace-split-percent',
+    defaultValue: 50,
+    min: 20,
+    max: 80,
+    direction: 'vertical',
+  })
+
+  // Horizontal split: editor width px, preview fills rest
+  const hSplitHandle = useResizeHandle({
+    storageKey: 'workspace-split-h-px',
+    defaultValue: 500,
+    min: 200,
+    max: 1200,
+    direction: 'horizontal',
+  })
+
+  const activeSplitHandle = toRef(() => isVertical.value ? vSplitHandle : hSplitHandle)
+
+  const fileTreeHandle = useResizeHandle({
+    storageKey: 'workspace-filetree-width',
+    defaultValue: 200,
+    min: 140,
+    max: 400,
+    direction: 'horizontal',
+  })
+
+  const anyResizing = computed(() =>
+    externalResizing || vSplitHandle.isResizing.value || hSplitHandle.isResizing.value || fileTreeHandle.isResizing.value,
+  )
+
+  const showFileTree = computed(() =>
+    sidebarOpen && isDesktop && !hideFiles,
+  )
+
+  const showMobileOverlay = computed(() =>
+    !isDesktop && sidebarOpen && !hideFiles,
+  )
+
+  const stack = useStack()
+  const ticket = stack.register({
+    onDismiss: () => emit('update:sidebarOpen', false),
+  })
+
+  watch(showMobileOverlay, open => {
+    if (open) ticket.select()
+    else ticket.unselect()
+  }, { immediate: true })
+</script>
+
+<template>
+  <div
+    class="flex flex-1 min-w-0 min-h-0 h-full bg-background"
+    :class="[defaultLayout === 'vertical' ? 'flex-col' : 'flex-row', { 'select-none': anyResizing }]"
+  >
+    <!-- Mobile: file browser overlay -->
+    <PlaygroundMobileSidebar
+      v-if="showMobileOverlay"
+      :file-tree-key="fileTreeKey"
+      :store="store"
+      :z-index="ticket.zIndex.value"
+      @close="emit('update:sidebarOpen', false)"
+    />
+
+    <!-- ── PANEL LAYOUT: file tree beside editor, preview full-width below ── -->
+    <template v-if="defaultLayout === 'vertical'">
+      <!-- Top row: file tree + editor (heights by vSplitHandle) -->
+      <div
+        class="flex min-h-0 min-w-0 w-full"
+        :style="isDesktop ? { height: `${vSplitHandle.size.value}%` } : { flex: '1' }"
+      >
+        <!-- Desktop: file tree -->
+        <Discovery.Activator
+          v-if="showFileTree"
+          active-class="rounded-lg"
+          as="div"
+          class="shrink-0"
+          step="file-tree"
+          :style="{ width: `${fileTreeHandle.size.value}px` }"
+        >
+          <PlaygroundFileTree
+            :key="fileTreeKey"
+            :store="store"
+          />
+        </Discovery.Activator>
+
+        <!-- File tree ↔ Editor handle -->
+        <PlaygroundResizeHandle
+          v-if="showFileTree"
+          direction="col"
+          :is-resizing="fileTreeHandle.isResizing.value"
+          @dblclick="fileTreeHandle.reset()"
+          @pointerdown="fileTreeHandle.onPointerDown"
+        />
+
+        <!-- Tabs + Editor -->
+        <div class="flex flex-col flex-1 min-w-0 min-h-0">
+          <div v-if="!hideTabs" class="flex items-stretch">
+            <PlaygroundTabs class="flex-1 min-w-0" :store="store" />
+          </div>
+
+          <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
+
+          <PlaygroundEditor
+            :any-resizing="anyResizing"
+            class="flex-1"
+            :is-dark="isDark"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :store="store"
+          />
+        </div>
+      </div>
+
+      <!-- Top ↔ Preview drag handle (full width) -->
+      <PlaygroundResizeHandle
+        v-if="isDesktop"
+        direction="row"
+        :is-resizing="vSplitHandle.isResizing.value"
+        @dblclick="vSplitHandle.reset()"
+        @pointerdown="vSplitHandle.onPointerDown"
+      />
+
+      <!-- Preview: full width of workspace -->
+      <PlaygroundPreview
+        :any-resizing="anyResizing"
+        :is-dark="isDark"
+        :preview-options="previewOptions"
+        :repl-theme="replTheme"
+        :store="store"
+      />
+    </template>
+
+    <!-- ── STANDARD LAYOUT: file tree full-height sidebar, toggle split ─── -->
+    <template v-else>
+      <!-- Desktop: file tree sidebar (full height) -->
+      <Discovery.Activator
+        v-if="showFileTree"
+        active-class="rounded-lg"
+        as="div"
+        class="shrink-0"
+        step="file-tree"
+        :style="{ width: `${fileTreeHandle.size.value}px` }"
+      >
+        <PlaygroundFileTree
+          :key="fileTreeKey"
+          :store="store"
+        />
+      </Discovery.Activator>
+
+      <!-- File tree ↔ Content handle -->
+      <PlaygroundResizeHandle
+        v-if="showFileTree"
+        direction="col"
+        :is-resizing="fileTreeHandle.isResizing.value"
+        @dblclick="fileTreeHandle.reset()"
+        @pointerdown="fileTreeHandle.onPointerDown"
+      />
+
+      <!-- Main content: tabs + editor/preview split -->
+      <div class="flex flex-col flex-1 min-w-0 min-h-0">
+        <!-- Tabs row with layout toggle (desktop) or code/preview toggle (mobile) -->
+        <PlaygroundTabBar
+          :hide-tabs="hideTabs"
+          :is-desktop="isDesktop"
+          :is-vertical="isVertical"
+          :mobile-view="mobileView"
+          :store="store"
+          @toggle-layout="toggleSplitLayout"
+          @update:mobile-view="mobileView = $event"
+        />
+
+        <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
+
+        <!-- Editor + Preview split area -->
+        <div
+          class="flex flex-1 min-h-0 min-w-0 overflow-hidden"
+          :class="isVertical ? 'flex-col' : 'flex-row'"
+        >
+          <!-- Editor -->
+          <PlaygroundEditor
+            v-show="isDesktop || mobileView === 'editor'"
+            :any-resizing="anyResizing"
+            :is-dark="isDark"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :store="store"
+            :style="isDesktop
+              ? (isVertical
+                ? { height: `${vSplitHandle.size.value}%` }
+                : { width: `${hSplitHandle.size.value}px` })
+              : { flex: '1' }"
+          />
+
+          <!-- Editor ↔ Preview handle -->
+          <PlaygroundResizeHandle
+            v-if="isDesktop"
+            :direction="isVertical ? 'row' : 'col'"
+            :is-resizing="activeSplitHandle.isResizing.value"
+            @dblclick="activeSplitHandle.reset()"
+            @pointerdown="activeSplitHandle.onPointerDown"
+          />
+
+          <!-- Preview -->
+          <PlaygroundPreview
+            v-show="isDesktop || mobileView === 'preview'"
+            :any-resizing="anyResizing"
+            :is-dark="isDark"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :store="store"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/docs/src/components/skillz/SkillCard.vue b/apps/docs/src/components/skillz/SkillCard.vue
index 1e87cecd0..607f51225 100644
--- a/apps/docs/src/components/skillz/SkillCard.vue
+++ b/apps/docs/src/components/skillz/SkillCard.vue
@@ -4,30 +4,35 @@
   import DocsCard from '@/components/docs/DocsCard.vue'
 
   // Utilities
-  import { computed } from 'vue'
+  import { toRef } from 'vue'
 
   // Types
   import type { SkillMeta } from '@/types/skill'
 
   // Stores
   import { useSkillzStore } from '@/stores/skillz'
+  import { SKILL_TRACK_META } from '@/types/skill'
 
   const props = defineProps<{
     skill: SkillMeta
   }>()
 
   const store = useSkillzStore()
-  const done = computed(() => store.completed(props.skill.id))
-  const isLocked = computed(() => store.locked(props.skill.id))
+  const done = toRef(() => store.completed(props.skill.id))
+  const isLocked = toRef(() => store.locked(props.skill.id))
+  const href = toRef(() => {
+    if (isLocked.value) return undefined
+    return `/skillz/${props.skill.id}`
+  })
 </script>
 
 <template>
   <DocsCard
-    class="flex flex-col h-full"
+    class="flex flex-col"
     :class="{ 'border-success': done }"
     :disabled="isLocked"
     hoverable
-    :to="isLocked ? undefined : `/skillz/${skill.id}`"
+    :to="href"
   >
     <div class="flex justify-between items-center mb-2">
       <div class="flex items-center gap-2">
@@ -47,7 +52,9 @@
       <SkillPrerequisites class="mb-3" :prerequisites="skill.prerequisites" />
 
       <div class="flex justify-between items-center text-xs text-on-surface-variant">
-        <SkillCategoryTags :categories="skill.categories" />
+        <span class="px-2 py-1 text-[10px] font-medium tracking-wide rounded-lg bg-surface-variant-60 text-on-surface-variant border border-divider-50">
+          {{ SKILL_TRACK_META[skill.track].label }}
+        </span>
         <SkillDuration :minutes="skill.minutes" />
       </div>
     </div>
diff --git a/apps/docs/src/components/skillz/SkillCardDeck.vue b/apps/docs/src/components/skillz/SkillCardDeck.vue
index 25066d77b..c6f00a2e6 100644
--- a/apps/docs/src/components/skillz/SkillCardDeck.vue
+++ b/apps/docs/src/components/skillz/SkillCardDeck.vue
@@ -1,43 +1,257 @@
 <script setup lang="ts">
+  // Framework
+  import { useResizeObserver } from '@vuetify/v0'
+
   // Components
   import SkillCard from './SkillCard.vue'
 
+  // Composables
+  import { useSettings } from '@/composables/useSettings'
+
   // Utilities
-  import { computed } from 'vue'
+  import { computed, nextTick, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
 
   // Types
-  import type { SkillMeta, SkillTrack } from '@/types/skill'
+  import type { SkillLevel, SkillMeta } from '@/types/skill'
 
-  import { SKILL_TRACK_META } from '@/types/skill'
+  // Stores
+  import { useSkillzStore } from '@/stores/skillz'
+  import { SKILL_LEVEL_META } from '@/types/skill'
 
   const props = defineProps<{
     items: SkillMeta[]
   }>()
 
-  // Group skills by track
-  const tracks: SkillTrack[] = ['essentials', 'fundamentals', 'features', 'integration']
+  const store = useSkillzStore()
+  const { carousel } = useSettings()
 
-  const skillsByTrack = computed(() => {
-    return tracks.map(track => ({
-      track,
-      meta: SKILL_TRACK_META[track],
+  // Group skills by level, available first then locked
+  const levels: SkillLevel[] = [1, 2, 3]
+
+  const skillsByLevel = computed(() => {
+    return levels.map(level => ({
+      level,
+      meta: SKILL_LEVEL_META[level],
       skills: props.items
-        .filter(s => s.track === track)
+        .filter(s => s.level === level)
         .toSorted((a, b) => {
-          const levelDiff = a.level - b.level
-          if (levelDiff !== 0) return levelDiff
+          const aLocked = store.locked(a.id) ? 1 : 0
+          const bLocked = store.locked(b.id) ? 1 : 0
+          if (aLocked !== bLocked) return aLocked - bLocked
           return a.order - b.order
         }),
-    })).filter(t => t.skills.length > 0)
+    })).filter(g => g.skills.length > 0)
   })
+
+  // Template refs
+  const deckRef = useTemplateRef<HTMLElement>('deck')
+  const scrollerRefs = useTemplateRef<HTMLElement[]>('scrollers')
+
+  // Calculate right offset to extend carousel to viewport edge
+  const rightOffset = shallowRef(16)
+
+  useResizeObserver(deckRef, () => {
+    if (!deckRef.value) return
+    const rect = deckRef.value.getBoundingClientRect()
+    rightOffset.value = document.documentElement.clientWidth - rect.right
+  }, { immediate: true })
+
+  // Drag scroll state (non-reactive per-interaction tracking)
+  let activeEl: HTMLElement | null = null
+  let dragStartX = 0
+  let dragScrollLeft = 0
+  let didDrag = false
+  const dragging = shallowRef(false)
+
+  function onPointerDown (e: PointerEvent) {
+    const el = e.currentTarget as HTMLElement
+    activeEl = el
+    dragging.value = true
+    didDrag = false
+    dragStartX = e.pageX - el.offsetLeft
+    dragScrollLeft = el.scrollLeft
+  }
+
+  function onPointerMove (e: PointerEvent) {
+    if (!activeEl || !dragging.value) return
+    e.preventDefault()
+    const x = e.pageX - activeEl.offsetLeft
+    const walk = x - dragStartX
+    if (Math.abs(walk) > 3) didDrag = true
+    activeEl.scrollLeft = dragScrollLeft - walk
+  }
+
+  function onPointerUp () {
+    activeEl = null
+    dragging.value = false
+  }
+
+  // Track scroll state per level (for fade masks and arrow visibility)
+  const scrolledLevels = shallowRef(new Set<SkillLevel>())
+  const atEndLevels = shallowRef(new Set<SkillLevel>())
+
+  function updateScrollState (el: HTMLElement, level: SkillLevel) {
+    const isScrolled = el.scrollLeft > 0
+    const isAtEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1
+
+    if (scrolledLevels.value.has(level) !== isScrolled) {
+      const next = new Set(scrolledLevels.value)
+      if (isScrolled) next.add(level)
+      else next.delete(level)
+      scrolledLevels.value = next
+    }
+
+    if (atEndLevels.value.has(level) !== isAtEnd) {
+      const next = new Set(atEndLevels.value)
+      if (isAtEnd) next.add(level)
+      else next.delete(level)
+      atEndLevels.value = next
+    }
+  }
+
+  function checkAllCarousels () {
+    const scrollers = scrollerRefs.value
+    if (!scrollers) return
+    const levelList = skillsByLevel.value
+    for (const [i, el] of scrollers.entries()) {
+      if (levelList[i]) updateScrollState(el, levelList[i].level)
+    }
+  }
+
+  onMounted(() => nextTick(checkAllCarousels))
+  watch(rightOffset, () => nextTick(checkAllCarousels))
+
+  function maskImage (level: SkillLevel): string | undefined {
+    const left = scrolledLevels.value.has(level)
+    const end = atEndLevels.value.has(level)
+    if (left && end) return 'linear-gradient(to right, transparent, black 4rem)'
+    if (left) return 'linear-gradient(to right, transparent, black 4rem, black calc(100% - 4rem), transparent)'
+    if (!end) return 'linear-gradient(to right, black, black calc(100% - 4rem), transparent)'
+    return undefined
+  }
+
+  function onScroll (e: Event, level: SkillLevel) {
+    updateScrollState(e.currentTarget as HTMLElement, level)
+  }
+
+  function scrollCarousel (level: SkillLevel, direction: -1 | 1) {
+    const index = skillsByLevel.value.findIndex(g => g.level === level)
+    const el = index === -1 ? undefined : scrollerRefs.value?.[index]
+    if (el) {
+      el.scrollBy({ left: direction * 300, behavior: 'smooth' })
+    }
+  }
+
+  function onKeyDown (e: KeyboardEvent) {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
+
+    const container = e.currentTarget as HTMLElement
+    const focusable = [...container.querySelectorAll<HTMLElement>('a, [tabindex="0"]')]
+    const current = focusable.indexOf(document.activeElement as HTMLElement)
+    if (current === -1) return
+
+    const next = e.key === 'ArrowRight' ? current + 1 : current - 1
+    if (next < 0 || next >= focusable.length) return
+
+    e.preventDefault()
+    focusable[next].focus()
+    focusable[next].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+  }
+
+  function onClickCapture (e: MouseEvent) {
+    if (didDrag) {
+      e.preventDefault()
+      e.stopPropagation()
+      didDrag = false
+    }
+  }
 </script>
 
 <template>
-  <div v-if="skillsByTrack.length > 0" class="mt-8 flex flex-col gap-10">
-    <div v-for="{ track, meta, skills } in skillsByTrack" :key="track">
+  <div v-if="skillsByLevel.length > 0" ref="deck" class="mt-8 flex flex-col gap-10">
+    <div v-for="{ level, meta, skills } in skillsByLevel" :key="level">
       <h2 class="m-0 mb-1 text-xl">{{ meta.label }}</h2>
-      <p class="m-0 mb-4 text-sm text-on-surface-variant">{{ meta.description }}</p>
-      <div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
+
+      <p class="m-0 mb-4 text-sm text-on-surface-variant">{{ meta.title }}</p>
+
+      <!-- Carousel layout -->
+      <div
+        v-if="carousel"
+        class="group relative"
+        :style="{ marginRight: `-${rightOffset}px`, paddingRight: '1rem' }"
+      >
+        <div
+          ref="scrollers"
+          :aria-label="`${meta.label} skills`"
+          class="hide-scrollbar flex gap-4 overflow-x-auto touch-pan-x [scrollbar-width:none]"
+          :class="[dragging ? 'cursor-grabbing select-none' : 'cursor-grab']"
+          role="list"
+          :style="{ maskImage: maskImage(level) }"
+          @click.capture="onClickCapture"
+          @dragstart.prevent
+          @keydown="onKeyDown"
+          @pointercancel="onPointerUp"
+          @pointerdown="onPointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="onPointerUp"
+          @scroll="onScroll($event, level)"
+        >
+          <SkillCard
+            v-for="skill in skills"
+            :key="skill.id"
+            class="shrink-0 w-[280px]"
+            role="listitem"
+            :skill="skill"
+          />
+        </div>
+
+        <!-- Left arrow -->
+        <button
+          v-if="scrolledLevels.has(level)"
+          aria-label="Scroll left"
+          class="absolute left-2 top-50% -translate-y-50% z-1 flex items-center justify-center w-9 h-9 rounded-full border border-divider bg-surface text-on-surface cursor-pointer opacity-0 group-hover:opacity-100 focus-visible:opacity-100 shadow-sm hover:shadow-md transition-[opacity,box-shadow] duration-200"
+          @click="scrollCarousel(level, -1)"
+        >
+          <svg
+            fill="none"
+            height="20"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+
+        <!-- Right arrow -->
+        <button
+          v-if="!atEndLevels.has(level)"
+          aria-label="Scroll right"
+          class="absolute right-2 top-50% -translate-y-50% z-1 flex items-center justify-center w-9 h-9 rounded-full border border-divider bg-surface text-on-surface cursor-pointer opacity-0 group-hover:opacity-100 focus-visible:opacity-100 shadow-sm hover:shadow-md transition-[opacity,box-shadow] duration-200"
+          @click="scrollCarousel(level, 1)"
+        >
+          <svg
+            fill="none"
+            height="20"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Grid layout -->
+      <div v-else class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
         <SkillCard v-for="skill in skills" :key="skill.id" :skill="skill" />
       </div>
     </div>
@@ -47,3 +261,9 @@
     <p>No skills available yet. Check back soon!</p>
   </div>
 </template>
+
+<style scoped>
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+</style>
diff --git a/apps/docs/src/components/skillz/SkillCategoryTags.vue b/apps/docs/src/components/skillz/SkillCategoryTags.vue
index e55b02e1b..90ca1b415 100644
--- a/apps/docs/src/components/skillz/SkillCategoryTags.vue
+++ b/apps/docs/src/components/skillz/SkillCategoryTags.vue
@@ -4,14 +4,12 @@
 
   import { SKILL_CATEGORY_META } from '@/types/skill'
 
-  withDefaults(defineProps<{
+  const { categories, variant = 'default' } = defineProps<{
     /** Array of category identifiers */
     categories: SkillCategory[]
     /** Visual variant */
     variant?: 'default' | 'compact'
-  }>(), {
-    variant: 'default',
-  })
+  }>()
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillDuration.vue b/apps/docs/src/components/skillz/SkillDuration.vue
index 6ccff79fe..40db54daf 100644
--- a/apps/docs/src/components/skillz/SkillDuration.vue
+++ b/apps/docs/src/components/skillz/SkillDuration.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-  withDefaults(defineProps<{
+  const { minutes, iconSize = 14 } = defineProps<{
     /** Duration in minutes */
     minutes: number
     /** Icon size in pixels */
     iconSize?: number
-  }>(), {
-    iconSize: 14,
-  })
+  }>()
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillLevelBadge.vue b/apps/docs/src/components/skillz/SkillLevelBadge.vue
index 8caf163b4..03d3619e9 100644
--- a/apps/docs/src/components/skillz/SkillLevelBadge.vue
+++ b/apps/docs/src/components/skillz/SkillLevelBadge.vue
@@ -10,7 +10,7 @@
 
   import { SKILL_LEVEL_META } from '@/types/skill'
 
-  const props = withDefaults(defineProps<{
+  const { level, showIcon = true, showLabel = true, iconSize = 14 } = defineProps<{
     /** Skill level (1, 2, or 3) */
     level: SkillLevel
     /** Show the level icon */
@@ -19,13 +19,9 @@
     showLabel?: boolean
     /** Icon size in pixels */
     iconSize?: number
-  }>(), {
-    showIcon: true,
-    showLabel: true,
-    iconSize: 14,
-  })
+  }>()
 
-  const meta = computed(() => SKILL_LEVEL_META[props.level])
+  const meta = computed(() => SKILL_LEVEL_META[level])
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillModeBadge.vue b/apps/docs/src/components/skillz/SkillModeBadge.vue
index 7381f90a0..f35db1eaf 100644
--- a/apps/docs/src/components/skillz/SkillModeBadge.vue
+++ b/apps/docs/src/components/skillz/SkillModeBadge.vue
@@ -10,7 +10,7 @@
 
   import { SKILL_MODE_META } from '@/types/skill'
 
-  const props = withDefaults(defineProps<{
+  const { mode, showIcon = true, showLabel = true, iconSize = 14 } = defineProps<{
     /** Skill mode ('guided' or 'interactive') */
     mode: SkillMode
     /** Show the mode icon */
@@ -19,13 +19,9 @@
     showLabel?: boolean
     /** Icon size in pixels */
     iconSize?: number
-  }>(), {
-    showIcon: true,
-    showLabel: true,
-    iconSize: 14,
-  })
+  }>()
 
-  const meta = computed(() => SKILL_MODE_META[props.mode])
+  const meta = computed(() => SKILL_MODE_META[mode])
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillPrerequisites.vue b/apps/docs/src/components/skillz/SkillPrerequisites.vue
index 899837671..184857e3c 100644
--- a/apps/docs/src/components/skillz/SkillPrerequisites.vue
+++ b/apps/docs/src/components/skillz/SkillPrerequisites.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-  withDefaults(defineProps<{
+  const { prerequisites, variant = 'inline' } = defineProps<{
     /** Array of prerequisite skill IDs */
     prerequisites: string[]
     /** Display variant */
     variant?: 'inline' | 'box'
-  }>(), {
-    variant: 'inline',
-  })
+  }>()
 </script>
 
 <template>
   <div v-if="prerequisites.length > 0" class="skill-prerequisites" :class="`skill-prerequisites--${variant}`">
     <span class="skill-prerequisites__label">
-      {{ variant === 'box' ? 'Prerequisites:' : 'Requires:' }}
+      {{ variant === 'box' ? 'Prerequisites: ' : 'Requires: ' }}
     </span>
     <template v-if="variant === 'box'">
       <RouterLink
diff --git a/apps/docs/src/components/skillz/SkillzBadge.vue b/apps/docs/src/components/skillz/SkillzBadge.vue
new file mode 100644
index 000000000..e2820cc40
--- /dev/null
+++ b/apps/docs/src/components/skillz/SkillzBadge.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  // Types
+  import type { SkillLevel } from '@/types/skill'
+
+  import { SKILL_LEVEL_META } from '@/types/skill'
+
+  const props = defineProps<{
+    level?: SkillLevel
+  }>()
+
+  const levelMeta = toRef(() => props.level ? SKILL_LEVEL_META[props.level] : undefined)
+</script>
+
+<template>
+  <span
+    class="skillz-badge inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide px-2 py-1 rounded"
+    :style="levelMeta ? { '--level-color': levelMeta.color } : undefined"
+    :title="levelMeta ? `${levelMeta.label} level` : undefined"
+  >
+    SKILLZ
+    <AppIcon v-if="levelMeta" :icon="levelMeta.icon" :size="14" />
+  </span>
+</template>
+
+<style scoped>
+.skillz-badge {
+  background: color-mix(in srgb, var(--level-color, var(--v0-primary)) 15%, transparent);
+  color: var(--level-color, var(--v0-primary));
+}
+</style>
diff --git a/apps/docs/src/components/skillz/SkillzComplete.vue b/apps/docs/src/components/skillz/SkillzComplete.vue
new file mode 100644
index 000000000..9de0b21b4
--- /dev/null
+++ b/apps/docs/src/components/skillz/SkillzComplete.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  // Components
+  import AppBurst from '@/components/app/AppBurst.vue'
+
+  // Utilities
+  import { onMounted, useTemplateRef } from 'vue'
+
+  defineProps<{
+    title: string
+    description: string
+  }>()
+
+  const emit = defineEmits<{
+    back: []
+    complete: []
+  }>()
+
+  const burstRef = useTemplateRef<InstanceType<typeof AppBurst>>('burst')
+
+  onMounted(() => {
+    setTimeout(() => burstRef.value?.trigger(), 300)
+  })
+</script>
+
+<template>
+  <div class="p-4 bg-surface border border-divider rounded-xl shadow-xl max-w-xs">
+    <div class="flex justify-center mb-2">
+      <AppBurst ref="burst" disabled emoji="🎉" :size="64" />
+    </div>
+
+    <h2 class="text-lg font-semibold text-on-surface mb-1 text-center">
+      {{ title }}
+    </h2>
+
+    <p class="text-sm text-on-surface-variant text-center mb-8">
+      {{ description }}
+    </p>
+
+    <div class="flex gap-2">
+      <div class="ml-auto flex gap-2">
+        <button
+          class="px-3 py-1.5 text-sm text-on-surface-variant hover:text-on-surface"
+          @click="emit('back')"
+        >
+          Back
+        </button>
+
+        <button
+          class="px-3 py-1.5 text-sm rounded-lg bg-primary text-on-primary hover:bg-primary/90 transition-colors"
+          @click="emit('complete')"
+        >
+          Complete
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/skillz/SkillzResume.vue b/apps/docs/src/components/skillz/SkillzResume.vue
index c7a50ad8f..3f44bd330 100644
--- a/apps/docs/src/components/skillz/SkillzResume.vue
+++ b/apps/docs/src/components/skillz/SkillzResume.vue
@@ -9,16 +9,23 @@
   import { useSettings } from '@/composables/useSettings'
 
   // Utilities
-  import { toRef } from 'vue'
+  import { computed, onMounted, shallowRef, toRef } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
   // Stores
   import { useSkillzStore } from '@/stores/skillz'
+  // Types
+  import { SKILL_LEVEL_META } from '@/types/skill'
 
   const store = useSkillzStore()
   const route = useRoute()
   const router = useRouter()
 
+  const isVisible = shallowRef(false)
+  onMounted(() => setTimeout(() => {
+    isVisible.value = true
+  }, 3000))
+
   const isSkillzPage = toRef(() => route.path.startsWith('/skillz/'))
   const ask = useAsk()
   const breakpoints = useBreakpoints()
@@ -26,11 +33,31 @@
   const search = useSearch()
   const settings = useSettings()
 
+  const levelMeta = toRef(() => {
+    const level = store.pendingTour?.tour.level ?? 1
+    return SKILL_LEVEL_META[level]
+  })
+
+  const completedCount = computed(() => store.pendingTour?.progress.steps.length ?? 0)
+  const totalCount = computed(() => store.pendingTour?.tour.steps.length ?? 0)
+  const progressPct = computed(() => totalCount.value > 0 ? Math.round(completedCount.value / totalCount.value * 100) : 0)
+
   async function onResume () {
     const pending = store.pendingTour
     if (!pending) return
 
-    const { tour } = pending
+    const { tour, progress } = pending
+
+    if (tour.mode === 'tutorial' && tour.tutorialRoute) {
+      const stepNum = progress.lastStep
+        ? Number.parseInt(progress.lastStep.replace('step-', ''), 10)
+        : 1
+      await router.push({
+        path: tour.tutorialRoute,
+        query: stepNum > 1 ? { step: stepNum } : undefined,
+      })
+      return
+    }
 
     await router.push(tour.startRoute)
 
@@ -51,35 +78,74 @@
       store.dismiss(pending.tour.id)
     }
   }
+
+  function onSnooze () {
+    const pending = store.pendingTour
+    if (pending) {
+      store.snooze(pending.tour.id)
+    }
+  }
 </script>
 
 <template>
   <Teleport to="body">
     <Transition name="slide-up">
       <div
-        v-if="store.pendingTour && !isSkillzPage"
-        class="fixed top-16 inset-x-0 mx-auto w-max z-50 flex items-center gap-3 px-4 py-3 bg-surface border border-divider rounded-xl shadow-xl"
+        v-if="isVisible && store.pendingTour && !isSkillzPage"
+        class="fixed top-14 inset-x-0 mx-auto z-50 w-[300px] bg-surface border border-divider rounded-xl shadow-xl overflow-hidden"
       >
-        <span class="text-sm text-on-surface">
-          Continue <strong>{{ store.pendingTour.tour.name }}</strong>?
-        </span>
-
-        <div class="flex gap-2">
-          <button
-            class="px-3 py-1.5 text-sm text-on-surface-variant hover:text-on-surface transition-colors"
-            type="button"
-            @click="onDismiss"
-          >
-            Dismiss
-          </button>
-
-          <button
-            class="px-3 py-1.5 text-sm font-semibold bg-primary text-on-primary rounded-lg hover:brightness-110 transition-[filter]"
-            type="button"
-            @click="onResume"
-          >
-            Resume
-          </button>
+        <AppDotGrid :coverage="50" :density="14" origin="bottom left" />
+
+        <div class="relative p-4">
+          <!-- Title row -->
+          <div class="flex items-start justify-between gap-2 mb-1">
+            <p class="text-xs font-semibold uppercase tracking-wide text-on-surface-variant">
+              Skill in Progress
+            </p>
+            <AppCloseButton label="Dismiss" size="sm" @click="onDismiss" />
+          </div>
+
+          <!-- Tour name -->
+          <p class="text-sm font-semibold text-on-surface leading-snug mb-2">
+            {{ store.pendingTour.tour.name }}
+          </p>
+
+          <!-- Meta row: level · step X of Y · duration -->
+          <div class="flex items-center gap-1.5 text-xs text-on-surface-variant mb-3">
+            <SkillLevelBadge :icon-size="11" :level="store.pendingTour.tour.level" />
+            <span class="opacity-30">·</span>
+            <span>Step {{ completedCount + 1 }} of {{ totalCount }}</span>
+            <span class="opacity-30">·</span>
+            <AppIcon icon="clock" :size="11" />
+            <span>~{{ store.pendingTour.tour.minutes }} min</span>
+          </div>
+
+          <!-- Progress bar -->
+          <div class="h-1 bg-surface-tint rounded-full overflow-hidden mb-4">
+            <div
+              class="h-full rounded-full transition-all duration-300"
+              :style="{ width: `${progressPct}%`, background: levelMeta.color }"
+            />
+          </div>
+
+          <!-- Actions -->
+          <div class="flex items-center justify-between gap-3">
+            <button
+              class="text-xs text-on-surface-variant hover:text-on-surface transition-colors"
+              type="button"
+              @click="onSnooze"
+            >
+              Remind me later
+            </button>
+            <button
+              class="flex items-center gap-1 px-3 py-1.5 text-xs font-semibold bg-primary text-on-primary rounded-lg hover:brightness-110 transition-[filter]"
+              type="button"
+              @click="onResume"
+            >
+              Resume
+              <AppIcon class="opacity-100" icon="chevron-right" :size="13" />
+            </button>
+          </div>
         </div>
       </div>
     </Transition>
@@ -87,14 +153,14 @@
 </template>
 
 <style scoped>
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.slide-up-enter-from,
-.slide-up-leave-to {
-  transform: translateY(-25%);
-  opacity: 0;
-}
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: transform 0.25s ease, opacity 0.25s ease;
+  }
+
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: translateY(-12px);
+    opacity: 0;
+  }
 </style>
diff --git a/apps/docs/src/composables/playground.ts b/apps/docs/src/composables/playground.ts
deleted file mode 100644
index f042be82a..000000000
--- a/apps/docs/src/composables/playground.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Creates a Vuetify Play link using the native v0 template.
- *
- * @remarks
- * Uses the 'vuetify0' template in Vuetify Play which provides:
- * - UnoCSS runtime with Wind4 preset
- * - Import map for @vuetify/v0
- * - Proper main.ts setup
- */
-
-import { strFromU8, strToU8, zlibSync } from 'fflate'
-
-// Utilities
-import { version as vueVersion } from 'vue'
-
-export interface PlaygroundFile {
-  name: string
-  code: string
-}
-
-function utoa (data: string): string {
-  const buffer = strToU8(data)
-  const zipped = zlibSync(buffer, { level: 9 })
-  const binary = strFromU8(zipped, true)
-  return btoa(binary)
-}
-
-/**
- * Get playground URL for a single file (convenience wrapper)
- */
-export function usePlayground (code: string): string {
-  return usePlaygroundMulti([{ name: 'App.vue', code }])
-}
-
-/**
- * Detect which file is the entry point for a multi-file example.
- * Priority: index.vue > App.vue > example.vue > main.vue > file that imports others
- */
-function detectEntryFile (files: PlaygroundFile[]): PlaygroundFile | undefined {
-  const vueFiles = files.filter(f => f.name.endsWith('.vue'))
-
-  // Check for conventional entry point names
-  const entryNames = ['index.vue', 'App.vue', 'example.vue', 'main.vue']
-  for (const name of entryNames) {
-    const found = vueFiles.find(f => f.name.toLowerCase() === name.toLowerCase())
-    if (found) return found
-  }
-
-  // Find file that imports other example files (likely the entry point)
-  for (const file of vueFiles) {
-    const importsOthers = files.some(other =>
-      other !== file && file.code.includes(`./${other.name.replace(/\.\w+$/, '')}`),
-    )
-    if (importsOthers) return file
-  }
-
-  // Fall back to last Vue file (often examples are ordered with entry last)
-  return vueFiles.at(-1)
-}
-
-/**
- * Generate an App.vue wrapper that imports and renders the entry component
- */
-function generateAppWrapper (entryFile: PlaygroundFile): string {
-  const componentName = entryFile.name.replace(/\.vue$/, '')
-  const pascalName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  return `<script setup lang="ts">
-import ${pascalName} from './${entryFile.name}'
-</script>
-
-<template>
-  <${pascalName} />
-</template>
-`
-}
-
-/**
- * Get playground URL for multiple files
- *
- * @param inputFiles - Array of files with name and code
- * @param activeFile - Which file to show as active (defaults to first file)
- */
-export function usePlaygroundMulti (
-  inputFiles: PlaygroundFile[],
-  activeFile?: string,
-): string {
-  // Convert to playground format (prefixed with src/)
-  const files: Record<string, string> = {}
-  for (const file of inputFiles) {
-    const path = file.name.startsWith('src/') ? file.name : `src/${file.name}`
-    files[path] = file.code
-  }
-
-  // If no App.vue exists, generate one that wraps the entry file
-  const hasAppVue = inputFiles.some(f => f.name.toLowerCase() === 'app.vue')
-  if (!hasAppVue) {
-    const entryFile = detectEntryFile(inputFiles)
-    if (entryFile) {
-      files['src/App.vue'] = generateAppWrapper(entryFile)
-    }
-  }
-
-  // Determine active file (show the entry/App.vue)
-  const active = activeFile
-    ? (activeFile.startsWith('src/') ? activeFile : `src/${activeFile}`)
-    : 'src/App.vue'
-
-  // Hash format: [files, vueVersion, vuetifyVersion, appendJson, activeFile, routerEnabled, template, deps]
-  const hash = utoa(JSON.stringify([
-    files,
-    vueVersion,
-    null, // vuetifyVersion - not used for v0
-    true, // appendJson - merge with template files
-    active,
-    false, // routerEnabled
-    'vuetify0', // template ID
-  ]))
-
-  return `https://play.vuetifyjs.com#${hash}`
-}
diff --git a/apps/docs/src/composables/useFileTreeCrud.ts b/apps/docs/src/composables/useFileTreeCrud.ts
new file mode 100644
index 000000000..1c9980db9
--- /dev/null
+++ b/apps/docs/src/composables/useFileTreeCrud.ts
@@ -0,0 +1,127 @@
+// Utilities
+import { nextTick, shallowRef } from 'vue'
+
+// Types
+import type { ReplStore } from '@vue/repl'
+import type { NestedContext } from '@vuetify/v0'
+
+const PROTECTED = new Set(['src/App.vue', 'src/main.ts', 'src/uno.config.ts', 'import-map.json', 'tsconfig.json', 'src', '/'])
+const VALID_EXT = /\.(vue|jsx?|tsx?|css|json)$/
+
+const EXT_ICONS: Record<string, { icon: string, color: string }> = {
+  vue: { icon: 'lang-vue', color: '#4FC08D' },
+  ts: { icon: 'lang-ts', color: '#3179c7' },
+  tsx: { icon: 'lang-ts', color: '#3179c7' },
+  js: { icon: 'lang-js', color: '#d3b62a' },
+  jsx: { icon: 'lang-js', color: '#d3b62a' },
+  css: { icon: 'lang-css', color: '#1572B6' },
+  json: { icon: 'lang-json', color: '#a57b39' },
+}
+
+export function useFileTreeCrud (tree: NestedContext, store: ReplStore) {
+  const creating = shallowRef<string | null>(null)
+  const creatingType = shallowRef<'file' | 'folder'>('file')
+  const pending = shallowRef('')
+  const input = shallowRef<HTMLInputElement | null>(null)
+  const targetFolder = shallowRef('src')
+
+  function isFile (id: string) {
+    return VALID_EXT.test(id)
+  }
+
+  function fileExt (id: string) {
+    const ext = id.split('.').pop()
+    return ext ? EXT_ICONS[ext] : undefined
+  }
+
+  function add (type: 'file' | 'folder') {
+    creating.value = targetFolder.value
+    creatingType.value = type
+    pending.value = ''
+    tree.open(targetFolder.value)
+    nextTick(() => input.value?.focus())
+  }
+
+  function confirm () {
+    const raw = pending.value.trim()
+    const folder = creating.value
+    const type = creatingType.value
+
+    cancel()
+
+    if (!raw || !folder) return
+
+    const segments = raw.split('/').filter(Boolean)
+    const last = segments.pop()!
+    let parentId = folder
+
+    // Validate based on creation type
+    if (type === 'file' && !VALID_EXT.test(last)) return
+
+    // Create intermediate folders
+    for (const seg of segments) {
+      const folderId = `${parentId}/${seg}`
+      if (!tree.has(folderId)) {
+        tree.register({ id: folderId, value: seg, parentId })
+      }
+      tree.open(folderId)
+      parentId = folderId
+    }
+
+    const itemId = `${parentId}/${last}`
+    if (tree.has(itemId)) return
+
+    tree.register({ id: itemId, value: last, parentId })
+
+    if (type === 'file') {
+      store.addFile(itemId)
+      if (itemId.endsWith('.vue')) {
+        store.files[itemId]!.code = '<script setup lang="ts"><' + '/script>\n\n<template>\n  <div>\n    <slot />\n  </div>\n</template>\n'
+      }
+      store.setActive(itemId)
+    } else {
+      tree.open(itemId)
+    }
+  }
+
+  function cancel () {
+    creating.value = null
+    pending.value = ''
+  }
+
+  function deletable (id: string): boolean {
+    if (PROTECTED.has(id)) return false
+    if (tree.hasAncestor(id, '/')) return false
+    if (!isFile(id) && (tree.children.get(id)?.length ?? 0) > 0) return false
+    return true
+  }
+
+  function remove (id: string) {
+    const wasActive = store.activeFile?.filename === id
+
+    if (isFile(id)) {
+      store.deleteFile(id)
+    }
+
+    tree.unregister(id)
+
+    if (wasActive) {
+      store.setActive('src/App.vue')
+    }
+  }
+
+  return {
+    creating,
+    creatingType,
+    pending,
+    input,
+    targetFolder,
+    isFile,
+    fileExt,
+    add,
+    confirm,
+    cancel,
+    deletable,
+    remove,
+  }
+}
diff --git a/apps/docs/src/composables/useMarkdown.ts b/apps/docs/src/composables/useMarkdown.ts
index 42c377219..dbe3d5f92 100644
--- a/apps/docs/src/composables/useMarkdown.ts
+++ b/apps/docs/src/composables/useMarkdown.ts
@@ -36,6 +36,14 @@ export interface UseMarkdownReturn {
 let cachedMarked: Marked | null = null
 let cachedHighlighter: Highlighter | null = null
 
+// Separate synchronous instance used only for parseInline inside the blockquote renderer.
+// The main cachedMarked has async:true, which makes parseInline return a Promise — unusable
+// in a synchronous renderer. This instance is sync-only and has no extensions.
+let syncInlineMarked: Marked | null = null
+function getInlineMarked (): Marked {
+  return syncInlineMarked ??= new Marked({ async: false, gfm: true })
+}
+
 function getMarked (hl: Highlighter): Marked {
   // Return cached if highlighter is the same
   if (cachedMarked && cachedHighlighter === hl) return cachedMarked
@@ -50,23 +58,35 @@ function getMarked (hl: Highlighter): Marked {
   cachedMarked.use({
     renderer: {
       table ({ header, rows }) {
-        const thead = `<thead><tr>${header.map(cell => `<th${cell.align ? ` align="${cell.align}"` : ''}>${cell.text}</th>`).join('')}</tr></thead>`
-        const tbody = `<tbody>${rows.map(row => `<tr>${row.map(cell => `<td${cell.align ? ` align="${cell.align}"` : ''}>${cell.text}</td>`).join('')}</tr>`).join('')}</tbody>`
+        function parse (text: string) {
+          return getInlineMarked().parseInline(text)
+        }
+        const thead = `<thead><tr>${header.map(cell => `<th${cell.align ? ` align="${cell.align}"` : ''}>${parse(cell.text)}</th>`).join('')}</tr></thead>`
+        const tbody = `<tbody>${rows.map(row => `<tr>${row.map(cell => `<td${cell.align ? ` align="${cell.align}"` : ''}>${parse(cell.text)}</td>`).join('')}</tr>`).join('')}</tbody>`
         return `<div class="overflow-x-auto mb-4"><table>${thead}${tbody}</table></div>`
       },
       blockquote ({ raw }) {
-        // GitHub-style callouts: > [!TIP], > [!INFO], > [!WARNING], > [!ERROR]
+        // GitHub-style callouts: > [!TIP], > [!INFO], > [!WARNING], > [!ERROR], > [!TRY], > [!TOUR]
         const innerContent = raw
           .split('\n')
           .map(line => line.replace(/^>\s?/, ''))
           .join('\n')
           .trim()
 
-        const match = innerContent.match(/^\[!(TIP|INFO|WARNING|ERROR)\]\s*([\s\S]*)/)
+        const match = innerContent.match(/^\[!(TIP|INFO|WARNING|ERROR|TRY|TOUR)\]\s*([\s\S]*)/)
         if (match) {
           const type = match[1].toLowerCase()
-          const content = match[2].trim()
-          const encodedContent = btoa(unescape(encodeURIComponent(content)))
+          const rest = match[2].trim()
+
+          if (type === 'tour') {
+            // rest is the tour ID — no slot content needed, DocsCallout renders from registry
+            return `<div data-alert data-type="tour" data-tour-id="${rest}"></div>`
+          }
+
+          // Parse inline markdown so backticks, bold, links etc. render correctly in callouts.
+          // Must use the sync instance — cachedMarked has async:true, making parseInline a Promise.
+          const parsedContent = getInlineMarked().parseInline(rest)
+          const encodedContent = btoa(unescape(encodeURIComponent(parsedContent)))
           return `<div data-alert data-type="${type}" data-content="${encodedContent}"></div>`
         }
 
diff --git a/apps/docs/src/composables/useMarkdownMount.ts b/apps/docs/src/composables/useMarkdownMount.ts
new file mode 100644
index 000000000..b775d0382
--- /dev/null
+++ b/apps/docs/src/composables/useMarkdownMount.ts
@@ -0,0 +1,93 @@
+/**
+ * @module useMarkdownMount
+ *
+ * Imperatively mounts DocsCallout and DocsMarkup Vue components into the
+ * placeholder elements emitted by useMarkdown's renderer:
+ *   - [data-alert]  → DocsCallout
+ *   - [data-markup] → DocsMarkup (syntax-highlighted code block)
+ *
+ * Used by any panel that renders useMarkdown's HTML output via v-html and
+ * needs the interactive Vue components to appear in place of the stubs.
+ */
+
+// Components
+import DocsCallout from '@/components/docs/DocsCallout.vue'
+import DocsMarkup from '@/components/docs/DocsMarkup.vue'
+
+// Utilities
+import { decodeBase64 } from '@/utilities/decodeBase64'
+import { getCurrentInstance, h, nextTick, onBeforeUnmount, render, watch } from 'vue'
+
+// Types
+import type { Ref, ShallowRef } from 'vue'
+
+export function useMarkdownMount (
+  contentRef: Readonly<ShallowRef<HTMLElement | null>>,
+  html: Readonly<Ref<string> | ShallowRef<string>>,
+) {
+  const appContext = getCurrentInstance()?.appContext
+  const mountedWrappers = new Set<HTMLElement>()
+
+  function mountMarkupComponents () {
+    if (!contentRef.value) return
+
+    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-markup]')) {
+      const code = el.dataset.code
+      const language = el.dataset.language
+      if (!code) continue
+
+      const highlighted = el.innerHTML
+      const wrapper = document.createElement('div')
+      el.replaceWith(wrapper)
+      mountedWrappers.add(wrapper)
+
+      const vnode = h(DocsMarkup, { code, language }, {
+        default: () => h('div', { innerHTML: highlighted }),
+      })
+      vnode.appContext = appContext ?? null
+      render(vnode, wrapper)
+    }
+  }
+
+  function mountAlertComponents () {
+    if (!contentRef.value) return
+
+    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-alert]')) {
+      const type = el.dataset.type as 'tip' | 'info' | 'warning' | 'error' | 'try' | 'tour'
+      if (!type) continue
+
+      const wrapper = document.createElement('div')
+      el.replaceWith(wrapper)
+      mountedWrappers.add(wrapper)
+
+      let vnode
+      if (type === 'tour') {
+        const tourId = el.dataset.tourId
+        vnode = h(DocsCallout, { type, tourId })
+      } else {
+        const encodedContent = el.dataset.content
+        if (!encodedContent) continue
+        const content = decodeBase64(encodedContent)
+        vnode = h(DocsCallout, { type }, {
+          default: () => h('div', { innerHTML: content }),
+        })
+      }
+
+      vnode.appContext = appContext ?? null
+      render(vnode, wrapper)
+    }
+  }
+
+  watch(html, async () => {
+    await nextTick()
+    mountMarkupComponents()
+    mountAlertComponents()
+  })
+
+  onBeforeUnmount(() => {
+    for (const wrapper of mountedWrappers) {
+      render(null, wrapper)
+    }
+    mountedWrappers.clear()
+  })
+}
diff --git a/apps/docs/src/composables/usePlaygroundFiles.ts b/apps/docs/src/composables/usePlaygroundFiles.ts
new file mode 100644
index 000000000..644b58c56
--- /dev/null
+++ b/apps/docs/src/composables/usePlaygroundFiles.ts
@@ -0,0 +1,122 @@
+// Composables
+import { decodePlaygroundHash, encodePlaygroundHash } from '@/composables/usePlaygroundLink'
+
+// Utilities
+import { onMounted, shallowRef, watch, watchEffect } from 'vue'
+
+// Types
+import type { ReplStore } from '@vue/repl'
+
+import { createMainTs, DEFAULT_CODE, INFRASTRUCTURE_FILES, UNO_CONFIG_TS } from '@/data/playground-defaults'
+
+export function usePlaygroundFiles (store: ReplStore, isDark: () => boolean) {
+  const isReady = shallowRef(false)
+  const fileTreeKey = shallowRef(0)
+
+  // Map nested file paths to their flat alias paths (e.g. src/dir/Foo.vue → src/Foo.vue)
+  // so edits to nested files propagate to the alias the REPL uses for imports
+  const aliasMap = shallowRef(new Map<string, string>())
+
+  onMounted(async () => {
+    const hash = window.location.hash.slice(1)
+    const decoded = hash ? await decodePlaygroundHash(hash) : null
+
+    if (decoded) {
+      await loadExample(decoded.files, decoded.active)
+    } else {
+      const theme = isDark() ? 'dark' : 'light'
+      await store.setFiles(
+        {
+          'src/main.ts': createMainTs(theme),
+          'src/uno.config.ts': UNO_CONFIG_TS,
+          'src/App.vue': DEFAULT_CODE,
+        },
+        'src/main.ts',
+      )
+      store.files['src/main.ts']!.hidden = true
+      store.files['src/uno.config.ts']!.hidden = true
+      store.setActive('src/App.vue')
+    }
+
+    isReady.value = true
+  })
+
+  async function loadExample (files: Record<string, string>, activeFile?: string) {
+    // Create hidden flat aliases for nested files so the REPL's runtime
+    // import resolution works. The REPL resolves all `./X` as `src/X`,
+    // so `src/dir/Foo.vue` needs a hidden `src/Foo.vue` alias.
+    const aliases: Record<string, string> = {}
+    const nextAliasMap = new Map<string, string>()
+
+    for (const [path, code] of Object.entries(files)) {
+      const rel = path.replace(/^src\//, '')
+      const parts = rel.split('/')
+      if (parts.length > 1) {
+        const flatPath = `src/${parts.at(-1)}`
+        if (!files[flatPath]) {
+          aliases[flatPath] = code
+          nextAliasMap.set(path, flatPath)
+        }
+      }
+    }
+
+    aliasMap.value = nextAliasMap
+
+    const theme = isDark() ? 'dark' : 'light'
+    await store.setFiles(
+      {
+        'src/main.ts': createMainTs(theme),
+        'src/uno.config.ts': UNO_CONFIG_TS,
+        ...files,
+        ...aliases,
+      },
+      'src/main.ts',
+    )
+    store.files['src/main.ts']!.hidden = true
+    store.files['src/uno.config.ts']!.hidden = true
+    for (const key of Object.keys(aliases)) {
+      if (store.files[key]) store.files[key]!.hidden = true
+    }
+
+    // Restore active file from hash, fall back to first user file
+    const userFile = (activeFile && store.files[activeFile])
+      ? activeFile
+      : (Object.keys(files).find(f => f !== 'src/App.vue') ?? 'src/App.vue')
+    store.setActive(userFile)
+    fileTreeKey.value++
+  }
+
+  // Once loaded, encode user files to the URL hash on every change so the
+  // URL stays shareable. Debounced to avoid thrashing on every keystroke.
+  let hashTimer: ReturnType<typeof setTimeout> | undefined
+  watch(isReady, ready => {
+    if (!ready) return
+    watchEffect(() => {
+      const files: Record<string, string> = {}
+      for (const [path, file] of Object.entries(store.files)) {
+        // Exclude infrastructure files and generated hidden aliases
+        if (!INFRASTRUCTURE_FILES.has(path) && !file.hidden) {
+          files[path] = file.code // read .code to register reactive dependency
+        }
+      }
+      const active = store.activeFile?.filename // register reactive dependency
+      clearTimeout(hashTimer)
+      hashTimer = setTimeout(async () => {
+        if (Object.keys(files).length === 0) return
+        const hash = await encodePlaygroundHash({ files, active })
+        history.replaceState(null, '', `#${hash}`)
+      }, 500)
+    })
+  }, { once: true })
+
+  // Sync edits from nested files to their flat aliases
+  watch(() => store.activeFile?.code, code => {
+    if (code === undefined) return
+    const flatPath = aliasMap.value.get(store.activeFile.filename)
+    if (flatPath && store.files[flatPath] && store.files[flatPath].code !== code) {
+      store.files[flatPath].code = code
+    }
+  })
+
+  return { isReady, fileTreeKey, loadExample }
+}
diff --git a/apps/docs/src/composables/usePlaygroundLink.ts b/apps/docs/src/composables/usePlaygroundLink.ts
new file mode 100644
index 000000000..cdc4e74ec
--- /dev/null
+++ b/apps/docs/src/composables/usePlaygroundLink.ts
@@ -0,0 +1,157 @@
+// Framework
+import { isObject, isString } from '@vuetify/v0'
+
+export interface PlaygroundFile {
+  name: string
+  code: string
+}
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+let _fflate: typeof import('fflate') | undefined
+
+async function loadFflate () {
+  if (!_fflate) _fflate = await import('fflate')
+  return _fflate
+}
+
+async function utoa (data: string): Promise<string> {
+  const { strToU8, strFromU8, zlibSync } = await loadFflate()
+  const buffer = strToU8(data)
+  const zipped = zlibSync(buffer, { level: 9 })
+  const binary = strFromU8(zipped, true)
+  return btoa(binary)
+}
+
+async function atou (base64: string): Promise<string> {
+  const { strToU8, strFromU8, unzlibSync } = await loadFflate()
+  const binary = atob(base64)
+  const buffer = strToU8(binary, true)
+  const unzipped = unzlibSync(buffer)
+  return strFromU8(unzipped)
+}
+
+/**
+ * Detect which file is the entry point for a multi-file example.
+ */
+function detectEntryFile (files: PlaygroundFile[]): PlaygroundFile | undefined {
+  const vueFiles = files.filter(f => f.name.endsWith('.vue'))
+
+  const entryNames = ['index.vue', 'App.vue', 'example.vue', 'main.vue']
+  for (const name of entryNames) {
+    const found = vueFiles.find(f => f.name.toLowerCase() === name.toLowerCase())
+    if (found) return found
+  }
+
+  for (const file of vueFiles) {
+    const importsOthers = files.some(other =>
+      other !== file && file.code.includes(`./${other.name.replace(/\.\w+$/, '')}`),
+    )
+    if (importsOthers) return file
+  }
+
+  return vueFiles.at(-1)
+}
+
+/**
+ * Generate an App.vue wrapper that imports and renders the entry component.
+ */
+export function generateAppWrapper (entryPath: string): string {
+  const baseName = entryPath.split('/').pop()!.replace(/\.vue$/, '')
+  const pascalName = baseName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('')
+  return [
+    '<' + `script setup lang="ts">`,
+    `  import ${pascalName} from './${entryPath}'`,
+    '</' + 'script>',
+    '',
+    '<template>',
+    '  <div class="p-4">',
+    `    <${pascalName} />`,
+    '  </div>',
+    '</template>',
+    '',
+  ].join('\n')
+}
+
+/**
+ * Build the src/-prefixed file record that loadExample expects.
+ * When dir is provided, files are nested: src/{dir}/{name}
+ */
+function buildPlaygroundFiles (inputFiles: PlaygroundFile[], dir?: string): Record<string, string> {
+  const files: Record<string, string> = {}
+  const prefix = dir ? `src/${dir}` : 'src'
+
+  for (const file of inputFiles) {
+    const path = file.name.startsWith('src/') ? file.name : `${prefix}/${file.name}`
+    files[path] = file.code
+  }
+
+  const hasAppVue = inputFiles.some(f => f.name.toLowerCase() === 'app.vue')
+  if (!hasAppVue) {
+    const entryFile = detectEntryFile(inputFiles)
+    if (entryFile) {
+      const entryPath = dir ? `${dir}/${entryFile.name}` : entryFile.name
+      files['src/App.vue'] = generateAppWrapper(entryPath)
+    }
+  }
+
+  return files
+}
+
+/**
+ * Get editor URL for a single file.
+ */
+export async function usePlaygroundLink (code: string, fileName = 'Example.vue'): Promise<string> {
+  return usePlaygroundLinkMulti([{ name: fileName, code }])
+}
+
+/**
+ * Get editor URL for multiple files.
+ * When dir is provided, files are nested under src/{dir}/.
+ */
+export async function usePlaygroundLinkMulti (inputFiles: PlaygroundFile[], dir?: string): Promise<string> {
+  const files = buildPlaygroundFiles(inputFiles, dir)
+  const hash = await utoa(JSON.stringify(files))
+  return `/playground#${hash}`
+}
+
+function isFileRecord (v: unknown): v is Record<string, string> {
+  return isObject(v) && Object.values(v).every(x => isString(x))
+}
+
+export interface PlaygroundHashData {
+  files: Record<string, string>
+  active?: string
+}
+
+/**
+ * Encode editor state (files + active filename) to a URL hash string.
+ */
+export async function encodePlaygroundHash (data: PlaygroundHashData): Promise<string> {
+  return utoa(JSON.stringify(data))
+}
+
+/**
+ * Decode an editor hash back to editor state.
+ * Handles both the current { files, active } format and the legacy plain Record<string, string> format.
+ */
+export async function decodePlaygroundHash (hash: string): Promise<PlaygroundHashData | null> {
+  try {
+    const parsed: unknown = JSON.parse(await atou(hash))
+    if (isFileRecord(parsed)) {
+      // Legacy format: plain file record with no active file
+      return { files: parsed }
+    }
+    if (
+      typeof parsed === 'object'
+      && parsed !== null
+      && 'files' in parsed
+      && isFileRecord((parsed as { files: unknown }).files)
+    ) {
+      const { files, active } = parsed as { files: Record<string, string>, active?: unknown }
+      return { files, active: isString(active) ? active : undefined }
+    }
+    return null
+  } catch {
+    return null
+  }
+}
diff --git a/apps/docs/src/composables/usePlaygroundStore.ts b/apps/docs/src/composables/usePlaygroundStore.ts
new file mode 100644
index 000000000..df2807e0f
--- /dev/null
+++ b/apps/docs/src/composables/usePlaygroundStore.ts
@@ -0,0 +1,78 @@
+// Utilities
+import { useStore, useVueImportMap } from '@vue/repl'
+import { computed, shallowRef } from 'vue'
+
+// Types
+import type { ReplStore } from '@vue/repl'
+import type { ComputedRef, Ref, ShallowRef } from 'vue'
+
+export interface PlaygroundContext {
+  store: ReplStore
+  isDark: Readonly<Ref<boolean>>
+  replTheme: ComputedRef<'dark' | 'light'>
+  previewOptions: ComputedRef<{ headHTML: string }>
+  fileTreeKey: ShallowRef<number>
+  sidebarOpen: ShallowRef<boolean>
+  isDesktop: ComputedRef<boolean>
+}
+
+/** @deprecated Use usePlaygroundRepl */
+export interface PlaygroundStoreReturn {
+  store: ReplStore
+  replTheme: ComputedRef<'dark' | 'light'>
+  previewOptions: ComputedRef<{ headHTML: string }>
+}
+
+export function usePlaygroundRepl (isDark: Readonly<Ref<boolean>>): PlaygroundStoreReturn {
+  const replTheme = computed(() => isDark.value ? 'dark' : 'light')
+
+  const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
+    runtimeDev: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.js',
+    runtimeProd: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js',
+    serverRenderer: 'https://cdn.jsdelivr.net/npm/@vue/server-renderer/dist/server-renderer.esm-browser.js',
+  })
+
+  const importMap = computed(() => ({
+    imports: {
+      ...builtinImportMap.value?.imports,
+      '@vuetify/v0': 'https://cdn.jsdelivr.net/npm/@vuetify/v0@latest/dist/index.mjs',
+    },
+  }))
+
+  const store = useStore({
+    builtinImportMap: importMap,
+    vueVersion,
+    // Default false: PlaygroundWorkspace renders Sandbox separately, so the
+    // Repl's built-in preview iframe must stay suppressed to avoid duplicates.
+    showOutput: shallowRef(false),
+  })
+
+  // Wind4 preflight reset + @property defaults.
+  // The UnoCSS runtime doesn't inject preflights or @property rules,
+  // so we provide the essential reset and opacity defaults that
+  // color-mix() based utilities (border-divider, bg-surface, etc.) rely on.
+  const previewHead = computed(() => `<style>
+    @property --un-border-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-bg-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-text-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-shadow-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-ring-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-divide-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-border-style { syntax: "*"; inherits: false; initial-value: solid }
+    *, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid }
+    html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -webkit-tap-highlight-color: transparent }
+    body { margin: 0; background-color: var(--v0-background, ${isDark.value ? '#121212' : '#ffffff'}) }
+    #app { min-height: 100vh; opacity: 0 }
+    button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer }
+    *:focus-visible { outline: 2px solid var(--v0-primary); outline-offset: 2px }
+    dialog::backdrop { background: rgb(0 0 0 / 0.3) }
+  </style>`)
+
+  const previewOptions = computed(() => ({ headHTML: previewHead.value }))
+
+  return {
+    store,
+    replTheme,
+    previewOptions,
+  }
+}
diff --git a/apps/docs/src/composables/useResizeHandle.ts b/apps/docs/src/composables/useResizeHandle.ts
new file mode 100644
index 000000000..996a66974
--- /dev/null
+++ b/apps/docs/src/composables/useResizeHandle.ts
@@ -0,0 +1,72 @@
+// Framework
+import { clamp, useDocumentEventListener, useStorage, useToggleScope } from '@vuetify/v0'
+
+// Utilities
+import { shallowRef } from 'vue'
+
+interface UseResizeHandleOptions {
+  storageKey: string
+  defaultValue: number
+  min: number
+  max: number
+  direction: 'horizontal' | 'vertical'
+}
+
+interface UseResizeHandleReturn {
+  size: ReturnType<typeof shallowRef<number>>
+  isResizing: ReturnType<typeof shallowRef<boolean>>
+  onPointerDown: (e: PointerEvent) => void
+  reset: () => void
+}
+
+export function useResizeHandle (options: UseResizeHandleOptions): UseResizeHandleReturn {
+  const stored = useStorage().get<number>(options.storageKey, options.defaultValue)
+  const size = shallowRef(stored.value)
+  const isResizing = shallowRef(false)
+  const startPos = shallowRef(0)
+  const startSize = shallowRef(0)
+  const containerSize = shallowRef(0)
+
+  function onPointerDown (e: PointerEvent) {
+    e.preventDefault()
+    startPos.value = options.direction === 'horizontal' ? e.clientX : e.clientY
+    latestPos = startPos.value
+    startSize.value = size.value
+    if (options.direction === 'vertical') {
+      containerSize.value = (e.target as HTMLElement).parentElement?.offsetHeight ?? 1
+    }
+    document.documentElement.style.cursor = 'grabbing'
+    isResizing.value = true
+  }
+
+  let rafId = 0
+  let latestPos = 0
+
+  useToggleScope(() => isResizing.value, () => {
+    useDocumentEventListener('pointermove', (e: PointerEvent) => {
+      latestPos = options.direction === 'horizontal' ? e.clientX : e.clientY
+      if (rafId) return
+      rafId = requestAnimationFrame(() => {
+        const delta = latestPos - startPos.value
+        size.value = options.direction === 'vertical'
+          ? clamp(startSize.value + (delta / containerSize.value) * 100, options.min, options.max)
+          : clamp(startSize.value + delta, options.min, options.max)
+        rafId = 0
+      })
+    })
+    useDocumentEventListener('pointerup', () => {
+      if (rafId) cancelAnimationFrame(rafId)
+      rafId = 0
+      stored.value = size.value
+      document.documentElement.style.cursor = ''
+      isResizing.value = false
+    })
+  })
+
+  function reset () {
+    size.value = options.defaultValue
+    stored.value = options.defaultValue
+  }
+
+  return { size, isResizing, onPointerDown, reset }
+}
diff --git a/apps/docs/src/composables/useSettings.ts b/apps/docs/src/composables/useSettings.ts
index dfbb957dd..41c424d96 100644
--- a/apps/docs/src/composables/useSettings.ts
+++ b/apps/docs/src/composables/useSettings.ts
@@ -24,6 +24,7 @@ export interface DocSettings {
   showDotGrid: boolean
   showMeshTransition: boolean
   showBgGlass: boolean
+  carousel: boolean
 }
 
 export interface SettingsContext {
@@ -44,6 +45,7 @@ export interface SettingsContext {
   showDotGrid: ShallowRef<boolean>
   showMeshTransition: ShallowRef<boolean>
   showBgGlass: ShallowRef<boolean>
+  carousel: ShallowRef<boolean>
   hasChanges: ShallowRef<boolean>
   open: () => void
   close: () => void
@@ -63,6 +65,7 @@ const DEFAULTS: DocSettings = {
   showDotGrid: true,
   showMeshTransition: true,
   showBgGlass: true,
+  carousel: true,
 }
 
 // Create context
@@ -119,6 +122,7 @@ export function createSettingsContext (): SettingsContext {
   const showDotGrid = shallowRef(DEFAULTS.showDotGrid)
   const showMeshTransition = shallowRef(DEFAULTS.showMeshTransition)
   const showBgGlass = shallowRef(DEFAULTS.showBgGlass)
+  const carousel = shallowRef(DEFAULTS.carousel)
 
   // Load stored preferences
   loadSetting(storage, 'lineWrap', lineWrap)
@@ -132,9 +136,10 @@ export function createSettingsContext (): SettingsContext {
   loadSetting(storage, 'showDotGrid', showDotGrid)
   loadSetting(storage, 'showMeshTransition', showMeshTransition)
   loadSetting(storage, 'showBgGlass', showBgGlass)
+  loadSetting(storage, 'carousel', carousel)
 
   // Persist on change
-  const settings = { lineWrap, reduceMotion, packageManager, showInlineApi, showSkillFilter, showThemeToggle, showSocialLinks, collapsibleNav, showDotGrid, showMeshTransition, showBgGlass }
+  const settings = { lineWrap, reduceMotion, packageManager, showInlineApi, showSkillFilter, showThemeToggle, showSocialLinks, collapsibleNav, showDotGrid, showMeshTransition, showBgGlass, carousel }
   for (const [key, ref] of Object.entries(settings)) {
     watch(ref, val => storage.set(key, val))
   }
@@ -163,7 +168,8 @@ export function createSettingsContext (): SettingsContext {
     collapsibleNav.value !== DEFAULTS.collapsibleNav ||
     showDotGrid.value !== DEFAULTS.showDotGrid ||
     showMeshTransition.value !== DEFAULTS.showMeshTransition ||
-    showBgGlass.value !== DEFAULTS.showBgGlass
+    showBgGlass.value !== DEFAULTS.showBgGlass ||
+    carousel.value !== DEFAULTS.carousel
   ))
 
   // Track trigger element for focus restoration
@@ -204,6 +210,7 @@ export function createSettingsContext (): SettingsContext {
     showDotGrid.value = DEFAULTS.showDotGrid
     showMeshTransition.value = DEFAULTS.showMeshTransition
     showBgGlass.value = DEFAULTS.showBgGlass
+    carousel.value = DEFAULTS.carousel
   }
 
   return {
@@ -222,6 +229,7 @@ export function createSettingsContext (): SettingsContext {
     showDotGrid,
     showMeshTransition,
     showBgGlass,
+    carousel,
     hasChanges,
     open,
     close,
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
new file mode 100644
index 000000000..14b83f59b
--- /dev/null
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -0,0 +1,263 @@
+// Framework
+import { createStep, useTheme } from '@vuetify/v0'
+
+// Composables
+import { useMarkdown } from '@/composables/useMarkdown'
+import { usePlaygroundRepl } from '@/composables/usePlaygroundStore'
+
+// Utilities
+import { File as ReplFile, compileFile } from '@vue/repl'
+import { computed, onMounted, shallowRef, watch } from 'vue'
+
+// Types
+import type { StepOptions, TutorialMeta } from '@/skillz/tutorials'
+import type { ReplStore } from '@vue/repl'
+import type { ComputedRef, Ref, ShallowRef } from 'vue'
+
+import { createMainTs, UNO_CONFIG_TS } from '@/data/playground-defaults'
+// Tutorials
+import { getTutorial, parseStepOptions } from '@/skillz/tutorials'
+// Stores
+import { useSkillzStore } from '@/stores/skillz'
+
+export interface UseTutorialReturn {
+  store: ReplStore
+  isDark: Readonly<Ref<boolean>>
+  replTheme: ComputedRef<'dark' | 'light'>
+  previewOptions: ComputedRef<{ headHTML: string }>
+  meta: ComputedRef<TutorialMeta | undefined>
+  markdown: ShallowRef<string>
+  html: ShallowRef<string>
+  stepLabel: ComputedRef<string>
+  totalSteps: ComputedRef<number>
+  currentStep: ComputedRef<number>
+  isFirst: ComputedRef<boolean>
+  isLast: ComputedRef<boolean>
+  isReady: ShallowRef<boolean>
+  fileTreeKey: ShallowRef<number>
+  stepOptions: ShallowRef<StepOptions>
+  nextStep: () => void
+  prevStep: () => void
+  complete: () => void
+}
+
+export function useTutorial (tutorialId: ComputedRef<string>, initialStep?: ComputedRef<number>): UseTutorialReturn {
+  const theme = useTheme()
+  const isDark = theme.isDark
+  const skillz = useSkillzStore()
+
+  const { store, replTheme, previewOptions } = usePlaygroundRepl(isDark)
+
+  const meta = computed(() => getTutorial(tutorialId.value)?.meta)
+  const markdown = shallowRef('')
+  const { html } = useMarkdown(markdown)
+  const isReady = shallowRef(false)
+  const fileTreeKey = shallowRef(0)
+  const stepOptions = shallowRef<StepOptions>({})
+
+  const stepper = createStep()
+  const totalSteps = computed(() => stepper.size)
+  const currentStep = computed(() => (stepper.selectedIndex.value ?? 0) + 1)
+  const stepLabel = computed(() => `Step ${currentStep.value} of ${totalSteps.value}`)
+  const isFirst = computed(() => stepper.selectedIndex.value === 0)
+  const isLast = computed(() => stepper.selectedIndex.value === stepper.size - 1)
+
+  function nextStep () {
+    stepper.next()
+  }
+
+  function prevStep () {
+    stepper.prev()
+  }
+
+  function complete () {
+    skillz.record(tutorialId.value, `step-${currentStep.value}`)
+    skillz.finish(tutorialId.value)
+  }
+
+  const stepCache = new Map<number, { md: string, files: Record<string, string>, options: StepOptions }>()
+
+  async function preloadSteps () {
+    const tutorial = getTutorial(tutorialId.value)
+    if (!tutorial) return
+
+    await Promise.all(tutorial.steps.map(async (step, i) => {
+      if (stepCache.has(i)) return
+      const fileEntries = Object.entries(step.files)
+      const [rawMd, ...fileContents] = await Promise.all([
+        step.markdown(),
+        ...fileEntries.map(([, loader]) => loader()),
+      ])
+      const { body, options } = parseStepOptions(rawMd)
+      const files: Record<string, string> = {}
+      for (const [j, fileEntry] of fileEntries.entries()) {
+        files[fileEntry[0]] = fileContents[j]
+      }
+      stepCache.set(i, { md: body, files, options })
+    }))
+  }
+
+  async function resolveStep (stepIndex: number): Promise<{ md: string, files: Record<string, string>, options: StepOptions } | undefined> {
+    const cached = stepCache.get(stepIndex)
+    if (cached) return cached
+
+    const tutorial = getTutorial(tutorialId.value)
+    if (!tutorial || !tutorial.steps[stepIndex]) return
+
+    const step = tutorial.steps[stepIndex]
+    const fileEntries = Object.entries(step.files)
+    const [rawMd, ...fileContents] = await Promise.all([
+      step.markdown(),
+      ...fileEntries.map(([, loader]) => loader()),
+    ])
+    const { body, options } = parseStepOptions(rawMd)
+    const files: Record<string, string> = {}
+    for (const [i, fileEntry] of fileEntries.entries()) {
+      files[fileEntry[0]] = fileContents[i]
+    }
+    const result = { md: body, files, options }
+    stepCache.set(stepIndex, result)
+    return result
+  }
+
+  // Files the REPL manages internally — never touch between steps or the
+  // sandbox watch will fire and recreate the iframe.
+  const REPL_PROTECTED = new Set(['import-map.json', 'tsconfig.json'])
+
+  async function loadStep (stepIndex: number) {
+    const data = await resolveStep(stepIndex)
+    if (!data) return
+
+    // Update markdown and options immediately (sync, before async compile)
+    markdown.value = data.md
+    stepOptions.value = data.options
+
+    const currentTheme = isDark.value ? 'dark' : 'light'
+
+    // Ensure the sandbox entry point is main.ts, not the default src/App.vue.
+    // updatePreview() reads store.mainFile inside its watchEffect, so setting
+    // this before files are compiled means the sandbox will always bootstrap
+    // from main.ts rather than auto-wrapping App.vue with createApp.
+    store.mainFile = 'src/main.ts'
+
+    // Build normalized next file set (ensure src/ prefix)
+    const nextFiles: Record<string, string> = {}
+    for (const [name, code] of Object.entries({
+      'src/main.ts': createMainTs(currentTheme),
+      'src/uno.config.ts': UNO_CONFIG_TS,
+      ...data.files,
+    })) {
+      nextFiles[name.startsWith('src/') ? name : `src/${name}`] = code
+    }
+
+    // Remove files that belong to the previous step but not this one.
+    // Skipping protected REPL files avoids touching the import map, which
+    // would trigger the Sandbox watch and recreate the iframe.
+    for (const filename of Object.keys(store.files)) {
+      if (REPL_PROTECTED.has(filename)) continue
+      if (!(filename in nextFiles)) delete store.files[filename]
+    }
+
+    // Update existing files in-place or add new ones, compile only what changed.
+    // Mutating .code directly avoids replacing the files reactive object, so
+    // the Sandbox's getImportMap() watch never fires → no iframe recreation →
+    // no volar worker restart.
+    //
+    // IMPORTANT: always pass store.files[filename] (the reactive Proxy) to
+    // compileFile, never the raw ReplFile instance. compileFile destructures
+    // { compiled } from the file parameter — when it writes compiled.js through
+    // a Proxy, Vue tracks the change and re-triggers updatePreview. A raw write
+    // bypasses the Proxy and the preview never updates.
+    const compilePromises: Promise<(string | Error)[]>[] = []
+    for (const [filename, code] of Object.entries(nextFiles)) {
+      const existing = store.files[filename]
+      if (existing) {
+        if (existing.code !== code) {
+          existing.code = code
+          compilePromises.push(compileFile(store, existing))
+        }
+      } else {
+        store.files[filename] = new ReplFile(filename, code)
+        compilePromises.push(compileFile(store, store.files[filename]!))
+      }
+    }
+
+    store.files['src/main.ts']!.hidden = true
+    store.files['src/uno.config.ts']!.hidden = true
+
+    store.errors = (await Promise.all(compilePromises)).flat()
+
+    const firstFile = Object.keys(data.files)[0] ?? 'src/App.vue'
+    store.setActive(firstFile.startsWith('src/') ? firstFile : `src/${firstFile}`)
+    fileTreeKey.value++
+  }
+
+  // React to step changes
+  watch(() => stepper.selectedIndex.value, async (newIndex, oldIndex) => {
+    if (newIndex != null) {
+      // Record the previous step as completed when advancing forward
+      if (oldIndex != null && newIndex > oldIndex) {
+        skillz.record(tutorialId.value, `step-${oldIndex + 1}`)
+      }
+      // Track current position so resume can return here
+      skillz.setLastStep(tutorialId.value, `step-${newIndex + 1}`)
+      await loadStep(newIndex)
+    }
+  })
+
+  // Sync theme into the preview's main.ts when toggled
+  watch(isDark, async () => {
+    if (!isReady.value) return
+    const file = store.files['src/main.ts']
+    if (!file) return
+    file.code = createMainTs(isDark.value ? 'dark' : 'light')
+    await compileFile(store, file)
+  })
+
+  onMounted(async () => {
+    const tutorial = getTutorial(tutorialId.value)
+    if (!tutorial || tutorial.steps.length === 0) return
+
+    // Begin progress tracking
+    skillz.begin(tutorialId.value)
+
+    // Register steps
+    stepper.onboard(
+      tutorial.steps.map((_, i) => ({ id: `step-${i + 1}`, value: i })),
+    )
+
+    // Clamp the requested step to valid range (1-indexed from caller)
+    const startIndex = initialStep
+      ? Math.min(Math.max(0, initialStep.value - 1), tutorial.steps.length - 1)
+      : 0
+    stepper.select(`step-${startIndex + 1}`)
+
+    // Load the starting step
+    await loadStep(startIndex)
+    isReady.value = true
+
+    // Preload remaining steps in background
+    preloadSteps()
+  })
+
+  return {
+    store,
+    isDark,
+    replTheme,
+    previewOptions,
+    meta,
+    markdown,
+    html,
+    stepLabel,
+    totalSteps,
+    currentStep,
+    isFirst,
+    isLast,
+    isReady,
+    fileTreeKey,
+    stepOptions,
+    nextStep,
+    prevStep,
+    complete,
+  }
+}
diff --git a/apps/docs/src/data/playground-defaults.ts b/apps/docs/src/data/playground-defaults.ts
new file mode 100644
index 000000000..0ac1e3ba3
--- /dev/null
+++ b/apps/docs/src/data/playground-defaults.ts
@@ -0,0 +1,172 @@
+// ── Infrastructure file constants ────────────────────────────────────────
+
+/** Files generated by the editor infrastructure (not user-created) */
+export const INFRASTRUCTURE_FILES = new Set(['import-map.json', 'tsconfig.json', 'src/main.ts', 'src/uno.config.ts'])
+
+/** Subset of infrastructure files shown in the "project" folder of the file tree */
+export const REPL_BUILTIN_FILES = ['import-map.json', 'tsconfig.json'] as const
+
+// ── Template files (matching Vuetify Play's v0 template) ────────────────
+
+export function createMainTs (defaultTheme: 'light' | 'dark' = 'light'): string {
+  return `import { createApp } from 'vue'
+import App from './App.vue'
+import { createThemePlugin } from '@vuetify/v0'
+import './uno.config.ts'
+
+const theme = createThemePlugin({
+  default: '${defaultTheme}',
+  themes: {
+    light: {
+      dark: false,
+      colors: {
+        'primary': '#3b82f6',
+        'secondary': '#64748b',
+        'accent': '#6366f1',
+        'error': '#ef4444',
+        'info': '#1867c0',
+        'success': '#22c55e',
+        'warning': '#f59e0b',
+        'background': '#ffffff',
+        'surface': '#ffffff',
+        'surface-tint': '#f5f5f5',
+        'surface-variant': '#e8e8e8',
+        'divider': '#e0e0e0',
+        'on-primary': '#ffffff',
+        'on-secondary': '#ffffff',
+        'on-accent': '#1a1a1a',
+        'on-error': '#ffffff',
+        'on-info': '#ffffff',
+        'on-success': '#1a1a1a',
+        'on-warning': '#1a1a1a',
+        'on-background': '#212121',
+        'on-surface': '#212121',
+        'on-surface-variant': '#666666',
+      },
+    },
+    dark: {
+      dark: true,
+      colors: {
+        'primary': '#c4b5fd',
+        'secondary': '#94a3b8',
+        'accent': '#c084fc',
+        'error': '#f87171',
+        'info': '#38bdf8',
+        'success': '#4ade80',
+        'warning': '#fb923c',
+        'background': '#121212',
+        'surface': '#1a1a1a',
+        'surface-tint': '#2a2a2a',
+        'surface-variant': '#1e1e1e',
+        'divider': '#404040',
+        'on-primary': '#1a1a1a',
+        'on-secondary': '#ffffff',
+        'on-accent': '#ffffff',
+        'on-error': '#1a1a1a',
+        'on-info': '#1a1a1a',
+        'on-success': '#1a1a1a',
+        'on-warning': '#1a1a1a',
+        'on-background': '#e0e0e0',
+        'on-surface': '#e0e0e0',
+        'on-surface-variant': '#a0a0a0',
+      },
+    },
+  },
+})
+
+const app = createApp(App)
+app.use(theme)
+app.mount('#app')
+
+// Reveal after UnoCSS runtime processes initial styles
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    document.getElementById('app')!.style.opacity = '1'
+  })
+})
+`
+}
+
+export const UNO_CONFIG_TS = `// @ts-expect-error - esm.sh import
+import defineConfig from 'https://esm.sh/@unocss/runtime'
+// @ts-expect-error - esm.sh import
+import presetWind4 from 'https://esm.sh/@unocss/preset-wind4'
+
+// Each recompile creates a fresh module instance with an empty internal style Map,
+// so the previous runtime's <style> elements are abandoned in the DOM. Remove them
+// before the new instance installs itself to prevent unbounded CSS rule accumulation.
+document.querySelectorAll('[data-unocss-runtime-layer]').forEach(el => el.remove())
+
+defineConfig({
+  defaults: {
+    presets: [presetWind4()],
+    theme: {
+      colors: {
+        'primary': 'var(--v0-primary)',
+        'secondary': 'var(--v0-secondary)',
+        'accent': 'var(--v0-accent)',
+        'error': 'var(--v0-error)',
+        'info': 'var(--v0-info)',
+        'success': 'var(--v0-success)',
+        'warning': 'var(--v0-warning)',
+        'background': 'var(--v0-background)',
+        'surface': 'var(--v0-surface)',
+        'surface-tint': 'var(--v0-surface-tint)',
+        'surface-variant': 'var(--v0-surface-variant)',
+        'divider': 'var(--v0-divider)',
+        'pre': 'var(--v0-pre)',
+        'on-primary': 'var(--v0-on-primary)',
+        'on-secondary': 'var(--v0-on-secondary)',
+        'on-accent': 'var(--v0-on-accent)',
+        'on-error': 'var(--v0-on-error)',
+        'on-info': 'var(--v0-on-info)',
+        'on-success': 'var(--v0-on-success)',
+        'on-warning': 'var(--v0-on-warning)',
+        'on-background': 'var(--v0-on-background)',
+        'on-surface': 'var(--v0-on-surface)',
+        'on-surface-variant': 'var(--v0-on-surface-variant)',
+      },
+      borderColor: {
+        DEFAULT: 'var(--v0-divider)',
+      },
+    },
+  },
+})
+`
+
+// ── Default App.vue ─────────────────────────────────────────────────────
+
+export const DEFAULT_CODE = `<script lang="ts" setup>
+  import { createSingle } from '@vuetify/v0'
+
+  const single = createSingle({ mandatory: 'force' })
+
+  single.onboard([
+    { id: 'home', value: 'Home' },
+    { id: 'profile', value: 'Profile' },
+    { id: 'settings', value: 'Settings' },
+  ])
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="flex border-b border-divider mb-6">
+      <button
+        v-for="tab in single.values()"
+        :key="tab.id"
+        class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors"
+        :class="tab.isSelected.value
+          ? 'text-primary border-primary'
+          : 'text-on-surface-variant border-transparent hover:text-on-surface'"
+        @click="tab.toggle()"
+      >
+        {{ tab.value }}
+      </button>
+    </div>
+
+    <p class="text-sm text-on-surface-variant">
+      Active tab: <strong class="text-on-surface">{{ single.selectedId.value }}</strong>
+    </p>
+  </div>
+</template>
+`
diff --git a/apps/docs/src/layouts/default.vue b/apps/docs/src/layouts/default.vue
index 983014491..3e47b8d60 100644
--- a/apps/docs/src/layouts/default.vue
+++ b/apps/docs/src/layouts/default.vue
@@ -5,6 +5,7 @@
   // Composables
   import { useAsk } from '@/composables/useAsk'
   import { useDiscovery } from '@/composables/useDiscovery'
+  import { useIdleCallback } from '@/composables/useIdleCallback'
   import { createLevelFilter } from '@/composables/useLevelFilter'
   import { createNavConfig } from '@/composables/useNavConfig'
   import { useSearch } from '@/composables/useSearch'
@@ -59,6 +60,15 @@
     if (!IN_BROWSER) return
     document.body.style.overflow = ''
   })
+
+  // Prefetch editor dependencies during idle time so
+  // "Open in Editor" (new tab) loads from HTTP cache
+  if (IN_BROWSER) {
+    useIdleCallback(() => {
+      import('@vue/repl').catch(() => {})
+      import('@vue/repl/monaco-editor').catch(() => {})
+    })
+  }
 </script>
 
 <template>
@@ -70,7 +80,7 @@
       Skip to main content
     </a>
 
-    <div class="min-h-[calc(100vh-72px)] flex flex-col" :inert="isModalOpen || undefined">
+    <div class="min-h-[calc(100vh-72px)] pt-[72px] flex flex-col" :inert="isModalOpen || undefined">
       <AppBanner />
       <AppNav />
       <AppBar />
diff --git a/apps/docs/src/layouts/fullscreen.vue b/apps/docs/src/layouts/fullscreen.vue
index 86ecb3687..99db18eff 100644
--- a/apps/docs/src/layouts/fullscreen.vue
+++ b/apps/docs/src/layouts/fullscreen.vue
@@ -1,108 +1,32 @@
 <script setup lang="ts">
   // Framework
-  import { useBreakpoints } from '@vuetify/v0'
+  import { Scrim } from '@vuetify/v0'
 
   // Composables
   import { createLevelFilter } from '@/composables/useLevelFilter'
   import { createNavConfig } from '@/composables/useNavConfig'
-  import { useNavigation } from '@/composables/useNavigation'
-  import { useScrollLock } from '@/composables/useScrollLock'
-  import { useSettings } from '@/composables/useSettings'
-
-  // Utilities
-  import { computed, defineAsyncComponent, toRef } from 'vue'
 
   // Stores
   import { useAppStore } from '@/stores/app'
 
-  const AppSettingsSheet = defineAsyncComponent(() => import('@/components/app/AppSettingsSheet.vue'))
-  const DocsSearch = defineAsyncComponent(() => import('@/components/docs/DocsSearch.vue'))
-
   const app = useAppStore()
   const levelFilter = createLevelFilter(() => app.nav)
   levelFilter.provide()
 
-  // Capture ?features= param even on fullscreen pages
   const navConfig = createNavConfig(levelFilter.filteredNav)
   navConfig.provide()
-
-  const breakpoints = useBreakpoints()
-  const navigation = useNavigation()
-  const settings = useSettings()
-
-  const fadeTransition = toRef(() => settings.prefersReducedMotion.value ? undefined : 'fade')
-  const slideTransition = toRef(() => settings.prefersReducedMotion.value ? undefined : 'slide')
-
-  const isModalOpen = computed(() => settings.isOpen.value)
-  const isMobileNavOpen = toRef(() => navigation.isOpen.value && !breakpoints.mdAndUp.value)
-
-  useScrollLock(settings.isOpen)
-  useScrollLock(isMobileNavOpen)
 </script>
 
 <template>
-  <div>
-    <a
-      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-on-primary focus:rounded"
-      href="#main-content"
-    >
-      Skip to main content
-    </a>
-
-    <div class="flex flex-col min-h-[calc(100vh-72px)]" :inert="isModalOpen || undefined">
-      <AppBanner />
-      <AppNav />
-      <AppBar />
-      <main id="main-content" class="flex-1 flex flex-col">
-        <router-view />
-      </main>
-    </div>
-
-    <!-- Mobile nav backdrop -->
-    <Transition :name="fadeTransition">
-      <div
-        v-if="isMobileNavOpen"
-        class="fixed inset-0 bg-black/30 z-9"
-        @click="navigation.close()"
-      />
-    </Transition>
+  <div class="fixed inset-0 z-10 flex flex-col bg-background" data-layout="fullscreen">
+    <router-view />
 
-    <!-- Settings backdrop -->
-    <Transition :name="fadeTransition">
-      <div
-        v-if="settings.isOpen.value"
-        class="fixed inset-0 bg-black/30 z-40"
-        @click="settings.close"
-      />
-    </Transition>
-
-    <!-- Settings sheet -->
-    <Transition :name="slideTransition">
-      <AppSettingsSheet v-if="settings.isOpen.value" />
-    </Transition>
-
-    <DocsSearch />
+    <Scrim class="fixed inset-0 bg-black/30 transition-opacity" :teleport="false" />
   </div>
 </template>
 
-<style scoped>
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .slide-enter-from,
-  .slide-leave-to {
-    transform: translateX(100%);
+<style>
+  html:has([data-layout="fullscreen"]) {
+    scrollbar-gutter: auto;
   }
 </style>
diff --git a/apps/docs/src/layouts/home.vue b/apps/docs/src/layouts/home.vue
index 96d63e73d..6e68d81bd 100644
--- a/apps/docs/src/layouts/home.vue
+++ b/apps/docs/src/layouts/home.vue
@@ -23,7 +23,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="pt-[72px]">
     <AppBanner />
     <AppBar />
     <AppHomePage />
diff --git a/apps/docs/src/pages/guide/essentials/using-the-docs.md b/apps/docs/src/pages/guide/essentials/using-the-docs.md
index c67655ee5..d62d5d9f7 100644
--- a/apps/docs/src/pages/guide/essentials/using-the-docs.md
+++ b/apps/docs/src/pages/guide/essentials/using-the-docs.md
@@ -266,7 +266,7 @@ Hover over the code block to reveal action buttons:
 
 | Button | Action |
 |--------|--------|
-| <span class="whitespace-nowrap"><AppIcon icon="vuetify-play" :size="16" class="inline-block align-text-bottom" /> **Play**</span> | Open in Vuetify Play with full editing environment |
+| <span class="whitespace-nowrap"><AppIcon icon="editor" :size="16" class="inline-block align-text-bottom" /> **Editor**</span> | Open in the v0 Editor with full editing environment |
 | <span class="whitespace-nowrap"><AppIcon icon="vuetify-bin" :size="16" class="inline-block align-text-bottom" /> **Bin**</span> | Open in Vuetify Bin for sharing |
 | <span class="whitespace-nowrap"><AppIcon icon="wrap" :size="16" class="inline-block align-text-bottom" /> **Wrap**</span> | Toggle line wrapping for long lines |
 | <span class="whitespace-nowrap"><AppIcon icon="copy" :size="16" class="inline-block align-text-bottom" /> **Copy**</span> | Copy code to clipboard (checkmark confirms success) |
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
new file mode 100644
index 000000000..77b702f3d
--- /dev/null
+++ b/apps/docs/src/pages/playground.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+  import { useHead } from '@unhead/vue'
+  import { definePage } from 'unplugin-vue-router/runtime'
+
+  // Framework
+  import { useClickOutside, useHotkey, useStack, useTheme, useToggleScope } from '@vuetify/v0'
+
+  // Components
+  import { Discovery } from '@/components/discovery'
+  import PlaygroundExamples from '@/components/playground/PlaygroundExamples.vue'
+  import PlaygroundIntroPanel from '@/components/playground/PlaygroundIntroPanel.vue'
+  import PlaygroundResizeHandle from '@/components/playground/PlaygroundResizeHandle.vue'
+  import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
+
+  // Composables
+  import { usePlaygroundFiles } from '@/composables/usePlaygroundFiles'
+  import { usePlaygroundRepl } from '@/composables/usePlaygroundStore'
+  import { useResizeHandle } from '@/composables/useResizeHandle'
+
+  // Utilities
+  import '@vue/repl/style.css'
+  import { computed, useTemplateRef, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  // Stores
+  import { usePlaygroundStore } from '@/stores/playground'
+
+  definePage({
+    meta: {
+      layout: 'fullscreen',
+      level: 1,
+    },
+  })
+
+  useHead({
+    title: 'Playground - Vuetify0',
+    meta: [
+      { key: 'description', name: 'description', content: 'Interactive code playground for @vuetify/v0 composables and components' },
+    ],
+  })
+
+  // ── Back navigation ────────────────────────────────────────────────────
+  const router = useRouter()
+  const backTo = computed(() => (router.currentRoute.value.redirectedFrom?.fullPath ?? window.history.state?.back) || '/')
+
+  // ── Theme ──────────────────────────────────────────────────────────────
+  const theme = useTheme()
+  const isDark = theme.isDark
+
+  // ── REPL Setup ─────────────────────────────────────────────────────────
+  const { store, replTheme, previewOptions } = usePlaygroundRepl(isDark)
+
+  // ── Editor files ─────────────────────────────────────────────────────
+  const { isReady, fileTreeKey, loadExample: _loadExample } = usePlaygroundFiles(store, () => isDark.value)
+
+  // ── Playground UI state ────────────────────────────────────────────────
+  const pg = usePlaygroundStore()
+
+  useHotkey('ctrl+b', () => pg.sidebar.toggle(), { inputs: true })
+
+  const examplesContainer = useTemplateRef<HTMLElement>('examplesContainer')
+  const examplesButton = useTemplateRef<HTMLButtonElement>('examplesButton')
+
+  useToggleScope(() => pg.showExamples, () => {
+    useClickOutside(examplesContainer, () => {
+      pg.showExamples = false
+      examplesButton.value?.focus()
+    })
+    useHotkey('escape', () => {
+      pg.showExamples = false
+      examplesButton.value?.focus()
+    })
+  })
+
+  async function loadExample (files: Record<string, string>) {
+    pg.showExamples = false
+    await _loadExample(files)
+  }
+
+  // ── Intro panel ───────────────────────────────────────────────────────
+  const stack = useStack()
+  const introPanelTicket = stack.register({
+    onDismiss: () => pg.panel.close(),
+  })
+  watch(() => !pg.isDesktop && pg.panelOpen, open => {
+    if (open) introPanelTicket.select()
+    else introPanelTicket.unselect()
+  }, { immediate: true })
+
+  // ── Panel resize (panel mode) ─────────────────────────────────────────
+  const panelHandle = useResizeHandle({
+    storageKey: 'playground-intro-width',
+    defaultValue: 420,
+    min: 280,
+    max: 600,
+    direction: 'horizontal',
+  })
+</script>
+
+<template>
+  <div class="h-screen flex flex-col">
+    <!-- Header -->
+    <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface">
+      <div class="flex items-center gap-3">
+        <RouterLink
+          aria-label="Go back"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
+          title="Go back"
+          :to="backTo"
+        >
+          <AppIcon icon="arrow-left" :size="18" />
+        </RouterLink>
+
+        <img
+          alt="Vuetify Play"
+          class="h-8"
+          :src="isDark
+            ? 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-dark.svg'
+            : 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-light.svg'"
+        >
+      </div>
+
+      <div class="flex items-center gap-2">
+        <Discovery.Activator as="span" class="inline-flex rounded" step="panel-toggle">
+          <button
+            :aria-expanded="pg.panelOpen"
+            :aria-label="pg.panelOpen ? 'Close intro panel' : 'Open intro panel'"
+            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+            :title="pg.panelOpen ? 'Close intro panel' : 'Open intro panel'"
+            @click="pg.panel.toggle()"
+          >
+            <AppIcon icon="info" :size="18" />
+          </button>
+        </Discovery.Activator>
+
+        <Discovery.Activator as="div" class="relative rounded" step="examples">
+          <div ref="examplesContainer">
+            <button
+              ref="examplesButton"
+              :aria-expanded="pg.showExamples"
+              aria-haspopup="listbox"
+              aria-label="Load example"
+              class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+              title="Load example"
+              @click="pg.examples.toggle()"
+            >
+              <AppIcon icon="examples" :size="18" />
+            </button>
+
+            <Discovery.Activator
+              v-if="pg.showExamples"
+              aria-label="Examples"
+              as="div"
+              class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
+              role="listbox"
+              step="examples-menu"
+            >
+              <PlaygroundExamples @select="loadExample" />
+            </Discovery.Activator>
+          </div>
+        </Discovery.Activator>
+
+        <Discovery.Activator v-if="!pg.isDesktop" as="span" class="inline-flex rounded" step="sidebar-toggle">
+          <button
+            :aria-expanded="pg.sidebarOpen"
+            :aria-label="pg.sidebarOpen ? 'Close file browser' : 'Open file browser'"
+            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+            title="Toggle files"
+            @click="pg.sidebar.toggle()"
+          >
+            <AppIcon icon="folder" :size="18" />
+          </button>
+        </Discovery.Activator>
+
+        <Discovery.Activator v-if="pg.isDesktop" as="span" class="inline-flex rounded" step="sidebar-toggle">
+          <button
+            :aria-expanded="pg.sidebarOpen"
+            :aria-label="pg.sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
+            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+            title="Toggle sidebar"
+            @click="pg.sidebar.toggle()"
+          >
+            <AppIcon icon="menu" :size="18" />
+          </button>
+        </Discovery.Activator>
+
+        <AppThemeToggle />
+      </div>
+    </header>
+
+    <!-- Mobile: intro panel overlay (stack managed, covers workspace below header) -->
+    <Teleport to="body">
+      <div
+        v-if="!pg.isDesktop && pg.panelOpen"
+        class="fixed left-0 right-0 bottom-0 bg-surface"
+        :style="{ top: '48px', zIndex: introPanelTicket.zIndex.value }"
+      >
+        <PlaygroundIntroPanel @close="pg.panel.close()" />
+      </div>
+    </Teleport>
+
+    <Transition name="fade">
+      <div v-if="isReady" class="flex-1 min-h-0 overflow-hidden">
+        <!-- Panel mode: intro panel + workspace (tutorial-style split) -->
+        <div
+          v-if="pg.isPanelMode"
+          class="flex h-full"
+          :class="{ 'select-none': panelHandle.isResizing.value }"
+        >
+          <Discovery.Activator
+            active-class="rounded-lg"
+            as="div"
+            class="shrink-0 border-r border-divider"
+            step="intro-panel"
+            :style="{ width: `${panelHandle.size.value}px` }"
+          >
+            <PlaygroundIntroPanel :is-resizing="panelHandle.isResizing.value" @close="pg.panel.close()" />
+          </Discovery.Activator>
+
+          <PlaygroundResizeHandle
+            direction="col"
+            :is-resizing="panelHandle.isResizing.value"
+            @dblclick="panelHandle.reset()"
+            @pointerdown="panelHandle.onPointerDown"
+          />
+
+          <PlaygroundWorkspace
+            default-layout="vertical"
+            :external-resizing="panelHandle.isResizing.value"
+            :file-tree-key="fileTreeKey"
+            :is-dark="isDark"
+            :is-desktop="pg.isDesktop"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :sidebar-open="pg.sidebarOpen"
+            :store="store"
+          />
+        </div>
+
+        <!-- Standard mode: workspace fills the viewport -->
+        <PlaygroundWorkspace
+          v-else
+          :file-tree-key="fileTreeKey"
+          :is-dark="isDark"
+          :is-desktop="pg.isDesktop"
+          :preview-options="previewOptions"
+          :repl-theme="replTheme"
+          :sidebar-open="pg.sidebarOpen"
+          :store="store"
+          @update:sidebar-open="v => pg.sidebarOpen = v"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+/* Fade on mount */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>
diff --git a/apps/docs/src/pages/skillz.[id].vue b/apps/docs/src/pages/skillz.[id].vue
index 6059f8161..ae09fe53b 100644
--- a/apps/docs/src/pages/skillz.[id].vue
+++ b/apps/docs/src/pages/skillz.[id].vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { useBreakpoints } from '@vuetify/v0'
+  import { useBreakpoints, useFeatures } from '@vuetify/v0'
 
   // Components
   import SkillMasteredBadge from '@/components/skillz/SkillMasteredBadge.vue'
@@ -21,25 +21,30 @@
   import { useRouter } from 'vue-router'
 
   // Stores
+  import { usePlaygroundStore } from '@/stores/playground'
   import { useSkillzStore } from '@/stores/skillz'
 
   definePage({
     meta: {
-      layout: 'fullscreen',
       level: 1,
     },
   })
 
   const settings = useSettings()
+  const devmode = useFeatures().get('devmode')!
   const params = useParams<{ id: string }>()
   const discovery = useDiscovery()
   const store = useSkillzStore()
+  const playground = usePlaygroundStore()
   const ask = useAsk()
   const navigation = useNavigation()
   const search = useSearch()
   const breakpoints = useBreakpoints()
   const router = useRouter()
-  const tour = computed(() => discovery.tours.get(params.value.id))
+  const tour = computed(() => {
+    return discovery.tours.get(params.value.id)
+      ?? store.items.find(s => s.id === params.value.id)
+  })
 
   const done = computed(() => store.steps(params.value.id))
   const progress = computed(() => store.get(params.value.id))
@@ -50,10 +55,10 @@
     return 'Resume'
   })
 
-  // Find next tour in the same track by order
+  // Find next skill in the same track by order
   const nextTour = computed(() => {
     if (!tour.value) return null
-    return discovery.tours.values()
+    return store.items
       .filter(t => t.track === tour.value!.track && t.order > tour.value!.order)
       .toSorted((a, b) => a.order - b.order)[0] ?? null
   })
@@ -71,6 +76,19 @@
     const currentTour = tour.value
     if (!currentTour) return
 
+    // Tutorials navigate directly to the editor
+    if (currentTour.mode === 'tutorial' && currentTour.tutorialRoute) {
+      const prog = progress.value
+      const stepNum = prog?.status === 'in-progress' && prog.lastStep
+        ? Number.parseInt(prog.lastStep.replace('step-', ''), 10)
+        : 1
+      await router.push({
+        path: currentTour.tutorialRoute,
+        query: stepNum > 1 ? { step: stepNum } : undefined,
+      })
+      return
+    }
+
     await router.push(currentTour.startRoute)
 
     store.start(currentTour.id, {
@@ -79,6 +97,7 @@
         ask,
         breakpoints,
         navigation,
+        playground,
         router,
         search,
         settings,
@@ -113,19 +132,19 @@
     <!-- Skill detail -->
     <template v-else>
       <div class="max-w-3xl mx-auto p-4">
-        <header class="flex flex-wrap justify-between items-center gap-2 mb-4">
+        <header class="flex justify-between items-center gap-2 mb-4">
           <RouterLink class="flex items-center gap-2 text-on-surface-variant no-underline text-sm transition-colors hover:text-on-surface whitespace-nowrap" to="/skillz">
             <span class="text-xl">←</span>
             <span class="hidden sm:inline">Back to Skillz</span>
           </RouterLink>
 
-          <div class="flex items-center gap-4">
-            <SkillDuration class="text-sm text-on-surface-variant" :minutes="tour.minutes" />
+          <div class="flex items-center gap-2 min-w-0">
+            <SkillDuration class="hidden sm:flex text-sm text-on-surface-variant shrink-0" :minutes="tour.minutes" />
 
-            <!-- Reset button (shows when there's progress) -->
+            <!-- Reset button (dev mode only) -->
             <button
-              v-if="progress"
-              class="px-3 py-1.5 text-sm font-medium text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface whitespace-nowrap"
+              v-if="progress && devmode.isSelected.value"
+              class="hidden sm:block shrink-0 px-3 py-1.5 text-sm font-medium text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface"
               title="Reset progress"
               @click="onReset()"
             >
@@ -135,23 +154,23 @@
             <!-- Completed with next tour: Next is primary, Restart is secondary -->
             <template v-if="isCompleted && nextTour">
               <button
-                class="px-4 py-1.5 text-sm font-semibold text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface whitespace-nowrap"
+                class="shrink-0 px-4 py-1.5 text-sm font-semibold text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface"
                 @click="onClick()"
               >
                 Restart
               </button>
               <button
-                class="px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110 whitespace-nowrap"
+                class="min-w-0 px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110"
                 @click="onClickNext()"
               >
-                Next: {{ nextTour.name }}
+                <span class="block truncate">Next: {{ nextTour.name }}</span>
               </button>
             </template>
 
             <!-- Otherwise: single primary button -->
             <button
               v-else
-              class="px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110"
+              class="shrink-0 px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110"
               @click="onClick()"
             >
               {{ label }}
@@ -180,7 +199,10 @@
             <SkillCategoryTags :categories="tour.categories" />
           </div> -->
 
-          <h1 class="text-2xl font-bold m-0 mb-3 text-on-surface">{{ tour.name }}</h1>
+          <h1
+            class="text-2xl font-bold m-0 mb-3 text-on-surface"
+            :class="isCompleted ? 'pr-20 md:pr-32' : ''"
+          >{{ tour.name }}</h1>
           <p class="text-base text-on-surface-variant m-0 mb-6 leading-relaxed md:pr-26">{{ tour.description }}</p>
 
           <h2 class="text-base font-semibold m-0 mb-4 text-on-surface">You'll learn how to:</h2>
diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
new file mode 100644
index 000000000..c8241aa8c
--- /dev/null
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+  import { useHead } from '@unhead/vue'
+  import { definePage } from 'unplugin-vue-router/runtime'
+
+  // Framework
+  import { useBreakpoints, useStack } from '@vuetify/v0'
+
+  // Components
+  import { Discovery } from '@/components/discovery'
+  import PlaygroundMarkdownPanel from '@/components/playground/PlaygroundMarkdownPanel.vue'
+  import PlaygroundResizeHandle from '@/components/playground/PlaygroundResizeHandle.vue'
+  import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
+  import SkillzComplete from '@/components/skillz/SkillzComplete.vue'
+
+  // Composables
+  import { useResizeHandle } from '@/composables/useResizeHandle'
+  import { useParams } from '@/composables/useRoute'
+  import { useTutorial } from '@/composables/useTutorial'
+
+  // Utilities
+  import { computed, shallowRef, watch } from 'vue'
+  import '@vue/repl/style.css'
+  import { useRoute, useRouter } from 'vue-router'
+
+  definePage({
+    meta: {
+      layout: 'fullscreen',
+    },
+  })
+
+  const route = useRoute()
+  const params = useParams<{ id: string }>()
+  const tutorialId = computed(() => params.value.id)
+  const initialStep = computed(() => {
+    const s = Number.parseInt(String(route.query.step ?? '1'), 10)
+    return Number.isNaN(s) || s < 1 ? 1 : s
+  })
+
+  const {
+    store,
+    isDark,
+    replTheme,
+    previewOptions,
+    meta,
+    html,
+    stepLabel,
+    currentStep,
+    isFirst,
+    isLast,
+    isReady,
+    fileTreeKey,
+    stepOptions,
+    nextStep,
+    prevStep,
+    complete,
+  } = useTutorial(tutorialId, initialStep)
+
+  // Keep ?step query param in sync so refresh/share preserves position
+  watch(currentStep, step => {
+    const current = Number.parseInt(String(route.query.step ?? '1'), 10)
+    if (current !== step) {
+      router.replace({ query: step > 1 ? { step } : undefined })
+    }
+  })
+
+  function onNext () {
+    if (isLast.value) {
+      onComplete()
+    } else {
+      nextStep()
+    }
+  }
+
+  useHead({
+    title: computed(() => meta.value ? `${meta.value.title} - Vuetify0` : 'Tutorial - Vuetify0'),
+  })
+
+  const breakpoints = useBreakpoints()
+  const isDesktop = computed(() => breakpoints.mdAndUp.value)
+  const sidebarOpen = shallowRef(true)
+  watch(isDesktop, v => {
+    sidebarOpen.value = v
+  })
+
+  // ── Resizable panels ────────────────────────────────────────────────
+  const markdownHandle = useResizeHandle({
+    storageKey: 'tutorial-markdown-width', defaultValue: 350, min: 200, max: 600, direction: 'horizontal',
+  })
+
+  // ── Completion ──────────────────────────────────────────────────────
+  const stack = useStack()
+  const showComplete = shallowRef(false)
+  const router = useRouter()
+
+  const ticket = stack.register({
+    onDismiss: () => {
+      showComplete.value = false
+    },
+  })
+
+  watch(showComplete, open => {
+    if (open) ticket.select()
+    else ticket.unselect()
+  })
+
+  function onComplete () {
+    complete()
+    showComplete.value = true
+  }
+</script>
+
+<template>
+  <div class="h-screen flex flex-col overflow-hidden">
+    <!-- Header -->
+    <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface shrink-0">
+      <div class="flex items-center gap-3">
+        <RouterLink
+          aria-label="Back to skill"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
+          title="Back to skill"
+          :to="`/skillz/${tutorialId}`"
+        >
+          <AppIcon icon="arrow-left" :size="18" />
+        </RouterLink>
+
+        <span class="text-sm font-medium text-on-surface">{{ meta?.title ?? 'Tutorial' }}</span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          v-if="!isDesktop && !stepOptions.hideFiles"
+          aria-label="Toggle files"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle files"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="folder" :size="18" />
+        </button>
+
+        <button
+          v-if="isDesktop && !stepOptions.hideFiles"
+          aria-label="Toggle sidebar"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle sidebar"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="menu" :size="18" />
+        </button>
+
+        <AppThemeToggle />
+      </div>
+    </header>
+
+    <!-- Tutorial layout -->
+    <div
+      v-if="isReady"
+      class="flex-1 min-h-0 flex overflow-hidden"
+      :class="[
+        { dark: isDark, 'select-none': markdownHandle.isResizing.value },
+        isDesktop ? 'flex-row' : 'flex-col',
+      ]"
+    >
+      <!-- Markdown panel -->
+      <Discovery.Activator
+        active-class="rounded-lg"
+        as="div"
+        class="tutorial-markdown-panel overflow-hidden shrink-0"
+        :class="isDesktop ? 'border-r border-divider' : 'border-b border-divider max-h-[40vh]'"
+        step="instructions"
+        :style="isDesktop ? { width: `${markdownHandle.size.value}px` } : undefined"
+      >
+        <PlaygroundMarkdownPanel
+          :html="html"
+          :is-first="isFirst"
+          :is-last="isLast"
+          :level="meta?.level"
+          :step-label="stepLabel"
+          @next="onNext"
+          @prev="prevStep"
+        />
+      </Discovery.Activator>
+
+      <!-- Markdown ↔ Right column handle -->
+      <PlaygroundResizeHandle
+        v-if="isDesktop"
+        direction="col"
+        :is-resizing="markdownHandle.isResizing.value"
+        @dblclick="markdownHandle.reset()"
+        @pointerdown="markdownHandle.onPointerDown"
+      />
+
+      <!-- Right column -->
+      <PlaygroundWorkspace
+        :external-resizing="markdownHandle.isResizing.value"
+        :file-tree-key="fileTreeKey"
+        :hide-breadcrumbs="stepOptions.hideBreadcrumbs"
+        :hide-files="stepOptions.hideFiles"
+        :hide-tabs="stepOptions.hideTabs"
+        :is-dark="isDark"
+        :is-desktop="isDesktop"
+        :preview-options="previewOptions"
+        :repl-theme="replTheme"
+        :sidebar-open="sidebarOpen"
+        :store="store"
+        @update:sidebar-open="v => sidebarOpen = v"
+      />
+    </div>
+
+    <!-- Completion overlay -->
+    <div
+      v-if="showComplete"
+      class="fixed inset-0 flex items-center justify-center"
+      :style="{ zIndex: ticket.zIndex.value }"
+    >
+      <SkillzComplete
+        description="You've learned the Vue fundamentals that power every v0 composable. Go explore — or dive into another tutorial when you're ready."
+        title="Tutorial Complete"
+        @back="showComplete = false"
+        @complete="router.push(`/skillz/${tutorialId}`)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index ab6e0a681..79fab3804 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/apps/docs/src/plugins/icons.ts
@@ -10,10 +10,12 @@ import {
   mdiArrowLeft,
   mdiArrowUp,
   mdiBeaker,
+  mdiBookOpenOutline,
   mdiBookOpenPageVariant,
   mdiBug,
   mdiCalendar,
   mdiCalendarClock,
+  mdiClockOutline,
   mdiCheck,
   mdiCheckCircle,
   mdiCheckDecagram,
@@ -23,6 +25,7 @@ import {
   mdiChevronUp,
   mdiCircleOutline,
   mdiClose,
+  mdiCodeJson,
   mdiCodeTags,
   mdiCog,
   mdiCompassOutline,
@@ -33,11 +36,19 @@ import {
   mdiDevTo,
   mdiDotsGrid,
   mdiGradientVertical,
+  mdiLanguageCss3,
+  mdiLanguageJavascript,
   mdiDownload,
+  mdiDragHorizontal,
+  mdiDragVertical,
   mdiEye,
   mdiEyeOffOutline,
   mdiFire,
   mdiFirefox,
+  mdiFilePlusOutline,
+  mdiFolderOpenOutline,
+  mdiFolderOutline,
+  mdiFolderPlusOutline,
   mdiFolderZipOutline,
   mdiFormatListBulleted,
   mdiFormatPaint,
@@ -90,6 +101,9 @@ import {
   mdiTune,
   mdiWeatherNight,
   mdiWeatherSunny,
+  mdiViewSplitHorizontal,
+  mdiViewSplitVertical,
+  mdiVuejs,
   mdiWrap,
   mdiWrapDisabled,
 } from '@mdi/js'
@@ -177,6 +191,7 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'vapor': mdiRocketLaunch,
     'calendar': mdiCalendar,
     'calendar-clock': mdiCalendarClock,
+    'clock': mdiClockOutline,
     'share': mdiShareVariant,
     'check-circle': mdiCheckCircle,
     'check-decagram': mdiCheckDecagram,
@@ -187,6 +202,17 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'map': mdiMap,
     'telescope': mdiTelescope,
     'download': mdiDownload,
+    'drag-horizontal': mdiDragHorizontal,
+    'drag-vertical': mdiDragVertical,
+    'file-plus': mdiFilePlusOutline,
+    'folder-plus': mdiFolderPlusOutline,
+    'lang-vue': mdiVuejs,
+    'lang-ts': mdiLanguageTypescript,
+    'lang-js': mdiLanguageJavascript,
+    'lang-css': mdiLanguageCss3,
+    'lang-json': mdiCodeJson,
+    'folder': mdiFolderOutline,
+    'folder-open': mdiFolderOpenOutline,
     'folder-zip': mdiFolderZipOutline,
     'create': mdiCreation,
     'toc': mdiFormatListBulleted,
@@ -198,6 +224,10 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'split': mdiUnfoldMoreVertical,
     'beaker': mdiBeaker,
     'dots-grid': mdiDotsGrid,
+    'editor': mdiCodeTags,
+    'examples': mdiBookOpenOutline,
+    'layout-horizontal': mdiViewSplitVertical,
+    'layout-vertical': mdiViewSplitHorizontal,
     'gradient': mdiGradientVertical,
     'chrome': mdiGoogleChrome,
     'fire': mdiFire,
diff --git a/apps/docs/src/plugins/router.ts b/apps/docs/src/plugins/router.ts
index 9a1cf74e8..6a0ae9acb 100644
--- a/apps/docs/src/plugins/router.ts
+++ b/apps/docs/src/plugins/router.ts
@@ -27,14 +27,18 @@ const routerOptions: Omit<RouterOptions, 'history'> = {
     if (to.hash) {
       return new Promise(resolve => {
         setTimeout(() => {
-          const el = document.querySelector(to.hash)
-          if (el) {
-            const top = el.getBoundingClientRect().top + window.scrollY - 80
-            const behavior = getPrefersReducedMotion() ? 'auto' : 'smooth'
-            resolve({ top, behavior })
-          } else {
-            resolve({ top: 0 })
+          try {
+            const el = document.querySelector(to.hash)
+            if (el) {
+              const top = el.getBoundingClientRect().top + window.scrollY - 80
+              const behavior = getPrefersReducedMotion() ? 'auto' : 'smooth'
+              resolve({ top, behavior })
+              return
+            }
+          } catch {
+            // Hash is not a valid CSS selector (e.g. base64 store state)
           }
+          resolve({ top: 0 })
         }, 100)
       })
     }
diff --git a/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json b/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json
index 7cdf38ec9..2dde1181e 100644
--- a/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json
+++ b/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json
@@ -11,6 +11,14 @@
   "minutes": 2,
   "startRoute": "/introduction/why-vuetify0",
   "steps": [
+    {
+      "id": "welcome",
+      "title": "Navigating by Keyboard",
+      "task": "You can get anywhere in the docs without touching the mouse. This tour walks you through the key shortcuts.",
+      "hint": "",
+      "learn": "Navigate the docs hands-free",
+      "noActivator": true
+    },
     {
       "id": "search",
       "title": "Open Search",
diff --git a/apps/docs/src/skillz/tours/beginner/using-search/index.json b/apps/docs/src/skillz/tours/beginner/using-search/index.json
index 2a3e20cb3..5fac23473 100644
--- a/apps/docs/src/skillz/tours/beginner/using-search/index.json
+++ b/apps/docs/src/skillz/tours/beginner/using-search/index.json
@@ -11,6 +11,14 @@
   "minutes": 2,
   "startRoute": "/introduction/getting-started",
   "steps": [
+    {
+      "id": "welcome",
+      "title": "Using Search",
+      "task": "Search is the fastest way to find anything in the docs — components, composables, guides, and more. Let's see how it works.",
+      "hint": "",
+      "learn": "Get the most out of docs search",
+      "noActivator": true
+    },
     {
       "id": "search",
       "title": "Search Button",
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json b/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json
index a0fa80a54..b3578009b 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json
+++ b/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json
@@ -11,6 +11,14 @@
   "minutes": 3,
   "startRoute": "/introduction/why-vuetify0",
   "steps": [
+    {
+      "id": "welcome",
+      "title": "Using the Docs",
+      "task": "This tour shows you where everything lives — navigation, search, AI, and settings. Let's walk through it together.",
+      "hint": "",
+      "learn": "Understand the docs layout",
+      "noActivator": true
+    },
     {
       "id": "search",
       "title": "Search",
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
new file mode 100644
index 000000000..db767a25a
--- /dev/null
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
@@ -0,0 +1,98 @@
+{
+  "mode": "guided",
+  "id": "using-the-playground",
+  "name": "Using the Playground",
+  "level": 1,
+  "track": "essentials",
+  "categories": ["meta"],
+  "order": 1,
+  "prerequisites": [],
+  "description": "Learn how the playground works before you start coding.",
+  "minutes": 3,
+  "startRoute": "/playground",
+  "steps": [
+    {
+      "id": "welcome",
+      "title": "Welcome to the Playground",
+      "task": "This is where you write and run code. Let's take a quick tour of what's here.",
+      "hint": "",
+      "learn": "Understand the playground layout",
+      "noActivator": true
+    },
+    {
+      "id": "sidebar-toggle",
+      "title": "Toggle File Panel",
+      "task": "Show or hide the file panel with this button — or use Ctrl+B from anywhere in the editor.",
+      "hint": "",
+      "learn": "Toggle the file browser",
+      "placement": "bottom"
+    },
+    {
+      "id": "file-tree",
+      "title": "Project Files",
+      "task": "Your files live here. Click any file to open it in the editor.",
+      "hint": "",
+      "learn": "Switch between project files",
+      "placement": "right",
+      "skipOnMobile": true
+    },
+    {
+      "id": "editor",
+      "title": "Code Editor",
+      "task": "Write your code here. The preview updates instantly as you type.",
+      "hint": "",
+      "learn": "Write code and see it run live",
+      "placement": "right",
+      "placementMobile": "center"
+    },
+    {
+      "id": "preview",
+      "title": "Live Preview",
+      "task": "Your component renders here in real time. No build step — changes appear as you type.",
+      "hint": "",
+      "learn": "See code changes render instantly",
+      "placement": "left",
+      "placementMobile": "center"
+    },
+    {
+      "id": "panel-toggle",
+      "title": "Intro Panel",
+      "task": "This button opens or closes the getting-started panel. It gives you a quick overview of what the playground offers.",
+      "hint": "",
+      "learn": "Toggle the intro panel",
+      "placement": "bottom"
+    },
+    {
+      "id": "intro-panel",
+      "title": "Getting Started",
+      "task": "The intro panel gives you an overview of the playground's features and links to tutorials.",
+      "hint": "",
+      "learn": "Use the intro panel for orientation",
+      "placement": "right"
+    },
+    {
+      "id": "examples",
+      "title": "Load an Example",
+      "task": "Click here to browse and load example code snippets.",
+      "hint": "",
+      "learn": "Load examples from the toolbar",
+      "placement": "bottom"
+    },
+    {
+      "id": "examples-menu",
+      "title": "Examples Library",
+      "task": "Browse ready-made examples for every v0 composable. Click one to load it instantly.",
+      "hint": "",
+      "learn": "Browse and load example projects",
+      "placement": "left"
+    },
+    {
+      "id": "complete",
+      "title": "Ready to Code",
+      "task": "That's all there is to it. Load an example from the toolbar or start from scratch.",
+      "hint": "",
+      "learn": "Use the playground with confidence",
+      "noActivator": true
+    }
+  ]
+}
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
new file mode 100644
index 000000000..697cf4e8a
--- /dev/null
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
@@ -0,0 +1,68 @@
+// Stores
+import { usePlaygroundStore } from '@/stores/playground'
+
+/**
+ * Tour definition for "Using the Playground".
+ * Opens and closes playground panels so users see each feature in context.
+ */
+export function defineTour () {
+  const playground = usePlaygroundStore()
+
+  return {
+    handlers: {
+      'welcome': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+          playground.sidebar.close()
+        },
+      },
+      'sidebar-toggle': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+      'file-tree': {
+        enter: () => {
+          playground.examples.close()
+          playground.sidebar.open()
+        },
+        back: () => playground.sidebar.close(),
+      },
+      'editor': {
+        enter: () => playground.examples.close(),
+      },
+      'preview': {
+        enter: () => playground.examples.close(),
+      },
+      'panel-toggle': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+      'intro-panel': {
+        enter: () => playground.panel.open(),
+        back: () => playground.panel.close(),
+      },
+      'examples': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+        back: () => playground.panel.open(),
+      },
+      'examples-menu': {
+        enter: () => playground.examples.open(),
+        back: () => playground.examples.close(),
+      },
+      'complete': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+    },
+  }
+}
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/meta.json b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/meta.json
new file mode 100644
index 000000000..60d6d915f
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "Vue Advanced",
+  "description": "Build composables from scratch — shallowRef, effectScope, generics, defineModel, and scoped slots demystified",
+  "level": 3,
+  "track": "essentials",
+  "categories": [],
+  "order": 30,
+  "minutes": 15,
+  "prerequisites": ["vue-intermediate"]
+}
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue
new file mode 100644
index 000000000..4470ddd73
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue
@@ -0,0 +1,79 @@
+<script setup>
+  // Composables
+  import { useCounter } from './useCounter'
+
+  const counterA = useCounter()
+  const counterB = useCounter()
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Your First Composable
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div class="p-4 rounded-lg border border-solid border-divider bg-surface">
+        <h2 class="text-lg font-bold text-on-surface mb-3">Counter A</h2>
+
+        <p class="text-3xl font-bold text-primary mb-4">
+          {{ counterA.count.value }}
+        </p>
+
+        <div class="flex gap-2">
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterA.increment"
+          >
+            +
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterA.decrement"
+          >
+            -
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded border border-solid border-divider text-on-surface-variant font-medium"
+            @click="counterA.reset"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div class="p-4 rounded-lg border border-solid border-divider bg-surface">
+        <h2 class="text-lg font-bold text-on-surface mb-3">Counter B</h2>
+
+        <p class="text-3xl font-bold text-primary mb-4">
+          {{ counterB.count.value }}
+        </p>
+
+        <div class="flex gap-2">
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterB.increment"
+          >
+            +
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterB.decrement"
+          >
+            -
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded border border-solid border-divider text-on-surface-variant font-medium"
+            @click="counterB.reset"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/README.md
new file mode 100644
index 000000000..d8c9f1bb4
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/README.md
@@ -0,0 +1,41 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Your first composable
+
+A **composable** is a function that uses Vue's reactivity to encapsulate and reuse stateful logic. By convention, composable names start with `use`.
+
+## The use* pattern
+
+```ts
+import { ref } from 'vue'
+
+export function useCounter () {
+  const count = ref(0)
+
+  function increment () { count.value++ }
+  function decrement () { count.value-- }
+  function reset () { count.value = 0 }
+
+  return { count, increment, decrement, reset }
+}
+```
+
+Each call creates **independent state** — two components using `useCounter()` each get their own `count`. This is the foundation of composable architecture.
+
+## Try it
+
+The editor shows two independent counter instances side-by-side. Try adding a `max` option so the counter stops incrementing at a limit:
+
+```ts
+export function useCounter (max = Infinity) {
+  // ...
+  function increment () {
+    if (count.value < max) count.value++
+  }
+}
+```
+
+> [!TIP] Every v0 composable follows this exact pattern — a function that returns reactive state and methods. `createSelection`, `createSingle`, `createStep` all work just like your `useCounter`.
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/useCounter.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/useCounter.ts
new file mode 100644
index 000000000..d5c8504e8
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/useCounter.ts
@@ -0,0 +1,20 @@
+// Utilities
+import { ref } from 'vue'
+
+export function useCounter () {
+  const count = ref(0)
+
+  function increment () {
+    count.value++
+  }
+
+  function decrement () {
+    count.value--
+  }
+
+  function reset () {
+    count.value = 0
+  }
+
+  return { count, increment, decrement, reset }
+}
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue
new file mode 100644
index 000000000..98a0563a6
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue
@@ -0,0 +1,77 @@
+<script setup>
+  // Composables
+  import { useList } from './useList'
+
+  // Utilities
+  import { ref, onUpdated } from 'vue'
+
+  const input = ref('')
+  const renderCount = ref(0)
+  const { items, add, remove, clear } = useList(['Apple', 'Banana', 'Cherry'])
+
+  onUpdated(() => {
+    renderCount.value++
+  })
+
+  function addItem () {
+    if (!input.value.trim()) return
+    add(input.value.trim())
+    input.value = ''
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      shallowRef vs ref
+    </h1>
+
+    <div class="mb-4 p-3 rounded-lg bg-surface-tint text-sm">
+      Render count: <strong class="text-primary">{{ renderCount }}</strong>
+    </div>
+
+    <div class="flex gap-2 mb-6">
+      <input
+        v-model="input"
+        class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface"
+        placeholder="Add an item..."
+        @keyup.enter="addItem"
+      >
+
+      <button
+        class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
+        @click="addItem"
+      >
+        Add
+      </button>
+
+      <button
+        class="px-4 py-2 rounded border border-solid border-divider text-on-surface-variant font-medium"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <ul class="space-y-2">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="flex items-center justify-between p-3 rounded-lg bg-surface"
+      >
+        <span class="text-on-surface">{{ item }}</span>
+
+        <button
+          class="text-sm text-error px-2 py-1 rounded hover:bg-surface-tint"
+          @click="remove(index)"
+        >
+          Remove
+        </button>
+      </li>
+    </ul>
+
+    <p v-if="items.length === 0" class="text-on-surface-variant text-sm mt-4">
+      List is empty. Add some items above.
+    </p>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/README.md
new file mode 100644
index 000000000..44cf2faeb
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/README.md
@@ -0,0 +1,41 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# shallowRef vs ref
+
+`ref` tracks changes **deeply** — if you have a ref holding an array, Vue watches every element inside it. `shallowRef` only tracks when the `.value` itself is **replaced**, not when its contents mutate.
+
+## Why shallowRef?
+
+For large collections, deep tracking is expensive. With `shallowRef`, you signal changes by replacing the entire value:
+
+```ts
+import { shallowRef } from 'vue'
+
+const items = shallowRef([])
+
+// This does NOT trigger reactivity:
+items.value.push('new')
+
+// This DOES — replace the whole array:
+items.value = [...items.value, 'new']
+```
+
+## triggerRef
+
+If you mutate a `shallowRef` in place, you can manually notify Vue:
+
+```ts
+import { shallowRef, triggerRef } from 'vue'
+
+items.value.push('new')
+triggerRef(items)
+```
+
+## Try it
+
+The editor shows a `useList` composable built with `shallowRef`. A render counter shows how many times the component re-renders. Try swapping `shallowRef` for `ref` in `useList.ts` and observe the difference.
+
+> [!TIP] v0 uses `shallowRef` by default for performance. When you see v0 composable source code, you'll find shallowRef everywhere instead of ref.
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/useList.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/useList.ts
new file mode 100644
index 000000000..bc0af6d55
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/useList.ts
@@ -0,0 +1,20 @@
+// Utilities
+import { shallowRef, triggerRef } from 'vue'
+
+export function useList<T> (initial: T[] = []) {
+  const items = shallowRef([...initial])
+
+  function add (item: T) {
+    items.value = [...items.value, item]
+  }
+
+  function remove (index: number) {
+    items.value = items.value.filter((_, i) => i !== index)
+  }
+
+  function clear () {
+    items.value = []
+  }
+
+  return { items, add, remove, clear, triggerRef: () => triggerRef(items) }
+}
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue
new file mode 100644
index 000000000..37954575e
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue
@@ -0,0 +1,76 @@
+<script setup>
+  // Composables
+  import { usePolling } from './usePolling'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const ticks = ref(0)
+  const log = ref([])
+
+  function poll () {
+    ticks.value++
+    const time = new Date().toLocaleTimeString()
+    log.value = [...log.value.slice(-4), `[${time}] Tick #${ticks.value}`]
+  }
+
+  const { isRunning, start, stop, restart } = usePolling(poll, 1000)
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      effectScope
+    </h1>
+
+    <div class="mb-4 flex items-center gap-3">
+      <span
+        class="inline-block w-3 h-3 rounded-full"
+        :class="isRunning ? 'bg-success' : 'bg-error'"
+      />
+
+      <span class="text-on-surface-variant">
+        {{ isRunning ? 'Polling active' : 'Polling stopped' }}
+      </span>
+
+      <span class="text-sm text-on-surface-variant">
+        ({{ ticks }} ticks)
+      </span>
+    </div>
+
+    <div class="flex gap-2 mb-6">
+      <button
+        class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
+        :disabled="isRunning"
+        @click="start"
+      >
+        Start
+      </button>
+
+      <button
+        class="px-4 py-2 rounded bg-error text-on-error font-medium"
+        :disabled="!isRunning"
+        @click="stop"
+      >
+        Stop
+      </button>
+
+      <button
+        class="px-4 py-2 rounded border border-solid border-divider text-on-surface-variant font-medium"
+        @click="restart"
+      >
+        Restart
+      </button>
+    </div>
+
+    <div class="p-4 rounded-lg bg-surface font-mono text-sm space-y-1">
+      <p v-if="log.length === 0" class="text-on-surface-variant">
+        Click Start to begin polling...
+      </p>
+
+      <p v-for="(entry, i) in log" :key="i" class="text-on-surface">
+        {{ entry }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/README.md
new file mode 100644
index 000000000..c5647d865
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/README.md
@@ -0,0 +1,42 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# effectScope
+
+`effectScope()` groups reactive effects (watchers, computed, etc.) so you can **dispose them all at once**. This is essential for composables that set up intervals, listeners, or subscriptions.
+
+## The problem
+
+Without `effectScope`, you'd need to manually track and clean up every watcher and interval:
+
+```ts
+const interval = setInterval(poll, 1000)
+const stopWatch = watch(source, callback)
+
+// Later...
+clearInterval(interval)
+stopWatch()
+```
+
+## The solution
+
+```ts
+import { effectScope } from 'vue'
+
+const scope = effectScope()
+
+scope.run(() => {
+  // Everything created here is grouped
+  watch(source, callback)
+  setInterval(poll, 1000)
+})
+
+// One call disposes everything
+scope.stop()
+```
+
+## Try it
+
+The editor shows a `usePolling` composable that uses `effectScope` to manage a polling interval. Click **Start** to begin, **Stop** to dispose the scope, and **Restart** to create a fresh one. Try adding `pause()` and `resume()` functions that stop and restart the interval without disposing the scope.
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/usePolling.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/usePolling.ts
new file mode 100644
index 000000000..9dc459133
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/usePolling.ts
@@ -0,0 +1,46 @@
+// Utilities
+import { ref, effectScope } from 'vue'
+
+// Types
+import type { EffectScope } from 'vue'
+
+export function usePolling (fn: () => void, interval = 1000) {
+  const isRunning = ref(false)
+  let scope: EffectScope | null = null
+  let timer: ReturnType<typeof setInterval> | null = null
+
+  function start () {
+    if (isRunning.value) return
+
+    scope = effectScope()
+
+    scope.run(() => {
+      timer = setInterval(fn, interval)
+    })
+
+    isRunning.value = true
+  }
+
+  function stop () {
+    if (!isRunning.value) return
+
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+
+    if (scope) {
+      scope.stop()
+      scope = null
+    }
+
+    isRunning.value = false
+  }
+
+  function restart () {
+    stop()
+    start()
+  }
+
+  return { isRunning, start, stop, restart }
+}
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue
new file mode 100644
index 000000000..8c8c5a5f7
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue
@@ -0,0 +1,54 @@
+<script setup>
+  // Components
+  import SelectableList from './SelectableList.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const users = [
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+  ]
+
+  const selectedUser = ref()
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Generics in Components
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Select a user</h2>
+
+        <SelectableList
+          v-model="selectedUser"
+          :items="users"
+          :label="user => user.name"
+        />
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Details</h2>
+
+        <div v-if="selectedUser" class="p-4 rounded-lg bg-surface-tint">
+          <p class="text-on-background font-medium">
+            {{ selectedUser.name }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant">
+            {{ selectedUser.role }}
+          </p>
+        </div>
+
+        <p v-else class="text-on-surface-variant text-sm">
+          Click a user to see their details.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/README.md
new file mode 100644
index 000000000..fc60c670b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/README.md
@@ -0,0 +1,29 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Generics in components
+
+Vue supports **TypeScript generics** in `<script setup>` via the `generic` attribute. This lets you build components that preserve type safety for any data shape.
+
+## Generic script tag
+
+```vue
+<script lang="ts" setup generic="T">
+  defineProps<{
+    items: T[]
+    selected?: T
+  }>()
+</script>
+```
+
+When a parent passes `items` as `User[]`, TypeScript infers `T = User` — the `selected` prop is automatically typed as `User | undefined`.
+
+## Why generics?
+
+Without generics, you'd type items as `unknown[]` and lose autocomplete. Generics let the component **adapt to the caller's data type** while keeping full type safety.
+
+## Try it
+
+The editor shows a generic `SelectableList` component. It receives typed items and emits a typed `select` event. Try using it with `{ id: number, name: string }` objects — notice how TypeScript infers the types correctly.
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/SelectableList.vue
new file mode 100644
index 000000000..e21e069b9
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/SelectableList.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+    modelValue?: T
+    label?: (item: T) => string
+  }>()
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: T]
+  }>()
+
+  function select (item: T) {
+    emit('update:modelValue', item)
+  }
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <button
+        class="w-full text-left px-3 py-2 rounded transition-colors"
+        :class="modelValue?.id === item.id
+          ? 'bg-primary text-on-primary'
+          : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        @click="select(item)"
+      >
+        {{ label ? label(item) : item.id }}
+      </button>
+    </li>
+  </ul>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue
new file mode 100644
index 000000000..825db27c7
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue
@@ -0,0 +1,72 @@
+<script setup>
+  // Components
+  import SearchInput from './SearchInput.vue'
+  import SelectableList from './SelectableList.vue'
+
+  // Utilities
+  import { ref, computed } from 'vue'
+
+  const users = [
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+    { id: 5, name: 'Eve', role: 'Designer' },
+  ]
+
+  const query = ref('')
+  const selectedUser = ref()
+
+  const filtered = computed(() => {
+    if (!query.value) return users
+    const q = query.value.toLowerCase()
+    return users.filter(u => u.name.toLowerCase().includes(q) || u.role.toLowerCase().includes(q))
+  })
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      defineModel
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <SearchInput v-model="query" class="mb-4" />
+
+        <SelectableList
+          v-model="selectedUser"
+          :items="filtered"
+          :label="user => user.name"
+        />
+
+        <p v-if="filtered.length === 0" class="text-on-surface-variant text-sm mt-3">
+          No results for "{{ query }}"
+        </p>
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Details</h2>
+
+        <div v-if="selectedUser" class="p-4 rounded-lg bg-surface-tint">
+          <p class="text-on-background font-medium">
+            {{ selectedUser.name }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant">
+            {{ selectedUser.role }}
+          </p>
+        </div>
+
+        <p v-else class="text-on-surface-variant text-sm">
+          Click a user to see details.
+        </p>
+
+        <div class="mt-4 p-3 rounded-lg bg-surface text-sm">
+          <span class="text-on-surface-variant">Debounced query:</span>
+          <strong class="text-on-surface ml-1">{{ query || '(empty)' }}</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/README.md
new file mode 100644
index 000000000..4fbbde255
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/README.md
@@ -0,0 +1,46 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# defineModel
+
+`defineModel` is a compiler macro that simplifies **two-way binding** on custom components. Instead of declaring a prop and emit separately, `defineModel` does both in one line.
+
+## Before defineModel
+
+```vue
+<script setup>
+  const props = defineProps(['modelValue'])
+  const emit = defineEmits(['update:modelValue'])
+
+  function update (value) {
+    emit('update:modelValue', value)
+  }
+</script>
+```
+
+## With defineModel
+
+```vue
+<script setup>
+  const model = defineModel()
+</script>
+```
+
+`model` is a ref you can read and write directly. Vue handles the prop/emit plumbing automatically.
+
+## Debounced input
+
+`defineModel` is perfect for input wrappers. The editor shows a `SearchInput` component that debounces its model value — the parent only sees updates after the user stops typing:
+
+```vue
+<script setup>
+  const model = defineModel()
+  // Debounce logic updates model after a delay
+</script>
+```
+
+## Try it
+
+The `SelectableList` now uses `defineModel` instead of manual prop/emit. Try adding `defineModel`'s `.lazy` modifier support or a default value.
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SearchInput.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SearchInput.vue
new file mode 100644
index 000000000..772fe6935
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SearchInput.vue
@@ -0,0 +1,30 @@
+<script setup>
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const model = defineModel({ default: '' })
+
+  const internal = ref(model.value)
+  let timeout = null
+
+  watch(internal, val => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      model.value = val
+    }, 300)
+  })
+
+  watch(model, val => {
+    if (val !== internal.value) {
+      internal.value = val
+    }
+  })
+</script>
+
+<template>
+  <input
+    v-model="internal"
+    class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface"
+    placeholder="Search..."
+  >
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SelectableList.vue
new file mode 100644
index 000000000..b7beef49b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SelectableList.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+    label?: (item: T) => string
+  }>()
+
+  const model = defineModel<T>()
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <button
+        class="w-full text-left px-3 py-2 rounded transition-colors"
+        :class="model?.id === item.id
+          ? 'bg-primary text-on-primary'
+          : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        @click="model = item"
+      >
+        {{ label ? label(item) : item.id }}
+      </button>
+    </li>
+  </ul>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue
new file mode 100644
index 000000000..47517c43f
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue
@@ -0,0 +1,70 @@
+<script setup>
+  // Components
+  import SelectableList from './SelectableList.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const users = [
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+  ]
+
+  const selectedA = ref()
+  const selectedB = ref()
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Scoped Slots
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Card style</h2>
+
+        <SelectableList v-model="selectedA" :items="users">
+          <template #default="{ item, isSelected, select }">
+            <button
+              class="w-full text-left p-3 rounded-lg border border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary bg-primary text-on-primary'
+                : 'border-divider bg-surface text-on-surface hover:bg-surface-tint'"
+              @click="select"
+            >
+              <p class="font-medium">{{ item.name }}</p>
+              <p class="text-sm" :class="isSelected ? 'text-on-primary/70' : 'text-on-surface-variant'">
+                {{ item.role }}
+              </p>
+            </button>
+          </template>
+        </SelectableList>
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Chip style</h2>
+
+        <SelectableList v-model="selectedB" :items="users">
+          <template #default="{ item, isSelected, select }">
+            <button
+              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'bg-primary text-on-primary'
+                : 'bg-surface-tint text-on-surface hover:bg-surface'"
+              @click="select"
+            >
+              <span
+                class="w-2 h-2 rounded-full"
+                :class="isSelected ? 'bg-on-primary' : 'bg-primary'"
+              />
+              {{ item.name }}
+            </button>
+          </template>
+        </SelectableList>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/README.md
new file mode 100644
index 000000000..a27e56c5b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/README.md
@@ -0,0 +1,42 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Scoped slots
+
+Scoped slots let a child component **pass data back to the parent's template**. The child controls the logic; the parent controls the rendering.
+
+## Slot props
+
+```vue
+<!-- Child: SelectableList.vue -->
+<template>
+  <li v-for="item in items" :key="item.id">
+    <slot :item="item" :is-selected="isSelected(item)" :select="() => select(item)" />
+  </li>
+</template>
+```
+
+```vue
+<!-- Parent: App.vue -->
+<SelectableList :items="users" v-model="selected">
+  <template #default="{ item, isSelected, select }">
+    <button @click="select" :class="{ active: isSelected }">
+      {{ item.name }}
+    </button>
+  </template>
+</SelectableList>
+```
+
+The parent receives `item`, `isSelected`, and `select` as slot props — full control over how each item looks, while the component manages selection state.
+
+## The headless pattern
+
+This is the **headless component** pattern: provide behavior through slot props, leave rendering to the consumer. Two different parents can render the same data completely differently.
+
+## Try it
+
+The editor shows `SelectableList` exposing scoped slots. The App renders two different presentations from the same component. Try adding an `#empty` slot that receives `{ query }` as a prop.
+
+> [!TIP] This IS the headless component pattern. v0's components like `Selection.Root` and `Tabs.Panel` expose slot props that give you full control over rendering.
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/SelectableList.vue
new file mode 100644
index 000000000..863bde9ea
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/SelectableList.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+  }>()
+
+  const model = defineModel<T>()
+
+  function isSelected (item: T) {
+    return model.value?.id === item.id
+  }
+
+  function select (item: T) {
+    model.value = item
+  }
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <slot
+        :is-selected="isSelected(item)"
+        :item="item"
+        :select="() => select(item)"
+      />
+    </li>
+  </ul>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue
new file mode 100644
index 000000000..b69a529a7
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue
@@ -0,0 +1,121 @@
+<script setup>
+  // Components
+  import SelectableList from './SelectableList.vue'
+
+  // Composables
+  import { useFilter } from './useFilter'
+  import { useList } from './useList'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const { items, add, remove } = useList([
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+    { id: 5, name: 'Eve', role: 'Designer' },
+  ])
+
+  const { query, filtered } = useFilter(items, ['name', 'role'])
+
+  const selected = ref()
+
+  let nextId = 6
+
+  function addUser () {
+    const names = ['Frank', 'Grace', 'Hank', 'Ivy', 'Jack']
+    const roles = ['Engineer', 'Designer', 'Manager', 'Analyst']
+    add({
+      id: nextId++,
+      name: names[Math.floor(Math.random() * names.length)],
+      role: roles[Math.floor(Math.random() * roles.length)],
+    })
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Putting It Together
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <div class="flex gap-2 mb-4">
+          <input
+            v-model="query"
+            class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface"
+            placeholder="Search by name or role..."
+          >
+
+          <button
+            class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
+            @click="addUser"
+          >
+            Add
+          </button>
+        </div>
+
+        <SelectableList v-model="selected" :items="filtered">
+          <template #default="{ item, isSelected, select }">
+            <div
+              class="flex items-center justify-between p-3 rounded-lg border border-solid cursor-pointer transition-colors"
+              :class="isSelected
+                ? 'border-primary bg-primary text-on-primary'
+                : 'border-divider bg-surface text-on-surface hover:bg-surface-tint'"
+              @click="select"
+            >
+              <div>
+                <p class="font-medium">{{ item.name }}</p>
+                <p class="text-sm" :class="isSelected ? 'text-on-primary/70' : 'text-on-surface-variant'">
+                  {{ item.role }}
+                </p>
+              </div>
+
+              <button
+                class="text-sm px-2 py-1 rounded"
+                :class="isSelected ? 'text-on-primary/70 hover:text-on-primary' : 'text-error hover:bg-surface-tint'"
+                @click.stop="remove(items.indexOf(item))"
+              >
+                Remove
+              </button>
+            </div>
+          </template>
+
+          <template #empty>
+            <p class="text-on-surface-variant text-sm mt-3">
+              No results for "{{ query }}"
+            </p>
+          </template>
+        </SelectableList>
+
+        <p class="text-sm text-on-surface-variant mt-3">
+          {{ filtered.length }} of {{ items.length }} items
+        </p>
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Selected</h2>
+
+        <div v-if="selected" class="p-4 rounded-lg bg-surface-tint">
+          <p class="text-on-background font-medium text-lg">
+            {{ selected.name }}
+          </p>
+
+          <p class="text-on-surface-variant">
+            {{ selected.role }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant mt-2">
+            ID: {{ selected.id }}
+          </p>
+        </div>
+
+        <p v-else class="text-on-surface-variant text-sm">
+          Select a user from the list.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/README.md
new file mode 100644
index 000000000..3f4d07bb5
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/README.md
@@ -0,0 +1,36 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Putting it together
+
+Time to compose everything into a real feature: a **searchable, selectable, filterable list**. This combines composables (`useList`, `useFilter`) with a headless component (`SelectableList`) and scoped slots.
+
+## Composing composables
+
+Composables shine when combined. Each handles one concern:
+
+```ts
+const { items, add, remove } = useList(initialData)
+const { filtered, query } = useFilter(items, ['name', 'role'])
+```
+
+Feed `filtered` into `SelectableList` and you have a fully interactive, searchable, selectable list — with each piece independently testable and reusable.
+
+## The architecture
+
+```
+useList          → manages the raw collection
+useFilter        → filters items by search query
+SelectableList   → handles selection + renders via slots
+App.vue          → composes everything together
+```
+
+## Try it
+
+The editor shows the full composition. Try adding keyboard navigation — use `ArrowUp`/`ArrowDown` to move through filtered items, and `Enter` to select.
+
+## What's next
+
+You've built composables, used generics, scoped slots, and composed them into a real feature. These are the exact patterns v0 uses internally. Head to the **v0 Basics** tutorial to see how v0's built-in composables handle all of this for you.
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/SelectableList.vue
new file mode 100644
index 000000000..b78098a6b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/SelectableList.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+  }>()
+
+  const model = defineModel<T>()
+
+  function isSelected (item: T) {
+    return model.value?.id === item.id
+  }
+
+  function select (item: T) {
+    model.value = item
+  }
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <slot
+        :is-selected="isSelected(item)"
+        :item="item"
+        :select="() => select(item)"
+      />
+    </li>
+  </ul>
+
+  <slot v-if="items.length === 0" name="empty" />
+</template>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useFilter.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useFilter.ts
new file mode 100644
index 000000000..f48a3b3fe
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useFilter.ts
@@ -0,0 +1,26 @@
+// Utilities
+import { ref, computed } from 'vue'
+
+// Types
+import type { Ref } from 'vue'
+
+export function useFilter<T extends Record<string, unknown>> (
+  items: Ref<T[]>,
+  keys: (keyof T)[],
+) {
+  const query = ref('')
+
+  const filtered = computed(() => {
+    const q = query.value.toLowerCase().trim()
+    if (!q) return items.value
+
+    return items.value.filter(item =>
+      keys.some(key => {
+        const val = item[key]
+        return typeof val === 'string' && val.toLowerCase().includes(q)
+      }),
+    )
+  })
+
+  return { query, filtered }
+}
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useList.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useList.ts
new file mode 100644
index 000000000..c33662389
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useList.ts
@@ -0,0 +1,20 @@
+// Utilities
+import { shallowRef } from 'vue'
+
+export function useList<T> (initial: T[] = []) {
+  const items = shallowRef([...initial])
+
+  function add (item: T) {
+    items.value = [...items.value, item]
+  }
+
+  function remove (index: number) {
+    items.value = items.value.filter((_, i) => i !== index)
+  }
+
+  function clear () {
+    items.value = []
+  }
+
+  return { items, add, remove, clear }
+}
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/meta.json b/apps/docs/src/skillz/tutorials/beginner/v0-basics/meta.json
new file mode 100644
index 000000000..1cd19b382
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "v0 Basics",
+  "description": "Build a settings panel with headless components — Tabs, Checkbox, Radio, ExpansionPanel, and Dialog styled with UnoCSS",
+  "level": 1,
+  "track": "fundamentals",
+  "categories": [],
+  "order": 10,
+  "minutes": 15,
+  "prerequisites": ["vue-basics"]
+}
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue
new file mode 100644
index 000000000..c50280695
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue
@@ -0,0 +1,60 @@
+<script setup>
+  // Framework
+  import { Single } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const selected = ref('apple')
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Headless Selection
+    </h1>
+
+    <p class="text-sm text-on-surface-variant mb-4">
+      Pick your favorite fruit:
+    </p>
+
+    <Single.Root v-model="selected" class="flex gap-3">
+      <Single.Item v-slot="{ isSelected }" value="apple">
+        <button
+          class="px-4 py-2 rounded-lg border border-solid border-divider transition-colors"
+          :class="isSelected
+            ? 'bg-primary text-on-primary border-primary'
+            : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        >
+          Apple {{ isSelected ? '✓' : '' }}
+        </button>
+      </Single.Item>
+
+      <Single.Item v-slot="{ isSelected }" value="banana">
+        <button
+          class="px-4 py-2 rounded-lg border border-solid border-divider transition-colors"
+          :class="isSelected
+            ? 'bg-primary text-on-primary border-primary'
+            : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        >
+          Banana {{ isSelected ? '✓' : '' }}
+        </button>
+      </Single.Item>
+
+      <Single.Item v-slot="{ isSelected }" value="cherry">
+        <button
+          class="px-4 py-2 rounded-lg border border-solid border-divider transition-colors"
+          :class="isSelected
+            ? 'bg-primary text-on-primary border-primary'
+            : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        >
+          Cherry {{ isSelected ? '✓' : '' }}
+        </button>
+      </Single.Item>
+    </Single.Root>
+
+    <p class="mt-4 text-sm text-on-surface-variant">
+      Selected: <strong class="text-on-surface">{{ selected }}</strong>
+    </p>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/README.md
new file mode 100644
index 000000000..fdbbbb264
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/README.md
@@ -0,0 +1,43 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# What is headless?
+
+v0 components are **headless** — they manage behavior, accessibility, and state, but ship zero CSS. You provide every pixel of the visuals using regular HTML and utility classes.
+
+## Compound components
+
+Headless components use a **compound pattern**: a parent `Root` manages state, and child components participate in it. They communicate through Vue's provide/inject — no prop drilling needed.
+
+```vue
+<template>
+  <Single.Root v-model="selected">
+    <Single.Item value="apple">Apple</Single.Item>
+    <Single.Item value="banana">Banana</Single.Item>
+  </Single.Root>
+</template>
+```
+
+`Single.Root` tracks which item is selected. Each `Single.Item` registers itself and handles clicks. But neither renders any styling — that part is yours.
+
+## Slot props
+
+Child components expose **slot props** like `isSelected` so you can style them conditionally:
+
+```vue
+<template>
+  <Single.Item value="apple" #default="{ isSelected }">
+    <div :class="isSelected ? 'bg-primary text-on-primary' : 'bg-surface'">
+      Apple
+    </div>
+  </Single.Item>
+</template>
+```
+
+## Try it
+
+The editor shows a `Single` component with three fruit options. Click them and watch the selection state change. Try adding a fourth option or changing the styling classes.
+
+> [!TIP] This is the core mental model of v0: components provide behavior through slot props, you provide the visuals. Zero CSS ships with v0 — every pixel is yours.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue
new file mode 100644
index 000000000..cb3a0dd48
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue
@@ -0,0 +1,80 @@
+<script setup>
+  // Framework
+  import { Tabs } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-2">General Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Configure your display name, language, and appearance preferences.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Choose which notifications you want to receive.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Control who can see your profile and activity.
+          </p>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/README.md
new file mode 100644
index 000000000..915198b69
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/README.md
@@ -0,0 +1,47 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Tabs for navigation
+
+`Tabs` is a compound component for building tabbed interfaces. It handles keyboard navigation, ARIA roles, and panel switching — you handle the look.
+
+## Structure
+
+```vue
+<template>
+  <Tabs.Root v-model="activeTab">
+    <Tabs.List>
+      <Tabs.Item value="general">General</Tabs.Item>
+      <Tabs.Item value="notifications">Notifications</Tabs.Item>
+    </Tabs.List>
+
+    <Tabs.Panel value="general">General content</Tabs.Panel>
+    <Tabs.Panel value="notifications">Notifications content</Tabs.Panel>
+  </Tabs.Root>
+</template>
+```
+
+- **`Tabs.Root`** — provides context and manages active tab
+- **`Tabs.List`** — container with `tablist` role and arrow-key navigation
+- **`Tabs.Item`** — individual tab trigger with `tab` role
+- **`Tabs.Panel`** — content shown when its matching tab is active
+
+## Tab items expose slot props
+
+Just like `Single.Item`, each `Tabs.Item` exposes `isSelected` so you can conditionally style the active tab:
+
+```vue
+<template>
+  <Tabs.Item value="general" #default="{ isSelected }">
+    <span :class="isSelected ? 'border-b-2 border-primary' : ''">
+      General
+    </span>
+  </Tabs.Item>
+</template>
+```
+
+## Try it
+
+The settings panel now has three tabs. Click between them to switch content. Try adding a fourth tab called "Security" with its own panel, or try adding the `disabled` prop to a tab.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue
new file mode 100644
index 000000000..ddd705928
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue
@@ -0,0 +1,172 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('notifications')
+  const notifications = ref(['email', 'updates'])
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-2">General Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Configure your display name, language, and appearance preferences.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Control who can see your profile and activity.
+          </p>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/README.md
new file mode 100644
index 000000000..64f7aa1a1
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/README.md
@@ -0,0 +1,45 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Checkboxes for settings
+
+`Checkbox` provides tri-state checkbox controls with group support. Like all v0 components, it handles ARIA attributes and keyboard interaction while you style the visuals.
+
+## Group and Root
+
+```vue
+<template>
+  <Checkbox.Group v-model="selected">
+    <Checkbox.Root value="email">
+      <Checkbox.Indicator>✓</Checkbox.Indicator>
+      Email notifications
+    </Checkbox.Root>
+  </Checkbox.Group>
+</template>
+```
+
+- **`Checkbox.Group`** — manages an array of selected values
+- **`Checkbox.Root`** — individual checkbox with `value` prop, renders as a button
+- **`Checkbox.Indicator`** — only renders its content when checked
+
+## SelectAll with mixed state
+
+`Checkbox.SelectAll` binds to the group's aggregate state. When some (but not all) items are checked, the indicator receives `isMixed`:
+
+```vue
+<template>
+  <Checkbox.SelectAll>
+    <Checkbox.Indicator v-slot="{ isMixed }">
+      <span v-if="isMixed">−</span>
+      <span v-else>✓</span>
+    </Checkbox.Indicator>
+    Select all
+  </Checkbox.SelectAll>
+</template>
+```
+
+## Try it
+
+The Notifications tab now has checkboxes. Try checking a few, then add a `Checkbox.SelectAll` above the list. Watch the indicator change between check, dash, and empty as you toggle items.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue
new file mode 100644
index 000000000..8c544e045
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue
@@ -0,0 +1,244 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('privacy')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-2">General Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Configure your display name, language, and appearance preferences.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-3" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/README.md
new file mode 100644
index 000000000..4cfc707be
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/README.md
@@ -0,0 +1,50 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Radio groups
+
+`Radio` provides single-selection radio button controls. Unlike `Single`, radio groups are specifically designed for form inputs — they render proper ARIA radio roles and support form submission.
+
+## Group and Root
+
+```vue
+<template>
+  <Radio.Group v-model="visibility" mandatory>
+    <Radio.Root value="public">
+      <Radio.Indicator>●</Radio.Indicator>
+      Public
+    </Radio.Root>
+
+    <Radio.Root value="private">
+      <Radio.Indicator>●</Radio.Indicator>
+      Private
+    </Radio.Root>
+  </Radio.Group>
+</template>
+```
+
+- **`Radio.Group`** — manages which radio is selected, supports `mandatory` prop
+- **`Radio.Root`** — individual radio button with `value`, renders as a button
+- **`Radio.Indicator`** — only renders its content when this radio is selected
+
+## Card-style radios
+
+Since v0 is headless, you can style radios as full cards instead of tiny circles:
+
+```vue
+<template>
+  <Radio.Root value="public" #default="{ isSelected }">
+    <div :class="isSelected ? 'border-primary bg-surface-tint' : 'border-divider'">
+      <Radio.Indicator>●</Radio.Indicator>
+      <strong>Public</strong>
+      <p>Visible to everyone</p>
+    </div>
+  </Radio.Root>
+</template>
+```
+
+## Try it
+
+The Privacy tab now has radio cards for visibility settings. Try adding the `mandatory` prop to `Radio.Group` to prevent deselection, or add a `watch` on `visibility` to show a toast message when it changes.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue
new file mode 100644
index 000000000..4f60ec2ea
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue
@@ -0,0 +1,245 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Components
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-3" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/README.md
new file mode 100644
index 000000000..d1aceb054
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/README.md
@@ -0,0 +1,40 @@
+---
+hideFiles: false
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Expansion panels
+
+`ExpansionPanel` creates collapsible sections — perfect for organizing dense settings into scannable groups.
+
+## Structure
+
+```vue
+<template>
+  <ExpansionPanel.Root>
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator>Appearance</ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        Theme and color settings...
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
+```
+
+- **`ExpansionPanel.Root`** — manages which panels are open, supports `multiple` prop
+- **`ExpansionPanel.Item`** — wraps a single collapsible section
+- **`ExpansionPanel.Header`** — non-collapsible header area
+- **`ExpansionPanel.Activator`** — clickable trigger that toggles the panel
+- **`ExpansionPanel.Content`** — collapsible content area
+
+## Extracting components
+
+Notice the file list on the left — we've extracted `SettingsSection.vue` to keep the General tab clean. This is a normal Vue pattern: break large templates into smaller, focused components.
+
+## Try it
+
+Try switching `ExpansionPanel.Root` to `multiple` mode so several sections can be open at once. You could also add a "Collapse all" button that resets the model to an empty array.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/SettingsSection.vue
new file mode 100644
index 000000000..9e27c3bda
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/SettingsSection.vue
@@ -0,0 +1,108 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Appearance</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-3">
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Language</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3">
+          <label class="block text-xs text-on-surface-variant mb-1">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Data & Storage</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-2">
+          <p class="text-xs text-on-surface-variant">Cache size: 24 MB</p>
+
+          <button class="px-3 py-1.5 text-xs rounded bg-error text-on-error">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue
new file mode 100644
index 000000000..a03979de2
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue
@@ -0,0 +1,267 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Components
+  import ConfirmDialog from './ConfirmDialog.vue'
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+
+  function handleReset () {
+    notifications.value = []
+    visibility.value = 'friends'
+    activeTab.value = 'general'
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-3" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+
+      <div class="p-4 border-t border-solid border-divider">
+        <ConfirmDialog
+          confirm-label="Reset"
+          message="This will reset all settings to their default values. This action cannot be undone."
+          title="Reset Settings"
+          @confirm="handleReset"
+        >
+          <template #activator>
+            <button class="px-4 py-2 text-sm rounded border border-solid border-error text-error hover:bg-error hover:text-on-error transition-colors">
+              Reset settings
+            </button>
+          </template>
+        </ConfirmDialog>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/ConfirmDialog.vue
new file mode 100644
index 000000000..c15ec4ff3
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/ConfirmDialog.vue
@@ -0,0 +1,50 @@
+<script setup>
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  defineProps({
+    title: { type: String, default: 'Confirm' },
+    message: { type: String, default: 'Are you sure?' },
+    confirmLabel: { type: String, default: 'Confirm' },
+    cancelLabel: { type: String, default: 'Cancel' },
+  })
+
+  const emit = defineEmits(['confirm'])
+</script>
+
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>
+      <slot name="activator" />
+    </Dialog.Activator>
+
+    <Dialog.Content
+      class="rounded-lg border border-solid border-divider bg-surface p-6 max-w-sm w-full shadow-lg"
+    >
+      <Dialog.Title class="text-lg font-semibold text-on-surface mb-2">
+        {{ title }}
+      </Dialog.Title>
+
+      <Dialog.Description class="text-sm text-on-surface-variant mb-6">
+        {{ message }}
+      </Dialog.Description>
+
+      <div class="flex justify-end gap-3">
+        <Dialog.Close>
+          <button class="px-4 py-2 text-sm rounded border border-solid border-divider text-on-surface hover:bg-surface-tint transition-colors">
+            {{ cancelLabel }}
+          </button>
+        </Dialog.Close>
+
+        <Dialog.Close>
+          <button
+            class="px-4 py-2 text-sm rounded bg-error text-on-error transition-colors"
+            @click="emit('confirm')"
+          >
+            {{ confirmLabel }}
+          </button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/README.md
new file mode 100644
index 000000000..8d60b574b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/README.md
@@ -0,0 +1,40 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Dialog for confirmation
+
+`Dialog` creates accessible modal dialogs using the native `<dialog>` element. It manages focus trapping, escape-to-close, and ARIA labeling.
+
+## Structure
+
+```vue
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>Open</Dialog.Activator>
+
+    <Dialog.Content>
+      <Dialog.Title>Are you sure?</Dialog.Title>
+      <Dialog.Description>This action cannot be undone.</Dialog.Description>
+
+      <Dialog.Close>Cancel</Dialog.Close>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
+```
+
+- **`Dialog.Root`** — manages open/closed state
+- **`Dialog.Activator`** — button that opens the dialog
+- **`Dialog.Content`** — the modal container (native `<dialog>`)
+- **`Dialog.Title`** — accessible label for the dialog
+- **`Dialog.Description`** — accessible description
+- **`Dialog.Close`** — button that closes the dialog
+
+## Extracting a reusable dialog
+
+Check the `ConfirmDialog.vue` file — it wraps the dialog pattern into a reusable component that accepts a title, message, and emits a `confirm` event.
+
+## Try it
+
+Click "Reset settings" at the bottom of the panel to open the confirmation dialog. Try adding a second "Delete account" dialog that requires the user to type "DELETE" before the confirm button enables.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/SettingsSection.vue
new file mode 100644
index 000000000..9e27c3bda
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/SettingsSection.vue
@@ -0,0 +1,108 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Appearance</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-3">
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Language</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3">
+          <label class="block text-xs text-on-surface-variant mb-1">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Data & Storage</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-2">
+          <p class="text-xs text-on-surface-variant">Cache size: 24 MB</p>
+
+          <button class="px-3 py-1.5 text-xs rounded bg-error text-on-error">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue
new file mode 100644
index 000000000..70bc83688
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue
@@ -0,0 +1,367 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Components
+  import ConfirmDialog from './ConfirmDialog.vue'
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+
+  function handleReset () {
+    notifications.value = []
+    visibility.value = 'friends'
+    activeTab.value = 'general'
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-xl border border-solid border-divider bg-surface shadow-sm">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-2">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <svg
+                      v-if="isMixed"
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path d="M2.5 6h7" stroke="currentColor" stroke-linecap="round" stroke-width="2" />
+                    </svg>
+                    <svg
+                      v-else
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-2" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+
+      <div class="p-4 border-t border-solid border-divider">
+        <ConfirmDialog
+          confirm-label="Reset"
+          message="This will reset all settings to their default values. This action cannot be undone."
+          title="Reset Settings"
+          @confirm="handleReset"
+        >
+          <template #activator>
+            <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-error text-error hover:bg-error hover:text-on-error transition-colors">
+              Reset settings
+            </button>
+          </template>
+        </ConfirmDialog>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/ConfirmDialog.vue
new file mode 100644
index 000000000..1653ba45a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/ConfirmDialog.vue
@@ -0,0 +1,52 @@
+<script setup>
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  defineProps({
+    title: { type: String, default: 'Confirm' },
+    message: { type: String, default: 'Are you sure?' },
+    confirmLabel: { type: String, default: 'Confirm' },
+    cancelLabel: { type: String, default: 'Cancel' },
+  })
+
+  const emit = defineEmits(['confirm'])
+</script>
+
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>
+      <slot name="activator" />
+    </Dialog.Activator>
+
+    <Dialog.Content
+      class="rounded-xl border border-solid border-divider bg-surface p-0 max-w-sm w-full shadow-xl"
+    >
+      <div class="p-6">
+        <Dialog.Title class="text-lg font-semibold text-on-surface mb-1">
+          {{ title }}
+        </Dialog.Title>
+
+        <Dialog.Description class="text-sm text-on-surface-variant leading-relaxed">
+          {{ message }}
+        </Dialog.Description>
+      </div>
+
+      <div class="flex justify-end gap-3 px-6 py-4 border-t border-solid border-divider bg-surface-tint rounded-b-xl">
+        <Dialog.Close>
+          <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-divider text-on-surface hover:bg-surface transition-colors">
+            {{ cancelLabel }}
+          </button>
+        </Dialog.Close>
+
+        <Dialog.Close>
+          <button
+            class="px-4 py-2 text-sm font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity"
+            @click="emit('confirm')"
+          >
+            {{ confirmLabel }}
+          </button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/README.md
new file mode 100644
index 000000000..4a3b326ac
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/README.md
@@ -0,0 +1,43 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Slot props for styling
+
+You've already used `isSelected` and `isChecked` in previous steps. Now let's explore how slot props enable **sophisticated conditional styling** across all v0 components.
+
+## Every component exposes state
+
+Each v0 component provides slot props that describe its current state:
+
+| Component | Slot Props |
+|-----------|-----------|
+| `Single.Item` | `isSelected`, `select` |
+| `Tabs.Item` | `isSelected` |
+| `Checkbox.Root` | `isSelected` |
+| `Checkbox.Indicator` | `isMixed` |
+| `Radio.Root` | `isSelected` |
+| `ExpansionPanel.Activator` | `isSelected` |
+
+## Combining slot props with transitions
+
+Since you control all the markup, you can add CSS transitions, animations, and transforms directly:
+
+```vue
+<template>
+  <ExpansionPanel.Activator #default="{ isSelected }">
+    <button class="flex items-center gap-2">
+      <span
+        class="transition-transform duration-200"
+        :class="isSelected ? 'rotate-180' : ''"
+      >▾</span>
+      Section title
+    </button>
+  </ExpansionPanel.Activator>
+</template>
+```
+
+## Try it
+
+This step refines the styling across every component. Notice the smoother transitions on tabs, the refined checkbox and radio indicators, and the polished expansion panel animations. Try styling the `isMixed` indicator on `Checkbox.SelectAll` as a dash icon instead of text.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/SettingsSection.vue
new file mode 100644
index 000000000..1c8151963
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/SettingsSection.vue
@@ -0,0 +1,132 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded" class="divide-y divide-divider">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                Th
+              </span>
+              <span>Appearance</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                La
+              </span>
+              <span>Language</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4">
+          <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-error/10 text-error flex items-center justify-center text-xs">
+                Da
+              </span>
+              <span>Data & Storage</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-on-surface-variant">Cache size</span>
+            <span class="text-sm font-medium">24 MB</span>
+          </div>
+
+          <button class="px-3 py-1.5 text-xs font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue
new file mode 100644
index 000000000..4109823f2
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue
@@ -0,0 +1,408 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio, createStorage } from '@vuetify/v0'
+
+  // Components
+  import ConfirmDialog from './ConfirmDialog.vue'
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const storage = createStorage({ prefix: 'settings:' })
+
+  const activeTab = ref('general')
+  const notifications = storage.get('notifications', ['email', 'updates'])
+  const visibility = storage.get('visibility', 'friends')
+  const saved = ref(false)
+
+  function handleReset () {
+    notifications.value = []
+    visibility.value = 'friends'
+    activeTab.value = 'general'
+    showToast('Settings reset to defaults')
+  }
+
+  function showToast (_message) {
+    saved.value = true
+    setTimeout(() => {
+      saved.value = false
+    }, 2000)
+  }
+
+  watch(notifications, () => showToast('Settings saved'), { deep: true })
+  watch(visibility, () => showToast('Settings saved'))
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-bold">
+        Settings
+      </h1>
+
+      <Transition name="fade">
+        <span
+          v-if="saved"
+          class="text-xs font-medium text-success px-3 py-1.5 rounded-full bg-success/10"
+        >
+          Saved
+        </span>
+      </Transition>
+    </div>
+
+    <div class="max-w-lg rounded-xl border border-solid border-divider bg-surface shadow-sm">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-2">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <svg
+                      v-if="isMixed"
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path d="M2.5 6h7" stroke="currentColor" stroke-linecap="round" stroke-width="2" />
+                    </svg>
+                    <svg
+                      v-else
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-2" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+
+      <div class="p-4 border-t border-solid border-divider flex items-center justify-between">
+        <ConfirmDialog
+          confirm-label="Reset"
+          message="This will reset all settings to their default values. This action cannot be undone."
+          title="Reset Settings"
+          @confirm="handleReset"
+        >
+          <template #activator>
+            <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-error text-error hover:bg-error hover:text-on-error transition-colors">
+              Reset settings
+            </button>
+          </template>
+        </ConfirmDialog>
+
+        <p class="text-xs text-on-surface-variant">
+          Settings auto-save to localStorage
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/ConfirmDialog.vue
new file mode 100644
index 000000000..1653ba45a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/ConfirmDialog.vue
@@ -0,0 +1,52 @@
+<script setup>
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  defineProps({
+    title: { type: String, default: 'Confirm' },
+    message: { type: String, default: 'Are you sure?' },
+    confirmLabel: { type: String, default: 'Confirm' },
+    cancelLabel: { type: String, default: 'Cancel' },
+  })
+
+  const emit = defineEmits(['confirm'])
+</script>
+
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>
+      <slot name="activator" />
+    </Dialog.Activator>
+
+    <Dialog.Content
+      class="rounded-xl border border-solid border-divider bg-surface p-0 max-w-sm w-full shadow-xl"
+    >
+      <div class="p-6">
+        <Dialog.Title class="text-lg font-semibold text-on-surface mb-1">
+          {{ title }}
+        </Dialog.Title>
+
+        <Dialog.Description class="text-sm text-on-surface-variant leading-relaxed">
+          {{ message }}
+        </Dialog.Description>
+      </div>
+
+      <div class="flex justify-end gap-3 px-6 py-4 border-t border-solid border-divider bg-surface-tint rounded-b-xl">
+        <Dialog.Close>
+          <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-divider text-on-surface hover:bg-surface transition-colors">
+            {{ cancelLabel }}
+          </button>
+        </Dialog.Close>
+
+        <Dialog.Close>
+          <button
+            class="px-4 py-2 text-sm font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity"
+            @click="emit('confirm')"
+          >
+            {{ confirmLabel }}
+          </button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/README.md
new file mode 100644
index 000000000..de1283747
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/README.md
@@ -0,0 +1,37 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# The complete panel
+
+You've learned six v0 components: `Single`, `Tabs`, `Checkbox`, `Radio`, `ExpansionPanel`, and `Dialog`. Now let's bring them all together into a polished settings panel with persistent storage.
+
+## Persisting state with createStorage
+
+v0 provides `createStorage` for reactive localStorage that syncs automatically:
+
+```vue
+<script setup>
+  import { createStorage } from '@vuetify/v0'
+
+  const storage = createStorage()
+  const notifications = storage.get('notifications', ['email'])
+</script>
+```
+
+The returned ref syncs with localStorage on every change. Refresh the page and your settings persist.
+
+## Composing components
+
+The power of headless components shines when you compose them together. Each component handles its own behavior and accessibility — you just arrange them into the layout you want. No fighting with opinionated styling or override hacks.
+
+## Try it
+
+Try changing some settings and refreshing the preview — your choices persist through `createStorage`. You could also add a theme radio using `useTheme` from v0 to toggle between light and dark mode.
+
+## What's next
+
+You've built a fully interactive, accessible settings panel using nothing but headless components and utility classes. Every component handles keyboard navigation, ARIA attributes, and state management. You handled every pixel of the styling.
+
+> [!TIP] Every pixel is yours. Every behavior is v0's. You've just built a complete, accessible settings panel using headless components that adapt to any design system.
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/SettingsSection.vue
new file mode 100644
index 000000000..1c8151963
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/SettingsSection.vue
@@ -0,0 +1,132 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded" class="divide-y divide-divider">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                Th
+              </span>
+              <span>Appearance</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                La
+              </span>
+              <span>Language</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4">
+          <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-error/10 text-error flex items-center justify-center text-xs">
+                Da
+              </span>
+              <span>Data & Storage</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-on-surface-variant">Cache size</span>
+            <span class="text-sm font-medium">24 MB</span>
+          </div>
+
+          <button class="px-3 py-1.5 text-xs font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/meta.json b/apps/docs/src/skillz/tutorials/beginner/vue-basics/meta.json
new file mode 100644
index 000000000..dad26307a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/meta.json
@@ -0,0 +1,18 @@
+{
+  "title": "Vue Basics",
+  "description": "Build a contact card while learning Vue 3 fundamentals — refs, events, computed, directives, and v-model",
+  "level": 1,
+  "track": "essentials",
+  "categories": [],
+  "order": 10,
+  "minutes": 15,
+  "steps": [
+    "Understand single-file components and templates",
+    "Make data dynamic with shallowRef",
+    "Handle click events and toggle state",
+    "Derive values with computed properties",
+    "Conditionally show and hide content",
+    "Render lists with v-for",
+    "Bind form inputs with v-model"
+  ]
+}
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue
new file mode 100644
index 000000000..df5cca9b8
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="p-8">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          AC
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">Alex Chen</h2>
+          <p class="text-sm text-on-surface-variant">Frontend Developer</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant">
+        alex.chen@email.com
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/README.md
new file mode 100644
index 000000000..71a1af982
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/README.md
@@ -0,0 +1,28 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Welcome to Vue Basics
+
+Every v0 composable is built on Vue 3. This tutorial walks you through the fundamentals by building a contact card from scratch — adding one new concept per step until you have a fully interactive component.
+
+You'll learn **refs**, **events**, **computed properties**, **conditionals**, **lists**, and **two-way binding** — the same building blocks behind every v0 composable.
+
+## Single-file components
+
+In Vue, you write [single-file components](https://vuejs.org/guide/scaling-up/sfc.html) (SFCs) — `.vue` files that keep template, logic, and styles together in one place:
+
+```vue
+<template>
+  <h1>Hello!</h1>
+</template>
+```
+
+That's a complete component. The `<template>` section contains HTML that Vue renders to the page. No JavaScript needed — at least not yet.
+
+Look at the editor on the right. It contains a static contact card built entirely with a `<template>`. The name, role, and email are all hardcoded directly in the markup. It works, but if anything needs to change, you'd have to edit the HTML by hand every time.
+
+In the next step, we'll fix that by making the data **reactive**.
+
+> [!TRY] Edit the card in the editor — change "Alex Chen" to your name, or swap the role to something else. The preview updates instantly as you type.
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue
new file mode 100644
index 000000000..089b4ba00
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          AC
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant">
+        {{ email }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/README.md
new file mode 100644
index 000000000..fe13a601e
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/README.md
@@ -0,0 +1,38 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Making it dynamic
+
+In step 1, the card was static — values were hardcoded in the HTML. Now we'll make the card **reactive** using Vue's [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref).
+
+## Refs
+
+A `shallowRef` wraps a value so Vue can **track changes** and update the template automatically:
+
+```vue
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+</script>
+```
+
+In the template, use double curly braces to display a ref's value. Vue automatically unwraps it — you write `{{ name }}`, not `{{ name.value }}`:
+
+```vue
+<template>
+  <p>{{ name }}</p>
+</template>
+```
+
+In JavaScript however, you access the value with `.value` — this distinction comes up constantly when working with v0.
+
+## Why shallowRef?
+
+Vue also has `ref()`, which deeply tracks nested objects. For simple values like strings, numbers, and booleans, `shallowRef` is more efficient — it only triggers updates when `.value` is replaced, not when properties inside it change. Since primitives are always replaced, there's no downside.
+
+As your app grows, defaulting to `shallowRef` for primitives avoids unnecessary deep reactivity tracking and keeps things fast.
+
+> [!TRY] Add a `city` ref (e.g., `shallowRef('San Francisco')`) and display it below the email. You'll need to add both the ref in `<script setup>` and a `{{ city }}` expression in the template.
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue
new file mode 100644
index 000000000..fbaa12bc9
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+
+  function toggle () {
+    following.value = !following.value
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          AC
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant mb-4">
+        {{ email }}
+      </p>
+
+      <button
+        class="w-full py-2 rounded font-medium transition-colors"
+        :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+        @click="toggle"
+      >
+        {{ following ? 'Following' : 'Follow' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/README.md
new file mode 100644
index 000000000..d3aefd55a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/README.md
@@ -0,0 +1,45 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Responding to clicks
+
+A contact card isn't useful if you can't interact with it. Vue handles DOM events with the [`@` shorthand](https://vuejs.org/guide/essentials/event-handling.html) (short for `v-on:`).
+
+## Event handling
+
+Use `@click` to call a function when an element is clicked:
+
+```vue
+<template>
+  <button @click="toggle">Follow</button>
+</template>
+```
+
+The handler is a regular function declaration in `<script setup>`:
+
+```vue
+<script setup lang="ts">
+  function toggle () {
+    active.value = !active.value
+  }
+</script>
+```
+
+## Dynamic classes
+
+Use [`:class`](https://vuejs.org/guide/essentials/class-and-style.html) (short for `v-bind:class`) to apply classes conditionally:
+
+```vue
+<template>
+  <button
+    :class="active ? 'bg-surface-tint' : 'bg-primary'"
+    @click="toggle"
+  >
+    {{ active ? 'Following' : 'Follow' }}
+  </button>
+</template>
+```
+
+> [!TRY] Add a `count` ref that tracks how many times the button has been toggled. Increment it inside `toggle` and display it somewhere on the card.
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue
new file mode 100644
index 000000000..bee50d1fc
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  function toggle () {
+    following.value = !following.value
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          {{ initials }}
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant mb-2">
+        {{ email }}
+      </p>
+
+      <p class="text-sm text-on-surface-variant mb-4">
+        Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+      </p>
+
+      <button
+        class="w-full py-2 rounded font-medium transition-colors"
+        :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+        @click="toggle"
+      >
+        {{ following ? 'Following' : 'Follow' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/README.md
new file mode 100644
index 000000000..b3653e3f5
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/README.md
@@ -0,0 +1,41 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Derived data
+
+The avatar still shows hardcoded "AC". What if the name changes? We need a value that **automatically updates** when its dependencies change — that's what [`computed()`](https://vuejs.org/guide/essentials/computed.html) does.
+
+## Computed refs
+
+A `computed` ref derives its value from other refs. It recalculates whenever its dependencies change:
+
+```vue
+<script setup lang="ts">
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+</script>
+```
+
+Now `initials` always reflects the current `name` — change the name and the avatar updates automatically.
+
+We also derive `best` from a skills array:
+
+```vue
+<script setup lang="ts">
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS'])
+  const best = computed(() => skills.value[0])
+</script>
+```
+
+> [!TRY] Add a `total` computed that returns something like "4 skills" (pluralized). Display it next to "Top skill" in the card.
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue
new file mode 100644
index 000000000..4d458b4a1
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+  const open = shallowRef(false)
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  function toggle () {
+    following.value = !following.value
+  }
+
+  function flip () {
+    open.value = !open.value
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          {{ initials }}
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+
+        <svg
+          class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
+          :class="{ 'rotate-180': open }"
+          fill="none"
+          height="16"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+        >
+          <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+
+      <div v-if="open">
+        <p class="text-sm text-on-surface-variant mb-2">
+          {{ email }}
+        </p>
+
+        <p class="text-sm text-on-surface-variant mb-4">
+          Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+        </p>
+
+        <button
+          class="w-full py-2 rounded font-medium transition-colors"
+          :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+          @click="toggle"
+        >
+          {{ following ? 'Following' : 'Follow' }}
+        </button>
+      </div>
+
+      <p v-else class="text-sm text-on-surface-variant">
+        Click to expand
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/README.md
new file mode 100644
index 000000000..8f8564887
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/README.md
@@ -0,0 +1,38 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Show and hide
+
+The contact card is getting crowded. Let's collapse it so it only shows the header by default, and expands to reveal details when clicked.
+
+## Conditional rendering
+
+[`v-if`](https://vuejs.org/guide/essentials/conditional.html) adds or **removes** elements from the DOM entirely. `v-else` provides the fallback:
+
+```vue
+<template>
+  <div v-if="open">
+    <!-- Full details -->
+  </div>
+
+  <p v-else>Click to expand</p>
+</template>
+```
+
+When `open` is `false`, the details block doesn't exist in the DOM at all.
+
+## v-show
+
+There's also `v-show`, which toggles CSS `display` instead of adding/removing from the DOM. Use `v-show` when you toggle something frequently:
+
+```vue
+<template>
+  <p v-show="email">{{ email }}</p>
+</template>
+```
+
+The element is always in the DOM — it's just hidden with `display: none`.
+
+> [!TRY] Try changing `v-if="open"` to `v-show="open"` and inspect the DOM in your browser's dev tools. You'll see the element is always present — just hidden. Then try clearing the email ref to an empty string and add `v-show="email"` to hide the empty email line.
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue
new file mode 100644
index 000000000..a712a9afc
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+  const open = shallowRef(true)
+  const pending = shallowRef('')
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  function toggle () {
+    following.value = !following.value
+  }
+
+  function flip () {
+    open.value = !open.value
+  }
+
+  function add () {
+    const trimmed = pending.value.trim()
+
+    if (trimmed && !skills.value.includes(trimmed)) {
+      skills.value = [...skills.value, trimmed]
+      pending.value = ''
+    }
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          {{ initials }}
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+
+        <svg
+          class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
+          :class="{ 'rotate-180': open }"
+          fill="none"
+          height="16"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+        >
+          <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+
+      <div v-if="open">
+        <p class="text-sm text-on-surface-variant mb-2">
+          {{ email }}
+        </p>
+
+        <p class="text-sm text-on-surface-variant mb-3">
+          Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+        </p>
+
+        <div class="flex flex-wrap gap-2 mb-4">
+          <span
+            v-for="skill in skills"
+            :key="skill"
+            class="px-3 py-1 rounded-full text-xs font-medium bg-surface-tint text-on-surface"
+          >
+            {{ skill }}
+          </span>
+        </div>
+
+        <div class="flex gap-2 mb-4">
+          <input
+            v-model="pending"
+            class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            placeholder="Add a skill..."
+            @keyup.enter="add"
+          >
+
+          <button
+            class="px-4 py-2 rounded bg-primary text-on-primary text-sm font-medium"
+            @click="add"
+          >
+            Add
+          </button>
+        </div>
+
+        <button
+          class="w-full py-2 rounded font-medium transition-colors"
+          :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+          @click="toggle"
+        >
+          {{ following ? 'Following' : 'Follow' }}
+        </button>
+      </div>
+
+      <p v-else class="text-sm text-on-surface-variant">
+        Click to expand
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/README.md
new file mode 100644
index 000000000..b15b8a59f
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/README.md
@@ -0,0 +1,41 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Rendering lists
+
+The skills array is in our data, but we're only showing the top skill. Let's render them all as chips using [`v-for`](https://vuejs.org/guide/essentials/list.html).
+
+## v-for
+
+`v-for` iterates over an array and renders an element for each item. Always provide a unique `:key`:
+
+```vue
+<template>
+  <span
+    v-for="item in items"
+    :key="item"
+  >
+    {{ item }}
+  </span>
+</template>
+```
+
+## Keys matter
+
+Vue uses `:key` to track which items changed, were added, or removed. Without keys, Vue reuses elements in place — which causes subtle bugs with stateful content.
+
+## Array reactivity
+
+Vue tracks changes to ref arrays. Methods like `push`, `splice`, and `pop` trigger re-renders automatically:
+
+```vue
+<script setup lang="ts">
+  function add () {
+    skills.value.push('New Skill')
+  }
+</script>
+```
+
+> [!TRY] Add a remove button to each skill chip. You can use `skills.value.splice(index, 1)` to remove an item. Remember that `v-for` also provides the index: `v-for="(item, index) in items"`.
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue
new file mode 100644
index 000000000..597ca7eee
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+  const open = shallowRef(true)
+  const pending = shallowRef('')
+  const editing = shallowRef(false)
+  const status = shallowRef('available')
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  const color = computed(() => {
+    const map: Record<string, string> = {
+      available: 'bg-success',
+      busy: 'bg-error',
+      away: 'bg-warning',
+    }
+
+    return map[status.value] || 'bg-surface-tint'
+  })
+
+  function toggle () {
+    following.value = !following.value
+  }
+
+  function flip () {
+    open.value = !open.value
+  }
+
+  function add () {
+    const trimmed = pending.value.trim()
+
+    if (trimmed && !skills.value.includes(trimmed)) {
+      skills.value = [...skills.value, trimmed]
+      pending.value = ''
+    }
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
+        <div class="relative">
+          <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+            {{ initials }}
+          </div>
+
+          <div
+            class="absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-solid border-surface"
+            :class="color"
+          />
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+
+        <svg
+          class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
+          :class="{ 'rotate-180': open }"
+          fill="none"
+          height="16"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+        >
+          <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+
+      <div v-if="open">
+        <div v-if="editing" class="space-y-3 mb-4">
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Name</label>
+            <input
+              v-model.trim="name"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Role</label>
+            <input
+              v-model.trim="role"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Email</label>
+            <input
+              v-model.trim="email"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Status</label>
+            <select
+              v-model="status"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+              <option value="available">Available</option>
+              <option value="busy">Busy</option>
+              <option value="away">Away</option>
+            </select>
+          </div>
+        </div>
+
+        <div v-else>
+          <p class="text-sm text-on-surface-variant mb-2">
+            {{ email }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant mb-3">
+            Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+          </p>
+
+          <div class="flex flex-wrap gap-2 mb-4">
+            <span
+              v-for="skill in skills"
+              :key="skill"
+              class="px-3 py-1 rounded-full text-xs font-medium bg-surface-tint text-on-surface"
+            >
+              {{ skill }}
+            </span>
+          </div>
+
+          <div class="flex gap-2 mb-4">
+            <input
+              v-model="pending"
+              class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+              placeholder="Add a skill..."
+              @keyup.enter="add"
+            >
+
+            <button
+              class="px-4 py-2 rounded bg-primary text-on-primary text-sm font-medium"
+              @click="add"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+
+        <div class="flex gap-2">
+          <button
+            class="flex-1 py-2 rounded font-medium transition-colors"
+            :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+            @click="toggle"
+          >
+            {{ following ? 'Following' : 'Follow' }}
+          </button>
+
+          <button
+            class="px-4 py-2 rounded font-medium border border-solid border-divider text-on-surface transition-colors"
+            @click="editing = !editing"
+          >
+            {{ editing ? 'Done' : 'Edit' }}
+          </button>
+        </div>
+      </div>
+
+      <p v-else class="text-sm text-on-surface-variant">
+        Click to expand
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/README.md
new file mode 100644
index 000000000..e5510a574
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/README.md
@@ -0,0 +1,54 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Two-way binding
+
+The card displays data, but there's no way to edit it. Vue's [`v-model`](https://vuejs.org/guide/essentials/forms.html) directive creates a **two-way binding** between form inputs and reactive state.
+
+## v-model
+
+`v-model` is syntactic sugar for binding `:value` and listening for `@input` events:
+
+```vue
+<template>
+  <input v-model="name">
+  <p>{{ name }}</p>
+</template>
+```
+
+Type in the input, and the displayed name updates instantly — including the computed initials in the avatar.
+
+## Modifiers
+
+- **`.trim`** — automatically trims whitespace
+- **`.number`** — casts the value to a number
+- **`.lazy`** — syncs on `change` instead of `input`
+
+```vue
+<template>
+  <input v-model.trim="name">
+</template>
+```
+
+## Select elements
+
+`v-model` works on `<select>` too. The bound ref updates to match the selected `<option>` value:
+
+```vue
+<template>
+  <select v-model="status">
+    <option value="available">Available</option>
+    <option value="busy">Busy</option>
+  </select>
+</template>
+```
+
+> [!TRY] Add `.trim` to the name and role inputs. Add a bio `<textarea>` with `v-model` in the edit form.
+
+## What's next
+
+You've built a fully interactive contact card using Vue's core features — refs, events, computed properties, conditionals, lists, and two-way binding. These are the same building blocks that power every v0 composable.
+
+> [!TIP] v0's `useProxyModel` extends this exact `v-model` concept, making it work seamlessly between parent and child components.
diff --git a/apps/docs/src/skillz/tutorials/index.ts b/apps/docs/src/skillz/tutorials/index.ts
new file mode 100644
index 000000000..bd81bf4f5
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/index.ts
@@ -0,0 +1,140 @@
+// Types
+import type { SkillMeta } from '@/types/skill'
+
+export interface TutorialMeta {
+  title: string
+  description: string
+  level: 1 | 2 | 3
+  track: string
+  categories: string[]
+  order: number
+  minutes: number
+  prerequisites?: string[]
+  steps?: string[]
+}
+
+export interface StepOptions {
+  hideFiles?: boolean
+  hideTabs?: boolean
+  hideBreadcrumbs?: boolean
+}
+
+export interface TutorialStep {
+  markdown: () => Promise<string>
+  files: Record<string, () => Promise<string>>
+}
+
+export interface Tutorial {
+  id: string
+  meta: TutorialMeta
+  steps: TutorialStep[]
+}
+
+// Discover all tutorials via import.meta.glob
+const metas = import.meta.glob<TutorialMeta>('./*/*/meta.json', { eager: true, import: 'default' })
+const markdowns = import.meta.glob<string>('./**/step-*/README.md', { query: '?raw', import: 'default' })
+const codeFiles = import.meta.glob<string>('./**/step-*/**/*.{vue,ts,js}', { query: '?raw', import: 'default' })
+
+function parseTutorialId (path: string): string {
+  // './beginner/vue-basics/meta.json' → 'vue-basics'
+  return path.split('/')[2]
+}
+
+function parseTutorialPrefix (path: string): string {
+  // './beginner/vue-basics/meta.json' → './beginner/vue-basics'
+  const parts = path.split('/')
+  return `${parts[0]}/${parts[1]}/${parts[2]}`
+}
+
+function parseStepNumber (path: string): number {
+  // './beginner/vue-basics/step-1/README.md' → 1
+  const match = path.match(/step-(\d+)/)
+  return match ? Number(match[1]) : 0
+}
+
+function getTutorials (): Tutorial[] {
+  const tutorials: Tutorial[] = []
+
+  for (const [metaPath, meta] of Object.entries(metas)) {
+    const id = parseTutorialId(metaPath)
+    const prefix = parseTutorialPrefix(metaPath)
+    const stepsMap = new Map<number, TutorialStep>()
+
+    // Collect markdown files for this tutorial
+    for (const [mdPath, loader] of Object.entries(markdowns)) {
+      if (!mdPath.startsWith(`${prefix}/`)) continue
+      const stepNum = parseStepNumber(mdPath)
+      if (stepsMap.has(stepNum)) {
+        stepsMap.get(stepNum)!.markdown = loader
+      } else {
+        stepsMap.set(stepNum, { markdown: loader, files: {} })
+      }
+    }
+
+    // Collect code files for this tutorial
+    for (const [codePath, loader] of Object.entries(codeFiles)) {
+      if (!codePath.startsWith(`${prefix}/`)) continue
+      const stepNum = parseStepNumber(codePath)
+      // Extract the file path relative to the step directory
+      // './beginner/vue-basics/step-1/App.vue' → 'src/App.vue'
+      const fileName = codePath.replace(new RegExp(String.raw`^${prefix}/step-${stepNum}/`), '')
+      const replPath = `src/${fileName}`
+
+      if (!stepsMap.has(stepNum)) {
+        stepsMap.set(stepNum, { markdown: () => Promise.resolve(''), files: {} })
+      }
+      stepsMap.get(stepNum)!.files[replPath] = loader
+    }
+
+    // Sort steps by number
+    const steps = [...stepsMap.entries()]
+      .toSorted(([a], [b]) => a - b)
+      .map(([, step]) => step)
+
+    tutorials.push({ id, meta, steps })
+  }
+
+  return tutorials
+}
+
+export function parseStepOptions (raw: string): { body: string, options: StepOptions } {
+  const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/)
+  if (!match) return { body: raw, options: {} }
+
+  const options: StepOptions = {}
+  for (const line of match[1].split('\n')) {
+    const [key, val] = line.split(':').map(s => s.trim())
+    if (key === 'hideFiles' || key === 'hideTabs' || key === 'hideBreadcrumbs') {
+      options[key] = val === 'true'
+    }
+  }
+  return { body: match[2], options }
+}
+
+export function getTutorial (id: string): Tutorial | undefined {
+  return getTutorials().find(t => t.id === id)
+}
+
+export function getTutorialSkills (): SkillMeta[] {
+  return getTutorials().map(t => ({
+    mode: 'tutorial' as const,
+    id: t.id,
+    name: t.meta.title,
+    level: t.meta.level,
+    track: t.meta.track,
+    categories: t.meta.categories,
+    order: t.meta.order,
+    prerequisites: t.meta.prerequisites ?? [],
+    description: t.meta.description,
+    minutes: t.meta.minutes,
+    startRoute: `/skillz/${t.id}`,
+    tutorialRoute: `/skillz/tutorial/${t.id}`,
+    steps: t.steps.map((_, i) => ({
+      id: `step-${i + 1}`,
+      title: `Step ${i + 1}`,
+      task: '',
+      hint: '',
+      learn: t.meta.steps?.[i] ?? `Step ${i + 1}`,
+    })),
+  }))
+}
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/meta.json b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/meta.json
new file mode 100644
index 000000000..bc76ea837
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "Vue Intermediate",
+  "description": "Build a notification center while mastering watchers, template refs, lifecycle hooks, and component composition",
+  "level": 2,
+  "track": "essentials",
+  "categories": [],
+  "order": 20,
+  "minutes": 15,
+  "prerequisites": ["vue-basics"]
+}
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue
new file mode 100644
index 000000000..411b313a4
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue
@@ -0,0 +1,93 @@
+<script setup>
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const notifications = ref([
+    { id: 1, text: 'Welcome to your notification center!', read: false },
+    { id: 2, text: 'You have a new follower', read: false },
+    { id: 3, text: 'Your post was liked', read: true },
+  ])
+
+  const unreadCount = ref(0)
+  const debugLog = ref([])
+  let nextId = 4
+
+  // Watch the notifications array and update unread count
+  watch(notifications, list => {
+    unreadCount.value = list.filter(n => !n.read).length
+  }, { immediate: true, deep: true })
+
+  function addNotification () {
+    notifications.value.push({
+      id: nextId++,
+      text: `New notification #${nextId - 1}`,
+      read: false,
+    })
+    debugLog.value.push(`Added notification #${nextId - 1}`)
+  }
+
+  function toggleRead (notification) {
+    notification.read = !notification.read
+    debugLog.value.push(`Toggled #${notification.id} → ${notification.read ? 'read' : 'unread'}`)
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Notifications
+      </h1>
+
+      <span
+        v-if="unreadCount > 0"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ unreadCount }}
+      </span>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <ul class="space-y-2 mb-8">
+      <li
+        v-for="n in notifications"
+        :key="n.id"
+        class="p-3 rounded-lg cursor-pointer border border-solid border-divider"
+        :class="n.read ? 'bg-surface' : 'bg-surface-tint'"
+        @click="toggleRead(n)"
+      >
+        <div class="flex items-center justify-between">
+          <span :class="n.read ? 'text-on-surface-variant' : 'text-on-background font-medium'">
+            {{ n.text }}
+          </span>
+
+          <span class="text-xs text-on-surface-variant">
+            {{ n.read ? 'read' : 'unread' }}
+          </span>
+        </div>
+      </li>
+    </ul>
+
+    <div class="p-4 rounded-lg bg-surface text-sm">
+      <h2 class="font-bold mb-2 text-on-surface-variant">
+        Debug log
+      </h2>
+
+      <div v-if="debugLog.length === 0" class="text-on-surface-variant">
+        No events yet
+      </div>
+
+      <div v-else class="space-y-1">
+        <p v-for="(entry, i) in debugLog" :key="i" class="text-on-surface-variant">
+          {{ entry }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/README.md
new file mode 100644
index 000000000..8714226b2
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/README.md
@@ -0,0 +1,54 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Watching for Changes
+
+Vue's `watch()` function lets you run code **whenever reactive data changes**. It's perfect for side effects like updating a badge count, logging, or syncing with an external system.
+
+## Basic watch
+
+```vue
+<script setup>
+  import { ref, watch } from 'vue'
+
+  const count = ref(0)
+
+  watch(count, (newVal, oldVal) => {
+    console.log(`Changed from ${oldVal} to ${newVal}`)
+  })
+</script>
+```
+
+The callback fires every time `count` changes.
+
+## Immediate watch
+
+By default, `watch` only fires on **changes**. Pass `{ immediate: true }` to also run the callback right away with the current value:
+
+```vue
+<script setup>
+  watch(count, (val) => {
+    document.title = `(${val}) Notifications`
+  }, { immediate: true })
+</script>
+```
+
+## watchEffect
+
+`watchEffect` automatically tracks **every** reactive dependency used inside it — no need to specify a source:
+
+```vue
+<script setup>
+  import { watchEffect } from 'vue'
+
+  watchEffect(() => {
+    console.log(`Count is now ${count.value}`)
+  })
+</script>
+```
+
+## Try it
+
+The notification feed tracks an unread count. Try adding a notification and watch the badge update. Then add a `watchEffect` that logs the current unread count to the debug panel.
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue
new file mode 100644
index 000000000..b50c13ded
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue
@@ -0,0 +1,129 @@
+<script setup>
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const notifications = ref([
+    { id: 1, text: 'Server deployed successfully', read: false, dismissed: false },
+    { id: 2, text: 'New comment on your PR', read: false, dismissed: false },
+    { id: 3, text: 'Build failed — check logs', read: false, dismissed: false },
+  ])
+
+  const statusLog = ref([])
+  let nextId = 4
+
+  // Deep watcher tracks read-status changes inside the array
+  watch(notifications, list => {
+    const readCount = list.filter(n => n.read).length
+    const total = list.filter(n => !n.dismissed).length
+    statusLog.value.push(`Status: ${readCount}/${total} read`)
+  }, { deep: true })
+
+  // Watch for new unread notifications and auto-dismiss after 3s
+  watch(() => notifications.value.filter(n => !n.read && !n.dismissed), (unread, _old, onCleanup) => {
+    const timers = unread.map(n => {
+      return setTimeout(() => {
+        n.dismissed = true
+        statusLog.value.push(`Auto-dismissed #${n.id}`)
+      }, 3000)
+    })
+
+    onCleanup(() => {
+      for (const t of timers) clearTimeout(t)
+    })
+  })
+
+  function addNotification () {
+    notifications.value.push({
+      id: nextId,
+      text: `Alert #${nextId}`,
+      read: false,
+      dismissed: false,
+    })
+    nextId++
+  }
+
+  function markAllRead () {
+    for (const n of notifications.value) {
+      if (!n.dismissed) n.read = true
+    }
+    statusLog.value.push('Marked all as read')
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Deep Watchers
+    </h1>
+
+    <div class="flex gap-3 mb-6">
+      <button
+        class="px-4 py-2 rounded font-medium bg-primary text-on-primary"
+        @click="addNotification"
+      >
+        Add notification
+      </button>
+
+      <button
+        class="px-4 py-2 rounded font-medium bg-surface-tint text-on-background border border-solid border-divider"
+        @click="markAllRead"
+      >
+        Mark all read
+      </button>
+    </div>
+
+    <ul class="space-y-2 mb-8">
+      <li
+        v-for="n in notifications.filter(n => !n.dismissed)"
+        :key="n.id"
+        class="p-3 rounded-lg border border-solid border-divider flex items-center justify-between"
+        :class="n.read ? 'bg-surface' : 'bg-surface-tint'"
+      >
+        <span :class="n.read ? 'text-on-surface-variant' : 'text-on-background font-medium'">
+          {{ n.text }}
+        </span>
+
+        <div class="flex items-center gap-2">
+          <span v-if="!n.read" class="text-xs text-warning">
+            auto-dismiss in 3s
+          </span>
+
+          <button
+            v-if="!n.read"
+            class="text-xs px-2 py-1 rounded bg-success text-on-success"
+            @click="n.read = true"
+          >
+            Mark read
+          </button>
+
+          <span v-else class="text-xs text-on-surface-variant">
+            read
+          </span>
+        </div>
+      </li>
+
+      <li
+        v-if="notifications.filter(n => !n.dismissed).length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        All notifications dismissed
+      </li>
+    </ul>
+
+    <div class="p-4 rounded-lg bg-surface text-sm">
+      <h2 class="font-bold mb-2 text-on-surface-variant">
+        Watcher log
+      </h2>
+
+      <div v-if="statusLog.length === 0" class="text-on-surface-variant">
+        No changes yet
+      </div>
+
+      <div v-else class="space-y-1 max-h-40 overflow-y-auto">
+        <p v-for="(entry, i) in statusLog" :key="i" class="text-on-surface-variant">
+          {{ entry }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/README.md
new file mode 100644
index 000000000..3c5288322
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/README.md
@@ -0,0 +1,46 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Deep Watchers
+
+When watching **objects or arrays**, Vue needs to know whether to track nested changes. A deep watcher observes every property at every depth.
+
+## Deep option
+
+```vue
+<script setup>
+  import { ref, watch } from 'vue'
+
+  const user = ref({ name: 'Alice', settings: { theme: 'dark' } })
+
+  watch(user, (val) => {
+    console.log('User changed:', val.settings.theme)
+  }, { deep: true })
+</script>
+```
+
+Without `{ deep: true }`, mutating `user.value.settings.theme` would **not** trigger the watcher.
+
+## Cleanup with onCleanup
+
+Watchers can set up side effects like timers. Use the `onCleanup` callback to tear them down before the next run:
+
+```vue
+<script setup>
+  watch(source, (val, oldVal, onCleanup) => {
+    const timer = setTimeout(() => {
+      // do something after delay
+    }, 3000)
+
+    onCleanup(() => clearTimeout(timer))
+  })
+</script>
+```
+
+This prevents stale timers from piling up when the source changes rapidly.
+
+## Try it
+
+Notifications auto-dismiss after 3 seconds unless you mark them as read first. The deep watcher tracks read-status changes. Try clicking "Mark all read" before the timer expires.
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue
new file mode 100644
index 000000000..f62df1b5e
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue
@@ -0,0 +1,80 @@
+<script setup>
+  // Utilities
+  import { ref, watch, nextTick, useTemplateRef } from 'vue'
+
+  const notifications = ref([
+    { id: 1, text: 'Welcome to the notification center!' },
+    { id: 2, text: 'Scroll behavior is now automatic' },
+    { id: 3, text: 'New items appear at the bottom' },
+    { id: 4, text: 'The list scrolls to show them' },
+    { id: 5, text: 'Try adding more notifications' },
+  ])
+
+  const listEl = useTemplateRef('list')
+  let nextId = 6
+
+  // Auto-scroll to bottom when notifications change
+  watch(notifications, async () => {
+    await nextTick()
+    if (listEl.value) {
+      listEl.value.scrollTop = listEl.value.scrollHeight
+    }
+  }, { deep: true })
+
+  function addNotification () {
+    notifications.value.push({
+      id: nextId,
+      text: `Notification #${nextId} just arrived`,
+    })
+    nextId++
+  }
+
+  function scrollToTop () {
+    if (listEl.value) {
+      listEl.value.scrollTop = 0
+    }
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Template Refs
+    </h1>
+
+    <div class="flex gap-3 mb-6">
+      <button
+        class="px-4 py-2 rounded font-medium bg-primary text-on-primary"
+        @click="addNotification"
+      >
+        Add notification
+      </button>
+
+      <button
+        class="px-4 py-2 rounded font-medium bg-surface-tint text-on-background border border-solid border-divider"
+        @click="scrollToTop"
+      >
+        Scroll to top
+      </button>
+    </div>
+
+    <div
+      ref="list"
+      class="max-h-64 overflow-y-auto rounded-lg border border-solid border-divider"
+    >
+      <ul class="divide-y divide-divider">
+        <li
+          v-for="n in notifications"
+          :key="n.id"
+          class="p-3 bg-surface"
+        >
+          <span class="text-on-surface">{{ n.text }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <p class="mt-4 text-sm text-on-surface-variant">
+      {{ notifications.length }} notifications in the feed
+    </p>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/README.md
new file mode 100644
index 000000000..661282153
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/README.md
@@ -0,0 +1,48 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Grabbing DOM Elements
+
+Sometimes you need direct access to a DOM element — for scrolling, measuring, or focusing. Vue's `useTemplateRef()` gives you a reactive reference to an element in your template.
+
+## useTemplateRef
+
+```vue
+<script setup>
+  import { useTemplateRef } from 'vue'
+
+  const listEl = useTemplateRef('list')
+
+  function scrollToBottom () {
+    listEl.value.scrollTop = listEl.value.scrollHeight
+  }
+</script>
+
+<template>
+  <div ref="list" style="overflow: auto; max-height: 200px">
+    <!-- items -->
+  </div>
+</template>
+```
+
+The string you pass to `useTemplateRef()` must match the `ref` attribute in the template.
+
+## Timing
+
+Template refs are `null` until the component mounts. Always check before accessing:
+
+```vue
+<script setup>
+  import { watch } from 'vue'
+
+  watch(listEl, (el) => {
+    if (el) el.focus()
+  })
+</script>
+```
+
+## Try it
+
+New notifications auto-scroll the list to the bottom. Try adding several notifications and then use the "Scroll to top" button to jump back up.
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue
new file mode 100644
index 000000000..f35fbddf0
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue
@@ -0,0 +1,100 @@
+<script setup>
+  // Utilities
+  import { ref, onMounted, onUnmounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let timer
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Tests passed on main', createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  // Simulate loading data on mount
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    // Update "time ago" every second
+    timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  // Clean up the interval on unmount
+  onUnmounted(() => {
+    clearInterval(timer)
+  })
+
+  let nextId = 4
+
+  function addNotification () {
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      createdAt: Date.now(),
+    })
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Lifecycle Hooks
+    </h1>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <!-- Loading skeleton -->
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <!-- Loaded notifications -->
+    <ul v-else class="space-y-2">
+      <li
+        v-for="n in notifications"
+        :key="n.id"
+        class="p-3 rounded-lg bg-surface border border-solid border-divider flex items-center justify-between"
+      >
+        <span class="text-on-surface font-medium">
+          {{ n.text }}
+        </span>
+
+        <span class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+          {{ formatTimeAgo(n.createdAt) }}
+        </span>
+      </li>
+
+      <li
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications yet
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/README.md
new file mode 100644
index 000000000..a2af96e1c
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/README.md
@@ -0,0 +1,52 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Lifecycle Hooks
+
+Vue components go through a lifecycle: creation, mounting, updating, and unmounting. **Lifecycle hooks** let you run code at specific stages.
+
+## onMounted
+
+Runs after the component's DOM is ready. Perfect for fetching data or setting up timers:
+
+```vue
+<script setup>
+  import { ref, onMounted } from 'vue'
+
+  const data = ref(null)
+
+  onMounted(async () => {
+    data.value = await fetchData()
+  })
+</script>
+```
+
+## onUnmounted
+
+Runs when the component is removed from the DOM. Use it to clean up timers, listeners, or subscriptions:
+
+```vue
+<script setup>
+  import { onMounted, onUnmounted } from 'vue'
+
+  let interval
+
+  onMounted(() => {
+    interval = setInterval(() => {
+      // update "time ago" display
+    }, 1000)
+  })
+
+  onUnmounted(() => {
+    clearInterval(interval)
+  })
+</script>
+```
+
+Always clean up what you create — leaked timers cause memory issues and unexpected behavior.
+
+## Try it
+
+Notifications load after a brief delay to simulate a network request, showing a loading skeleton. Each notification displays a "time ago" label that updates every second. Try adding an `onBeforeUnmount` log to the debug panel.
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue
new file mode 100644
index 000000000..c57f6eb46
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue
@@ -0,0 +1,89 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      createdAt: Date.now(),
+    })
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold mb-6">
+      Child Components
+    </h1>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <ul v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+      />
+
+      <li
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/NotificationItem.vue
new file mode 100644
index 000000000..5b5ecf3a0
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/NotificationItem.vue
@@ -0,0 +1,29 @@
+<script setup>
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    time: { type: String, default: '' },
+  })
+
+  const typeStyles = {
+    info: 'border-l-info',
+    success: 'border-l-success',
+    warning: 'border-l-warning',
+    error: 'border-l-error',
+  }
+</script>
+
+<template>
+  <li
+    class="p-3 rounded-lg bg-surface border border-solid border-divider border-l-3 flex items-center justify-between"
+    :class="typeStyles[type] || typeStyles.info"
+  >
+    <span class="text-on-surface font-medium">
+      {{ text }}
+    </span>
+
+    <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+      {{ time }}
+    </span>
+  </li>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/README.md
new file mode 100644
index 000000000..4006a109f
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/README.md
@@ -0,0 +1,52 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Child Components
+
+As your UI grows, you'll want to break it into **smaller, reusable pieces**. Vue components accept data from their parent through **props** — declared with `defineProps`.
+
+## defineProps
+
+```vue
+<script setup>
+  const props = defineProps({
+    title: String,
+    urgent: Boolean,
+  })
+</script>
+
+<template>
+  <div :class="{ 'font-bold': urgent }">
+    {{ title }}
+  </div>
+</template>
+```
+
+The parent passes props as attributes:
+
+```vue
+<template>
+  <NotificationItem title="Build failed" urgent />
+</template>
+```
+
+## Prop types
+
+Vue validates props at runtime. Common types: `String`, `Number`, `Boolean`, `Array`, `Object`. You can also set defaults and mark props as required:
+
+```vue
+<script setup>
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+  })
+</script>
+```
+
+## Try it
+
+The notification list is now split into `App.vue` and `NotificationItem.vue`. Check both files in the editor. Try adding a `type` prop to `NotificationItem` that changes the accent color based on the notification type (info, success, warning, error).
+
+> [!TIP] v0 components use props just like this. When you write `<Tabs.Item value="home">`, you're passing a prop to a headless component.
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue
new file mode 100644
index 000000000..26b511d55
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue
@@ -0,0 +1,111 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', read: false, createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', read: false, createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', read: false, createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      read: false,
+      createdAt: Date.now(),
+    })
+  }
+
+  function dismissNotification (id) {
+    notifications.value = notifications.value.filter(n => n.id !== id)
+  }
+
+  function markRead (id) {
+    const n = notifications.value.find(n => n.id === id)
+    if (n) n.read = true
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Emitting Events
+      </h1>
+
+      <span
+        v-if="notifications.some(n => !n.read)"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ notifications.filter(n => !n.read).length }}
+      </span>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <ul v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :read="n.read"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+        @dismiss="dismissNotification(n.id)"
+        @mark-read="markRead(n.id)"
+      />
+
+      <li
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/NotificationItem.vue
new file mode 100644
index 000000000..5cc59dd19
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/NotificationItem.vue
@@ -0,0 +1,54 @@
+<script setup>
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+    time: { type: String, default: '' },
+  })
+
+  const emit = defineEmits(['dismiss', 'mark-read'])
+
+  const typeStyles = {
+    info: 'border-l-info',
+    success: 'border-l-success',
+    warning: 'border-l-warning',
+    error: 'border-l-error',
+  }
+</script>
+
+<template>
+  <li
+    class="p-3 rounded-lg border border-solid border-divider border-l-3"
+    :class="[
+      typeStyles[type] || typeStyles.info,
+      read ? 'bg-surface' : 'bg-surface-tint',
+    ]"
+  >
+    <div class="flex items-center justify-between mb-1">
+      <span :class="read ? 'text-on-surface-variant' : 'text-on-surface font-medium'">
+        {{ text }}
+      </span>
+
+      <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+        {{ time }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        v-if="!read"
+        class="text-xs px-2 py-1 rounded bg-success text-on-success"
+        @click="emit('mark-read')"
+      >
+        Mark read
+      </button>
+
+      <button
+        class="text-xs px-2 py-1 rounded bg-error text-on-error"
+        @click="emit('dismiss')"
+      >
+        Dismiss
+      </button>
+    </div>
+  </li>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/README.md
new file mode 100644
index 000000000..e8ef7f019
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/README.md
@@ -0,0 +1,47 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Emitting Events
+
+Props flow **down** from parent to child. Events flow **up** from child to parent. Use `defineEmits` to declare the events your component can emit.
+
+## defineEmits
+
+```vue
+<script setup>
+  const emit = defineEmits(['dismiss', 'mark-read'])
+
+  function handleDismiss () {
+    emit('dismiss')
+  }
+</script>
+```
+
+The parent listens with `@`:
+
+```vue
+<template>
+  <NotificationItem
+    @dismiss="removeNotification(n.id)"
+    @mark-read="markAsRead(n.id)"
+  />
+</template>
+```
+
+## Payload
+
+You can pass data with the event:
+
+```vue
+<script setup>
+  const emit = defineEmits(['dismiss'])
+
+  emit('dismiss', { id: 42, reason: 'user action' })
+</script>
+```
+
+## Try it
+
+Each notification now has "Dismiss" and "Mark read" buttons. The child emits events, and the parent handles the state changes. Try adding a `@pin` emit that toggles a pinned state on the notification.
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue
new file mode 100644
index 000000000..f3eb45cca
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue
@@ -0,0 +1,128 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', read: false, createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', read: false, createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', read: false, createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      read: false,
+      createdAt: Date.now(),
+    })
+  }
+
+  function dismissNotification (id) {
+    notifications.value = notifications.value.filter(n => n.id !== id)
+  }
+
+  function markRead (id) {
+    const n = notifications.value.find(n => n.id === id)
+    if (n) n.read = true
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Slots
+      </h1>
+
+      <span
+        v-if="notifications.some(n => !n.read)"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ notifications.filter(n => !n.read).length }}
+      </span>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <div v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :read="n.read"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+        @dismiss="dismissNotification(n.id)"
+        @mark-read="markRead(n.id)"
+      >
+        <template #actions>
+          <button
+            v-if="!n.read"
+            class="text-xs px-2 py-1 rounded bg-success text-on-success"
+            @click="markRead(n.id)"
+          >
+            Mark read
+          </button>
+
+          <button
+            class="text-xs px-2 py-1 rounded bg-error text-on-error"
+            @click="dismissNotification(n.id)"
+          >
+            Dismiss
+          </button>
+        </template>
+      </NotificationItem>
+
+      <div
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationCard.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationCard.vue
new file mode 100644
index 000000000..93bc11e06
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationCard.vue
@@ -0,0 +1,33 @@
+<script setup>
+  defineProps({
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+  })
+
+  const typeStyles = {
+    info: 'border-l-info',
+    success: 'border-l-success',
+    warning: 'border-l-warning',
+    error: 'border-l-error',
+  }
+</script>
+
+<template>
+  <div
+    class="p-3 rounded-lg border border-solid border-divider border-l-3"
+    :class="[
+      typeStyles[type] || typeStyles.info,
+      read ? 'bg-surface' : 'bg-surface-tint',
+    ]"
+  >
+    <div class="mb-2">
+      <slot>No notification content</slot>
+    </div>
+
+    <div class="flex gap-2">
+      <slot name="actions">
+        <span class="text-xs text-on-surface-variant">No actions</span>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationItem.vue
new file mode 100644
index 000000000..e0672f757
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationItem.vue
@@ -0,0 +1,46 @@
+<script setup>
+  // Components
+  import NotificationCard from './NotificationCard.vue'
+
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+    time: { type: String, default: '' },
+  })
+
+  defineEmits(['dismiss', 'mark-read'])
+</script>
+
+<template>
+  <NotificationCard :read="read" :type="type">
+    <div class="flex items-center justify-between">
+      <span :class="read ? 'text-on-surface-variant' : 'text-on-surface font-medium'">
+        {{ text }}
+      </span>
+
+      <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+        {{ time }}
+      </span>
+    </div>
+
+    <template #actions>
+      <slot name="actions">
+        <button
+          v-if="!read"
+          class="text-xs px-2 py-1 rounded bg-success text-on-success"
+          @click="$emit('mark-read')"
+        >
+          Mark read
+        </button>
+
+        <button
+          class="text-xs px-2 py-1 rounded bg-error text-on-error"
+          @click="$emit('dismiss')"
+        >
+          Dismiss
+        </button>
+      </slot>
+    </template>
+  </NotificationCard>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/README.md
new file mode 100644
index 000000000..30bf9dbfb
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/README.md
@@ -0,0 +1,59 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Slots for Flexibility
+
+Props pass **data** to a child. Slots pass **template content**. This lets the parent control what renders inside a child component while the child controls the layout.
+
+## Default slot
+
+```vue
+<!-- NotificationCard.vue -->
+<template>
+  <div class="card">
+    <slot>No content provided</slot>
+  </div>
+</template>
+```
+
+The text inside `<slot>` is **fallback content** — it renders when the parent doesn't provide anything.
+
+## Named slots
+
+Components can have multiple slots. Use `name` to distinguish them:
+
+```vue
+<!-- NotificationCard.vue -->
+<template>
+  <div class="card">
+    <slot />
+    <div class="actions">
+      <slot name="actions">
+        <button>Default action</button>
+      </slot>
+    </div>
+  </div>
+</template>
+```
+
+The parent targets named slots with `#slotName`:
+
+```vue
+<template>
+  <NotificationCard>
+    <p>Notification text</p>
+
+    <template #actions>
+      <button>Custom action</button>
+    </template>
+  </NotificationCard>
+</template>
+```
+
+## Try it
+
+`NotificationCard` wraps each notification with a card layout and an `#actions` slot. Try adding a `#header` slot with a fallback that shows the notification type.
+
+> [!TIP] Slots are v0's primary rendering API. Every headless component exposes slot props that let you control the visual output while v0 handles the behavior.
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue
new file mode 100644
index 000000000..a2ab5ec7a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue
@@ -0,0 +1,147 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, provide, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  // Theme state — provided to all descendants
+  const compact = ref(false)
+  const accentColor = ref('info')
+
+  provide('notification-theme', {
+    compact,
+    accentColor,
+  })
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', read: false, createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', read: false, createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', read: false, createdAt: Date.now() - 10_000 },
+  ]
+
+  const accentOptions = ['info', 'success', 'warning', 'error', 'primary']
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      read: false,
+      createdAt: Date.now(),
+    })
+  }
+
+  function dismissNotification (id) {
+    notifications.value = notifications.value.filter(n => n.id !== id)
+  }
+
+  function markRead (id) {
+    const n = notifications.value.find(n => n.id === id)
+    if (n) n.read = true
+  }
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Provide / Inject
+      </h1>
+
+      <span
+        v-if="notifications.some(n => !n.read)"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ notifications.filter(n => !n.read).length }}
+      </span>
+    </div>
+
+    <!-- Theme controls -->
+    <div class="flex flex-wrap items-center gap-4 mb-6 p-4 rounded-lg bg-surface border border-solid border-divider">
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input
+          v-model="compact"
+          class="w-4 h-4"
+          type="checkbox"
+        >
+        <span class="text-sm font-medium">Compact mode</span>
+      </label>
+
+      <div class="flex items-center gap-2">
+        <span class="text-sm font-medium">Accent:</span>
+
+        <select
+          v-model="accentColor"
+          class="px-2 py-1 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+        >
+          <option v-for="color in accentOptions" :key="color" :value="color">
+            {{ color }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <div v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :read="n.read"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+        @dismiss="dismissNotification(n.id)"
+        @mark-read="markRead(n.id)"
+      />
+
+      <div
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationCard.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationCard.vue
new file mode 100644
index 000000000..24339eb19
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationCard.vue
@@ -0,0 +1,47 @@
+<script setup>
+  // Utilities
+  import { inject, computed } from 'vue'
+
+  const props = defineProps({
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+  })
+
+  const theme = inject('notification-theme', {
+    compact: false,
+    accentColor: 'info',
+  })
+
+  const borderClass = computed(() => {
+    const color = theme.accentColor?.value || props.type
+    const map = {
+      info: 'border-l-info',
+      success: 'border-l-success',
+      warning: 'border-l-warning',
+      error: 'border-l-error',
+      primary: 'border-l-primary',
+    }
+    return map[color] || map.info
+  })
+</script>
+
+<template>
+  <div
+    class="rounded-lg border border-solid border-divider border-l-3"
+    :class="[
+      borderClass,
+      read ? 'bg-surface' : 'bg-surface-tint',
+      theme.compact?.value ? 'p-2' : 'p-3',
+    ]"
+  >
+    <div :class="theme.compact?.value ? 'mb-1' : 'mb-2'">
+      <slot>No notification content</slot>
+    </div>
+
+    <div class="flex gap-2">
+      <slot name="actions">
+        <span class="text-xs text-on-surface-variant">No actions</span>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationItem.vue
new file mode 100644
index 000000000..cf9b8f176
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationItem.vue
@@ -0,0 +1,57 @@
+<script setup>
+  // Components
+  import NotificationCard from './NotificationCard.vue'
+
+  // Utilities
+  import { inject } from 'vue'
+
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+    time: { type: String, default: '' },
+  })
+
+  defineEmits(['dismiss', 'mark-read'])
+
+  const theme = inject('notification-theme', {
+    compact: false,
+    accentColor: 'info',
+  })
+</script>
+
+<template>
+  <NotificationCard :read="read" :type="type">
+    <div class="flex items-center justify-between">
+      <span
+        :class="[
+          read ? 'text-on-surface-variant' : 'text-on-surface font-medium',
+          theme.compact?.value ? 'text-sm' : '',
+        ]"
+      >
+        {{ text }}
+      </span>
+
+      <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+        {{ time }}
+      </span>
+    </div>
+
+    <template #actions>
+      <button
+        v-if="!read"
+        class="text-xs px-2 py-1 rounded bg-success text-on-success"
+        @click="$emit('mark-read')"
+      >
+        Mark read
+      </button>
+
+      <button
+        class="text-xs px-2 py-1 rounded bg-error text-on-error"
+        @click="$emit('dismiss')"
+      >
+        Dismiss
+      </button>
+    </template>
+  </NotificationCard>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/README.md
new file mode 100644
index 000000000..0675d2b60
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/README.md
@@ -0,0 +1,51 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Sharing State
+
+Props work great for parent-child communication, but what about deeply nested components? Passing props through every layer is called **prop drilling** — and it gets tedious fast.
+
+## provide / inject
+
+`provide` makes a value available to **all descendants**, no matter how deep. `inject` retrieves it:
+
+```vue
+<!-- Parent -->
+<script setup>
+  import { provide, ref } from 'vue'
+
+  const theme = ref({ compact: false, accent: 'blue' })
+  provide('theme', theme)
+</script>
+```
+
+```vue
+<!-- Any descendant -->
+<script setup>
+  import { inject } from 'vue'
+
+  const theme = inject('theme')
+</script>
+```
+
+## Reactivity
+
+When you provide a `ref`, injecting components **automatically react** to changes. This is what makes provide/inject powerful for shared UI state like themes, locales, or configuration.
+
+## Default values
+
+If no ancestor provides the key, `inject` returns `undefined` unless you pass a default:
+
+```vue
+<script setup>
+  const theme = inject('theme', { compact: false, accent: 'info' })
+</script>
+```
+
+## Try it
+
+The App provides a notification theme (compact mode and accent color). Toggle the settings and watch how `NotificationItem` and `NotificationCard` react — without any props being passed through the tree. Try adding a `showTimestamps` boolean to the provided theme.
+
+> [!TIP] This is exactly how v0 works internally. `createContext` is a type-safe wrapper around provide/inject that ensures components can share state without prop drilling.
diff --git a/apps/docs/src/stores/playground.ts b/apps/docs/src/stores/playground.ts
new file mode 100644
index 000000000..97a667d3e
--- /dev/null
+++ b/apps/docs/src/stores/playground.ts
@@ -0,0 +1,82 @@
+// Framework
+import { useBreakpoints, useStorage } from '@vuetify/v0'
+
+// Utilities
+import { defineStore } from 'pinia'
+import { computed, shallowRef, watch } from 'vue'
+
+export interface PlaygroundControl {
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+export const usePlaygroundStore = defineStore('playground', () => {
+  const storage = useStorage()
+  const breakpoints = useBreakpoints()
+  const isDesktop = breakpoints.mdAndUp
+
+  // Persistent UI preferences
+  const panelOpen = storage.get<boolean>('playground-panel-open', false)
+  const replLayout = storage.get<'horizontal' | 'vertical'>('playground-layout', 'horizontal')
+
+  // Session UI state
+  const sidebarOpen = shallowRef(true)
+  const showExamples = shallowRef(false)
+
+  const isPanelMode = computed(() => isDesktop.value && panelOpen.value)
+
+  // Sync sidebar with desktop breakpoint
+  watch(isDesktop, v => {
+    sidebarOpen.value = v
+  }, { immediate: true })
+
+  // Namespaced control objects for tour handlers
+  const panel: PlaygroundControl = {
+    open: () => {
+      panelOpen.value = true
+    },
+    close: () => {
+      panelOpen.value = false
+    },
+    toggle: () => {
+      panelOpen.value = !panelOpen.value
+    },
+  }
+
+  const sidebar: PlaygroundControl = {
+    open: () => {
+      sidebarOpen.value = true
+    },
+    close: () => {
+      sidebarOpen.value = false
+    },
+    toggle: () => {
+      sidebarOpen.value = !sidebarOpen.value
+    },
+  }
+
+  const examples: PlaygroundControl = {
+    open: () => {
+      showExamples.value = true
+    },
+    close: () => {
+      showExamples.value = false
+    },
+    toggle: () => {
+      showExamples.value = !showExamples.value
+    },
+  }
+
+  return {
+    isDesktop,
+    sidebarOpen,
+    panelOpen,
+    showExamples,
+    replLayout,
+    isPanelMode,
+    panel,
+    sidebar,
+    examples,
+  }
+})
diff --git a/apps/docs/src/stores/skillz.ts b/apps/docs/src/stores/skillz.ts
index 3a8909576..3a95e69de 100644
--- a/apps/docs/src/stores/skillz.ts
+++ b/apps/docs/src/stores/skillz.ts
@@ -10,6 +10,10 @@ import { computed, shallowRef } from 'vue'
 
 // Types
 import type { DiscoveryStepTicket } from '@/composables/useDiscovery'
+import type { Ref } from 'vue'
+
+// Tutorials
+import { getTutorialSkills } from '@/skillz/tutorials'
 
 export type ProgressStatus = 'not-started' | 'in-progress' | 'completed'
 
@@ -27,16 +31,41 @@ export interface SkillzProgress {
   tours: Record<string, TourProgress>
 }
 
+// Local-only UI preferences — never synced to the server
+interface LocalSkillzPrefs {
+  snoozed: Record<string, number> // tourId → snoozedUntil timestamp
+  dismissed: Record<string, boolean> // tourId → hidden from resume popup
+}
+
+// Adapter interface — swap for an API-backed implementation for Vuetify One subscribers
+export interface SkillzAdapter {
+  readonly data: Ref<SkillzProgress>
+}
+
 const VERSION = 1
 
 function defaults (): SkillzProgress {
   return { version: VERSION, tours: {} }
 }
 
+function defaultPrefs (): LocalSkillzPrefs {
+  return { snoozed: {}, dismissed: {} }
+}
+
+function createLocalAdapter (storage: ReturnType<typeof useStorage>): SkillzAdapter {
+  return { data: storage.get<SkillzProgress>('skillz', defaults()) }
+}
+
 export const useSkillzStore = defineStore('skillz', () => {
   const discovery = useDiscovery()
   const storage = useStorage()
-  const data = storage.get<SkillzProgress>('skillz', defaults())
+
+  // Progress data — sourced through adapter for future API integration
+  const adapter = createLocalAdapter(storage)
+  const data = adapter.data
+
+  // UI preferences — always local-only
+  const prefs = storage.get<LocalSkillzPrefs>('skillz-prefs', defaultPrefs())
 
   const active = shallowRef<string | null>(null)
 
@@ -58,8 +87,8 @@ export const useSkillzStore = defineStore('skillz', () => {
   }
 
   function missing (id: string): string[] {
-    const tour = discovery.tours.get(id)
-    return tour?.prerequisites?.filter(p => !completed(p)) ?? []
+    const skill = discovery.tours.get(id) ?? tutorialSkills.find(s => s.id === id)
+    return skill?.prerequisites?.filter(p => !completed(p)) ?? []
   }
 
   function locked (id: string): boolean {
@@ -80,6 +109,13 @@ export const useSkillzStore = defineStore('skillz', () => {
     }
   }
 
+  // Spread-reassign to ensure Vue's deep watch detects the removal and persists to localStorage
+  function clearPrefs (id: string): void {
+    const { [id]: _s, ...snoozed } = prefs.value.snoozed
+    const { [id]: _d, ...dismissed } = prefs.value.dismissed
+    prefs.value = { snoozed, dismissed }
+  }
+
   function begin (id: string): void {
     const existing = data.value.tours[id]
 
@@ -88,6 +124,9 @@ export const useSkillzStore = defineStore('skillz', () => {
       delete data.value.tours[id]
     }
 
+    // Clear local UI prefs so the resume popup shows again
+    clearPrefs(id)
+
     update(id, {
       status: 'in-progress',
       startedAt: data.value.tours[id]?.startedAt ?? Date.now(),
@@ -109,20 +148,29 @@ export const useSkillzStore = defineStore('skillz', () => {
     update(id, { status: 'completed', completedAt: Date.now() })
   }
 
+  function setLastStep (id: string, stepId: string): void {
+    if (!data.value.tours[id]) return
+    update(id, { lastStep: stepId })
+  }
+
   function reset (id?: string): void {
     if (id) {
       delete data.value.tours[id]
+      clearPrefs(id)
     } else {
       data.value.tours = {}
       data.value.version = VERSION
+      prefs.value = defaultPrefs()
     }
   }
 
+  // Hides the resume popup without wiping progress — user can still resume from the skillz page
   function dismiss (id: string): void {
-    const existing = data.value.tours[id]
-    if (existing?.status === 'in-progress') {
-      delete data.value.tours[id]
-    }
+    prefs.value.dismissed[id] = true
+  }
+
+  function snooze (id: string): void {
+    prefs.value.snoozed[id] = Date.now() + 60 * 60 * 1000
   }
 
   // Track current step on enter (for resume)
@@ -178,17 +226,20 @@ export const useSkillzStore = defineStore('skillz', () => {
     discovery.complete()
   }
 
-  const items = computed(() => discovery.tours.values())
+  const tutorialSkills = getTutorialSkills()
+  const items = computed(() => [...discovery.tours.values(), ...tutorialSkills])
   const done = computed(() => active.value ? steps(active.value) : [])
 
-  // Find any tour that was started but not completed (and not currently active)
+  // Find any skill that was started but not completed (and not currently active, snoozed, or dismissed)
   const pendingTour = computed(() => {
     if (active.value) return null
+    const now = Date.now()
     for (const [id, progress] of Object.entries(data.value.tours)) {
-      if (progress.status === 'in-progress') {
-        const tour = discovery.tours.get(id)
-        if (tour) return { tour, progress }
-      }
+      if (progress.status !== 'in-progress') continue
+      if (prefs.value.dismissed[id]) continue
+      if (prefs.value.snoozed[id] && prefs.value.snoozed[id] > now) continue
+      const tour = discovery.tours.get(id) ?? tutorialSkills.find(s => s.id === id)
+      if (tour) return { tour, progress }
     }
     return null
   })
@@ -198,8 +249,13 @@ export const useSkillzStore = defineStore('skillz', () => {
     start,
     stop,
     complete,
+    finish,
     reset,
     dismiss,
+    snooze,
+    begin,
+    record,
+    setLastStep,
 
     // Queries
     get,
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index 2b3b6d12b..23916a282 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -170,6 +170,34 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/composables/data/create-data-table': RouteRecordInfo<
+      '/composables/data/create-data-table',
+      '/composables/data/create-data-table',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/composables/data/create-filter': RouteRecordInfo<
+      '/composables/data/create-filter',
+      '/composables/data/create-filter',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/composables/data/create-pagination': RouteRecordInfo<
+      '/composables/data/create-pagination',
+      '/composables/data/create-pagination',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/composables/data/create-virtual': RouteRecordInfo<
+      '/composables/data/create-virtual',
+      '/composables/data/create-virtual',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/composables/forms/create-form': RouteRecordInfo<
       '/composables/forms/create-form',
       '/composables/forms/create-form',
@@ -429,13 +457,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/composables/utilities/create-filter': RouteRecordInfo<
-      '/composables/utilities/create-filter',
-      '/composables/utilities/create-filter',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
     '/composables/utilities/create-overflow': RouteRecordInfo<
       '/composables/utilities/create-overflow',
       '/composables/utilities/create-overflow',
@@ -443,20 +464,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/composables/utilities/create-pagination': RouteRecordInfo<
-      '/composables/utilities/create-pagination',
-      '/composables/utilities/create-pagination',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
-    '/composables/utilities/create-virtual': RouteRecordInfo<
-      '/composables/utilities/create-virtual',
-      '/composables/utilities/create-virtual',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
     '/guide/': RouteRecordInfo<
       '/guide/',
       '/guide',
@@ -639,6 +646,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/playground': RouteRecordInfo<
+      '/playground',
+      '/playground',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/releases': RouteRecordInfo<
       '/releases',
       '/releases',
@@ -667,6 +681,13 @@ declare module 'vue-router/auto-routes' {
       { id: ParamValue<false> },
       | never
     >,
+    '/skillz.tutorial.[id]': RouteRecordInfo<
+      '/skillz.tutorial.[id]',
+      '/skillz/tutorial/:id',
+      { id: ParamValue<true> },
+      { id: ParamValue<false> },
+      | never
+    >,
     '/storybook/': RouteRecordInfo<
       '/storybook/',
       '/storybook',
@@ -820,6 +841,30 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/composables/data/create-data-table.md': {
+      routes:
+        | '/composables/data/create-data-table'
+      views:
+        | never
+    }
+    'src/pages/composables/data/create-filter.md': {
+      routes:
+        | '/composables/data/create-filter'
+      views:
+        | never
+    }
+    'src/pages/composables/data/create-pagination.md': {
+      routes:
+        | '/composables/data/create-pagination'
+      views:
+        | never
+    }
+    'src/pages/composables/data/create-virtual.md': {
+      routes:
+        | '/composables/data/create-virtual'
+      views:
+        | never
+    }
     'src/pages/composables/forms/create-form.md': {
       routes:
         | '/composables/forms/create-form'
@@ -1042,30 +1087,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
-    'src/pages/composables/utilities/create-filter.md': {
-      routes:
-        | '/composables/utilities/create-filter'
-      views:
-        | never
-    }
     'src/pages/composables/utilities/create-overflow.md': {
       routes:
         | '/composables/utilities/create-overflow'
       views:
         | never
     }
-    'src/pages/composables/utilities/create-pagination.md': {
-      routes:
-        | '/composables/utilities/create-pagination'
-      views:
-        | never
-    }
-    'src/pages/composables/utilities/create-virtual.md': {
-      routes:
-        | '/composables/utilities/create-virtual'
-      views:
-        | never
-    }
     'src/pages/guide/index.md': {
       routes:
         | '/guide/'
@@ -1222,6 +1249,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/playground.vue': {
+      routes:
+        | '/playground'
+      views:
+        | never
+    }
     'src/pages/releases.md': {
       routes:
         | '/releases'
@@ -1246,6 +1279,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/skillz.tutorial.[id].vue': {
+      routes:
+        | '/skillz.tutorial.[id]'
+      views:
+        | never
+    }
     'src/pages/storybook/index.md': {
       routes:
         | '/storybook/'
diff --git a/apps/docs/src/types/skill.ts b/apps/docs/src/types/skill.ts
index 4c27b5cde..c00d26830 100644
--- a/apps/docs/src/types/skill.ts
+++ b/apps/docs/src/types/skill.ts
@@ -2,7 +2,7 @@
 export type SkillLevel = 1 | 2 | 3
 
 /** Skill interaction mode */
-export type SkillMode = 'guided' | 'interactive'
+export type SkillMode = 'guided' | 'interactive' | 'tutorial'
 
 /** Keys that advance to next step */
 export type SkillStepNext =
@@ -38,6 +38,8 @@ export interface SkillMeta {
   description: string
   minutes: number
   startRoute: string
+  /** Route to the tutorial editor (tutorials only) */
+  tutorialRoute?: string
   /** Route to navigate to after tour completion */
   completeRoute?: string
   steps: SkillStep[]
@@ -55,14 +57,15 @@ export type SkillCategory =
   // | 'library-building' // Build your own library (plugins, adapters, extending v0)
 
 export const SKILL_LEVEL_META: Record<SkillLevel, { label: string, icon: string, color: string, title: string }> = {
-  1: { label: 'Beginner', icon: 'level-beginner', color: 'var(--v0-success)', title: 'Beginner experience level' },
-  2: { label: 'Intermediate', icon: 'level-intermediate', color: 'var(--v0-info)', title: 'Intermediate experience level' },
-  3: { label: 'Advanced', icon: 'level-advanced', color: 'var(--v0-warning)', title: 'Advanced experience level' },
+  1: { label: 'Beginner', icon: 'level-beginner', color: 'var(--v0-success)', title: 'Start here — learn the docs, Vue fundamentals, and your first v0 components' },
+  2: { label: 'Intermediate', icon: 'level-intermediate', color: 'var(--v0-info)', title: 'Go deeper — watchers, lifecycle hooks, component composition, and real-world patterns' },
+  3: { label: 'Advanced', icon: 'level-advanced', color: 'var(--v0-warning)', title: 'Master the system — composables, generics, scoped slots, and library-grade abstractions' },
 }
 
 export const SKILL_MODE_META: Record<SkillMode, { label: string, icon: string, color: string, description: string }> = {
   guided: { label: 'Guided', icon: 'compass', color: 'var(--v0-primary)', description: 'A passive walkthrough. Just click next to continue.' },
   interactive: { label: 'Interactive', icon: 'keyboard', color: 'var(--v0-accent)', description: 'Hands-on practice. Complete tasks to progress.' },
+  tutorial: { label: 'Tutorial', icon: 'code', color: '#64748b', description: 'Learn by coding in a live editor with step-by-step instructions.' },
 }
 
 export const SKILL_TRACK_META: Record<SkillTrack, { label: string, description: string }> = {
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
index 66f0b6971..5a73f2af0 100644
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -112,6 +112,9 @@ export default defineConfig({
     '__VUE_PROD_DEVTOOLS__': 'false',
     '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false',
   },
+  optimizeDeps: {
+    exclude: ['@vue/repl'],
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('src', import.meta.url)),
@@ -125,7 +128,7 @@ export default defineConfig({
   },
   server: {
     fs: {
-      allow: ['../packages/*', '.'],
+      allow: ['../packages/*', '.', '../../node_modules'],
     },
   },
 })
diff --git a/knip.json b/knip.json
index 2b83edcb5..9ed86ef56 100644
--- a/knip.json
+++ b/knip.json
@@ -31,8 +31,14 @@
         "src/components/app/AppBrowserIcon.vue",
         "src/components/docs/DocsBrowserSupport.vue",
         "src/skillz/tours/**/index.ts",
+        "src/stores/playground.ts",
         "src/stores/skillz.ts",
-        "src/examples/**"
+        "src/data/**",
+        "src/examples/**",
+        "src/skillz/tutorials/**"
+      ],
+      "ignoreDependencies": [
+        "@vue/repl"
       ],
       "paths": {
         "@/*": [
diff --git a/patches/@vue__repl@4.7.1.patch b/patches/@vue__repl@4.7.1.patch
new file mode 100644
index 000000000..ca520e3ac
--- /dev/null
+++ b/patches/@vue__repl@4.7.1.patch
@@ -0,0 +1,30 @@
+diff --git a/dist/vue-repl.js b/dist/vue-repl.js
+index 8443310ab473735513bae339f5e0876ff9b16059..f475486ab57fa22a77c4745ac5d1794f658d9616 100644
+--- a/dist/vue-repl.js
++++ b/dist/vue-repl.js
+@@ -500,7 +500,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+   setup(__props, { expose: __expose }) {
+     const props = __props;
+     const { store, theme, clearConsole, previewOptions } = toRefs(props);
+-    const keyProps = inject(injectKeyProps);
++    const keyProps = inject(injectKeyProps, void 0);
+     if (keyProps === void 0 && props.autoStoreInit) {
+       props.store?.init?.();
+     }
+@@ -1218,14 +1218,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
+             createVNode(EditorContainer, { "editor-component": _ctx.editor }, null, 8, ["editor-component"])
+           ]),
+           [outputSlotName.value]: withCtx(() => [
+-            createVNode(Output, {
++            props.store.showOutput !== false ? createVNode(Output, {
+               ref: "output",
+               "editor-component": _ctx.editor,
+               "show-compile-output": props.showCompileOutput,
+               "show-open-source-map": props.showOpenSourceMap,
+               "show-ssr-output": props.showSsrOutput,
+               ssr: !!props.ssr
+-            }, null, 8, ["editor-component", "show-compile-output", "show-open-source-map", "show-ssr-output", "ssr"])
++            }, null, 8, ["editor-component", "show-compile-output", "show-open-source-map", "show-ssr-output", "ssr"]) : createCommentVNode("", true)
+           ]),
+           _: 2
+         }, 1032, ["layout"])
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52b5ced60..7a9338342 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,6 +48,9 @@ catalogs:
     '@vitest/coverage-v8':
       specifier: ^4.0.16
       version: 4.0.16
+    '@vue/repl':
+      specifier: ^4.7.1
+      version: 4.7.1
     '@vue/test-utils':
       specifier: ^2.4.6
       version: 2.4.6
@@ -210,6 +213,11 @@ overrides:
   '@storybook/vue3-vite>vite': ^7.0.0
   vite: npm:rolldown-vite@^7.3.0
 
+patchedDependencies:
+  '@vue/repl@4.7.1':
+    hash: e26b00f869790271f46936e3539a934b376487e8db9a5a430447e624d3725d45
+    path: patches/@vue__repl@4.7.1.patch
+
 importers:
 
   .:
@@ -289,6 +297,9 @@ importers:
       '@unhead/addons':
         specifier: 'catalog:'
         version: 2.0.19(rollup@2.79.2)
+      '@vue/repl':
+        specifier: 'catalog:'
+        version: 4.7.1(patch_hash=e26b00f869790271f46936e3539a934b376487e8db9a5a430447e624d3725d45)
       '@vuetify/auth':
         specifier: 'catalog:'
         version: 0.1.6(pinia@3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
@@ -2695,6 +2706,9 @@ packages:
   '@vue/reactivity@3.5.26':
     resolution: {integrity: sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==}
 
+  '@vue/repl@4.7.1':
+    resolution: {integrity: sha512-8w5Z3cyqBJ5ufzXO2eut2stzb7aX/ZnSva2d3ee8eEINEB7FG2JYwc14eAHHHGGuoXOGN5v4cyb5ti/YZGcwlg==}
+
   '@vue/runtime-core@3.5.24':
     resolution: {integrity: sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==}
 
@@ -8918,6 +8932,8 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.26
 
+  '@vue/repl@4.7.1(patch_hash=e26b00f869790271f46936e3539a934b376487e8db9a5a430447e624d3725d45)': {}
+
   '@vue/runtime-core@3.5.24':
     dependencies:
       '@vue/reactivity': 3.5.24
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 267e42c07..7ce05190c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -21,6 +21,7 @@ catalog:
   '@unhead/addons': 2.0.19
   '@unhead/vue': 2.0.19
   '@vitest/coverage-v8': ^4.0.16
+  '@vue/repl': ^4.7.1
   '@vue/test-utils': ^2.4.6
   '@vue/tsconfig': ^0.8.1
   '@vuetify/github-releaser': ^4.0.3
@@ -91,3 +92,6 @@ overrides:
   '@storybook/builder-vite>vite': ^7.0.0
   '@storybook/vue3-vite>vite': ^7.0.0
   vite: npm:rolldown-vite@^7.3.0
+
+patchedDependencies:
+  '@vue/repl@4.7.1': patches/@vue__repl@4.7.1.patch