Skip to content

feat(skills): align skill cards with registry design and add local build detail page#2020

Merged
samuv merged 8 commits intomainfrom
local-build-detail
Apr 16, 2026
Merged

feat(skills): align skill cards with registry design and add local build detail page#2020
samuv merged 8 commits intomainfrom
local-build-detail

Conversation

@samuv
Copy link
Copy Markdown
Collaborator

@samuv samuv commented Apr 16, 2026

The skills feature had three card variants with inconsistent layouts and no detail page for local builds. This PR aligns the visual design across all skill cards and adds a navigable detail page for local builds.

  • Extract CardSkillBase as a shared card shell for all skill card variants (installed, registry, local builds), matching the layout and interaction pattern of the MCP registry cards — clickable title with overlay, consistent hover/focus rings, optional subtitle, description, badges, and footer slots
  • Refactor CardRegistrySkill, CardSkill, and CardBuild to use CardSkillBase; card clicks navigate to detail pages, footer actions use stopPropagation
  • Extract SkillDetailLayout as a shared two-column detail layout (header + Summary + right panel) reused by both the registry skill detail and the new build detail page
  • Add backSearch prop to RegistryDetailHeader so skills can navigate back to the correct tab
  • Add local build detail page at /skills/builds/$tag with version/tag/digest metadata, Install + Remove actions, and the Skill.md placeholder panel; encode tag param to handle slashes safely
  • Redirect to the builds list after successfully removing a build from its detail page
  • Align all card action buttons (Install, Uninstall, Remove) to secondary + rounded-full per the Figma design
Kapture.2026-04-16.at.16.17.02.mp4

@samuv samuv self-assigned this Apr 16, 2026
Copilot AI review requested due to automatic review settings April 16, 2026 14:15
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Aligns the Skills UI with the registry card/design patterns by introducing shared card and detail-page layout primitives, and adds a navigable detail page for local builds (/skills/builds/$tag).

Changes:

  • Added a local build detail route/page and wired navigation to it from build cards (with encoded tag params).
  • Extracted shared UI primitives (CardSkillBase, SkillDetailLayout) and refactored existing skill/build/registry cards and the registry skill detail page to use them.
  • Extended RegistryDetailHeader to support backSearch so “Back” navigation can preserve the correct tab.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
renderer/src/routes/skills_.builds.$tag.tsx New route for local build details; fetches builds list and renders BuildDetailPage or not-found state.
renderer/src/route-tree.gen.ts Generated route-tree update to include /skills/builds/$tag.
renderer/src/features/skills/components/skill-detail-page.tsx Refactors registry skill detail page to use shared SkillDetailLayout.
renderer/src/features/skills/components/skill-detail-layout.tsx New shared two-column detail layout built on RegistryDetailHeader.
renderer/src/features/skills/components/dialog-delete-build.tsx Adds optional onSuccess callback after successful deletion.
renderer/src/features/skills/components/card-skill.tsx Refactors installed-skill card to use CardSkillBase and stopPropagation for footer actions.
renderer/src/features/skills/components/card-skill-base.tsx New shared card shell used by skill/build/registry cards.
renderer/src/features/skills/components/card-registry-skill.tsx Refactors registry skill card to use CardSkillBase and unified footer button styling.
renderer/src/features/skills/components/card-build.tsx Refactors build card to use CardSkillBase and navigates to build detail when tag exists.
renderer/src/features/skills/components/build-detail-page.tsx New build detail page using SkillDetailLayout with metadata badges and actions.
renderer/src/features/skills/components/tests/card-build.test.tsx Updates assertions to reflect new card content formatting (description + digest).
renderer/src/features/registry-servers/components/registry-detail-header.tsx Adds backSearch prop and passes it through to the back link.

Comment thread renderer/src/features/skills/components/card-skill-base.tsx
Comment thread renderer/src/routes/skills_.builds.$tag.tsx Outdated
@github-actions github-actions Bot added size/XL and removed size/L labels Apr 16, 2026
@samuv samuv merged commit 835e672 into main Apr 16, 2026
28 of 30 checks passed
@samuv samuv deleted the local-build-detail branch April 16, 2026 16:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants