Write a skill on a screen of its own, and come back to lists where you left them

.claude/skills/openbot-screen-layout/SKILL.md

@@ -64,7 +64,7 @@ components above; a screen that sets its own is drifting.
 
 | Between | Gap | Where it lives |
 |---------|-----|----------------|
-| Page edge (top / sides / bottom) | 48 / 16 / 64px | `PageShell` column (`pt-12` or `pt-8` under the bar, `px-4`, `pb-16`) |
+| Page edge (top / sides / bottom) | 48 / 16 / 64px | `PageShell` column (`pt-12`, or `pt-22` under the bar: its 56px plus 32px, `px-4`, `pb-16`) |
 | Title → description | 8px | `PageShell` header |
 | Title block → first content | 32px | `PageShell`: `[&>header+*]:mt-8` |
 | Title → tabs, tabs → content | 24px, then 32px | `PageShell`: `[&>header+nav]`, `[&>header+nav+*]` |
@@ -96,7 +96,8 @@ the action is right there. A search with no results uses `IconSearch` and "No ma
 
 1. Open with `PageShell`, giving it `title` and `description`. Leave `width` alone.
 2. On a detail screen reached from a list, pass `backButton={{ label, linkProps }}` — it draws a
-   chevron-left bar above the header. Do not put a Back button in `action`; `action` is for the
+   chevron-left button floating in the pane's top-left corner, only as wide as itself, so the page
+   scrolls under it rather than under a full-width band. Do not put a Back button in `action`; `action` is for the
    page's one primary verb, on the title's baseline.
 3. Group the page's decisions into `PageSection`s, each with a `title` and, where the grouping is not
    self-evident, a `description`.

CHANGELOG.md

@@ -78,6 +78,15 @@ Newest first. `Unreleased` is what is on `main` and not yet tagged.
   `COMPUTER_MEMORY_HIGH_PERCENT=0` and `COMPUTER_TAB_IDLE_MS=0` (Helm: `computers.memoryHighPercent`
   and `computers.tabIdleMs`) keep the old behaviour.
 
+### Writing a skill is a screen of its own, and lists keep their place
+
+New skill and each skill's page open as screens instead of dialogs, laid out a section at a time:
+details, instructions, tools, the Bots it is on, and on an existing skill, Delete. Tools are picked
+one app at a time, and a new skill can be put on Bots before it is created. Each skill in the list
+is a card that opens it and shows how many Bots it is on and how many tools it needs. Coming back
+from any detail screen returns a list to where it was scrolled, and the back button no longer
+covers the top of the page.
+
 ### A computer closes browsers nobody is using when its memory runs high
 
 A computer runs one browser for each Bot that is browsing, and the only limits were a count and half

app/src/components/layout/page-parts.tsx

@@ -28,6 +28,9 @@ export type ShellWidth = "prose" | "full";
  * bar needs the router, so `PageShell` draws it and passes `bar` to say whether it did; this file
  * imports nothing from the router so the extension can render the same column.
  */
+/** The name the router restores a page's scroll position by. See `router.tsx`. */
+export const PAGE_SCROLLER = "page";
+
 export function PageColumn({
   bar,
   children,
@@ -58,7 +61,10 @@ export function PageColumn({
        * Separate from the centred column below so the scrollbar rides the pane's edge instead of
        * appearing inside the measure with content either side of it.
        */}
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div
+        className="min-h-0 flex-1 overflow-y-auto"
+        data-scroll-restoration-id={PAGE_SCROLLER}
+      >
         <div
           className={cn(
             /*
@@ -72,8 +78,9 @@ export function PageColumn({
              */
             "mx-auto flex w-full flex-col px-4 pb-16",
             "[&>header+*]:mt-8 [&>header+nav]:mt-6 [&>header+nav+*]:mt-8",
-            // Without a bar above it the heading keeps the full original space.
-            bar ? "pt-8" : "pt-12",
+            // Under the bar: its 56px, then the 32px the heading keeps below it. Without one, the
+            // heading keeps the full original space.
+            bar ? "pt-22" : "pt-12",
             "max-w-3xl",
             className,
           )}

app/src/components/layout/page-shell.tsx

@@ -66,7 +66,7 @@ export function PageShell({
   );
 
   const barRow = bar ? (
-    <div className="max-w-7xl w-full h-14 flex items-center gap-1 px-3">
+    <div className="flex h-14 items-center gap-1 px-3">
       {showToggle ? <SidebarToggle /> : null}
       {!!backButton && (
         <Button
@@ -99,13 +99,21 @@ export function PageShell({
   }
 
   return (
-    <>
-      {barRow}
+    /*
+     * The bar floats over the scroller's top-left corner, only as wide as its buttons, rather than
+     * taking a band across the whole pane. As a band it cut 56px off the top of every scrolled page
+     * for a control that sits beside the centred column, not above it; the column starts the same
+     * distance down, through its own padding, so nothing moves until the page is scrolled.
+     */
+    <div className="relative flex min-h-0 flex-1 flex-col">
+      {barRow ? (
+        <div className="absolute top-0 left-0 z-10">{barRow}</div>
+      ) : null}
       <PageColumn bar={bar} className={className}>
         {header}
         {children}
       </PageColumn>
-    </>
+    </div>
   );
 }
 

app/src/components/skills/proposed-skill.tsx

@@ -194,8 +194,8 @@ function PutItOnABot({ slug }: { slug: string }) {
   return (
     <Link
       className="mt-2 inline-block text-sm underline underline-offset-4"
-      search={{ edit: slug }}
-      to="/capabilities/skills"
+      params={{ slug }}
+      to="/capabilities/skills/$slug"
     >
       Put it on a Bot
     </Link>