demml / demml/opsml

[PR 10] Skill Marketplace UI

Open
#359 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.