feat(skills): UI fuer AI-Skill-Definitionen — Modul 7/16 des UI-Backlogs

Zweites Modul via Phase-Q-Manifest-Architektur: Registrierung komplett
ueber das automation-Plugin-Manifest (page_route /skills + menu_item,
Sparkles-Icon) — routes/index.tsx und Sidebar.tsx unangetastet. Der
Komponenten-Map-Generator wired den lazy import (39 Komponenten).

Backend existierte vollstaendig im automation-Plugin (skill_routes.py:
list mit is_active/category-Filtern, create, get, patch, delete;
automation:read/write/delete), Frontend hatte 0% Abdeckung.

- api/skills.ts: TanStack-Hooks (useSkills mit Filtern, useSkill,
  create/update/delete mit Cache-Invalidierung)
- pages/Skills.tsx: Filter-Tabs (alle/aktiv/inaktiv), Skill-Karten (Name,
  Aktiv/Inaktiv-Badge, Kategorie, Beschreibung, Tool-Count),
  Create/Edit-Dialog (Name, Beschreibung, Instructions-Textarea, Kategorie,
  Tool-IDs als Komma-Liste, Aktiv-Toggle), Delete mit Confirm —
  Create/Edit hinter automation:write, Delete hinter automation:delete
- i18n skills.* + nav.skills de/en

Hinweis: Skills sind Orchestrierungs-Metadaten, KEINE
Berechtigungsquelle — erlaubte Tools verweisen auf Tool-IDs, fuer die
Agent und User bereits berechtigt sein muessen (Backend-Docstring).

Verifikation: Vitest 10/10 (Filter-Tabs, Badges inkl. Inaktiv, Tool-Count,
Create-Flow, Edit prefilled, Delete mit+ohne Confirm, separates
Write/Delete-Gating) · tsc exit 0 · production build exit 0 ·
Backend-Regressionen (route-order, m5-miniapps, n4-scope) 28/28 ·
compileall sauber · Cross-Plugin-Checker 0 · Manifest-Check: page_route
+ menu_item korrekt.

app/plugins/builtins/automation/plugin.py

@@ -112,6 +112,15 @@ class AutomationPlugin(BasePlugin):
                 order=53,
                 permission="import_export:read",
             ),
+            # UI-Backlog Modul 7: skills menu item (Phase Q pattern)
+            FrontendMenuItem(
+                label_key="nav.skills",
+                label="Skills",
+                path="/skills",
+                icon="Sparkles",
+                order=54,
+                permission="automation:read",
+            ),
             FrontendMenuItem(
                 label_key="nav.dedupMerge",
                 label="Duplikate",
@@ -153,6 +162,14 @@ class AutomationPlugin(BasePlugin):
                 order=53,
                 permission="import_export:read",
             ),
+            # UI-Backlog Modul 7 (2026-09-13): skills definitions page,
+            # registered via the manifest (Phase Q pattern).
+            FrontendPageRoute(
+                path="/skills",
+                component="@/pages/Skills",
+                order=54,
+                permission="automation:read",
+            ),
         ],
         settings_pages=[
             FrontendSettingsPage(

frontend/src/__tests__/pages/Skills.test.tsx

@@ -0,0 +1,200 @@
+/**
+ * Skills page tests — AI skill definitions (module 7/16).
+ *
+ * Covers: rendering, filter tabs, skill cards with active badge + tool
+ * count, create flow, edit flow prefilled, delete with confirmation,
+ * permission gating (automation:write / automation:delete), empty and
+ * error states.
+ */
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { SkillsPage } from '@/pages/Skills';
+import type { SkillDefinition } from '@/api/skills';
+
+const createMut = vi.fn().mockImplementation((_payload, opts) => {
+  opts?.onSuccess?.({});
+  return Promise.resolve({});
+});
+const updateMut = vi.fn().mockImplementation((_payload, opts) => {
+  opts?.onSuccess?.({});
+  return Promise.resolve({});
+});
+const deleteMut = vi.fn().mockResolvedValue({});
+
+const makeSkill = (overrides: Partial<SkillDefinition> = {}): SkillDefinition => ({
+  id: 'sk-1',
+  name: 'Rechnungspruefung',
+  description: 'Prueft eingehende Rechnungen',
+  instructions: '1. Lade die Rechnung\n2. Pruefe Betraege',
+  allowed_tool_ids: ['11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222'],
+  context_policy: null,
+  category: 'finance',
+  is_active: true,
+  created_at: '2026-09-01T10:00:00Z',
+  updated_at: null,
+  ...overrides,
+});
+
+let mockItems: SkillDefinition[] = [];
+let mockPerms: Record<string, boolean> = { 'automation:read': true, 'automation:write': true, 'automation:delete': true };
+let mockError = false;
+
+vi.mock('@/api/skills', () => ({
+  useSkills: () => ({
+    data: { items: mockItems, total: mockItems.length },
+    isLoading: false,
+    isError: mockError,
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+  useCreateSkill: () => ({
+    mutate: createMut,
+    isPending: false,
+  }),
+  useUpdateSkill: () => ({
+    mutate: updateMut,
+    isPending: false,
+  }),
+  useDeleteSkill: () => ({
+    mutate: deleteMut,
+    isPending: false,
+  }),
+}));
+
+vi.mock('@/hooks/usePermission', () => ({
+  usePermission: () => ({
+    hasPermission: (perm: string) => mockPerms[perm] ?? false,
+  }),
+}));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <SkillsPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockItems = [];
+  mockPerms = { 'automation:read': true, 'automation:write': true, 'automation:delete': true };
+  mockError = false;
+});
+
+describe('SkillsPage', () => {
+  it('renders the page with title and filter tabs', () => {
+    renderPage();
+    expect(screen.getByTestId('skills-page')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-filter-all')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-filter-active')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-filter-inactive')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no skills exist', () => {
+    renderPage();
+    expect(screen.getByTestId('skills-empty')).toBeInTheDocument();
+  });
+
+  it('shows error state on load failure', () => {
+    mockError = true;
+    renderPage();
+    expect(screen.getByTestId('skills-error')).toBeInTheDocument();
+  });
+
+  it('renders skill cards with active badge, category and tool count', () => {
+    mockItems = [makeSkill()];
+    renderPage();
+    expect(screen.getByTestId('skill-card-sk-1')).toBeInTheDocument();
+    expect(screen.getByText('Rechnungspruefung')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-active-sk-1')).toBeInTheDocument();
+    expect(screen.getByText('finance')).toBeInTheDocument();
+    expect(screen.getByTestId('skill-tools-sk-1')).toHaveTextContent('2');
+  });
+
+  it('shows inactive badge for inactive skills', () => {
+    mockItems = [makeSkill({ is_active: false })];
+    renderPage();
+    expect(screen.getByTestId('skill-active-sk-1')).toHaveTextContent(/inaktiv|inactive/i);
+  });
+
+  it('hides create/edit without automation:write and delete without automation:delete', () => {
+    mockItems = [makeSkill()];
+    mockPerms = { 'automation:read': true, 'automation:write': false, 'automation:delete': false };
+    renderPage();
+    expect(screen.queryByTestId('skill-create-open')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('skill-edit-sk-1')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('skill-delete-sk-1')).not.toBeInTheDocument();
+  });
+
+  it('creates a skill via the dialog', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-create-open'));
+    expect(screen.getByTestId('skill-form-submit')).toBeInTheDocument();
+
+    const nameInput = screen.getByLabelText(/name/i, { selector: 'input' }) as HTMLInputElement;
+    fireEvent.change(nameInput, { target: { value: 'Neuer Skill' } });
+    const descInput = screen.getByLabelText(/beschreibung|description/i, { selector: 'input' }) as HTMLInputElement;
+    fireEvent.change(descInput, { target: { value: 'Beschreibung' } });
+    const instrArea = screen.getByTestId('skill-instructions') as HTMLTextAreaElement;
+    fireEvent.change(instrArea, { target: { value: 'Mach dies, mach das.' } });
+
+    fireEvent.click(screen.getByTestId('skill-form-submit'));
+
+    await waitFor(() => {
+      expect(createMut).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Neuer Skill',
+          description: 'Beschreibung',
+          instructions: 'Mach dies, mach das.',
+        }),
+        expect.anything(),
+      );
+    });
+  });
+
+  it('opens the edit dialog prefilled and submits the update', async () => {
+    mockItems = [makeSkill()];
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-edit-sk-1'));
+
+    const nameInput = screen.getByLabelText(/name/i, { selector: 'input' }) as HTMLInputElement;
+    expect(nameInput).toHaveValue('Rechnungspruefung');
+    fireEvent.change(nameInput, { target: { value: 'Geaenderter Skill' } });
+
+    fireEvent.click(screen.getByTestId('skill-form-submit'));
+
+    await waitFor(() => {
+      expect(updateMut).toHaveBeenCalledWith(
+        {
+          skillId: 'sk-1',
+          payload: expect.objectContaining({
+            name: 'Geaenderter Skill',
+            instructions: '1. Lade die Rechnung\n2. Pruefe Betraege',
+          }),
+        },
+        expect.anything(),
+      );
+    });
+  });
+
+  it('deletes a skill after confirmation', async () => {
+    mockItems = [makeSkill()];
+    window.confirm = vi.fn(() => true);
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-delete-sk-1'));
+    await waitFor(() => {
+      expect(deleteMut).toHaveBeenCalledWith('sk-1');
+    });
+  });
+
+  it('does not delete when the confirmation is rejected', () => {
+    mockItems = [makeSkill()];
+    window.confirm = vi.fn(() => false);
+    renderPage();
+    fireEvent.click(screen.getByTestId('skill-delete-sk-1'));
+    expect(deleteMut).not.toHaveBeenCalled();
+  });
+});

frontend/src/api/skills.ts

@@ -0,0 +1,111 @@
+/**
+ * Skills API client — AI skill definitions (orchestration metadata).
+ *
+ * Backend: /api/v1/skills (list, create, get, update, delete). Skills are
+ * NOT a permission source — they reference tool IDs the agent/user must
+ * already be permitted to use.
+ * Permissions: automation:read (list/get) / automation:write (create,
+ * update) / automation:delete (delete).
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiGet, apiPost, apiPatch, apiDelete } from '@/api/client';
+
+export interface SkillDefinition {
+  id: string;
+  name: string;
+  description: string;
+  instructions: string;
+  allowed_tool_ids: string[];
+  context_policy: Record<string, unknown> | null;
+  category: string;
+  is_active: boolean;
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export interface SkillListResponse {
+  items: SkillDefinition[];
+  total: number;
+}
+
+export interface SkillCreatePayload {
+  name: string;
+  description: string;
+  instructions: string;
+  allowed_tool_ids?: string[];
+  context_policy?: Record<string, unknown> | null;
+  category?: string;
+  is_active?: boolean;
+}
+
+export type SkillUpdatePayload = Partial<SkillCreatePayload>;
+
+export interface SkillListParams {
+  isActive?: boolean;
+  category?: string;
+  limit?: number;
+  offset?: number;
+}
+
+// ─── Query hooks ─────────────────────────────────────────────
+
+export function useSkills(params: SkillListParams = {}) {
+  const searchParams = new URLSearchParams();
+  if (params.isActive !== undefined) searchParams.set('is_active', String(params.isActive));
+  if (params.category) searchParams.set('category', params.category);
+  if (params.limit) searchParams.set('limit', String(params.limit));
+  if (params.offset) searchParams.set('offset', String(params.offset));
+  const qs = searchParams.toString();
+
+  return useQuery<SkillListResponse>({
+    queryKey: ['skills', params.isActive, params.category, params.limit, params.offset],
+    queryFn: () => apiGet<SkillListResponse>(`/skills${qs ? `?${qs}` : ''}`),
+  });
+}
+
+export function useSkill(skillId: string | null) {
+  return useQuery<SkillDefinition>({
+    queryKey: ['skills', skillId],
+    queryFn: () => apiGet<SkillDefinition>(`/skills/${skillId}`),
+    enabled: !!skillId,
+  });
+}
+
+// ─── Mutation hooks ──────────────────────────────────────────
+
+function useInvalidateSkills() {
+  const qc = useQueryClient();
+  return () => {
+    qc.invalidateQueries({ queryKey: ['skills'] });
+  };
+}
+
+export function useCreateSkill() {
+  const invalidate = useInvalidateSkills();
+  return useMutation<SkillDefinition, Error, SkillCreatePayload>({
+    mutationFn: (data) => apiPost<SkillDefinition>('/skills/', data),
+    onSuccess: invalidate,
+  });
+}
+
+export function useUpdateSkill() {
+  const invalidate = useInvalidateSkills();
+  return useMutation<
+    SkillDefinition,
+    Error,
+    { skillId: string; payload: SkillUpdatePayload }
+  >({
+    mutationFn: ({ skillId, payload }) =>
+      apiPatch<SkillDefinition>(`/skills/${skillId}`, payload),
+    onSuccess: invalidate,
+  });
+}
+
+export function useDeleteSkill() {
+  const invalidate = useInvalidateSkills();
+  return useMutation<{ status: string }, Error, string>({
+    mutationFn: (skillId) => apiDelete<{ status: string }>(`/skills/${skillId}`),
+    onSuccess: invalidate,
+  });
+}

frontend/src/generated/pluginComponents.generated.ts

@@ -52,6 +52,7 @@ export const PLUGIN_COMPONENT_MAP: Record<string, LazyComponentFactory> = {
   '@/pages/SettingsNotifications': () => import('@/pages/SettingsNotifications').then((m) => ({ default: m.SettingsNotificationsPage })),
   '@/pages/SettingsRoles': () => import('@/pages/SettingsRoles').then((m) => ({ default: m.SettingsRolesPage })),
   '@/pages/SettingsUsers': () => import('@/pages/SettingsUsers').then((m) => ({ default: m.SettingsUsersPage })),
+  '@/pages/Skills': () => import('@/pages/Skills').then(normalizeModule),
   '@/pages/Tags': () => import('@/pages/Tags').then((m) => ({ default: m.TagsPage })),
   '@/pages/Tasks': () => import('@/pages/Tasks').then((m) => ({ default: m.TasksPage })),
   '@/pages/Wiki': () => import('@/pages/Wiki').then((m) => ({ default: m.WikiPage })),

frontend/src/i18n/locales/de.json

@@ -24,7 +24,8 @@
     "systemDashboard": "System Dashboard",
     "approvals": "Freigaben",
     "delegations": "Delegationen",
-    "marketplace": "Marketplace"
+    "marketplace": "Marketplace",
+    "skills": "Skills"
   },
   "auth": {
     "login": "Anmelden",
@@ -1758,5 +1759,34 @@
     "deleteConfirm": "Vorlage '{{name}}' wirklich loeschen?",
     "empty": "Keine Berechtigungs-Vorlagen vorhanden.",
     "loadError": "Vorlagen konnten nicht geladen werden."
+  },
+  "skills": {
+    "title": "Skills",
+    "create": "Skill erstellen",
+    "createTitle": "Neuen Skill definieren",
+    "createSubmit": "Erstellen",
+    "editTitle": "Skill bearbeiten",
+    "save": "Speichern",
+    "name": "Name",
+    "namePlaceholder": "z.B. Rechnungspruefung",
+    "description": "Beschreibung",
+    "descriptionPlaceholder": "Wofuer ist dieser Skill?",
+    "instructions": "Anweisungen",
+    "instructionsPlaceholder": "Schritt-fuer-Schritt-Anweisungen fuer den Agenten...",
+    "category": "Kategorie",
+    "tools": "Erlaubte Tools",
+    "toolsHelper": "Kommagetrennte Tool-IDs. Leer = keine Tools.",
+    "isActive": "Aktiv",
+    "active": "Aktiv",
+    "inactive": "Inaktiv",
+    "filterAll": "Alle",
+    "filterActive": "Aktiv",
+    "filterInactive": "Inaktiv",
+    "toolCount": "{{count}} Tool(s)",
+    "edit": "Bearbeiten",
+    "delete": "Loeschen",
+    "deleteConfirm": "Skill '{{name}}' wirklich loeschen?",
+    "empty": "Keine Skills vorhanden.",
+    "loadError": "Skills konnten nicht geladen werden."
   }
 }

frontend/src/i18n/locales/en.json

@@ -24,7 +24,8 @@
     "systemDashboard": "System Dashboard",
     "approvals": "Approvals",
     "delegations": "Delegations",
-    "marketplace": "Marketplace"
+    "marketplace": "Marketplace",
+    "skills": "Skills"
   },
   "auth": {
     "login": "Sign In",
@@ -1758,5 +1759,34 @@
     "deleteConfirm": "Really delete template '{{name}}'?",
     "empty": "No permission templates yet.",
     "loadError": "Failed to load templates."
+  },
+  "skills": {
+    "title": "Skills",
+    "create": "Create skill",
+    "createTitle": "Define a new skill",
+    "createSubmit": "Create",
+    "editTitle": "Edit skill",
+    "save": "Save",
+    "name": "Name",
+    "namePlaceholder": "e.g. Invoice check",
+    "description": "Description",
+    "descriptionPlaceholder": "What is this skill for?",
+    "instructions": "Instructions",
+    "instructionsPlaceholder": "Step-by-step instructions for the agent...",
+    "category": "Category",
+    "tools": "Allowed tools",
+    "toolsHelper": "Comma-separated tool IDs. Empty = no tools.",
+    "isActive": "Active",
+    "active": "Active",
+    "inactive": "Inactive",
+    "filterAll": "All",
+    "filterActive": "Active",
+    "filterInactive": "Inactive",
+    "toolCount": "{{count}} tool(s)",
+    "edit": "Edit",
+    "delete": "Delete",
+    "deleteConfirm": "Really delete skill '{{name}}'?",
+    "empty": "No skills yet.",
+    "loadError": "Failed to load skills."
   }
 }

frontend/src/pages/Skills.tsx

@@ -0,0 +1,394 @@
+/**
+ * Skills page — AI skill definitions (orchestration metadata)
+ * (UI-Backlog module 7/16).
+ *
+ * Backend: /api/v1/skills. Skills are NOT a permission source — they
+ * reference tool IDs the agent/user must already be permitted to use.
+ * Permissions: automation:read (list) / automation:write (create, update) /
+ * automation:delete (delete).
+ *
+ * NOTE (Phase Q): registered via the automation PLUGIN MANIFEST
+ * (page_routes + menu_items) — routes/index.tsx and Sidebar.tsx untouched.
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Sparkles,
+  Plus,
+  Pencil,
+  Trash2,
+  Wrench,
+  AlertTriangle,
+  Inbox,
+} from 'lucide-react';
+import {
+  useSkills,
+  useCreateSkill,
+  useUpdateSkill,
+  useDeleteSkill,
+  type SkillDefinition,
+} from '@/api/skills';
+import { usePermission } from '@/hooks/usePermission';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Modal } from '@/components/ui/Modal';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+
+type ActiveFilter = 'all' | 'active' | 'inactive';
+
+const FILTER_TABS: { key: ActiveFilter; labelKey: string }[] = [
+  { key: 'all', labelKey: 'skills.filterAll' },
+  { key: 'active', labelKey: 'skills.filterActive' },
+  { key: 'inactive', labelKey: 'skills.filterInactive' },
+];
+
+function SkillCard({
+  skill,
+  canWrite,
+  canDelete,
+  onEdit,
+  onDelete,
+  isMutating,
+}: {
+  skill: SkillDefinition;
+  canWrite: boolean;
+  canDelete: boolean;
+  onEdit: (s: SkillDefinition) => void;
+  onDelete: (s: SkillDefinition) => void;
+  isMutating: boolean;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Card className="p-4" data-testid={`skill-card-${skill.id}`}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 flex-wrap">
+            <Sparkles className="w-4 h-4 text-primary-600 flex-shrink-0" aria-hidden="true" />
+            <span className="text-sm font-medium text-secondary-900 dark:text-secondary-100">
+              {skill.name}
+            </span>
+            <span data-testid={`skill-active-${skill.id}`}>
+              <Badge variant={skill.is_active ? 'success' : 'secondary'}>
+                {skill.is_active ? t('skills.active') : t('skills.inactive')}
+              </Badge>
+            </span>
+            <Badge variant="secondary">{skill.category}</Badge>
+          </div>
+          <p className="mt-1 text-xs text-secondary-600 dark:text-secondary-400" data-testid={`skill-desc-${skill.id}`}>
+            {skill.description}
+          </p>
+          <div className="mt-2 flex items-center gap-1 text-xs text-secondary-500">
+            <Wrench className="w-3.5 h-3.5" aria-hidden="true" />
+            <span data-testid={`skill-tools-${skill.id}`}>
+              {t('skills.toolCount', { count: skill.allowed_tool_ids.length })}
+            </span>
+          </div>
+        </div>
+        {(canWrite || canDelete) && (
+          <div className="flex gap-2 flex-shrink-0">
+            {canWrite && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onEdit(skill)}
+                disabled={isMutating}
+                aria-label={t('skills.edit')}
+                data-testid={`skill-edit-${skill.id}`}
+              >
+                <Pencil className="w-4 h-4" aria-hidden="true" />
+              </Button>
+            )}
+            {canDelete && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onDelete(skill)}
+                disabled={isMutating}
+                aria-label={t('skills.delete')}
+                data-testid={`skill-delete-${skill.id}`}
+                className="text-danger-600 hover:text-danger-700"
+              >
+                <Trash2 className="w-4 h-4" aria-hidden="true" />
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function SkillFormDialog({
+  open,
+  skill,
+  onClose,
+  onSubmit,
+  isSubmitting,
+}: {
+  open: boolean;
+  skill: SkillDefinition | null;
+  onClose: () => void;
+  onSubmit: (payload: {
+    name: string;
+    description: string;
+    instructions: string;
+    allowed_tool_ids: string[];
+    category: string;
+    is_active: boolean;
+  }) => void;
+  isSubmitting: boolean;
+}) {
+  const { t } = useTranslation();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [tools, setTools] = useState('');
+  const [category, setCategory] = useState('general');
+  const [isActive, setIsActive] = useState(true);
+
+  React.useEffect(() => {
+    if (open) {
+      setName(skill?.name ?? '');
+      setDescription(skill?.description ?? '');
+      setInstructions(skill?.instructions ?? '');
+      setTools((skill?.allowed_tool_ids ?? []).join(', '));
+      setCategory(skill?.category ?? 'general');
+      setIsActive(skill?.is_active ?? true);
+    }
+  }, [open, skill]);
+
+  const parsedTools = tools
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+
+  const valid = name.trim().length > 0 && description.trim().length > 0 && instructions.trim().length > 0;
+
+  const submit = () => {
+    if (!valid) return;
+    onSubmit({
+      name: name.trim(),
+      description: description.trim(),
+      instructions: instructions.trim(),
+      allowed_tool_ids: parsedTools,
+      category: category.trim() || 'general',
+      is_active: isActive,
+    });
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={skill ? t('skills.editTitle') : t('skills.createTitle')}
+      size="lg"
+    >
+      <div className="space-y-4">
+        <Input
+          label={t('skills.name')}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          placeholder={t('skills.namePlaceholder')}
+        />
+        <Input
+          label={t('skills.description')}
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          required
+          placeholder={t('skills.descriptionPlaceholder')}
+        />
+        <div>
+          <label htmlFor="sk-instructions" className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('skills.instructions')} *
+          </label>
+          <textarea
+            id="sk-instructions"
+            value={instructions}
+            onChange={(e) => setInstructions(e.target.value)}
+            rows={5}
+            className="block w-full rounded-md border border-secondary-300 px-3 py-2 text-sm"
+            placeholder={t('skills.instructionsPlaceholder')}
+            aria-label={t('skills.instructions')}
+            data-testid="skill-instructions"
+          />
+        </div>
+        <Input
+          label={t('skills.category')}
+          value={category}
+          onChange={(e) => setCategory(e.target.value)}
+          placeholder="general"
+        />
+        <Input
+          label={t('skills.tools')}
+          value={tools}
+          onChange={(e) => setTools(e.target.value)}
+          placeholder="tool-id-1, tool-id-2"
+          helperText={t('skills.toolsHelper')}
+        />
+        <label className="flex items-center gap-2 text-sm text-secondary-700 dark:text-secondary-300">
+          <input
+            type="checkbox"
+            checked={isActive}
+            onChange={(e) => setIsActive(e.target.checked)}
+            className="rounded"
+          />
+          {t('skills.isActive')}
+        </label>
+        <div className="flex justify-end gap-2 pt-2">
+          <Button variant="ghost" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={submit} disabled={!valid || isSubmitting} data-testid="skill-form-submit">
+            {skill ? t('skills.save') : t('skills.createSubmit')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export function SkillsPage() {
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState<ActiveFilter>('all');
+  const [showCreate, setShowCreate] = useState(false);
+  const [editSkill, setEditSkill] = useState<SkillDefinition | null>(null);
+
+  const { data, isLoading, isError } = useSkills({
+    isActive: filter === 'all' ? undefined : filter === 'active',
+    limit: 100,
+  });
+  const createMut = useCreateSkill();
+  const updateMut = useUpdateSkill();
+  const deleteMut = useDeleteSkill();
+  const { hasPermission } = usePermission();
+
+  const canWrite = hasPermission('automation:write');
+  const canDelete = hasPermission('automation:delete');
+  const isMutating = createMut.isPending || updateMut.isPending || deleteMut.isPending;
+
+  const handleCreate = (payload: Parameters<typeof handleEditPayload>[0]) => {
+    createMut.mutate(payload, {
+      onSuccess: () => setShowCreate(false),
+    });
+  };
+
+  function handleEditPayload(payload: {
+    name: string;
+    description: string;
+    instructions: string;
+    allowed_tool_ids: string[];
+    category: string;
+    is_active: boolean;
+  }) {
+    // no-op: signature helper for typing
+  }
+
+  const handleEdit = (payload: Parameters<typeof handleEditPayload>[0]) => {
+    if (!editSkill) return;
+    updateMut.mutate(
+      { skillId: editSkill.id, payload },
+      {
+        onSuccess: () => setEditSkill(null),
+      },
+    );
+  };
+
+  const handleDelete = (skill: SkillDefinition) => {
+    if (window.confirm(t('skills.deleteConfirm', { name: skill.name }))) {
+      deleteMut.mutate(skill.id);
+    }
+  };
+
+  const items = data?.items ?? [];
+
+  return (
+    <div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-4" data-testid="skills-page">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2">
+          <Sparkles className="w-6 h-6 text-primary-600" aria-hidden="true" />
+          <h1 className="text-2xl font-bold text-secondary-900 dark:text-secondary-100">
+            {t('skills.title')}
+          </h1>
+        </div>
+        {canWrite && (
+          <Button onClick={() => setShowCreate(true)} data-testid="skill-create-open">
+            <Plus className="w-4 h-4 mr-2" aria-hidden="true" />
+            {t('skills.create')}
+          </Button>
+        )}
+      </div>
+
+      <div className="flex gap-1 rounded-lg bg-secondary-100 dark:bg-secondary-800 p-1" role="tablist" aria-label={t('skills.title')}>
+        {FILTER_TABS.map(({ key, labelKey }) => (
+          <button
+            key={key}
+            role="tab"
+            aria-selected={filter === key}
+            onClick={() => setFilter(key)}
+            className={`px-3 py-2 rounded-md text-sm font-medium transition-colors min-h-touch ${
+              filter === key
+                ? 'bg-white dark:bg-secondary-700 text-primary-700 shadow-sm'
+                : 'text-secondary-600 dark:text-secondary-300 hover:text-secondary-900'
+            }`}
+            data-testid={`skill-filter-${key}`}
+          >
+            {t(labelKey)}
+          </button>
+        ))}
+      </div>
+
+      {isLoading && (
+        <div className="flex items-center justify-center min-h-[30vh]" role="status" data-testid="skills-loading">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500" aria-hidden="true" />
+        </div>
+      )}
+
+      {isError && (
+        <Card className="p-6 flex items-center gap-3 text-danger-600" data-testid="skills-error">
+          <AlertTriangle className="w-5 h-5" aria-hidden="true" />
+          <span>{t('skills.loadError')}</span>
+        </Card>
+      )}
+
+      {!isLoading && !isError && items.length === 0 && (
+        <Card className="p-8 flex flex-col items-center gap-3 text-secondary-500" data-testid="skills-empty">
+          <Inbox className="w-10 h-10" aria-hidden="true" />
+          <p>{t('skills.empty')}</p>
+        </Card>
+      )}
+
+      <div className="space-y-3">
+        {items.map((skill) => (
+          <SkillCard
+            key={skill.id}
+            skill={skill}
+            canWrite={canWrite}
+            canDelete={canDelete}
+            onEdit={setEditSkill}
+            onDelete={handleDelete}
+            isMutating={isMutating}
+          />
+        ))}
+      </div>
+
+      <SkillFormDialog
+        open={showCreate}
+        skill={null}
+        onClose={() => setShowCreate(false)}
+        onSubmit={handleCreate}
+        isSubmitting={createMut.isPending}
+      />
+      <SkillFormDialog
+        open={!!editSkill}
+        skill={editSkill}
+        onClose={() => setEditSkill(null)}
+        onSubmit={handleEdit}
+        isSubmitting={updateMut.isPending}
+      />
+    </div>
+  );
+}
+
+export default SkillsPage;