Estimate: 22m · Depends on: 1.0.5.2, 1.0.5.3
Produce viewable mockups of the app shell across its three breakpoints + two interaction states, BEFORE any production React lands. Per Principle #13: design-before-code within every Story. The shell is the chrome every Epic-2-through-7 surface renders inside, so getting the IA + visual density right here pays back across the entire build.
Why mockups instead of straight-to-code: the existing (authed)/_components/TopNav.tsx carries a comment that says "Story 1.5 will move project nav into a left sidebar, at which point the top-nav project switcher is demoted or retired" — but the exact division (what stays in top-nav vs. moves to sidebar, what the collapsed-sidebar shape is, how the mobile drawer animates in) was never pinned. The mockup is where that gets pinned, with the design-system primitives (Button, Card, Tooltip, Popover) composed visually so the code Subtask can compose the same primitives in code. Mockup also reveals whether the cmd-k palette fits the existing Dialog primitive (it should) or needs a new wrapper.
What you'll do: Open @pencil.dev/cli (per feedback_pencil_cli_for_design_subtasks — the desktop MCP has no save()). Compose with canonical primitives only — Button, Input, Card, Avatar, Badge, Popover, Dialog from components/ui/. Lay out:
/design/shell/desktop.pen): top-nav (workspace switcher · theme toggle · cmd-k trigger · user menu) + left sidebar (project switcher in sidebar header · "Issues" · "Boards" · "Reports" · divider · "Settings" · "Docs" · footer collapse-toggle) + main panel with the dashboard surface. ~240px sidebar width; main panel uses the existing max-w-6xl mx-auto px-4 sm:px-6 container — sidebar is OUTSIDE the container so it pins to viewport edge./design/shell/desktop-collapsed.pen): sidebar narrows to ~56px, icon-only, with tooltips on hover that show the full label. Same content, same order. The toggle in the sidebar footer (chevron-double-left ↔ chevron-double-right) drives this state; preference is persisted in localStorage./design/shell/mobile-drawer.pen): viewport < md (768px). Top-nav adds a hamburger button on the left. Sidebar becomes an off-canvas drawer that slides in from the left with a scrim behind. Drawer header shows the project switcher; drawer body shows the same nav as desktop. Drawer closes via scrim click, escape key, or hamburger./design/shell/cmd-k.pen): centered Dialog ~640px wide, search input at top, grouped action list below (Navigation / Workspace / Project / Account). Selected row highlighted, kbd hint chips on the right for shortcut keys, footer hint strip ("↑↓ to navigate, ↵ to select, esc to close"). Show with an empty query (all actions visible, grouped) AND with the query "iss" (filtered to "Go to Issues" + "Switch workspace if its name contains 'iss'")./design/shell/shortcuts.pen): a Dialog opened by pressing ?, listing every shortcut the shell registers — ⌘K (palette), ⌘\ (toggle sidebar), ? (this dialog), g→i / g→b / g→r (g-prefix go-to navigation, Linear convention), esc, etc. Two columns: shortcut chip on the left, action label on the right.Brand-mark deferral (MOTIR.md): no wordmark / logomark anywhere in these mockups. The top-nav left edge sits empty where a logo would otherwise live; do not invent placeholder branding (mistake #19 + #26). Save .pen sources AND PNG exports for each surface.
.pen files exist under /design/shell/ with PNG exports alongside (desktop, desktop-collapsed, mobile-drawer, cmd-k, shortcuts)./docs/design-system.md — canonical visual reference/components/ui/Button.tsx, Card.tsx, Dialog.tsx, Popover.tsx, Tooltip.tsx — primitives to compose from/design/projects/*.pen from Subtask 1.3.3 — switcher visual grammar/design/work-items/*.pen from Subtask 1.4.1 — the surfaces this shell will host