feat: unify skill routes with owner slugs

Author: thewilloftheshadow

convex/httpApiV1.ts

@@ -267,6 +267,7 @@ async function skillsGetRouterV1Handler(ctx: ActionCtx, request: Request) {
         owner: result.owner
           ? {
               handle: result.owner.handle ?? null,
+              userId: result.owner._id,
               displayName: result.owner.displayName ?? null,
               image: result.owner.image ?? null,
             }

convex/skills.ts

@@ -127,6 +127,7 @@ export const getBySlug = query({
             },
             owner: {
               handle: forkOfOwner?.handle ?? forkOfOwner?.name ?? null,
+              userId: forkOfOwner?._id ?? null,
             },
           }
         : null,
@@ -138,6 +139,7 @@ export const getBySlug = query({
             },
             owner: {
               handle: canonicalOwner?.handle ?? canonicalOwner?.name ?? null,
+              userId: canonicalOwner?._id ?? null,
             },
           }
         : null,

convex/telemetry.ts

@@ -88,7 +88,13 @@ export const getMyInstalled = query({
       lastSeenAt: number
       expiredAt?: number
       skills: Array<{
-        skill: { slug: string; displayName: string; summary?: string; stats: unknown }
+        skill: {
+          slug: string
+          displayName: string
+          summary?: string
+          stats: unknown
+          ownerUserId: Id<'users'>
+        }
         firstSeenAt: number
         lastSeenAt: number
         lastVersion?: string
@@ -105,7 +111,13 @@ export const getMyInstalled = query({
 
       const filtered = includeRemoved ? installs : installs.filter((entry) => !entry.removedAt)
       const skills: Array<{
-        skill: { slug: string; displayName: string; summary?: string; stats: unknown }
+        skill: {
+          slug: string
+          displayName: string
+          summary?: string
+          stats: unknown
+          ownerUserId: Id<'users'>
+        }
         firstSeenAt: number
         lastSeenAt: number
         lastVersion?: string
@@ -121,6 +133,7 @@ export const getMyInstalled = query({
             displayName: skill.displayName,
             summary: skill.summary,
             stats: skill.stats,
+            ownerUserId: skill.ownerUserId,
           },
           firstSeenAt: entry.firstSeenAt,
           lastSeenAt: entry.lastSeenAt,

src/components/SkillCard.tsx

@@ -12,7 +12,8 @@ type SkillCardProps = {
 }
 
 export function SkillCard({ skill, badge, chip, summaryFallback, meta, href }: SkillCardProps) {
-  const link = href ?? `/skills/${skill.slug}`
+  const owner = encodeURIComponent(String(skill.ownerUserId))
+  const link = href ?? `/${owner}/${skill.slug}`
   const badges = Array.isArray(badge) ? badge : badge ? [badge] : []
 
   return (

src/components/SkillDetailPage.tsx

@@ -25,11 +25,11 @@ type SkillBySlugResult = {
     kind: 'fork' | 'duplicate'
     version: string | null
     skill: { slug: string; displayName: string }
-    owner: { handle: string | null }
+    owner: { handle: string | null; userId: Id<'users'> | null }
   } | null
   canonical: {
     skill: { slug: string; displayName: string }
-    owner: { handle: string | null }
+    owner: { handle: string | null; userId: Id<'users'> | null }
   } | null
 } | null
 
@@ -81,33 +81,36 @@ export function SkillDetailPage({
   const isStaff = isModerator(me)
 
   const ownerHandle = owner?.handle ?? owner?.name ?? null
+  const ownerParam = ownerHandle ?? (owner?._id ? String(owner._id) : null)
   const wantsCanonicalRedirect = Boolean(
-    ownerHandle &&
+    ownerParam &&
       (redirectToCanonical ||
-        (typeof canonicalOwner === 'string' && canonicalOwner && canonicalOwner !== ownerHandle)),
+        (typeof canonicalOwner === 'string' && canonicalOwner && canonicalOwner !== ownerParam)),
   )
 
   const forkOf = result?.forkOf ?? null
   const canonical = result?.canonical ?? null
   const forkOfLabel = forkOf?.kind === 'duplicate' ? 'duplicate of' : 'fork of'
   const forkOfOwnerHandle = forkOf?.owner?.handle ?? null
+  const forkOfOwnerId = forkOf?.owner?.userId ?? null
   const canonicalOwnerHandle = canonical?.owner?.handle ?? null
+  const canonicalOwnerId = canonical?.owner?.userId ?? null
   const forkOfHref = forkOf?.skill?.slug
-    ? buildSkillHref(forkOfOwnerHandle, forkOf.skill.slug)
+    ? buildSkillHref(forkOfOwnerHandle, forkOfOwnerId, forkOf.skill.slug)
     : null
   const canonicalHref =
     canonical?.skill?.slug && canonical.skill.slug !== forkOf?.skill?.slug
-      ? buildSkillHref(canonicalOwnerHandle, canonical.skill.slug)
+      ? buildSkillHref(canonicalOwnerHandle, canonicalOwnerId, canonical.skill.slug)
       : null
 
   useEffect(() => {
-    if (!wantsCanonicalRedirect || !ownerHandle) return
+    if (!wantsCanonicalRedirect || !ownerParam) return
     void navigate({
       to: '/$owner/$slug',
-      params: { owner: ownerHandle, slug },
+      params: { owner: ownerParam, slug },
       replace: true,
     })
-  }, [navigate, ownerHandle, slug, wantsCanonicalRedirect])
+  }, [navigate, ownerParam, slug, wantsCanonicalRedirect])
 
   const versionById = new Map<Id<'skillVersions'>, Doc<'skillVersions'>>(
     (diffVersions ?? versions ?? []).map((version) => [version._id, version]),
@@ -640,9 +643,9 @@ export function SkillDetailPage({
   )
 }
 
-function buildSkillHref(ownerHandle: string | null, slug: string) {
-  if (ownerHandle) return `/${ownerHandle}/${slug}`
-  return `/skills/${slug}`
+function buildSkillHref(ownerHandle: string | null, ownerId: Id<'users'> | null, slug: string) {
+  const owner = ownerHandle?.trim() || (ownerId ? String(ownerId) : 'unknown')
+  return `/${owner}/${slug}`
 }
 
 function formatConfigSnippet(raw: string) {

src/lib/og.test.ts

@@ -50,7 +50,7 @@ describe('og helpers', () => {
     const meta = buildSkillMeta({ slug: 'parser' })
     expect(meta.title).toBe('parser — MoltHub')
     expect(meta.description).toMatch(/MoltHub — a fast skill registry/i)
-    expect(meta.url).toContain('/skills/parser')
+    expect(meta.url).toContain('/unknown/parser')
     expect(meta.owner).toBeNull()
     expect(meta.image).toContain('slug=parser')
   })
@@ -76,7 +76,7 @@ describe('og helpers', () => {
       ok: true,
       json: async () => ({
         skill: { displayName: 'Weather', summary: 'Forecasts' },
-        owner: { handle: 'steipete' },
+        owner: { handle: 'steipete', userId: 'users:1' },
         latestVersion: { version: '1.2.3' },
       }),
     }))
@@ -87,6 +87,7 @@ describe('og helpers', () => {
       displayName: 'Weather',
       summary: 'Forecasts',
       owner: 'steipete',
+      ownerId: 'users:1',
       version: '1.2.3',
     })
   })

src/lib/og.ts

@@ -3,6 +3,7 @@ import { getMoltHubSiteUrl, getOnlyCrabsSiteUrl } from './site'
 type SkillMetaSource = {
   slug: string
   owner?: string | null
+  ownerId?: string | null
   displayName?: string | null
   summary?: string | null
   version?: string | null
@@ -58,13 +59,14 @@ export async function fetchSkillMeta(slug: string) {
     if (!response.ok) return null
     const payload = (await response.json()) as {
       skill?: { displayName?: string; summary?: string | null } | null
-      owner?: { handle?: string | null } | null
+      owner?: { handle?: string | null; userId?: string | null } | null
       latestVersion?: { version?: string | null } | null
     }
     return {
       displayName: payload.skill?.displayName ?? null,
       summary: payload.skill?.summary ?? null,
       owner: payload.owner?.handle ?? null,
+      ownerId: payload.owner?.userId ?? null,
       version: payload.latestVersion?.version ?? null,
     }
   } catch {
@@ -97,13 +99,15 @@ export async function fetchSoulMeta(slug: string) {
 export function buildSkillMeta(source: SkillMetaSource): SkillMeta {
   const siteUrl = getSiteUrl()
   const owner = clean(source.owner)
+  const ownerId = clean(source.ownerId)
   const displayName = clean(source.displayName) || clean(source.slug)
   const summary = clean(source.summary)
   const version = clean(source.version)
   const title = `${displayName} — MoltHub`
   const description =
     summary || (owner ? `Agent skill by @${owner} on MoltHub.` : DEFAULT_DESCRIPTION)
-  const url = owner ? `${siteUrl}/${owner}/${source.slug}` : `${siteUrl}/skills/${source.slug}`
+  const ownerPath = owner || ownerId || 'unknown'
+  const url = `${siteUrl}/${ownerPath}/${source.slug}`
   const imageParams = new URLSearchParams()
   imageParams.set('v', OG_SKILL_IMAGE_LAYOUT_VERSION)
   imageParams.set('slug', source.slug)

src/routeTree.gen.ts

@@ -21,7 +21,6 @@ import { Route as SoulsIndexRouteImport } from './routes/souls/index'
 import { Route as SkillsIndexRouteImport } from './routes/skills/index'
 import { Route as UHandleRouteImport } from './routes/u/$handle'
 import { Route as SoulsSlugRouteImport } from './routes/souls/$slug'
-import { Route as SkillsSlugRouteImport } from './routes/skills/$slug'
 import { Route as CliAuthRouteImport } from './routes/cli/auth'
 import { Route as OwnerSlugRouteImport } from './routes/$owner/$slug'
 
@@ -85,11 +84,6 @@ const SoulsSlugRoute = SoulsSlugRouteImport.update({
   path: '/souls/$slug',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SkillsSlugRoute = SkillsSlugRouteImport.update({
-  id: '/skills/$slug',
-  path: '/skills/$slug',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const CliAuthRoute = CliAuthRouteImport.update({
   id: '/cli/auth',
   path: '/cli/auth',
@@ -112,7 +106,6 @@ export interface FileRoutesByFullPath {
   '/upload': typeof UploadRoute
   '/$owner/$slug': typeof OwnerSlugRoute
   '/cli/auth': typeof CliAuthRoute
-  '/skills/$slug': typeof SkillsSlugRoute
   '/souls/$slug': typeof SoulsSlugRoute
   '/u/$handle': typeof UHandleRoute
   '/skills/': typeof SkillsIndexRoute
@@ -129,7 +122,6 @@ export interface FileRoutesByTo {
   '/upload': typeof UploadRoute
   '/$owner/$slug': typeof OwnerSlugRoute
   '/cli/auth': typeof CliAuthRoute
-  '/skills/$slug': typeof SkillsSlugRoute
   '/souls/$slug': typeof SoulsSlugRoute
   '/u/$handle': typeof UHandleRoute
   '/skills': typeof SkillsIndexRoute
@@ -147,7 +139,6 @@ export interface FileRoutesById {
   '/upload': typeof UploadRoute
   '/$owner/$slug': typeof OwnerSlugRoute
   '/cli/auth': typeof CliAuthRoute
-  '/skills/$slug': typeof SkillsSlugRoute
   '/souls/$slug': typeof SoulsSlugRoute
   '/u/$handle': typeof UHandleRoute
   '/skills/': typeof SkillsIndexRoute
@@ -166,7 +157,6 @@ export interface FileRouteTypes {
     | '/upload'
     | '/$owner/$slug'
     | '/cli/auth'
-    | '/skills/$slug'
     | '/souls/$slug'
     | '/u/$handle'
     | '/skills/'
@@ -183,7 +173,6 @@ export interface FileRouteTypes {
     | '/upload'
     | '/$owner/$slug'
     | '/cli/auth'
-    | '/skills/$slug'
     | '/souls/$slug'
     | '/u/$handle'
     | '/skills'
@@ -200,7 +189,6 @@ export interface FileRouteTypes {
     | '/upload'
     | '/$owner/$slug'
     | '/cli/auth'
-    | '/skills/$slug'
     | '/souls/$slug'
     | '/u/$handle'
     | '/skills/'
@@ -218,7 +206,6 @@ export interface RootRouteChildren {
   UploadRoute: typeof UploadRoute
   OwnerSlugRoute: typeof OwnerSlugRoute
   CliAuthRoute: typeof CliAuthRoute
-  SkillsSlugRoute: typeof SkillsSlugRoute
   SoulsSlugRoute: typeof SoulsSlugRoute
   UHandleRoute: typeof UHandleRoute
   SkillsIndexRoute: typeof SkillsIndexRoute
@@ -311,13 +298,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SoulsSlugRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/skills/$slug': {
-      id: '/skills/$slug'
-      path: '/skills/$slug'
-      fullPath: '/skills/$slug'
-      preLoaderRoute: typeof SkillsSlugRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/cli/auth': {
       id: '/cli/auth'
       path: '/cli/auth'
@@ -346,7 +326,6 @@ const rootRouteChildren: RootRouteChildren = {
   UploadRoute: UploadRoute,
   OwnerSlugRoute: OwnerSlugRoute,
   CliAuthRoute: CliAuthRoute,
-  SkillsSlugRoute: SkillsSlugRoute,
   SoulsSlugRoute: SoulsSlugRoute,
   UHandleRoute: UHandleRoute,
   SkillsIndexRoute: SkillsIndexRoute,

src/routes/dashboard.tsx

@@ -24,7 +24,7 @@ function Dashboard() {
   }
 
   const skills = mySkills ?? []
-  const ownerHandle = me.handle ?? null
+  const ownerHandle = me.handle ?? me.name ?? me.displayName ?? me._id
 
   return (
     <main className="section">
@@ -63,19 +63,13 @@ function SkillCard({ skill, ownerHandle }: { skill: Doc<'skills'>; ownerHandle:
   return (
     <div className="dashboard-skill-card">
       <div className="dashboard-skill-info">
-        {ownerHandle ? (
-          <Link
-            to="/$owner/$slug"
-            params={{ owner: ownerHandle, slug: skill.slug }}
-            className="dashboard-skill-name"
-          >
-            {skill.displayName}
-          </Link>
-        ) : (
-          <Link to="/skills/$slug" params={{ slug: skill.slug }} className="dashboard-skill-name">
-            {skill.displayName}
-          </Link>
-        )}
+        <Link
+          to="/$owner/$slug"
+          params={{ owner: ownerHandle ?? 'unknown', slug: skill.slug }}
+          className="dashboard-skill-name"
+        >
+          {skill.displayName}
+        </Link>
         <span className="dashboard-skill-slug">/{skill.slug}</span>
         {skill.summary && <p className="dashboard-skill-description">{skill.summary}</p>}
         <div className="dashboard-skill-stats">
@@ -89,19 +83,13 @@ function SkillCard({ skill, ownerHandle }: { skill: Doc<'skills'>; ownerHandle:
           <Upload className="h-3 w-3" aria-hidden="true" />
           New Version
         </Link>
-        {ownerHandle ? (
-          <Link
-            to="/$owner/$slug"
-            params={{ owner: ownerHandle, slug: skill.slug }}
-            className="btn btn-ghost btn-sm"
-          >
-            View
-          </Link>
-        ) : (
-          <Link to="/skills/$slug" params={{ slug: skill.slug }} className="btn btn-ghost btn-sm">
-            View
-          </Link>
-        )}
+        <Link
+          to="/$owner/$slug"
+          params={{ owner: ownerHandle ?? 'unknown', slug: skill.slug }}
+          className="btn btn-ghost btn-sm"
+        >
+          View
+        </Link>
       </div>
     </div>
   )

src/routes/import.tsx

@@ -38,7 +38,7 @@ type CandidatePreview = {
 }
 
 function ImportGitHub() {
-  const { isAuthenticated, isLoading } = useAuthStatus()
+  const { isAuthenticated, isLoading, me } = useAuthStatus()
   const previewImport = useAction(api.githubImport.previewGitHubImport)
   const previewCandidate = useAction(api.githubImport.previewGitHubImportCandidate)
   const importSkill = useAction(api.githubImport.importGitHubSkill)
@@ -167,7 +167,8 @@ function ImportGitHub() {
       })
       const nextSlug = result.slug
       setStatus('Imported.')
-      await navigate({ to: '/skills/$slug', params: { slug: nextSlug } })
+      const ownerParam = me?.handle ?? (me?._id ? String(me._id) : 'unknown')
+      await navigate({ to: '/$owner/$slug', params: { owner: ownerParam, slug: nextSlug } })
     } catch (e) {
       setError(e instanceof Error ? e.message : 'Import failed')
       setStatus(null)