Add UI for managing skills by katinthehatsite · Pull Request #2729 · Automattic/studio

katinthehatsite · 2026-03-09T12:30:48Z

Related issues

Fixes STU-1337

How AI was used in this PR

I used it to get the basic idea and implementation from https://github.com/Automattic/studio/pull/2511/changes#diff-c69fa338d4e3c20084125a9fa7186cf40116a7460210922cfd4b4021935f4c18

Proposed Changes

This PR adds Skills tab to the AI Settings modal which allows to install and manage diffeent skills.

Testing Instructions

Pull the changes from this branch
Start Studio with npm start
Enable the feature flag for Agents Suite feature in the topbar menu under Electron > Feature Flags
Navigate to the Assistant tab
Click on the three dots in the chat input field
Open the AI Settings modal

Test different options in the Skills tab such as installing and removing skills and confirm it works as expected

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

…-agents-md

…for-agents=md

…managing-skills

nightnei

I tried a few times using Install All button and at some moment it fails always with:

Does it work well for you?

nightnei · 2026-03-12T13:49:18Z

apps/studio/src/components/ai-settings-modal.tsx

 								</div>
 							</div>
-							<div className="flex items-center gap-2 flex-shrink-0">
+							<div className={ 'flex items-center gap-2 flex-shrink-0' }>


NIT - t seems it's leftover

Suggested change

<div className={ 'flex items-center gap-2 flex-shrink-0' }>

<div className="flex items-center gap-2 flex-shrink-0">

nightnei · 2026-03-12T13:55:55Z

apps/studio/src/modules/agent-skills/types.ts

@@ -0,0 +1,54 @@
+/**


We have many redundant comments or info in some comments, for example:

Required: / Optional: - it's just a duplication of info which we already have with type definitions

Or for example /** Skill name */ is redundant comment, sine name property inside AvailableSkill is self-explanatory.
So I would remove some comments and adjusted other.

nightnei · 2026-03-12T14:03:29Z

apps/studio/src/modules/agent-skills/lib/constants.ts

+export const DEFAULT_SKILLS_REPO = 'WordPress/agent-skills';
+
+/** Default branch to download from */
+export const DEFAULT_BRANCH = 'trunk';


NIT - I would keep the name more specific instead of a generic name

Suggested change

export const DEFAULT_BRANCH = 'trunk';

export const DEFAULT_SKILLS_REPO_BRANCH = 'trunk';

nightnei · 2026-03-12T14:08:52Z

apps/studio/src/modules/agent-skills/components/skills-panel.tsx

+					<>
+						<span className="inline-flex items-center gap-1 text-[11px] text-green-700 bg-green-50 px-2 py-0.5 rounded-full">
+							<Icon icon={ check } size={ 12 } />
+							{ __( 'Installed' ) }


Personal feeling - we have different lists for already installed and not installed skills, so I find this "Installed" badge redundant. Especially when we have a few installed Skills.

nightnei · 2026-03-12T14:11:01Z

apps/studio/src/modules/agent-skills/components/skills-panel.tsx

+						disabled={ isInstalling }
+						className="text-xs py-1 px-2"
+					>
+						{ isInstalling ? __( 'Installing...' ) : __( 'Install' ) }


Small bug - when you quickly click on the "Install" button and then immediately click on another "Install" button, the disabled state and "Installing" text disappear for the previous item, which was in progress.

nightnei · 2026-03-12T14:12:33Z

apps/studio/src/modules/agent-skills/components/skills-panel.tsx

+	const [ installingPath, setInstallingPath ] = useState< string | null >( null );
+
+	const installedNames = useMemo(
+		() => new Set( installedSkills.map( ( s ) => s.name ) ),


Just out of curiosity - is there some reason for using Set?

Also, map + Set is cheap for normal list sizes and the same for filter inside uninstalledSkills, so I see it just as unnecessary lines of code, but it's completely up to you, just sharing my thoughts.

nightnei · 2026-03-12T14:24:25Z

apps/studio/src/modules/agent-skills/lib/skill-installer.ts

+}
+
+export async function listAvailableSkills(
+	repo: string = DEFAULT_SKILLS_REPO,


I see that we use the repo property everywhere. I don't see an opportunity to provide a custom repo in UI, so I wonder - do we expect to provide an opportunity for different/custom repos? If no, then I would go with removing this property in all places, to keep code simple, at this point. The same with branch.

nightnei · 2026-03-12T14:30:58Z

apps/studio/src/modules/agent-skills/components/skills-panel.tsx

+							disabled={ isInstalling }
+							className="text-[11px] !py-0 !px-0 normal-case !font-medium"
+						>
+							{ isInstalling ? __( 'Installing...' ) : __( 'Install All' ) }


When we click "Install All' - let's disable all Install buttons.

katinthehatsite · 2026-03-12T14:35:22Z

I tried a few times using Install All button and at some moment it fails always with:

@nightnei Let's hold off with this PR for now. I think we will implement #2741 first as the base for the backend and then rebase this one to the UI based on the discussion here #2741 (comment)

I will mark this as draft for now to avoid confusion.

Kateryna Kodonenko added 23 commits March 2, 2026 10:35

Add starter agents.md file amd ship it to site root

ed86d2e

Add further clarifications to agents md

0352a44

Tweaks

0104b7c

Merge branch 'trunk' of github.com:Automattic/studio into add/starter…

06a428f

…-agents-md

Fix failing test

4537c8b

Cleanup

38441c9

Add new modal for AGENTS.MD settings

7072b3f

Add preload

9d6c7b4

Remove extra tab

da5d87d

Merge branch 'trunk' of github.com:Automattic/studio into fix/add-ui-…

95f3184

…for-agents=md

Remove reinstall button

fac7f77

Add customization section

a1c10a8

Add handle focus event listener

c3aad27

Clean up installation of all files

29b78d1

Fix type repetition

daa8b31

Remove loading spinner

52832f0

Merge branch 'trunk' of github.com:Automattic/studio into fix/add-ui-…

d932a17

…for-agents=md

Fix unintended changes

70e4e04

Fix linter

1ceb92f

Fix linter

d799eea

Ensure we don't install AGENTS.MD by default

10446d5

Merge branch 'trunk' of github.com:Automattic/studio into fix/add-ui-…

8555a31

…for-agents=md

Add UI for managing skills

f9ef42e

katinthehatsite marked this pull request as draft March 9, 2026 12:30

wojtekn assigned katinthehatsite Mar 10, 2026

Kateryna Kodonenko added 2 commits March 10, 2026 16:52

Merge branch 'trunk' of github.com:Automattic/studio into add/ui-for-…

ac395c2

…managing-skills

Add skills management mechanisms

935de7c

Base automatically changed from fix/add-ui-for-agents=md to trunk March 10, 2026 16:14

Kateryna Kodonenko added 2 commits March 11, 2026 10:26

Merge branch 'trunk' of github.com:Automattic/studio into add/ui-for-…

1ebb180

…managing-skills

Clean up empty line

4b37dd0

Kateryna Kodonenko added 8 commits March 11, 2026 10:30

Clean up cx

fe482e4

Clean up ipc handlers

819c5ea

Remove Refresh option

f6779cd

Clean up remove button

ac3914c

Adjust the font sizing on loading states

76e73b6

Clean up source at the bottom

36dd97f

Adjust colours

747f805

Remove refresh functionality

8deb293

katinthehatsite requested a review from a team March 11, 2026 14:55

katinthehatsite marked this pull request as ready for review March 11, 2026 14:55

nightnei reviewed Mar 12, 2026

View reviewed changes

katinthehatsite marked this pull request as draft March 12, 2026 14:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add UI for managing skills#2729

Add UI for managing skills#2729
katinthehatsite wants to merge 35 commits intotrunkfrom
add/ui-for-managing-skills

katinthehatsite commented Mar 9, 2026 •

edited

Loading

Uh oh!

nightnei left a comment

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

nightnei Mar 12, 2026

Uh oh!

katinthehatsite commented Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<div className={ 'flex items-center gap-2 flex-shrink-0' }>
	<div className="flex items-center gap-2 flex-shrink-0">

	export const DEFAULT_BRANCH = 'trunk';
	export const DEFAULT_SKILLS_REPO_BRANCH = 'trunk';

Conversation

katinthehatsite commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

nightnei left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

katinthehatsite commented Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

katinthehatsite commented Mar 9, 2026 •

edited

Loading