[PR 10] Skill Marketplace UI
- Dominant language
- Rust
- Stars
- 40
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Description
Implement Skill Marketplace UI for discovery, installation, and usage analytics.
## What to implement
Listing and detail pages for skill marketplace under GenAI section.
### Routes
```
src/routes/opsml/genai/marketplace/
├── +page.svelte ← Listing page
├── +page.server.ts ← load: fetch skills, stats, tags
└── [space]/
└── [name]/
├── +page.svelte ← Detail page
└── +page.server.ts ← load: skill metadata + version history
```
### Listing page
- Tool target filter pills: All | Claude Code | Codex | Gemini CLI | GitHub Copilot CLI
- Space multi-select dropdown
- Tag checkboxes (top 10 most-used)
- Search bar + Sort dropdown
- Skill grid (responsive: 1 col mobile, 2 col lg, 3 col 2xl)
- Install button on each card
### Detail page
Two-column layout:
- Main (70%): Overview | SKILL.md | Version History | Dependencies | Usage Analytics
- Right panel (30%, sticky): Install card + Metadata + Weekly chart
### Components to create
- `SkillMarketplaceCard.svelte`
- `ToolTargetFilter.svelte`
- `InstallCommandModal.svelte`
- `InstallPanel.svelte`
- `SkillDetailHeader.svelte`
- `OverviewTab.svelte`
- `SkillMdTab.svelte`
- `VersionHistoryTab.svelte`
- `DependenciesTab.svelte`
- `UsageTab.svelte`
### Sidebar navigation
Add "Skills" as 5th sub-item under GenAI dropdown in `src/lib/components/nav/Sidebar.svelte`.
Icon: `ShoppingBag` (Phosphor). Route: `/opsml/genai/marketplace`.
### Styling
- Neo-brutalist: hard-offset box shadows, `border-2 border-black`, `rounded-base`
- Dark mode: use scoped CSS with `:global([data-theme='opsml'].theme-dark)`, NO `dark:` prefix
- No `backdrop-blur`, no soft shadows
## Verification
```bash
make dev.both
# Navigate to /opsml/genai/marketplace/
# Verify: listing loads, search works, tool filter works, install command copies to clipboard
# Dark mode: correct colors and styling
```
## Depends on
- #352 (PR 3.5)
## Blocks
- #360 (PR 11)
Contributor guide
Research direction
Start with the route files under src/routes/opsml/genai/marketplace/ and the existing navigation in src/lib/components/nav/Sidebar.svelte, then review the listed marketplace component requirements and dependency on #352. Run make dev.both and verify listing and detail pages, search, tool filtering, clipboard installation, responsive styling, and dark mode at /opsml/genai/marketplace/.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 38/100