feat(skills): skills.sh marketplace browse and install

[k11kirky]

Problem

Users have no way to discover and install community skills from within the app. They must manually find and copy skill files, with no browsing, previewing, or one-click install experience.

Changes

Backend: SkillsMarketplaceService

• Added a new skills-marketplace service that integrates with the skills.sh search API to find community skills by query.
• Skills are fetched as GitHub repository ZIP archives, with a short-lived in-process cache (5 min TTL, max 4 entries) to avoid redundant downloads.
• preview() returns all files in a skill directory before anything touches disk, flagging skills that contain executable scripts and marking binary files as non-previewable.
• install() extracts the skill into ~/.claude/skills/<skillId> as an ordinary editable user skill. An installed.json state file tracks which skills came from the marketplace solely to power the "Installed" badge in search results.
• Zip-slip protection is enforced: any archive entry with path traversal sequences or backslashes is silently dropped.
• validateSkillDirName is exported from the skills service so the marketplace service can reuse it.
• The module is registered in the DI container and wired into the host router under skills.marketplace.{search,preview,install}.

Frontend: Marketplace UI

• SkillsView gains an "Installed" / "Marketplace" tab bar. The existing skills list is shown under "Installed"; the new MarketplaceBrowse component is shown under "Marketplace".
• MarketplaceBrowse provides a debounced search input (300 ms) that queries the marketplace. Results show skill name, source repo, install count, and an "Installed" badge when applicable. Selecting a result opens a resizable MarketplaceSkillPanel sidebar.
• MarketplaceSkillPanel shows a full pre-install file preview. SKILL.md is rendered as Markdown (frontmatter stripped); all other files open in the read-only CodeMirror editor. A warning callout is shown when the skill contains scripts. Installing a skill that already exists locally prompts an overwrite confirmation dialog.
• stripFrontmatter is extracted into its own module and shared between SkillDetailPanel and MarketplaceSkillPanel.
• React Query hooks (useMarketplaceSearch, useMarketplacePreview, useInstallMarketplaceSkill) are added in useMarketplace.ts. A successful install invalidates the skills query so the "Installed" tab reflects the new skill immediately.

How did you test this?

A full unit test suite was added for SkillsMarketplaceService covering:

• findSkillDirPrefix — shallowest-match selection and absent-skill handling.
• collectSkillFiles — zip-slip path traversal rejection.
• search — correct mapping of skills.sh results, installed-state decoration, and short-query early-exit.
• preview — full file list with contents, binary file detection, missing-skill error, and invalid repository reference rejection.
• install — successful extraction and state file write, overwrite guard and replacement, and invalid skill ID rejection.

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

[k11kirky]

• refactor(skills): apply simplify-pass cleanups across the stack #2612
• feat(skills): Codex unification — bring your skills, use them anywhere #2611
• feat(skills): publish skills to the team and install team skills locally #2610
• feat(skills): PostHog cloud team skills — read path #2609
• feat(skills): skills.sh marketplace browse and install #2608 👈 (View in Graphite)
• feat(skills): validation and shadowing signals #2607
• feat(skills): live refresh from the filesystem #2606
• feat(skills): create, edit, and delete user and repo skills #2605
• feat(skills): render full skill directories #2604
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

React Doctor could not complete this scan.

No React dependency found in /tmp/react-doctor-baseline-Zf0prF/package.json. Add "react" to dependencies (or peerDependencies) and re-run.

_{Reviewed by React Doctor for commit a1c1c5c.}

[greptile-apps]

Comments Outside Diff (2)

1. packages/ui/src/features/skills/MarketplaceSkillPanel.tsx, line 292-295 (link)

   Preview fetch errors are silently swallowed

   useMarketplacePreview returns an error field but it is not destructured here. When the preview request fails (network error, invalid skill reference, etc.), preview is undefined, files becomes [], and selected is undefined — so the UI falls through to "No content to preview". A user has no way to tell whether the content is genuinely absent or whether the fetch failed. Surfacing error with a distinct message (e.g. "Failed to load preview") would make failures actionable.

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: packages/ui/src/features/skills/MarketplaceSkillPanel.tsx
   Line: 292-295
   
   Comment:
   **Preview fetch errors are silently swallowed**
   
   `useMarketplacePreview` returns an `error` field but it is not destructured here. When the preview request fails (network error, invalid skill reference, etc.), `preview` is `undefined`, `files` becomes `[]`, and `selected` is `undefined` — so the UI falls through to "No content to preview". A user has no way to tell whether the content is genuinely absent or whether the fetch failed. Surfacing `error` with a distinct message (e.g. "Failed to load preview") would make failures actionable.
   
   How can I resolve this? If you propose a fix, please make it concise.

2. packages/ui/src/features/skills/MarketplaceSkillPanel.tsx, line 314-317 (link)

   Overwrite detection relies on substring-matching a server error message

   The "already exists" check on line 315 couples the client to the exact wording of the server error thrown in skills-marketplace.ts. If that message is ever reworded or localised, the overwrite confirmation dialog will silently stop appearing and the user will only see a generic "Failed to install skill" toast. Consider using a typed error (e.g. a distinct error code field or a custom error class) so the client can respond to the condition structurally rather than by text search.

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: packages/ui/src/features/skills/MarketplaceSkillPanel.tsx
   Line: 314-317
   
   Comment:
   **Overwrite detection relies on substring-matching a server error message**
   
   The `"already exists"` check on line 315 couples the client to the exact wording of the server error thrown in `skills-marketplace.ts`. If that message is ever reworded or localised, the overwrite confirmation dialog will silently stop appearing and the user will only see a generic "Failed to install skill" toast. Consider using a typed error (e.g. a distinct error `code` field or a custom error class) so the client can respond to the condition structurally rather than by text search.
   
   How can I resolve this? If you propose a fix, please make it concise.

Prompt To Fix All With AI

Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 3
packages/ui/src/features/skills/MarketplaceBrowse.tsx:101-103
**Duplicate `installsFormatter` definition**

`installsFormatter` is defined identically in both `MarketplaceBrowse.tsx` (line 101) and `MarketplaceSkillPanel.tsx` (line 273). Extracting it into a shared constant in `useMarketplace.ts` or a small `marketplaceFormatters.ts` helper would satisfy the OnceAndOnlyOnce principle and prevent the two definitions from drifting apart.

### Issue 2 of 3
packages/ui/src/features/skills/MarketplaceSkillPanel.tsx:292-295
**Preview fetch errors are silently swallowed**

`useMarketplacePreview` returns an `error` field but it is not destructured here. When the preview request fails (network error, invalid skill reference, etc.), `preview` is `undefined`, `files` becomes `[]`, and `selected` is `undefined` — so the UI falls through to "No content to preview". A user has no way to tell whether the content is genuinely absent or whether the fetch failed. Surfacing `error` with a distinct message (e.g. "Failed to load preview") would make failures actionable.

### Issue 3 of 3
packages/ui/src/features/skills/MarketplaceSkillPanel.tsx:314-317
**Overwrite detection relies on substring-matching a server error message**

The `"already exists"` check on line 315 couples the client to the exact wording of the server error thrown in `skills-marketplace.ts`. If that message is ever reworded or localised, the overwrite confirmation dialog will silently stop appearing and the user will only see a generic "Failed to install skill" toast. Consider using a typed error (e.g. a distinct error `code` field or a custom error class) so the client can respond to the condition structurally rather than by text search.

_{Reviews (1): Last reviewed commit: "feat(skills): skills.sh marketplace brow..." | Re-trigger Greptile}

[k11kirky]

Merge activity

• Jun 12, 11:31 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 12, 11:32 AM UTC: Graphite couldn't merge this pull request because a downstack PR feat(skills): create, edit, and delete user and repo skills #2605 failed to merge.
• Jun 12, 11:54 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 12, 12:21 PM UTC: Graphite rebased this pull request as part of a merge.
• Jun 12, 12:35 PM UTC: @k11kirky merged this pull request with Graphite.