feat(skills): launch Skills as default landing route (#2130)

* feat(skills): always render Skills nav link and drop flag-specific copy

Removes the useFeatureFlag(SKILLS) check in the top nav so the Skills entry is unconditionally rendered (now the first item, matching its new role as the landing route), and drops the dead Skills-specific name/description branches in useExperimentalFeatures — the flag was never listed there (isExperimental: false) and the branches become unreachable once the key is removed in the next commit.

Adds a top-nav test asserting the Skills link renders without any flag setup.

* feat(skills): remove SKILLS feature flag

Skills is now GA. Drops the SKILLS key from the shared featureFlagKeys map and its options block in the main-process flag store. Existing 'feature_flag_skills' rows in SQLite become inert orphans — getFeatureFlag is only called for keys still present in featureFlagKeys, so no migration is needed.

Reroutes the four SKILLS-specific assertions in flags.test.ts onto featureFlagKeys.AGENTS (same shape: non-disabled, default false) so the SQLite read/write/default paths stay covered.

* feat(skills): make Skills the default landing route

Switches the '/' redirect from '/group/default' to '/skills'. The Skills route's validateSearch already defaults tab to 'installed' when the search param is missing, so first launch lands directly on the Installed tab without needing extra search params.

Adds renderer/src/routes/__tests__/index.redirect.test.tsx covering the new redirect using the same beforeLoad-driven router pattern as playground.index.test.tsx.

* test(e2e): navigate to MCP Servers before creating test groups

The shared Playwright fixture and the MCP Optimizer cleanup spec both clicked 'Add a group' as their first UI action, relying on the app landing on /group/default. Now that /skills is the default landing route, that button is no longer on screen and every group-creating spec timed out waiting for it.

Both helpers now click the MCP Servers nav link first, then proceed with the existing dialog flow. This is a minimal, behaviour-preserving fix — no specs needed individual changes because they all run inside the test group the fixture creates.

* test(e2e): cover Skills default route and tab navigation

Adds e2e-tests/skills.spec.ts with two complementary tests:

1. 'app launches into the Skills page on /skills' uses launchApp directly (no shared fixture, no group setup) so the assertion targets the app's actual initial route. Asserts all three tabs render and the Installed empty state is the visible panel, proving the new '/' -> '/skills?tab=installed' redirect.

2. 'switches between tabs and shows the right empty state' uses the shared fixture and walks Installed -> Local Builds -> Registry from the unconditional Skills nav entry, implicitly covering both the removed feature flag and the page's tab UX.

Author: samuv

e2e-tests/fixtures/electron.ts

@@ -77,6 +77,9 @@ export function deleteTestSecretViaCli(): void {
 }
 
 async function createAndActivateTestGroup(window: Page): Promise<void> {
+  // The app now lands on /skills by default — navigate to the MCP Servers
+  // groups page where the "Add a group" affordance lives.
+  await window.getByRole('link', { name: /mcp servers/i }).click()
   await window.getByRole('button', { name: /add a group/i }).click()
   await window.getByRole('dialog').waitFor()
   await window.getByLabel(/name/i).fill(TEST_GROUP_NAME)

e2e-tests/mcp-optimizer-startup-cleanup.spec.ts

@@ -46,6 +46,9 @@ async function createGroupViaUi(
   groupName: string
 ): Promise<void> {
   const { window } = launched
+  // The app now lands on /skills by default — navigate to the MCP Servers
+  // groups page where the "Add a group" affordance lives.
+  await window.getByRole('link', { name: /mcp servers/i }).click()
   await window.getByRole('button', { name: /add a group/i }).click()
   await window.getByRole('dialog').waitFor()
   await window.getByLabel(/name/i).fill(groupName)

e2e-tests/skills.spec.ts

@@ -0,0 +1,66 @@
+import path from 'path'
+import fs from 'fs'
+import os from 'os'
+import { test as base, expect } from '@playwright/test'
+import { test } from './fixtures/electron'
+import { launchApp } from './helpers/app-relaunch'
+
+// Standalone test (does not use the shared fixture) so the assertion runs
+// against the app's true initial route, before any nav clicks happen.
+base.describe('Skills default landing route', () => {
+  base('app launches into the Skills page on /skills', async () => {
+    const userDataDir = fs.mkdtempSync(
+      path.join(os.tmpdir(), 'toolhive-e2e-skills-default-')
+    )
+    const launched = await launchApp(userDataDir)
+    try {
+      // Tabs are part of the Skills page only, so their presence proves we
+      // landed on /skills rather than /group/default.
+      await expect(
+        launched.window.getByRole('tab', { name: 'Registry' })
+      ).toBeVisible()
+      await expect(
+        launched.window.getByRole('tab', { name: 'Installed' })
+      ).toBeVisible()
+      await expect(
+        launched.window.getByRole('tab', { name: 'Local Builds' })
+      ).toBeVisible()
+
+      // Installed is the default tab — empty state confirms its panel is the
+      // active one on a clean userDataDir.
+      await expect(
+        launched.window.getByRole('heading', { name: /no skills installed/i })
+      ).toBeVisible()
+    } finally {
+      await launched.close()
+      fs.rmSync(userDataDir, { recursive: true, force: true })
+    }
+  })
+})
+
+test.describe('Skills page navigation', () => {
+  test('switches between tabs and shows the right empty state', async ({
+    window,
+  }) => {
+    // The shared fixture leaves us on the test group page; navigate to Skills.
+    await window.getByRole('link', { name: /^skills$/i }).click()
+
+    // Installed (default) shows the no-skills empty state.
+    await expect(
+      window.getByRole('heading', { name: /no skills installed/i })
+    ).toBeVisible()
+
+    // Local Builds shows its own empty state with a "Build skill" CTA.
+    await window.getByRole('tab', { name: 'Local Builds' }).click()
+    await expect(
+      window.getByRole('heading', { name: /no local builds/i })
+    ).toBeVisible()
+    await expect(
+      window.getByRole('button', { name: /build skill/i })
+    ).toBeVisible()
+
+    // Registry tab renders its toolbar (search input + view toggle).
+    await window.getByRole('tab', { name: 'Registry' }).click()
+    await expect(window.getByPlaceholder(/search/i).first()).toBeVisible()
+  })
+})

main/src/feature-flags/__tests__/flags.test.ts

@@ -71,14 +71,14 @@ describe('Feature Flags', () => {
     it('should return value from SQLite when available', () => {
       vi.mocked(readFeatureFlag).mockReturnValueOnce(true)
 
-      const result = getFeatureFlag(featureFlagKeys.SKILLS)
+      const result = getFeatureFlag(featureFlagKeys.AGENTS)
       expect(result).toBe(true)
     })
 
     it('should return false (default) when SQLite returns undefined', () => {
       vi.mocked(readFeatureFlag).mockReturnValueOnce(undefined)
 
-      const result = getFeatureFlag(featureFlagKeys.SKILLS)
+      const result = getFeatureFlag(featureFlagKeys.AGENTS)
       expect(result).toBe(false)
     })
 
@@ -87,7 +87,7 @@ describe('Feature Flags', () => {
         throw new Error('DB error')
       })
 
-      const result = getFeatureFlag(featureFlagKeys.SKILLS)
+      const result = getFeatureFlag(featureFlagKeys.AGENTS)
       expect(result).toBe(false)
     })
 
@@ -136,10 +136,10 @@ describe('Feature Flags', () => {
 
   describe('enableFeatureFlag', () => {
     it('should write true to SQLite for enabled flags', () => {
-      enableFeatureFlag(featureFlagKeys.SKILLS)
+      enableFeatureFlag(featureFlagKeys.AGENTS)
 
       expect(writeFeatureFlag).toHaveBeenCalledWith(
-        `feature_flag_${featureFlagKeys.SKILLS}`,
+        `feature_flag_${featureFlagKeys.AGENTS}`,
         true
       )
     })

main/src/feature-flags/flags.ts

@@ -15,11 +15,6 @@ const featureFlagOptions: Record<FeatureFlagKey, FeatureFlagOptions> = {
     defaultValue: false,
     isExperimental: true,
   },
-  [featureFlagKeys.SKILLS]: {
-    isDisabled: false,
-    defaultValue: false,
-    isExperimental: false,
-  },
   [featureFlagKeys.AGENTS]: {
     isDisabled: false,
     defaultValue: false,

renderer/src/common/components/layout/top-nav/__tests__/top-nav.test.tsx

@@ -33,6 +33,13 @@ describe('TopNav', () => {
     return renderRoute(router, { permissions })
   }
 
+  it('renders Skills navigation link', async () => {
+    renderTopNav()
+    await waitFor(() => {
+      expect(screen.getByText('Skills')).toBeInTheDocument()
+    })
+  })
+
   it('renders MCP Servers navigation link', async () => {
     renderTopNav()
     await waitFor(() => {

renderer/src/common/components/layout/top-nav/index.tsx

@@ -28,8 +28,6 @@ import { getOsDesignVariant } from '@/common/lib/os-design'
 import { trackEvent } from '@/common/lib/analytics'
 import { NavSeparator } from './nav-separator'
 import { NavIconButton } from './nav-icon-button'
-import { useFeatureFlag } from '@/common/hooks/use-feature-flag'
-import { featureFlagKeys } from '@utils/feature-flags'
 import { usePermissions } from '@/common/contexts/permissions'
 import { PERMISSION_KEYS } from '@/common/contexts/permissions/permission-keys'
 import { buildOnrampDocsUrl } from '@/common/lib/onramp-url'
@@ -69,23 +67,20 @@ function useIsActive() {
 
 function TopNavLinks() {
   const isActive = useIsActive()
-  const isSkillsEnabled = useFeatureFlag(featureFlagKeys.SKILLS)
   const { canShow } = usePermissions()
 
   return (
     <NavigationMenu>
       <NavigationMenuList className="gap-2">
-        {isSkillsEnabled && (
-          <NavigationMenuItem>
-            <NavButton
-              to="/skills"
-              icon={BookOpen}
-              isActive={isActive(['/skills'])}
-            >
-              Skills
-            </NavButton>
-          </NavigationMenuItem>
-        )}
+        <NavigationMenuItem>
+          <NavButton
+            to="/skills"
+            icon={BookOpen}
+            isActive={isActive(['/skills'])}
+          >
+            Skills
+          </NavButton>
+        </NavigationMenuItem>
         <NavigationMenuItem>
           <NavButton
             to="/group/default"

renderer/src/common/hooks/use-experimental-features.tsx

@@ -1,7 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import log from 'electron-log/renderer'
 import { useCallback } from 'react'
-import { featureFlagKeys } from '../../../../utils/feature-flags'
 import { trackEvent } from '../lib/analytics'
 
 interface FeatureFlag {
@@ -12,21 +11,13 @@ interface FeatureFlag {
 }
 
 function formatFeatureFlagName(key: string): string {
-  if (key === featureFlagKeys.SKILLS) {
-    return 'Skills'
-  }
-
   return key
     .split('_')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
     .join(' ')
 }
 
 function formatFeatureFlagDescription(key: string): React.ReactNode {
-  if (key === featureFlagKeys.SKILLS) {
-    return 'Browse and manage AI agent skills installed via ToolHive.'
-  }
-
   return `Enable ${formatFeatureFlagName(key)} feature`
 }
 

renderer/src/routes/__tests__/index.redirect.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest'
+import { waitFor } from '@testing-library/react'
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  Outlet,
+  Router,
+} from '@tanstack/react-router'
+import { renderRoute } from '@/common/test/render-route'
+import { createTestRouter } from '@/common/test/create-test-router'
+import { Route as IndexRoute } from '../index'
+
+function renderIndexRoute() {
+  const beforeLoad = IndexRoute.options.beforeLoad as unknown as (
+    ...args: unknown[]
+  ) => Promise<void> | void
+
+  const rootRoute = createRootRoute({
+    component: Outlet,
+  })
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => null,
+    beforeLoad,
+  })
+
+  const skillsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/skills',
+    component: () => <div data-testid="skills-route" />,
+  })
+
+  const router = new Router({
+    routeTree: rootRoute.addChildren([indexRoute, skillsRoute]),
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+    defaultNotFoundComponent: () => null,
+  })
+
+  const utils = renderRoute(
+    router as unknown as ReturnType<typeof createTestRouter>
+  )
+
+  return { ...utils, router }
+}
+
+describe('Index route (/)', () => {
+  it('redirects to /skills', async () => {
+    const { router } = renderIndexRoute()
+
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe('/skills')
+    })
+  })
+})

renderer/src/routes/index.tsx

@@ -2,10 +2,6 @@ import { createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   beforeLoad: () => {
-    throw redirect({
-      to: '/group/$groupName',
-      params: { groupName: 'default' },
-      replace: true,
-    })
+    throw redirect({ to: '/skills', replace: true })
   },
 })