📜 feat: Add Explicit new Skill Route from Agent Builder

client/src/components/Skills/layouts/SkillsView.tsx

@@ -6,15 +6,15 @@ import { useHasAccess, useAuthContext, useLocalize } from '~/hooks';
 import SkillFileViewer from '~/components/Skills/display/SkillFileViewer';
 import SkillDetail from '~/components/Skills/display/SkillDetail';
 import SkillState from '~/components/Skills/display/SkillState';
-import { SkillForm } from '~/components/Skills/forms';
+import { CreateSkillForm, SkillForm } from '~/components/Skills/forms';
 
 /**
- * Skill detail / edit route content.
+ * Skill detail / edit / create route content.
  *
  * Reader-first: the default `/skills/:skillId` shows the read-only
  * `SkillDetail` view (rendered markdown, metadata, source toggle).
  * Edit is reached via `/skills/:skillId/edit` or the Edit button.
- * Create is a dialog triggered from the sidebar, not a route.
+ * Create is reached via `/skills/new`.
  */
 export default function SkillsView() {
   const { skillId } = useParams();
@@ -26,7 +26,12 @@ export default function SkillsView() {
     permissionType: PermissionTypes.SKILLS,
     permission: Permissions.USE,
   });
+  const hasCreateAccess = useHasAccess({
+    permissionType: PermissionTypes.SKILLS,
+    permission: Permissions.CREATE,
+  });
 
+  const isCreate = location.pathname.endsWith('/new');
   const isEdit = location.pathname.endsWith('/edit');
 
   const rolesLoaded = user?.role != null && roles?.[user.role] != null;
@@ -42,6 +47,14 @@ export default function SkillsView() {
     return <Navigate to="/c/new" replace />;
   }
 
+  if (isCreate && !hasCreateAccess) {
+    return <Navigate to="/skills" replace />;
+  }
+
+  if (isCreate) {
+    return <CreateView />;
+  }
+
   // No skill selected — empty state
   if (!skillId) {
     return (
@@ -57,6 +70,14 @@ export default function SkillsView() {
   return isEdit ? <EditView skillId={skillId} /> : <DetailView skillId={skillId} />;
 }
 
+function CreateView() {
+  return (
+    <div className="flex h-full w-full flex-col overflow-y-auto bg-presentation">
+      <CreateSkillForm />
+    </div>
+  );
+}
+
 /** Read-only detail view — the default when clicking a skill. */
 function DetailView({ skillId }: { skillId: string }) {
   const localize = useLocalize();

client/src/components/Skills/layouts/__tests__/SkillsView.spec.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import SkillsView from '../SkillsView';
+
+const mockUseHasAccess = jest.fn(() => true);
+
+jest.mock(
+  'librechat-data-provider',
+  () => ({
+    PermissionTypes: { SKILLS: 'skills' },
+    Permissions: { USE: 'use', CREATE: 'create' },
+  }),
+  { virtual: true },
+);
+
+jest.mock(
+  '@librechat/client',
+  () => ({
+    Spinner: () => <div data-testid="spinner" />,
+  }),
+  { virtual: true },
+);
+
+jest.mock('~/hooks', () => ({
+  useLocalize: () => (key: string) => key,
+  useHasAccess: (...args: unknown[]) => mockUseHasAccess(...args),
+  useAuthContext: () => ({
+    user: { role: 'admin' },
+    roles: { admin: {} },
+  }),
+}));
+
+jest.mock('~/data-provider', () => ({
+  useGetSkillByIdQuery: jest.fn(() => ({
+    isLoading: false,
+    isError: false,
+    data: null,
+  })),
+}));
+
+jest.mock('~/components/Skills/forms', () => ({
+  CreateSkillForm: () => <div data-testid="create-skill-form" />,
+  SkillForm: () => <div data-testid="skill-form" />,
+}));
+
+jest.mock('~/components/Skills/display/SkillFileViewer', () => () => (
+  <div data-testid="skill-file-viewer" />
+));
+jest.mock('~/components/Skills/display/SkillDetail', () => () => (
+  <div data-testid="skill-detail" />
+));
+jest.mock('~/components/Skills/display/SkillState', () => ({ title }: { title: string }) => (
+  <div>{title}</div>
+));
+
+describe('SkillsView', () => {
+  beforeEach(() => {
+    mockUseHasAccess.mockReset();
+    mockUseHasAccess.mockReturnValue(true);
+  });
+
+  it('renders the create skill form for /skills/new', () => {
+    const router = createMemoryRouter([{ path: '/skills/new', element: <SkillsView /> }], {
+      initialEntries: ['/skills/new'],
+    });
+
+    render(<RouterProvider router={router} />);
+
+    expect(screen.getByTestId('create-skill-form')).toBeInTheDocument();
+  });
+});

client/src/routes/__tests__/skillsRoutes.spec.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+jest.mock('~/components/Auth', () => ({
+  Login: () => null,
+  VerifyEmail: () => null,
+  Registration: () => null,
+  ResetPassword: () => null,
+  ApiErrorWatcher: () => null,
+  TwoFactorScreen: () => null,
+  RequestPasswordReset: () => null,
+}));
+
+jest.mock('~/components/Agents/MarketplaceContext', () => ({
+  MarketplaceProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+jest.mock('~/components/Agents/Marketplace', () => () => null);
+jest.mock('~/components/OAuth', () => ({
+  OAuthSuccess: () => null,
+  OAuthError: () => null,
+}));
+jest.mock('~/hooks/AuthContext', () => ({
+  AuthContextProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+jest.mock('../RouteErrorBoundary', () => () => null);
+jest.mock('../Layouts/Startup', () => () => null);
+jest.mock('../Layouts/Login', () => () => null);
+jest.mock('../Dashboard', () => ({
+  __esModule: true,
+  default: { path: 'dashboard', element: null },
+}));
+jest.mock('../ShareRoute', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+jest.mock('../ChatRoute', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+jest.mock('../Search', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+jest.mock('../Root', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+import { router } from '../index';
+
+type RouteNode = {
+  path?: string;
+  children?: RouteNode[];
+};
+
+function flattenPaths(routes: RouteNode[]): string[] {
+  return routes.flatMap((route) => [
+    ...(route.path ? [route.path] : []),
+    ...(route.children ? flattenPaths(route.children) : []),
+  ]);
+}
+
+describe('skills routes', () => {
+  it('registers the explicit /skills/new route', () => {
+    const paths = flattenPaths((router as unknown as { routes: RouteNode[] }).routes);
+
+    expect(paths).toContain('skills/new');
+  });
+});

client/src/routes/index.tsx

@@ -137,6 +137,10 @@ export const router = createBrowserRouter(
               path: 'skills',
               lazy: loadSkillsView,
             },
+            {
+              path: 'skills/new',
+              lazy: loadSkillsView,
+            },
             {
               path: 'skills/:skillId',
               lazy: loadSkillsView,