d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-07-12 01:35:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(skills): add provider skill management

Browse Source 
Users need one settings surface to discover and install skills without manually navigating provider-specific directories.

Add provider-backed global skill installation for Claude, Codex, Gemini, and Cursor, while keeping OpenCode read-only because it reuses other providers' skill locations.

Add a responsive Skills settings tab with scoped discovery, search, refresh controls, markdown and folder uploads, upload feedback, and overflow-safe layouts.

Validate bundled skill files and paths before writing them, preserve scripts and assets, and cover provider discovery and installation behavior with tests.
This commit is contained in:
Haileyesus
2026-06-21 01:17:23 +03:00
parent 4712431be8
commit be9fdd165e
22 changed files with 1578 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/settings/view/tabs/agents-settings/AgentsSettingsTab.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import type { AgentCategory, AgentProvider } from '../../../types/types';
@@ -22,6 +22,11 @@ export default function AgentsSettingsTab({
}: AgentsSettingsTabProps) {
const [selectedAgent, setSelectedAgent] = useState<AgentProvider>('claude');
const [selectedCategory, setSelectedCategory] = useState<AgentCategory>('account');
const visibleCategories = useMemo<AgentCategory[]>(() => (
selectedAgent === 'opencode'
? ['account', 'permissions', 'mcp']
: ['account', 'permissions', 'mcp', 'skills']
), [selectedAgent]);
const visibleAgents = useMemo<AgentProvider[]>(() => {
return ['claude', 'cursor', 'codex', 'gemini', 'opencode'];
@@ -57,8 +62,14 @@ export default function AgentsSettingsTab({
providerAuthStatus.opencode,
]);
useEffect(() => {
if (!visibleCategories.includes(selectedCategory)) {
setSelectedCategory(visibleCategories[0] ?? 'account');
}
}, [selectedCategory, visibleCategories]);
return (
<div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
<div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] min-w-0 flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
<AgentSelectorSection
agents={visibleAgents}
selectedAgent={selectedAgent}
@@ -66,8 +77,10 @@ export default function AgentsSettingsTab({
agentContextById={agentContextById}
/>
<div className="flex flex-1 flex-col overflow-hidden">
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
<AgentCategoryTabsSection
categories={visibleCategories}
selectedAgent={selectedAgent}
selectedCategory={selectedCategory}
onSelectCategory={setSelectedCategory}
/>