V1 Web PWA · Surface walkthrough

Studio skill system

A per-surface walkthrough of the V1 Web PWA studio surface: layout, states, interactions, data, and cross-references.

walked
8sections2 minread
Markdown source
On this page

Context. surface studio · domain studio · route /studio/skills · auth signed-in · source apps/oshun/web/src/app/studio/skills/page.tsx

Last walked. 2026-07-16 source and existing pipeline/quality/marketplace mobile Playwright coverage reviewed

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#

  • Pipeline populated — graph comes from the content-creation template.
  • Selected node — inspector follows pointer or keyboard selection.
  • 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.
  • Mobile — all views remain usable at 390 × 844.
  • Read-only specimen — no network loading, error, or offline state exists.

Interactions#

  • View navigation swaps Pipeline, Quality, and Marketplace with pressed state.
  • Pipeline node is a keyboard-selectable list item; selection updates an aria-live inspector.
  • 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.