📣 fix: Surface Skill Creation Feedback (#15649)

* fix: show inline skill creation errors and progress

* fix: address skill creation review findings

* style: flatten skill error selection

---------

Co-authored-by: aeyeopsdev <275853971+aeyeopsdev@users.noreply.github.com>
Co-authored-by: Danny Avila <danny@librechat.ai>

Author: aeyeopsdev

client/src/components/Skills/dialogs/CreateSkillDialog.tsx

@@ -1,10 +1,5 @@
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import {
-  SKILL_NAME_PATTERN,
-  SKILL_NAME_MAX_LENGTH,
-  SKILL_DESCRIPTION_MAX_LENGTH,
-} from 'librechat-data-provider';
 import {
   Input,
   Label,
@@ -14,6 +9,12 @@ import {
   TextareaAutosize,
   useToastContext,
 } from '@librechat/client';
+import {
+  SKILL_NAME_PATTERN,
+  SKILL_NAME_MAX_LENGTH,
+  SKILL_BODY_MAX_LENGTH,
+  SKILL_DESCRIPTION_MAX_LENGTH,
+} from 'librechat-data-provider';
 import type { TSkill } from 'librechat-data-provider';
 import type { FormEvent } from 'react';
 import { useCreateSkillMutation } from '~/data-provider';
@@ -40,6 +41,11 @@ interface FormValues {
   body: string;
 }
 
+interface SkillValidationIssue {
+  field: string;
+  code: string;
+}
+
 /**
  * Minimal create-skill dialog matching Claude.ai's "Write skill instructions"
  * modal: name, description, instructions. No category, no invocation mode.
@@ -78,9 +84,48 @@ export default function CreateSkillDialog({
       navigate(`/skills/${skill._id}`);
     },
     onError: (error: unknown) => {
-      const message =
-        (error as { response?: { data?: { message?: string } } })?.response?.data?.message ??
-        localize('com_ui_skill_create_error');
+      const response = (
+        error as {
+          response?: {
+            status?: number;
+            data?: { error?: string; message?: string; issues?: SkillValidationIssue[] };
+          };
+        }
+      )?.response;
+      const getIssueMessage = ({ field, code }: SkillValidationIssue) => {
+        if (field === 'name' && code === 'REQUIRED') {
+          return localize('com_ui_skill_name_required');
+        }
+        if (field === 'name' && code === 'TOO_LONG') {
+          return localize('com_ui_skill_name_too_long', { 0: SKILL_NAME_MAX_LENGTH });
+        }
+        if (field === 'name' && code === 'INVALID_FORMAT') {
+          return localize('com_ui_skill_name_invalid');
+        }
+        if (field === 'name' && (code === 'RESERVED_PREFIX' || code === 'RESERVED_WORD')) {
+          return localize('com_ui_skill_name_reserved');
+        }
+        if (field === 'description' && code === 'REQUIRED') {
+          return localize('com_ui_skill_description_required');
+        }
+        if (field === 'description' && code === 'TOO_LONG') {
+          return localize('com_ui_skill_description_too_long', {
+            0: SKILL_DESCRIPTION_MAX_LENGTH,
+          });
+        }
+        if (field === 'body' && code === 'TOO_LONG') {
+          return localize('com_ui_skill_instructions_too_long', { 0: SKILL_BODY_MAX_LENGTH });
+        }
+        return localize('com_ui_skill_validation_error');
+      };
+      const data = response?.data;
+      let message = data?.message || localize('com_ui_skill_create_error');
+      if (response?.status === 409) {
+        message = localize('com_ui_skill_name_exists');
+      }
+      if (data?.issues?.length) {
+        message = data.issues.map(getIssueMessage).join('; ');
+      }
       showToast({ status: 'error', message });
     },
   });
@@ -166,6 +211,8 @@ export default function CreateSkillDialog({
               maxRows={4}
               placeholder={localize('com_ui_skill_description_placeholder')}
               aria-label={localize('com_ui_description')}
+              aria-invalid={errors.description ? 'true' : 'false'}
+              aria-describedby={errors.description ? 'create-skill-description-error' : undefined}
               className="w-full resize-none rounded-xl border border-border-medium bg-transparent px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary"
               {...register('description', {
                 required: localize('com_ui_skill_description_required'),
@@ -177,6 +224,15 @@ export default function CreateSkillDialog({
                 },
               })}
             />
+            {errors.description && (
+              <p
+                id="create-skill-description-error"
+                className="mt-1 text-sm text-text-destructive"
+                role="alert"
+              >
+                {errors.description.message}
+              </p>
+            )}
           </div>
 
           {/* Instructions (body) */}
@@ -204,9 +260,10 @@ export default function CreateSkillDialog({
               type="submit"
               variant="submit"
               disabled={submitDisabled}
+              aria-busy={createSkill.isLoading}
               className={cn(submitDisabled && 'opacity-50')}
             >
-              {localize('com_ui_create')}
+              {localize(createSkill.isLoading ? 'com_ui_creating' : 'com_ui_create')}
             </Button>
           </div>
         </form>

client/src/components/Skills/dialogs/__tests__/CreateSkillDialog.spec.tsx

@@ -6,6 +6,7 @@ const mockMutate = jest.fn();
 const mockNavigate = jest.fn();
 const mockSetIsOpen = jest.fn();
 const mockShowToast = jest.fn();
+let mockOnError: ((error: unknown) => void) | undefined;
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -47,10 +48,13 @@ jest.mock('@librechat/client', () => {
 });
 
 jest.mock('~/data-provider', () => ({
-  useCreateSkillMutation: () => ({
-    mutate: mockMutate,
-    isLoading: false,
-  }),
+  useCreateSkillMutation: (options: { onError: (error: unknown) => void }) => {
+    mockOnError = options.onError;
+    return {
+      mutate: mockMutate,
+      isLoading: false,
+    };
+  },
 }));
 
 jest.mock('~/hooks', () => ({
@@ -61,6 +65,9 @@ jest.mock('~/hooks', () => ({
       com_ui_skill_instructions: 'Instructions',
       com_ui_cancel: 'Cancel',
       com_ui_create: 'Create',
+      com_ui_skill_create_error: 'Failed to create skill',
+      com_ui_skill_name_exists: 'A skill with this name already exists',
+      com_ui_skill_name_reserved: 'This skill name is reserved',
     };
     return translations[key] ?? key;
   },
@@ -73,6 +80,41 @@ jest.mock('~/utils', () => ({
 describe('CreateSkillDialog', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockOnError = undefined;
+  });
+
+  it('localizes structured validation errors', () => {
+    render(<CreateSkillDialog isOpen={true} setIsOpen={mockSetIsOpen} />);
+
+    mockOnError?.({
+      response: {
+        status: 400,
+        data: {
+          issues: [{ field: 'name', code: 'RESERVED_WORD', message: 'settings is reserved' }],
+        },
+      },
+    });
+
+    expect(mockShowToast).toHaveBeenCalledWith({
+      status: 'error',
+      message: 'This skill name is reserved',
+    });
+  });
+
+  it('preserves middleware messages and localizes duplicate names', () => {
+    render(<CreateSkillDialog isOpen={true} setIsOpen={mockSetIsOpen} />);
+
+    mockOnError?.({ response: { status: 403, data: { message: 'Permission denied' } } });
+    expect(mockShowToast).toHaveBeenLastCalledWith({
+      status: 'error',
+      message: 'Permission denied',
+    });
+
+    mockOnError?.({ response: { status: 409, data: { error: 'server prose' } } });
+    expect(mockShowToast).toHaveBeenLastCalledWith({
+      status: 'error',
+      message: 'A skill with this name already exists',
+    });
   });
 
   it('does not submit an ancestor form when rendered through a portal', async () => {

client/src/locales/en/translation.json

@@ -2126,15 +2126,18 @@
   "com_ui_skill_file_load_error": "Failed to load file content",
   "com_ui_skill_finished": "Loaded {{0}}",
   "com_ui_skill_instructions": "Instructions",
+  "com_ui_skill_instructions_too_long": "Instructions must be {{0}} characters or fewer",
   "com_ui_skill_instructions_placeholder": "Enter your skill instructions in markdown...",
   "com_ui_skill_name_invalid": "Use lowercase letters, digits, and dashes only (kebab-case)",
   "com_ui_agent_git_identity": "Git identity",
   "com_ui_agent_git_identity_both_required": "Enter a valid Git name and email, or leave both blank.",
   "com_ui_agent_git_name": "Commit name",
   "com_ui_agent_git_email": "Commit email",
   "com_nav_info_agent_git_identity": "Applied as the author and committer for Git commands run by this agent. Credentials are configured separately.",
+  "com_ui_skill_name_exists": "A skill with this name already exists",
   "com_ui_skill_name_placeholder": "brand-guidelines",
   "com_ui_skill_name_required": "Name is required",
+  "com_ui_skill_name_reserved": "This skill name is reserved",
   "com_ui_skill_name_too_long": "Name must be {{0}} characters or fewer",
   "com_ui_skill_new_file": "New File",
   "com_ui_skill_new_folder": "New Folder",
@@ -2152,6 +2155,7 @@
   "com_ui_skill_unavailable": "Unavailable skill",
   "com_ui_skill_update_conflict": "Another edit was saved before yours. Reloading the latest version.",
   "com_ui_skill_update_error": "Failed to save skill",
+  "com_ui_skill_validation_error": "Check the skill fields and try again",
   "com_ui_skill_updated": "Skill saved",
   "com_ui_skill_upload": "Upload a skill",
   "com_ui_skill_upload_drag": "Drag and drop or click to upload",