From 1973115678b8d2cde4aff8bb8d334548536132ad Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 11 Feb 2026 14:22:26 -0600
Subject: [PATCH] feat: skills frontend

---
 src/lib/apis/skills/index.ts                  | 284 +++++++++++
 src/lib/components/workspace/Skills.svelte    | 440 ++++++++++++++++++
 .../workspace/Skills/SkillEditor.svelte       | 225 +++++++++
 .../workspace/Skills/SkillMenu.svelte         | 105 +++++
 src/lib/stores/index.ts                       |   1 +
 src/routes/(app)/workspace/+layout.svelte     |  11 +
 .../(app)/workspace/skills/+page.svelte       |   5 +
 .../workspace/skills/create/+page.svelte      |  56 +++
 .../(app)/workspace/skills/edit/+page.svelte  |  71 +++
 9 files changed, 1198 insertions(+)
 create mode 100644 src/lib/apis/skills/index.ts
 create mode 100644 src/lib/components/workspace/Skills.svelte
 create mode 100644 src/lib/components/workspace/Skills/SkillEditor.svelte
 create mode 100644 src/lib/components/workspace/Skills/SkillMenu.svelte
 create mode 100644 src/routes/(app)/workspace/skills/+page.svelte
 create mode 100644 src/routes/(app)/workspace/skills/create/+page.svelte
 create mode 100644 src/routes/(app)/workspace/skills/edit/+page.svelte

diff --git a/src/lib/apis/skills/index.ts b/src/lib/apis/skills/index.ts
new file mode 100644
index 0000000000..52d14cbbd3
--- /dev/null
+++ b/src/lib/apis/skills/index.ts
@@ -0,0 +1,284 @@
+import { WEBUI_API_BASE_URL } from '$lib/constants';
+
+export const createNewSkill = async (token: string, skill: object) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/create`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			...skill
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getSkills = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getSkillList = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/list`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const exportSkills = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/export`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getSkillById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const updateSkillById = async (token: string, id: string, skill: object) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			...skill
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const updateSkillAccessGrants = async (
+	token: string,
+	id: string,
+	accessGrants: any[]
+) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/access/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			access_grants: accessGrants
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const toggleSkillById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/toggle`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const deleteSkillById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/delete`, {
+		method: 'DELETE',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
diff --git a/src/lib/components/workspace/Skills.svelte b/src/lib/components/workspace/Skills.svelte
new file mode 100644
index 0000000000..33cfc86c43
--- /dev/null
+++ b/src/lib/components/workspace/Skills.svelte
@@ -0,0 +1,440 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { WEBUI_NAME, user, skills as _skills } from '$lib/stores';
+	import { goto } from '$app/navigation';
+	import {
+		getSkills,
+		getSkillList,
+		getSkillById,
+		exportSkills,
+		deleteSkillById,
+		toggleSkillById
+	} from '$lib/apis/skills';
+	import { capitalizeFirstLetter } from '$lib/utils';
+
+	import Tooltip from '../common/Tooltip.svelte';
+	import ConfirmDialog from '../common/ConfirmDialog.svelte';
+	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
+	import GarbageBin from '../icons/GarbageBin.svelte';
+	import Search from '../icons/Search.svelte';
+	import Plus from '../icons/Plus.svelte';
+	import XMark from '../icons/XMark.svelte';
+	import Spinner from '../common/Spinner.svelte';
+	import ViewSelector from './common/ViewSelector.svelte';
+	import Badge from '$lib/components/common/Badge.svelte';
+	import Switch from '../common/Switch.svelte';
+	import SkillMenu from './Skills/SkillMenu.svelte';
+
+	let shiftKey = false;
+	let loaded = false;
+
+	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
+
+	let selectedSkill = null;
+	let showDeleteConfirm = false;
+
+	let skills = [];
+	let filteredItems = [];
+
+	let tagsContainerElement: HTMLDivElement;
+	let viewOption = '';
+
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			setFilteredItems();
+		}, 300);
+	}
+
+	$: if (skills && viewOption !== undefined) {
+		setFilteredItems();
+	}
+
+	const setFilteredItems = () => {
+		filteredItems = skills.filter((s) => {
+			if (query === '' && viewOption === '') return true;
+			const lowerQuery = query.toLowerCase();
+			return (
+				((s.name || '').toLowerCase().includes(lowerQuery) ||
+					(s.id || '').toLowerCase().includes(lowerQuery) ||
+					(s.description || '').toLowerCase().includes(lowerQuery) ||
+					(s.user?.name || '').toLowerCase().includes(lowerQuery) ||
+					(s.user?.email || '').toLowerCase().includes(lowerQuery)) &&
+				(viewOption === '' ||
+					(viewOption === 'created' && s.user_id === $user?.id) ||
+					(viewOption === 'shared' && s.user_id !== $user?.id))
+			);
+		});
+	};
+
+	const cloneHandler = async (skill) => {
+		const _skill = await getSkillById(localStorage.token, skill.id).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (_skill) {
+			sessionStorage.skill = JSON.stringify({
+				..._skill,
+				id: `${_skill.id}_clone`,
+				name: `${_skill.name} (Clone)`
+			});
+			goto('/workspace/skills/create');
+		}
+	};
+
+	const exportHandler = async (skill) => {
+		const _skill = await getSkillById(localStorage.token, skill.id).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (_skill) {
+			let blob = new Blob([JSON.stringify([_skill])], {
+				type: 'application/json'
+			});
+			saveAs(blob, `skill-${_skill.id}-export-${Date.now()}.json`);
+		}
+	};
+
+	const deleteHandler = async (skill) => {
+		const res = await deleteSkillById(localStorage.token, skill.id).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Skill deleted successfully'));
+			await init();
+		}
+	};
+
+	const init = async () => {
+		skills = await getSkillList(localStorage.token);
+		_skills.set(await getSkills(localStorage.token));
+	};
+
+	onMount(async () => {
+		viewOption = localStorage?.workspaceViewOption || '';
+		await init();
+		loaded = true;
+
+		const onKeyDown = (event) => {
+			if (event.key === 'Shift') {
+				shiftKey = true;
+			}
+		};
+
+		const onKeyUp = (event) => {
+			if (event.key === 'Shift') {
+				shiftKey = false;
+			}
+		};
+
+		const onBlur = () => {
+			shiftKey = false;
+		};
+
+		window.addEventListener('keydown', onKeyDown);
+		window.addEventListener('keyup', onKeyUp);
+		window.addEventListener('blur-sm', onBlur);
+
+		return () => {
+			clearTimeout(searchDebounceTimer);
+			window.removeEventListener('keydown', onKeyDown);
+			window.removeEventListener('keyup', onKeyUp);
+			window.removeEventListener('blur-sm', onBlur);
+		};
+	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+</script>
+
+<svelte:head>
+	<title>
+		{$i18n.t('Skills')} • {$WEBUI_NAME}
+	</title>
+</svelte:head>
+
+{#if loaded}
+	<div class="flex flex-col gap-1 px-1 mt-1.5 mb-3">
+		<div class="flex justify-between items-center">
+			<div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
+				<div>
+					{$i18n.t('Skills')}
+				</div>
+
+				<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
+					{filteredItems.length}
+				</div>
+			</div>
+
+			<div class="flex w-full justify-end gap-1.5">
+				{#if skills.length && ($user?.role === 'admin' || $user?.permissions?.workspace?.skills)}
+					<button
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
+						on:click={async () => {
+							const _skills = await exportSkills(localStorage.token).catch(
+								(error) => {
+									toast.error(`${error}`);
+									return null;
+								}
+							);
+							if (_skills) {
+								let blob = new Blob([JSON.stringify(_skills)], {
+									type: 'application/json'
+								});
+								saveAs(blob, `skills-export-${Date.now()}.json`);
+							}
+						}}
+					>
+						<div class=" self-center font-medium line-clamp-1">
+							{$i18n.t('Export')}
+						</div>
+					</button>
+				{/if}
+
+				{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
+					<a
+						class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-medium text-sm flex items-center"
+						href="/workspace/skills/create"
+					>
+						<Plus className="size-3" strokeWidth="2.5" />
+
+						<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Skill')}</div>
+					</a>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<div
+		class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
+	>
+		<div class=" flex w-full space-x-2 py-0.5 px-3.5 pb-2">
+			<div class="flex flex-1">
+				<div class=" self-center ml-1 mr-3">
+					<Search className="size-3.5" />
+				</div>
+				<input
+					class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
+					bind:value={query}
+					placeholder={$i18n.t('Search Skills')}
+				/>
+				{#if query}
+					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
+						<button
+							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+							on:click={() => {
+								query = '';
+							}}
+						>
+							<XMark className="size-3" strokeWidth="2" />
+						</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<div
+			class="px-3 flex w-full bg-transparent overflow-x-auto scrollbar-none -mx-1"
+			on:wheel={(e) => {
+				if (e.deltaY !== 0) {
+					e.preventDefault();
+					e.currentTarget.scrollLeft += e.deltaY;
+				}
+			}}
+		>
+			<div
+				class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent px-1.5 whitespace-nowrap"
+				bind:this={tagsContainerElement}
+			>
+				<ViewSelector
+					bind:value={viewOption}
+					onChange={async (value) => {
+						localStorage.workspaceViewOption = value;
+						await tick();
+					}}
+				/>
+			</div>
+		</div>
+
+		{#if (filteredItems ?? []).length !== 0}
+			<div class=" my-2 gap-2 grid px-3 lg:grid-cols-2">
+				{#each filteredItems as skill}
+					<Tooltip content={skill?.description ?? skill?.id}>
+						<div
+							class=" flex space-x-4 text-left w-full px-3 py-2.5 transition rounded-2xl {skill.write_access
+								? 'cursor-pointer dark:hover:bg-gray-850/50 hover:bg-gray-50'
+								: 'cursor-not-allowed opacity-60'}"
+						>
+							{#if skill.write_access}
+								<a
+									class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
+									href={`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`}
+								>
+									<div class="flex items-center text-left">
+										<div class=" flex-1 self-center">
+											<Tooltip content={skill.id} placement="top-start">
+												<div class="flex items-center gap-2">
+													<div class="line-clamp-1 text-sm">
+														{skill.name}
+													</div>
+													{#if !skill.is_active}
+														<Badge type="muted" content={$i18n.t('Inactive')} />
+													{/if}
+												</div>
+											</Tooltip>
+											<div class="px-0.5">
+												<div class="text-xs text-gray-500 shrink-0">
+													<Tooltip
+														content={skill?.user?.email ?? $i18n.t('Deleted User')}
+														className="flex shrink-0"
+														placement="top-start"
+													>
+														{$i18n.t('By {{name}}', {
+															name: capitalizeFirstLetter(
+																skill?.user?.name ?? skill?.user?.email ?? $i18n.t('Deleted User')
+															)
+														})}
+													</Tooltip>
+												</div>
+											</div>
+										</div>
+									</div>
+								</a>
+							{:else}
+								<div class=" flex flex-1 space-x-3.5 w-full">
+									<div class="flex items-center text-left w-full">
+										<div class="flex-1 self-center w-full">
+											<div class="flex items-center justify-between w-full gap-2">
+												<Tooltip content={skill.id} placement="top-start">
+													<div class="flex items-center gap-2">
+														<div class="line-clamp-1 text-sm">
+															{skill.name}
+														</div>
+														{#if !skill.is_active}
+															<Badge type="muted" content={$i18n.t('Inactive')} />
+														{/if}
+													</div>
+												</Tooltip>
+												<Badge type="muted" content={$i18n.t('Read Only')} />
+											</div>
+											<div class="px-0.5">
+												<div class="text-xs text-gray-500 shrink-0">
+													<Tooltip
+														content={skill?.user?.email ?? $i18n.t('Deleted User')}
+														className="flex shrink-0"
+														placement="top-start"
+													>
+														{$i18n.t('By {{name}}', {
+															name: capitalizeFirstLetter(
+																skill?.user?.name ?? skill?.user?.email ?? $i18n.t('Deleted User')
+															)
+														})}
+													</Tooltip>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							{/if}
+							{#if skill.write_access}
+								<div class="flex flex-row gap-0.5 self-center">
+									{#if shiftKey}
+										<Tooltip content={$i18n.t('Delete')}>
+											<button
+												class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+												type="button"
+												on:click={() => {
+													deleteHandler(skill);
+												}}
+											>
+												<GarbageBin />
+											</button>
+										</Tooltip>
+									{:else}
+										<SkillMenu
+											editHandler={() => {
+												goto(`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`);
+											}}
+											cloneHandler={() => {
+												cloneHandler(skill);
+											}}
+											exportHandler={() => {
+												exportHandler(skill);
+											}}
+											deleteHandler={async () => {
+												selectedSkill = skill;
+												showDeleteConfirm = true;
+											}}
+											onClose={() => {}}
+										>
+											<button
+												class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+												type="button"
+											>
+												<EllipsisHorizontal className="size-5" />
+											</button>
+										</SkillMenu>
+									{/if}
+
+									<button
+										on:click|stopPropagation|preventDefault
+									>
+										<Tooltip
+											content={skill.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}
+										>
+											<Switch
+												bind:state={skill.is_active}
+												on:change={async () => {
+													toggleSkillById(localStorage.token, skill.id);
+												}}
+											/>
+										</Tooltip>
+									</button>
+								</div>
+							{/if}
+						</div>
+					</Tooltip>
+				{/each}
+			</div>
+		{:else}
+			<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
+				<div class="max-w-md text-center">
+					<div class=" text-3xl mb-3">📝</div>
+					<div class=" text-lg font-medium mb-1">{$i18n.t('No skills found')}</div>
+					<div class=" text-gray-500 text-center text-xs">
+						{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<DeleteConfirmDialog
+		bind:show={showDeleteConfirm}
+		title={$i18n.t('Delete skill?')}
+		on:confirm={() => {
+			deleteHandler(selectedSkill);
+		}}
+	>
+		<div class=" text-sm text-gray-500 truncate">
+			{$i18n.t('This will delete')} <span class="  font-medium">{selectedSkill.name}</span>.
+		</div>
+	</DeleteConfirmDialog>
+{:else}
+	<div class="w-full h-full flex justify-center items-center">
+		<Spinner className="size-5" />
+	</div>
+{/if}
diff --git a/src/lib/components/workspace/Skills/SkillEditor.svelte b/src/lib/components/workspace/Skills/SkillEditor.svelte
new file mode 100644
index 0000000000..f5a9da51c6
--- /dev/null
+++ b/src/lib/components/workspace/Skills/SkillEditor.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+	import { onMount, tick, getContext } from 'svelte';
+
+	import Textarea from '$lib/components/common/Textarea.svelte';
+	import { toast } from 'svelte-sonner';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import AccessControlModal from '../common/AccessControlModal.svelte';
+	import { user } from '$lib/stores';
+	import { slugify } from '$lib/utils';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import { updateSkillAccessGrants } from '$lib/apis/skills';
+	import { goto } from '$app/navigation';
+
+	export let onSubmit: Function;
+	export let edit = false;
+	export let skill = null;
+	export let clone = false;
+	export let disabled = false;
+
+	const i18n = getContext('i18n');
+
+	let loading = false;
+
+	let name = '';
+	let id = '';
+	let description = '';
+	let content = '';
+
+	let accessGrants = [];
+	let showAccessControlModal = false;
+	let hasManualEdit = false;
+
+	$: if (!edit && !hasManualEdit) {
+		id = name !== '' ? slugify(name) : '';
+	}
+
+	function handleIdInput(e: Event) {
+		hasManualEdit = true;
+	}
+
+	const submitHandler = async () => {
+		if (disabled) {
+			toast.error($i18n.t('You do not have permission to edit this skill.'));
+			return;
+		}
+		loading = true;
+
+		await onSubmit({
+			id,
+			name,
+			description,
+			content,
+			is_active: true,
+			meta: { tags: [] },
+			access_grants: accessGrants
+		});
+
+		loading = false;
+	};
+
+	onMount(async () => {
+		if (skill) {
+			name = skill.name || '';
+			await tick();
+			id = skill.id || '';
+			description = skill.description || '';
+			content = skill.content || '';
+			accessGrants = skill?.access_grants === undefined ? [] : skill?.access_grants;
+		}
+	});
+</script>
+
+<AccessControlModal
+	bind:show={showAccessControlModal}
+	bind:accessGrants
+	accessRoles={['read', 'write']}
+	share={$user?.permissions?.sharing?.skills || $user?.role === 'admin'}
+	sharePublic={$user?.permissions?.sharing?.public_skills || $user?.role === 'admin' || edit}
+	onChange={async () => {
+		if (edit && skill?.id) {
+			try {
+				await updateSkillAccessGrants(localStorage.token, skill.id, accessGrants);
+				toast.success($i18n.t('Saved'));
+			} catch (error) {
+				toast.error(`${error}`);
+			}
+		}
+	}}
+/>
+
+<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
+	<div class="mx-auto w-full md:px-0 h-full">
+		<form
+			class=" flex flex-col max-h-[100dvh] h-full"
+			on:submit|preventDefault={submitHandler}
+		>
+			<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
+				<div class="w-full mb-2 flex flex-col gap-0.5">
+					<div class="flex w-full items-center">
+						<div class=" shrink-0 mr-2">
+							<Tooltip content={$i18n.t('Back')}>
+								<button
+									class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
+									on:click={() => {
+										goto('/workspace/skills');
+									}}
+									type="button"
+								>
+									<ChevronLeft strokeWidth="2.5" />
+								</button>
+							</Tooltip>
+						</div>
+
+						<div class="flex-1">
+							<Tooltip content={$i18n.t('e.g. Code Review Guidelines')} placement="top-start">
+								<input
+									class="w-full text-2xl font-medium bg-transparent outline-hidden font-primary"
+									type="text"
+									placeholder={$i18n.t('Skill Name')}
+									bind:value={name}
+									required
+									{disabled}
+								/>
+							</Tooltip>
+						</div>
+
+						<div class="self-center shrink-0">
+							{#if !disabled}
+								<button
+									class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
+									type="button"
+									on:click={() => (showAccessControlModal = true)}
+								>
+									<LockClosed strokeWidth="2.5" className="size-3.5" />
+
+									<div class="text-sm font-medium shrink-0">
+										{$i18n.t('Access')}
+									</div>
+								</button>
+							{:else}
+								<span class="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
+									>{$i18n.t('Read Only')}</span
+								>
+							{/if}
+						</div>
+					</div>
+
+					<div class=" flex gap-2 px-1 items-center">
+						{#if edit}
+							<div class="text-sm text-gray-500 shrink-0">
+								{id}
+							</div>
+						{:else}
+							<Tooltip className="w-full" content={$i18n.t('e.g. code-review-guidelines')} placement="top-start">
+								<input
+									class="w-full text-sm disabled:text-gray-500 bg-transparent outline-hidden"
+									type="text"
+									placeholder={$i18n.t('Skill ID')}
+									bind:value={id}
+									on:input={handleIdInput}
+									required
+									disabled={edit}
+								/>
+							</Tooltip>
+						{/if}
+
+						<Tooltip
+							className="w-full self-center items-center flex"
+							content={$i18n.t('e.g. Step-by-step instructions for code reviews')}
+							placement="top-start"
+						>
+							<input
+								class="w-full text-sm bg-transparent outline-hidden"
+								type="text"
+								placeholder={$i18n.t('Skill Description')}
+								bind:value={description}
+								{disabled}
+							/>
+						</Tooltip>
+					</div>
+				</div>
+
+				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
+					<div class="h-full flex flex-col">
+						<div
+							class="bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100/50 dark:border-gray-850/50 flex-1 min-h-0 overflow-hidden flex flex-col"
+						>
+							{#if disabled}
+								<div class="px-4 py-3 overflow-y-auto flex-1">
+									<pre class="text-xs whitespace-pre-wrap font-mono">{content}</pre>
+								</div>
+							{:else}
+								<textarea
+									class="w-full flex-1 text-xs bg-transparent outline-hidden resize-none font-mono px-4 py-3"
+									bind:value={content}
+									placeholder={$i18n.t('Enter skill instructions in markdown...')}
+									required
+								/>
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				<div class="pb-3 flex justify-end">
+					{#if !disabled}
+						<button
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center"
+							type="submit"
+							disabled={loading}
+						>
+							{$i18n.t(edit ? 'Save' : 'Save & Create')}
+							{#if loading}
+								<div class="ml-1.5">
+									<Spinner />
+								</div>
+							{/if}
+						</button>
+					{/if}
+				</div>
+			</div>
+		</form>
+	</div>
+</div>
diff --git a/src/lib/components/workspace/Skills/SkillMenu.svelte b/src/lib/components/workspace/Skills/SkillMenu.svelte
new file mode 100644
index 0000000000..9f4c0765c0
--- /dev/null
+++ b/src/lib/components/workspace/Skills/SkillMenu.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { flyAndScale } from '$lib/utils/transitions';
+	import { getContext } from 'svelte';
+
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
+	import Download from '$lib/components/icons/Download.svelte';
+	import { user } from '$lib/stores';
+
+	const i18n = getContext('i18n');
+
+	export let editHandler: Function;
+	export let cloneHandler: Function;
+	export let exportHandler: Function;
+	export let deleteHandler: Function;
+	export let onClose: Function;
+
+	let show = false;
+</script>
+
+<Dropdown
+	bind:show
+	on:change={(e) => {
+		if (e.detail === false) {
+			onClose();
+		}
+	}}
+>
+	<Tooltip content={$i18n.t('More')}>
+		<slot />
+	</Tooltip>
+
+	<div slot="content">
+		<DropdownMenu.Content
+			class="w-full max-w-[170px] rounded-2xl px-1 py-1 border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
+			sideOffset={-2}
+			side="bottom"
+			align="start"
+			transition={flyAndScale}
+		>
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl"
+				on:click={() => {
+					editHandler();
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="w-4 h-4"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+					/>
+				</svg>
+
+				<div class="flex items-center">{$i18n.t('Edit')}</div>
+			</DropdownMenu.Item>
+
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				on:click={() => {
+					cloneHandler();
+				}}
+			>
+				<DocumentDuplicate />
+
+				<div class="flex items-center">{$i18n.t('Clone')}</div>
+			</DropdownMenu.Item>
+
+			{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
+				<DropdownMenu.Item
+					class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+					on:click={() => {
+						exportHandler();
+					}}
+				>
+					<Download />
+
+					<div class="flex items-center">{$i18n.t('Export')}</div>
+				</DropdownMenu.Item>
+			{/if}
+
+			<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
+
+			<DropdownMenu.Item
+				class="flex  gap-2  items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				on:click={() => {
+					deleteHandler();
+				}}
+			>
+				<GarbageBin />
+				<div class="flex items-center">{$i18n.t('Delete')}</div>
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</div>
+</Dropdown>
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 3fbc001f01..7a77fc0f64 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -66,6 +66,7 @@ export const models: Writable<Model[]> = writable([]);
 export const prompts: Writable<null | Prompt[]> = writable(null);
 export const knowledge: Writable<null | Document[]> = writable(null);
 export const tools = writable(null);
+export const skills = writable(null);
 export const functions = writable(null);
 
 export const toolServers = writable([]);
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 22e09f6ce0..5c29dd0321 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -121,6 +121,17 @@
 								{$i18n.t('Tools')}
 							</a>
 						{/if}
+
+					{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
+						<a
+							class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/skills')
+								? ''
+								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+							href="/workspace/skills"
+						>
+							{$i18n.t('Skills')}
+						</a>
+					{/if}
 					</div>
 				</div>
 
diff --git a/src/routes/(app)/workspace/skills/+page.svelte b/src/routes/(app)/workspace/skills/+page.svelte
new file mode 100644
index 0000000000..84156be556
--- /dev/null
+++ b/src/routes/(app)/workspace/skills/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Skills from '$lib/components/workspace/Skills.svelte';
+</script>
+
+<Skills />
diff --git a/src/routes/(app)/workspace/skills/create/+page.svelte b/src/routes/(app)/workspace/skills/create/+page.svelte
new file mode 100644
index 0000000000..07955eae37
--- /dev/null
+++ b/src/routes/(app)/workspace/skills/create/+page.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
+	import { skills } from '$lib/stores';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import { createNewSkill, getSkills } from '$lib/apis/skills';
+	import SkillEditor from '$lib/components/workspace/Skills/SkillEditor.svelte';
+
+	let skill: {
+		name: string;
+		id: string;
+		description: string;
+		content: string;
+		is_active: boolean;
+		access_grants: any[];
+	} | null = null;
+
+	let clone = false;
+
+	const onSubmit = async (_skill) => {
+		const res = await createNewSkill(localStorage.token, _skill).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Skill created successfully'));
+			await skills.set(await getSkills(localStorage.token));
+			await goto('/workspace/skills');
+		}
+	};
+
+	onMount(async () => {
+		if (sessionStorage.skill) {
+			const _skill = JSON.parse(sessionStorage.skill);
+			sessionStorage.removeItem('skill');
+
+			clone = true;
+			skill = {
+				name: _skill.name || 'Skill',
+				id: _skill.id || '',
+				description: _skill.description || '',
+				content: _skill.content || '',
+				is_active: _skill.is_active ?? true,
+				access_grants: _skill.access_grants !== undefined ? _skill.access_grants : []
+			};
+		}
+	});
+</script>
+
+{#key skill}
+	<SkillEditor {skill} {onSubmit} {clone} />
+{/key}
diff --git a/src/routes/(app)/workspace/skills/edit/+page.svelte b/src/routes/(app)/workspace/skills/edit/+page.svelte
new file mode 100644
index 0000000000..27b6acd39b
--- /dev/null
+++ b/src/routes/(app)/workspace/skills/edit/+page.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
+	import { skills } from '$lib/stores';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import { getSkillById, getSkills, updateSkillById } from '$lib/apis/skills';
+	import { page } from '$app/stores';
+
+	import SkillEditor from '$lib/components/workspace/Skills/SkillEditor.svelte';
+
+	let skill = null;
+	let disabled = false;
+
+	$: skillId = $page.url.searchParams.get('id');
+
+	const onSubmit = async (_skill) => {
+		const updatedSkill = await updateSkillById(localStorage.token, skillId, _skill).catch(
+			(error) => {
+				toast.error(`${error}`);
+				return null;
+			}
+		);
+
+		if (updatedSkill) {
+			toast.success($i18n.t('Skill updated successfully'));
+			await skills.set(await getSkills(localStorage.token));
+			skill = {
+				id: updatedSkill.id,
+				name: updatedSkill.name,
+				description: updatedSkill.description,
+				content: updatedSkill.content,
+				is_active: updatedSkill.is_active,
+				access_grants:
+					updatedSkill?.access_grants === undefined ? [] : updatedSkill?.access_grants
+			};
+		}
+	};
+
+	onMount(async () => {
+		if (skillId) {
+			const _skill = await getSkillById(localStorage.token, skillId).catch((error) => {
+				toast.error(`${error}`);
+				return null;
+			});
+
+			if (_skill) {
+				disabled = !_skill.write_access ?? true;
+				skill = {
+					id: _skill.id,
+					name: _skill.name,
+					description: _skill.description,
+					content: _skill.content,
+					is_active: _skill.is_active,
+					access_grants:
+						_skill?.access_grants === undefined ? [] : _skill?.access_grants
+				};
+			} else {
+				goto('/workspace/skills');
+			}
+		} else {
+			goto('/workspace/skills');
+		}
+	});
+</script>
+
+{#if skill}
+	<SkillEditor {skill} {onSubmit} {disabled} edit />
+{/if}