feat(skills): add skill details view page

[bmahabirbu]

Summary

• Add a skill details view page with three tabs: Summary, Instructions, and Resources
• Make skill names clickable in the skills list table to navigate to the details view
• Wire up navigation via SKILL_DETAILS enum in NavigationPage and routing in App.svelte

Fixes #1043

Test plan

• Click a skill name in the Skills list to verify navigation to the details page
• Verify Summary tab displays skill name, type, status, path, description, and resource count
• Verify Instructions tab renders the SKILL.md content
• Verify Resources tab lists bundled files from the skill folder
• Verify enable/disable toggle and delete action work from the details page
• Verify breadcrumb navigation returns to the Skills list
• Verify close button returns to the Skills list

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 391c6976-49a5-4670-83ad-8fb93a1cc83c

📥 Commits

Reviewing files that changed from the base of the PR and between b857e27 and da2e4d3.

📒 Files selected for processing (1)

• packages/renderer/src/lib/skills/SkillDetails.svelte

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/renderer/src/lib/skills/SkillDetails.svelte

---

📝 Walkthrough

Walkthrough

Adds a Skill Details feature: new navigation target SKILL_DETAILS, typed parameters, route wiring in the renderer, a clickable skill name to navigate, and a new SkillDetails.svelte component that loads instructions and bundled resources and exposes enable/disable actions.

Changes

Cohort / File(s)	Summary
Navigation API packages/api/src/navigation-page.ts, packages/api/src/navigation-request.ts	Added NavigationPage.SKILL_DETAILS = 'skill-details' and typed its parameters as { name: string }.
Navigation Handler packages/renderer/src/navigation.ts	Handled NavigationPage.SKILL_DETAILS to route to /skills/${encodeURIComponent(name)}/summary.
Routing & App packages/renderer/src/App.svelte	Registered nested route /:name/* under skills that renders SkillDetails and passes name={decodeURIComponent(meta.params.name)}.
Skill Details UI packages/renderer/src/lib/skills/SkillDetails.svelte	New component (prop name: string) that fetches getSkillContent and listSkillFolderContent on mount, shows Summary/Instructions/Resources tabs, displays metadata, and provides enable/disable action plus SkillActions integration.
Skill List Interaction packages/renderer/src/lib/skills/columns/SkillNameColumn.svelte	Converted skill name to a clickable button that calls handleNavigation(NavigationPage.SKILL_DETAILS, { name }) to open details.

Sequence Diagram

sequenceDiagram
    actor User
    participant SkillNameColumn
    participant NavigationHandler
    participant Router/App
    participant SkillDetails
    participant WindowAPIs

    User->>SkillNameColumn: click skill name
    SkillNameColumn->>NavigationHandler: handleNavigation(SKILL_DETAILS, {name})
    NavigationHandler->>Router/App: navigate to /skills/{name}/summary
    Router/App->>SkillDetails: mount with name
    SkillDetails->>WindowAPIs: getSkillContent(name)
    SkillDetails->>WindowAPIs: listSkillFolderContent(name)
    WindowAPIs-->>SkillDetails: return content & folder list
    SkillDetails->>User: render tabs (Summary, Instructions, Resources)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(skills): add skill details view page' accurately and concisely summarizes the main change—adding a new skill details view page.
Description check	✅ Passed	The description is directly related to the changeset, providing a summary of the feature, implementation approach, and test plan for the skill details view.
Linked Issues check	✅ Passed	The changes comprehensively implement issue #1043 requirements: dedicated details view, skill metadata display, instructions rendering, bundled resource listing, and enable/disable toggle.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the skill details feature—no out-of-scope modifications detected in the navigation, routing, components, or UI updates.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/renderer/src/lib/skills/SkillDetails.svelte`:
- Around line 27-39: Promise.allSettled(...) is being used but its .catch(...)
is ineffective; change the onMount logic to await the results of
Promise.allSettled([window.getSkillContent(name),
window.listSkillFolderContent(name)]) then iterate the returned results array,
for each result with status "fulfilled" assign its value to the appropriate
variable (skillContent or folderContents) and for each result with status
"rejected" log the error (e.g., via console.error) so failures are visible, and
finally set loading = false after processing results; refer to onMount,
Promise.allSettled, window.getSkillContent, window.listSkillFolderContent,
skillContent, folderContents, and loading to locate and update the code.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 947a872b-c9d2-4eb6-ab94-a4dc6d995d21

📥 Commits

Reviewing files that changed from the base of the PR and between 5e429b2 and b857e27.

📒 Files selected for processing (6)

• packages/api/src/navigation-page.ts
• packages/api/src/navigation-request.ts
• packages/renderer/src/App.svelte
• packages/renderer/src/lib/skills/SkillDetails.svelte
• packages/renderer/src/lib/skills/columns/SkillNameColumn.svelte
• packages/renderer/src/navigation.ts

[codecov]

Codecov Report

❌ Patch coverage is 4.04040% with 95 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ckages/renderer/src/lib/skills/SkillDetails.svelte	0.00%	88 Missing ⚠️
packages/renderer/src/navigation.ts	0.00%	3 Missing ⚠️
packages/renderer/src/App.svelte	0.00%	2 Missing ⚠️
...erer/src/lib/skills/columns/SkillNameColumn.svelte	60.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

[MarsKubeX]

In general LGTM. I've tested in MacOS and found few things:

• In the instructions tab, if the skill content is bigger than the window, there is no scroll.
• Nit: the button icon to remove the skill in the details page has a different styling than the one in the skill list.

[MarsKubeX]

Can you use the Icon component instead of Fa?