chore: migrate site and Workers to TypeScript 7.1

.gitignore

@@ -54,3 +54,6 @@ broken-skills.json
 # PR Lens writes its previews here. They are rebuilt on demand.
 .pr-lens/
 layers/registry/server/data/skill-demos.json.lock
+
+# Native checker configurations stay beside their original projects.
+**/.site-typecheck/

app/component-attributes.d.ts

@@ -0,0 +1,8 @@
+import type { AriaAttributes, HTMLAttributes } from 'vue'
+
+declare module 'vue' {
+  // Components pass these standard attributes and listeners through $attrs.
+  interface ComponentCustomProps extends AriaAttributes, Pick<HTMLAttributes, 'id' | 'autocapitalize' | 'spellcheck' | 'onFocus' | 'role' | 'tabindex' | 'onInput' | 'onKeydown' | 'onKeyup' | 'onPointerdown'> {
+    onClick?: ((event: MouseEvent) => void) | Array<(event: MouseEvent) => void>
+  }
+}

app/components/HomeSearch.vue

@@ -59,7 +59,7 @@ const submitLabel = computed(() => (state.value._tag === 'repository' ? 'Index r
         icon="i-lucide-search"
         placeholder="Search skills or repos"
         name="q"
-        enterkeyhint="search"
+        enterKeyHint="search"
         size="xl"
         color="neutral"
         autocomplete="off"

app/components/SkillSearchTrigger.vue

@@ -54,7 +54,7 @@ watch(() => route.fullPath, () => {
       icon="i-lucide-search"
       placeholder="Search"
       name="skill-search"
-      enterkeyhint="search"
+      enterKeyHint="search"
       size="sm"
       autocomplete="off"
       role="combobox"
@@ -102,7 +102,7 @@ watch(() => route.fullPath, () => {
           icon="i-lucide-search"
           placeholder="Search skills or repos"
           name="skill-search-mobile"
-          enterkeyhint="search"
+          enterKeyHint="search"
           size="lg"
           autocomplete="off"
           role="combobox"

app/components/WeeklyEmailPreview.vue

@@ -23,7 +23,7 @@ const hasDemo = computed(() => !!demo.value?.card && (demo.value?.rowCount ?? 0)
 /**
  * CSS changes the card's palette. Switching themes costs no request.
  */
-const card = computed(() => demo.value?.card)
+const card = computed(() => demo.value?.card ?? '')
 </script>
 
 <template>

app/components/home-demos/_DemoPicture.vue

@@ -19,7 +19,7 @@ const phone = computed(() => demoPhoneShot(demo))
 
 <template>
   <picture v-if="desktop" class="demo-picture">
-    <source v-if="phone" :media="DEMO_PHONE_MEDIA" :srcset="phone.src" :width="phone.width" :height="phone.height">
+    <source v-if="phone" :media="DEMO_PHONE_MEDIA" :srcset="phone.src" v-bind="{ width: phone.width, height: phone.height } satisfies { width: number, height: number }">
     <img
       :src="desktop.src"
       :width="desktop.width"

app/components/home-demos/_DemoVideo.vue

@@ -95,7 +95,7 @@ const duration = computed(() => formatDemoDuration(video.durationSeconds))
       muted
       loop
       playsinline
-      disablepictureinpicture
+      :disablePictureInPicture="true"
       aria-hidden="true"
       tabindex="-1"
       class="demo-video__film"

app/components/home-demos/_DemoWriting.vue

@@ -10,7 +10,7 @@ const showDiff = ref(false)
 const document = computed(() => writing.documents.find(item => item.id === documentId.value) ?? writing.documents[0])
 const markdown = computed(() => document.value?.output ?? '')
 const html = computed(() => renderWritingMarkdown(markdown.value))
-const sourceHtml = computed(() => highlightToHtml(markdown.value, 'md'))
+const sourceHtml = computed(() => highlightToHtml(markdown.value, 'md') ?? '')
 const diff = computed(() => writingDiff(document.value?.original ?? '', document.value?.output ?? ''))
 </script>
 

app/pages/me/cli-tokens/new.vue

@@ -45,9 +45,9 @@ useSeoMeta({ title: 'New token', robots: 'noindex' })
         <USelect
           v-model="form.ttl"
           :items="[
-            { label: '30 days', value: '30' },
-            { label: '90 days', value: '90' },
-            { label: '365 days', value: '365' },
+            { label: '30 days', value: '30' as const },
+            { label: '90 days', value: '90' as const },
+            { label: '365 days', value: '365' as const },
           ]"
           :disabled="state._tag === 'creating'"
           :ui="{ base: 'min-h-11' }"

layers/identity/app/components/HeaderAccount.vue

@@ -15,6 +15,9 @@ const { variant = 'bar' } = defineProps<{
   variant?: 'bar' | 'menu'
 }>()
 
+// Keep the signed-in menu in its own chunk without Nuxt’s hydration wrapper.
+const DropdownMenu = defineAsyncComponent(() => import('@nuxt/ui/components/DropdownMenu.vue'))
+
 const { state, logout, isLoading } = useAuth()
 
 const route = useRoute()
@@ -49,7 +52,7 @@ const accountItems = computed<DropdownMenuItem[]>(() => {
       size="sm"
     />
     <!-- Lazy: only a signed-in visitor sees the menu, and the session loads after hydration. -->
-    <LazyUDropdownMenu
+    <DropdownMenu
       v-else
       :items="accountItems"
       :content="{ align: 'end' }"
@@ -77,7 +80,7 @@ const accountItems = computed<DropdownMenuItem[]>(() => {
           </template>
         </ClientOnly>
       </UButton>
-    </LazyUDropdownMenu>
+    </DropdownMenu>
   </div>
 
   <div

layers/identity/app/pages/me/index.vue

@@ -612,7 +612,7 @@ async function deleteAccount() {
                   icon="i-lucide-bell-off"
                   class="min-h-11 min-w-11 shrink-0"
                   :aria-label="`Stop watching ${source.owner}/${source.repo}`"
-                  :title="`Stop watching ${source.owner}/${source.repo}`"
+                  v-bind="{ title: `Stop watching ${source.owner}/${source.repo}` } satisfies { title: string }"
                   :disabled="removeSubscriptionMutation.pending.value"
                   :loading="removeSubscriptionMutation.pending.value && unwatchingRepository === `${source.owner}/${source.repo}`"
                   @click="unwatch(source.owner, source.repo)"

layers/identity/app/pages/onboarding/email.vue

@@ -128,12 +128,12 @@ useSeoMeta({ title: 'Email opt-in', robots: 'noindex' })
       </div>
 
       <div class="space-y-1">
-        <UCheckbox v-model="weeklyOptIn" size="xl" :disabled="submitting" :ui="checkboxUi" label="Send me distinct trending Skills each Monday." />
+        <UCheckbox :model-value="weeklyOptIn" size="xl" :disabled="submitting" :ui="checkboxUi" label="Send me distinct trending Skills each Monday." @update:model-value="weeklyOptIn = $event === true" />
         <UButton label="Preview the weekly" color="neutral" variant="link" class="min-h-11 px-0 ms-9" trailing-icon="i-lucide-arrow-up-right" @click="openPreview('weekly')" />
       </div>
 
       <div class="space-y-1">
-        <UCheckbox v-model="optIn" size="xl" :disabled="submitting" :ui="checkboxUi" label="Send me watched changes once a month." />
+        <UCheckbox :model-value="optIn" size="xl" :disabled="submitting" :ui="checkboxUi" label="Send me watched changes once a month." @update:model-value="optIn = $event === true" />
         <UButton label="Preview Skill updates" color="neutral" variant="link" class="min-h-11 px-0 ms-9" trailing-icon="i-lucide-arrow-up-right" @click="openPreview('digest')" />
       </div>
 

layers/registry/app/components/SkillDetail.vue

@@ -2122,7 +2122,7 @@ useHead(computed(() => ({
                       v-if="commit.verified"
                       name="i-lucide-shield-check"
                       class="size-3 shrink-0"
-                      :title="`GPG-signed (${commit.verifiedReason})`"
+                      v-bind="{ title: `GPG-signed (${commit.verifiedReason})` } satisfies { title: string }"
                       aria-hidden="true"
                     />
                   </div>
@@ -2820,13 +2820,13 @@ useHead(computed(() => ({
       </div>
       <template v-else>
         <UTabs
-          v-model="relatedTab"
-          :items="relatedTabsAvailable"
+          :model-value="relatedTab" :items="relatedTabsAvailable"
           :content="false"
           color="neutral"
           variant="link"
           size="xs"
           class="mb-4"
+          @update:model-value="relatedTab = String($event)"
         />
         <SkillSourceList
           :items="currentRelatedItems"

layers/registry/app/components/_SkillCommandPanel.vue

@@ -268,7 +268,7 @@ function copyFrom(next: CommandMode) {
         </p>
       </div>
       <div
-        v-else
+        v-if="layout === 'tabs'"
         data-testid="skill-command-panel"
         class="space-y-2"
       >

package.json

@@ -22,7 +22,7 @@
     "postinstall": "nuxt prepare",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "wrangler types --check --config wrangler.jsonc --env-file .dev.vars.example && nuxt typecheck && pnpm --filter @skilld/artifact-signer-worker typecheck",
+    "typecheck": "wrangler types --check --config wrangler.jsonc --env-file .dev.vars.example && nuxt prepare && site-typecheck --noEmit --incremental false && pnpm --filter @skilld/artifact-signer-worker typecheck",
     "test": "vitest",
     "test:run": "vitest run",
     "test:e2e": "pnpm build:test && playwright test",
@@ -51,7 +51,8 @@
     "checkin": "nuxt-checkin prepare && nuxt-checkin",
     "demo:record": "tsx scripts/record-skill-demo.ts",
     "sync:skills": "pnpm dlx skilld@3.6.4 sync --plain",
-    "check:skills": "pnpm dlx skilld@3.6.4 sync --check --plain"
+    "check:skills": "pnpm dlx skilld@3.6.4 sync --check --plain",
+    "typecheck:legacy": "wrangler types --check --config wrangler.jsonc --env-file .dev.vars.example && nuxt typecheck && pnpm --filter @skilld/artifact-signer-worker typecheck:legacy"
   },
   "dependencies": {
     "@comark/nuxt": "catalog:",
@@ -121,6 +122,7 @@
     "happy-dom": "catalog:",
     "lint-staged": "catalog:",
     "nuxtseo-devtools-host": "catalog:",
+    "site-typecheck": "workspace:*",
     "tsx": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:",