Skip to content

Agentic UI: Bring per-site AI skills and instructions into the agentic UI - #4644

Closed
shaunandrews wants to merge 2 commits into
trunkfrom
claude/site-skills-instructions-migration-84f79f
Closed

Agentic UI: Bring per-site AI skills and instructions into the agentic UI#4644
shaunandrews wants to merge 2 commits into
trunkfrom
claude/site-skills-instructions-migration-84f79f

Conversation

@shaunandrews

@shaunandrews shaunandrews commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Related issues

  • Related to the site-skills-instructions-migration work

How AI was used in this PR

  • Fully AI-authored (Claude Code): research, implementation, and manual verification against a real local site via studio ui.

Proposed Changes

  • New "AI" tab on the site overview (agentic UI) with per-site Skills and Instructions panels — parity with Studio Classic's Edit Site "Skills"/"Instructions" tabs, which never made it into the new UI.
  • Skills panel: toggle any bundled skill on/off for just this site, overriding the global selection from Settings. "Install all" bulk action.
  • Instructions panel: same toggle pattern for AGENTS.md / CLAUDE.md / STUDIO.md.
  • Works in both the desktop app and the browser (studio ui) — new /sites/:id/agent-instructions and /sites/:id/skills routes on the local server, plus the existing (previously unused) desktop IPC handlers.
  • Per-site instruction-file install/remove logic moved from apps/studio into packages/common, matching how skill installs were already shared — so the browser server can use the same code instead of duplicating it.
Light Dark
AI tab, light mode AI tab, dark mode

Screenshots are a real site (studio ui, browser connector) — WP-CLI & Ops genuinely isn't installed there, which is why "Install all" shows up.

Testing Instructions

  • npm run cli:build:ui && node apps/cli/dist/cli/main.mjs ui --no-open, open localhost:8081, pick a site → AI tab.
  • Toggle a skill and an instruction file off/on — confirms install/remove round-trips against the real site folder.
  • Desktop: same tab appears in apps/studio's Electron build; not yet visually verified there — flagging for review.
  • npm run typecheck and npm test pass across all workspaces.

Pre-merge Checklist

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

Studio Classic lets a site override the globally-selected skills and
install AGENTS.md/CLAUDE.md/STUDIO.md at its root, but that per-site
layer never made it into the new agentic UI (apps/ui) — only the
global selection existed there. Adds a new "AI" tab to the site
overview with the same install/remove controls, wired through both
the Electron IPC connector and the studio ui browser connector
(apps/local gets new /sites/:id/agent-instructions and /sites/:id/skills
routes). The underlying instruction-file logic moves from apps/studio
into packages/common (alongside the already-shared skills install
logic) so both apps/studio and apps/local can use it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@shaunandrews
shaunandrews marked this pull request as draft August 21, 2026 17:47
@wpmobilebot

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing ebec7cc vs trunk

app-size

Metric trunk ebec7cc Diff Change
App Size (Mac) 1436.85 MB 1436.92 MB +0.07 MB ⚪ 0.0%

site-editor

Metric trunk ebec7cc Diff Change
load 1155 ms 1193 ms +38 ms ⚪ 0.0%

site-startup

Metric trunk ebec7cc Diff Change
siteCreation 7542 ms 7545 ms +3 ms ⚪ 0.0%
siteStartup 2875 ms 2873 ms 2 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

font-size-sm paired with line-height-md read visibly loose once the
copy wrapped to two lines. Match the app-wide convention of pairing
font-size-sm with line-height-sm instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@shaunandrews shaunandrews changed the title Bring per-site AI skills and instructions into the agentic UI Agentic UI: Bring per-site AI skills and instructions into the agentic UI Aug 21, 2026
@shaunandrews

Copy link
Copy Markdown
Contributor Author

Splitting this into a 3-PR stack for reviewability — 1,100+ lines in one PR was too much to ask anyone to hold in their head:

  1. Move per-site agent instructions and skill catalog into packages/common #4645 — shared-lib move (packages/common), pure refactor
  2. Add per-site skills/instructions routes and connector plumbing #4646 — apps/local routes + apps/ui connector plumbing, no UI
  3. Add an AI tab to the site overview for per-site skills and instructions #4647 — the actual AI tab (screenshots here)

Closing this one in favor of the stack.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants