mycoui-development-and-visual-identitylisted

Procedures for building, maintaining, and extending Myco's React daemon UI: the v7 component-composition system (AccentSurface/Panel primitives, page-wide selection state, master-detail and slideout layouts), the Grove-owned appearance system (6 themes, light/dark/system mode, three-role fonts, density), project-scoped request context, auth-gated attachments, and the Team Host degraded-presentation family for attached (hosted) projects. Use when building or troubleshooting UI components, extending the theme/appearance system, wiring project-scoped data, or presenting attached-project degradation, even if the user doesn't explicitly ask for UI development guidance.
goondocks-co/myco · ★ 13 · Web & Frontend · score 79

Install: claude install-skill goondocks-co/myco

# UI Development and Visual Identity System The daemon UI lives in `packages/myco/ui/` (Vite + React + Tailwind, react-router). It is built on the v7 "Tactile Research" design system: a 6-theme appearance model and a small set of composition primitives under `packages/myco/ui/src/components/ui/`. Build new surfaces by composing those primitives — do not reinvent card chrome, loading gates, or layout shells. ## Prerequisites - A running daemon (the UI reads/writes through its HTTP API). - Node.js with npm workspaces; the UI is its own workspace under `packages/myco/ui`. - Familiarity with `packages/myco/ui/src/components/ui/` (primitives) and `packages/myco/ui/src/hooks/` (data hooks over `usePowerQuery`). ## Procedure A: Component Composition (v7 primitives) Every card/panel derives from **`AccentSurface`** (`components/ui/accent-surface.tsx`) — the v7 signature chrome (2px coloured top stripe, `surface-container-low` bg, `outline-variant` border, 12px radius). Its `accent` is `sage | ochre | terra | outline`. **`Panel`** (`components/ui/panel.tsx`) wraps `AccentSurface` with a standard `eyebrow`/`title`/`actions`/`footer` header and a `tone` (`sage | ochre | terra`). Other primitives in `components/ui/`: `Surface`, `PageContainer`, `PageHeader`, `SectionHeader`, `Eyebrow`/`IconEyebrow`, `DefRow`, `Badge`, `StatCard`/`MetricCard`, `SlideoutDetailPanel`, `MasterDetailSplit`, `Pagination`, `PageLoading`, and the status pills (`daemon-status-pill`, `cortex-status-pill`,