---
path: /studio/skills
surface: studio
domain: studio
auth: signed-in
source: apps/oshun/web/src/app/studio/skills/page.tsx
status: walked
last_walked:
  '2026-07-16 source and existing pipeline/quality/marketplace mobile Playwright
  coverage reviewed'
---

# Studio skill system

## Purpose

Three-view Studio surface for understanding a cross-domain skill pipeline,
reviewing quality trends, and discovering published skills. The route derives
the content-creation graph from `@oshun/skill-system`; execution status,
quality, and marketplace listings are curated client fixtures rather than live
control plane state.

## Entry points

- Direct authenticated route `/studio/skills`.
- Canonical metadata points to the same route.

## Layout regions

- **Header navigation**: Pipeline, Quality, and Marketplace views.
- **Pipeline**: name/description, running status, summary, directed node list,
  connecting edges, and selected-node contract inspector.
- **Quality**: exact aggregate score, seven-point trend, operational metrics,
  and per-skill quality rows.
- **Marketplace**: search field and published-skill results with domain,
  description, quality, and install count.

## States

- [x] **Pipeline populated** — graph comes from the content-creation template.
- [x] **Selected node** — inspector follows pointer or keyboard selection.
- [x] **Marketplace filtered** — search narrows by id, domain, or description.
- [ ] **Marketplace empty** — an empty result currently leaves blank space with
      no explicit “no matching skills” message.
- [x] **Mobile** — all views remain usable at 390 × 844.
- [x] **Read-only specimen** — no network loading, error, or offline state
      exists.

## Interactions

- [x] **View navigation** swaps Pipeline, Quality, and Marketplace with pressed
      state.
- [x] **Pipeline node** is a keyboard-selectable list item; selection updates an
      `aria-live` inspector.
- [x] **Search skills** filters the local listings immediately.
- [ ] **View skill** buttons have no handler and must not be read as functional
      navigation until a detail destination is wired.

## Data & contracts

- **Reads**: `PIPELINE_TEMPLATES['content-creation']` and `pipelineGraph` from
  `@oshun/skill-system`; local `STATUS`, `QUALITY`, and `MARKETPLACE` fixtures.
- **Writes / persistence / realtime**: none.
- **Visualization**: the pipeline encodes order with numbered nodes and edges;
  quality uses exact text plus bar length and an accessible trend label.

## Cross-references

- Workspace:
  `apps/oshun/web/src/components/studio/skills/SkillSystemWorkspace.tsx`
- Browser coverage: `apps/oshun/web/e2e/skill-system-workspace.spec.ts`
- Unit coverage:
  `apps/oshun/web/src/components/__tests__/SkillSystemWorkspace.test.tsx`
- Package: `libs/oshun/skill-system/`

## Open questions / known gaps

- [ ] Wire marketplace detail navigation or replace the inert “View skill”
      buttons with honest non-interactive labels.
- [ ] Replace the “Running,” quality, and install fixtures with timestamped live
      data before presenting this as an operational control surface.