trunative 1.0.0

package/src/skills/references/motion-tokens.md

@@ -0,0 +1,89 @@
+# Motion tokens and APIs
+
+Lookup only. The rules live in `heuristics/motion.md`. Open this file for a specific token, value or API name, not as background reading.
+
+## Material durations
+
+Sixteen tokens, reached as `?attr/motionDuration<Name>` or through `MotionUtils.resolveThemeDuration`. Available from the Material components library 1.6.0.
+
+| Token | Value | Token | Value |
+|---|---|---|---|
+| Short1 | 50ms | Long1 | 450ms |
+| Short2 | 100ms | Long2 | 500ms |
+| Short3 | 150ms | Long3 | 550ms |
+| Short4 | 200ms | Long4 | 600ms |
+| Medium1 | 250ms | ExtraLong1 | 700ms |
+| Medium2 | 300ms | ExtraLong2 | 800ms |
+| Medium3 | 350ms | ExtraLong3 | 900ms |
+| Medium4 | 400ms | ExtraLong4 | 1000ms |
+
+The rule attached to the table: duration rises as the area covered or the distance travelled rises. A chip's tint and a full screen cover do not share a number.
+
+## Material easing
+
+Seven tokens, reached as `?attr/motionEasing<Name>Interpolator`. Emphasized is the styled set, standard the utility set.
+
+| Token | Curve |
+|---|---|
+| Standard | `cubic-bezier(0.2, 0, 0, 1)` |
+| StandardDecelerate | `cubic-bezier(0, 0, 0, 1)` |
+| StandardAccelerate | `cubic-bezier(0.3, 0, 1, 1)` |
+| Emphasized | path `M 0,0 C 0.05,0 0.133333,0.06 0.166666,0.4 C 0.208333,0.82 0.25,1 1,1` |
+| EmphasizedDecelerate | `cubic-bezier(0.05, 0.7, 0.1, 1)` |
+| EmphasizedAccelerate | `cubic-bezier(0.3, 0, 0.8, 0.15)` |
+| Linear | `cubic-bezier(0, 0, 1, 1)` |
+
+## Material springs
+
+Three speeds by two kinds. Fast is for a small component such as a switch, slow for a full screen transition, default for everything in between. Spatial springs move a thing (position, size, shape) and are allowed to overshoot; effects springs carry color and opacity, where overshoot is a defect.
+
+Standard scheme. These are the six Views theme attributes (`?attr/motionSpring<Speed><Kind>`, library 1.13.0 and up) and the Compose `StandardMotionTokens`, at identical values.
+
+| Spec | Damping | Stiffness |
+|---|---|---|
+| fast spatial | 0.9 | 1400 |
+| fast effects | 1.0 | 3800 |
+| default spatial | 0.9 | 700 |
+| default effects | 1.0 | 1600 |
+| slow spatial | 0.9 | 300 |
+| slow effects | 1.0 | 800 |
+
+Expressive scheme, Compose only. The Views theme does not publish these, so a rule that says "use the expressive spring" is not implementable from XML attributes alone.
+
+| Spec | Damping | Stiffness |
+|---|---|---|
+| fast spatial | 0.6 | 800 |
+| fast effects | 1.0 | 3800 |
+| default spatial | 0.8 | 380 |
+| default effects | 1.0 | 1600 |
+| slow spatial | 0.8 | 200 |
+| slow effects | 1.0 | 800 |
+
+In Compose the scheme is a theme value, not a per-animation choice: `MaterialTheme.motionScheme`, holding `MotionScheme.standard()` or `MotionScheme.expressive()`, exposing `defaultSpatialSpec()`, `fastSpatialSpec()`, `slowSpatialSpec()` and the three effects equivalents, and no duration or easing at all. `MaterialExpressiveTheme` defaults the scheme to `expressive()`.
+
+Compose spring constants outside Material: `Spring.DampingRatioNoBouncy` 1.0, `LowBouncy` 0.75, `MediumBouncy` 0.5, `HighBouncy` 0.2; `Spring.StiffnessVeryLow` 50, `StiffnessLow` 200, `StiffnessMediumLow` 400, `StiffnessMedium` 1500, which is what a bare `spring()` uses.
+
+## Where motion lives per stack
+
+| Stack | Animate | Continuity across screens |
+|---|---|---|
+| SwiftUI | `withAnimation`, `.animation(_:value:)`, `Animation.spring(response:dampingFraction:)` | `.navigationTransition(.zoom(sourceID:in:))` with `.matchedTransitionSource(id:in:)`, iOS 18; `matchedGeometryEffect` before that |
+| UIKit | `UIView.animate(springDuration:bounce:)`, iOS 17; `UIViewPropertyAnimator` | `preferredTransition = .zoom(options:sourceViewProvider:)`, iOS 18 |
+| Compose | `animate*AsState`, `AnimatedVisibility`, `AnimatedContent`, `Crossfade` | `SharedTransitionLayout` with `Modifier.sharedElement` or `sharedBounds` |
+| Views | `SpringAnimation` and `SpringForce` from dynamicanimation | `com.google.android.material.transition`: container transform, shared axis, fade through, fade |
+| Flutter | implicit `Animated*` widgets, `AnimationController`, `TweenAnimationBuilder` | `Hero`, `PageRouteBuilder` |
+| React Native | Reanimated worklets; `Animated` with `useNativeDriver: true` | `react-navigation` presets, `react-native-screens` |
+| Mobile web | CSS transitions and keyframes, Web Animations API | View Transitions where supported |
+
+## Reduced motion flags per stack
+
+| Stack | Read |
+|---|---|
+| SwiftUI | `@Environment(\.accessibilityReduceMotion)` |
+| UIKit | `UIAccessibility.isReduceMotionEnabled`, plus `prefersCrossFadeTransitions` before substituting a cross fade; `reduceMotionStatusDidChangeNotification` to react to a change |
+| Android | no single API on phones: `ValueAnimator.areAnimatorsEnabled()` from API 26, or `Settings.Global.ANIMATOR_DURATION_SCALE` and `TRANSITION_ANIMATION_SCALE`. `LocalReduceMotion` exists only on Wear |
+| Flutter | both of `MediaQuery.disableAnimationsOf(context)` and `AccessibilityFeatures.reduceMotion`, because the first carries Android and the second carries iOS |
+| React Native | `AccessibilityInfo.isReduceMotionEnabled()`, and the `reduceMotionChanged` event; on Android it tracks the transition animation scale |
+| Mobile web | `@media (prefers-reduced-motion: reduce)`, equivalent to the bare `@media (prefers-reduced-motion)` |
+
+The user-facing names differ. On iOS the setting is Reduce Motion, with Prefer Cross-Fade Transitions beside it. On Android it is Remove animations, under Color and motion in Accessibility.

package/src/skills/references/navigation-containers.md

@@ -0,0 +1,51 @@
+# Navigation containers and restoration, per stack
+
+Lookup only. The rules live in `heuristics/navigation.md`. Open this file for one container, one API name or one restoration mechanism, not as background reading.
+
+The concept is portable and the name is not. Pick the row for the relationship, then read the column for the stack in `STACK.md`.
+
+## Containers
+
+| Container | SwiftUI | Jetpack Compose | Flutter | React Native | Mobile web |
+|---|---|---|---|---|---|
+| Pushed screen | `NavigationStack` with `navigationDestination` | `NavHost` with `navController.navigate` | `Navigator.push`, `MaterialPageRoute`, `context.push` on GoRouter | native stack, `navigation.navigate` | History API `pushState`, or the router's push |
+| Top-level destinations | `TabView` with `Tab` | `NavigationBar` over one nested graph per destination | `NavigationBar` in a `Scaffold`, plus `IndexedStack` or a `Navigator` per branch | bottom tab navigator, one stack inside each tab | one route prefix per section |
+| Bottom sheet | `.sheet` with `.presentationDetents` | `ModalBottomSheet` | `showModalBottomSheet` | a sheet library, or a native stack screen with `presentation: 'formSheet'` | `<dialog>` positioned to the bottom edge |
+| Full screen cover | `.fullScreenCover` | a route on the graph, or `Dialog(usePlatformDefaultWidth = false)` | `MaterialPageRoute(fullscreenDialog: true)` | native stack screen with `presentation: 'fullScreenModal'` | a route of its own |
+| Alert or dialog | `.alert`, `.confirmationDialog` | `AlertDialog` | `showDialog` with `AlertDialog` or `CupertinoAlertDialog` | `Alert.alert` | `<dialog>` with `showModal()` |
+
+Bare React Native ships no bottom sheet. Reaching for one means adding a dependency, which is a `STACK.md` decision rather than a detail.
+
+## Back and dismissal
+
+| Need | SwiftUI | Jetpack Compose | Flutter | React Native | Mobile web |
+|---|---|---|---|---|---|
+| Dismiss the current surface | `@Environment(\.dismiss)` | `navController.popBackStack()` | `Navigator.pop` | `navigation.goBack()` | `history.back()` |
+| Intercept back | `.interactiveDismissDisabled`, then present the question yourself | `BackHandler` from `androidx.activity.compose` | `PopScope` with `canPop` and `onPopInvokedWithResult` | `beforeRemove` listener, plus `BackHandler` for the Android button | `popstate` with a pushed sentinel entry |
+| Guard unsaved work | `.interactiveDismissDisabled(hasEdits)` plus a confirmation dialog | `BackHandler(enabled = hasEdits)` | `PopScope(canPop: !hasEdits)` | `beforeRemove` with `e.preventDefault()` | `beforeunload` for the tab, the sentinel for in-app |
+
+Android's back callback is the modern one, not an override of the old back method, which is what keeps the predictive animation the system draws. `touch-gestures` owns that side.
+
+## Deep links
+
+| Stack | Where the route is declared | Where the incoming link is received |
+|---|---|---|
+| SwiftUI | `NavigationPath` rebuilt from the URL | `.onOpenURL`, plus Associated Domains for universal links |
+| Jetpack Compose | `navDeepLink` on the destination | intent filters in the manifest, verified as App Links |
+| Flutter | route patterns on GoRouter or the router delegate | `onGenerateRoute`, or the platform link plugin |
+| React Native | the `linking` config, with `getStateFromPath` for a synthesized stack | `Linking.getInitialURL` for a cold start, the `url` event while running |
+| Mobile web | the URL itself | the router's own resolution |
+
+Two paths to test, always: the app already running, and the app killed. Only the second one builds the stack from nothing, and it is the one that fails.
+
+## State restoration
+
+| Stack | Mechanism | Notes |
+|---|---|---|
+| SwiftUI | `@SceneStorage` for per screen state, plus a codable `NavigationPath` | `@State` does not survive process death |
+| Jetpack Compose | `rememberSaveable`, `SavedStateHandle`, and the nav graph's own saved state | pass `saveState` and `restoreState` when switching top-level destinations, or each switch resets that branch |
+| Flutter | `RestorationMixin` with a `restorationScopeId`, and `RestorableProperty` values | restoration is off until a scope id is set |
+| React Native | persist the navigator state from `onStateChange` and feed it back as `initialState` | gate the first render until the saved state has loaded |
+| Mobile web | `history.state` for the route, `sessionStorage` for the screen | `sessionStorage` clears with the tab |
+
+Restore the place. Refetch the content.

package/src/skills/references/search-controls.md

@@ -0,0 +1,49 @@
+# Search controls
+
+Lookup only. The rules live in `heuristics/search.md`. Open this file for the control name in one stack, not as background reading.
+
+## The control per stack
+
+| Stack | Field and entry point | Expanded state and results |
+|---|---|---|
+| SwiftUI | `.searchable(text:placement:prompt:)`, placement from `SearchFieldPlacement` | `.searchSuggestions`, `.searchCompletion`, `.searchScopes`, `isSearching`, `dismissSearch` |
+| UIKit | `UISearchController` on `navigationItem.searchController` | `searchResultsUpdater`, `automaticallyShowsCancelButton`, `automaticallyShowsScopeBar` |
+| Compose Material 3 | `SearchBar(state:inputField:)` with `rememberSearchBarState`, or `AppBarWithSearch` | `ExpandedFullScreenSearchBar` on a phone; `ExpandedDockedSearchBar` is the tablet form |
+| Android Views | `com.google.android.material.search.SearchBar` inside the app bar | `com.google.android.material.search.SearchView`, holding history, suggestions and results |
+| Flutter Material | `SearchAnchor`, or `SearchAnchor.bar` for the bar plus view together | `suggestionsBuilder`, `SearchController.openView`, full screen by default on mobile |
+| Flutter Cupertino | `CupertinoSearchTextField` | list of your own below it |
+| React Native | `TextInput` with `returnKeyType="search"`, or the navigator's own search header | list of your own below it |
+| Mobile web | `<input type="search">` | list of your own below it |
+
+## Things the stock control already does
+
+- **Clear button.** Present on the iOS search field and on the Material `SearchView`, which shows and hides it with the text. Do not draw a second one.
+- **Focus and keyboard.** The Material `SearchView` raises the keyboard on open by default (`app:autoShowKeyboard`, default true), and the Compose expanded search bar requests focus on first expansion and dismisses the keyboard itself on collapse. On iOS, do not force focus on a surface the user did not open in order to type.
+- **Accessibility.** The Material `SearchView` marks its siblings as unimportant for accessibility while open and restores them on hide. Removing it from the tree while it is still open skips that restore, so call `setModalForAccessibility(false)` by hand in that case.
+- **Predictive back.** Automatic on Android when a `SearchView` is connected to a `SearchBar`.
+
+## Android configuration worth knowing
+
+- Soft input mode for a screen using `SearchBar` with `SearchView` is `adjustNothing`. `adjustResize` resizes the window during the expand and collapse animation, and resizing is not useful to somebody who is searching.
+- `SearchBar` does not accept `android:background`. It extends `Toolbar`, so navigation icon and menu APIs work as usual.
+- Under Material 3 Expressive the `SearchBar` goes inside an `AppBarLayout` themed with `ThemeOverlay.Material3Expressive.AppBarWithSearch`.
+- Recent queries have a platform store in the Views stack: a `SearchRecentSuggestionsProvider` with `setupSuggestions(AUTHORITY, MODE)`, then `saveRecentQuery(query, null)` and `clearHistory()`.
+- Material Search needs `com.google.android.material` 1.8.0 or later.
+
+## Compose API drift
+
+The `SearchBar(inputField, expanded, onExpandedChange, ...)` and `DockedSearchBar(inputField, expanded, ...)` overloads are deprecated, as are the older `query` and `onQueryChange` forms and `TopSearchBar`, which is now `AppBarWithSearch`. Write the `SearchBarState` form with `ExpandedFullScreenSearchBar`.
+
+Full screen expansion also needs the layout to cooperate: no parent may constrain the search bar's size, and the host activity sets `WindowCompat.setDecorFitsSystemWindows(window, false)`.
+
+## Sizes
+
+| Value | Number |
+|---|---|
+| collapsed search bar height, Material | 56dp |
+| full-screen search view header height, Material | 72dp |
+| docked search view header height, Material | 56dp |
+| search field text size, Material Views | 16sp |
+| search bar horizontal and vertical margin, Material Views | 16dp |
+
+There is no platform-standard debounce interval, suggestion count, minimum query length or retention limit for search history. Those four are the project's own numbers, picked once and written into `STACK.md`.

package/src/skills/references/type-scales.md

@@ -0,0 +1,60 @@
+# Type scales
+
+Lookup only. The rules live in `heuristics/typography.md`. Open this file for a specific role, size or weight, not as background reading.
+
+## Material 3
+
+Fifteen baseline roles. Weight is 400 everywhere except title medium, title small and the three labels, which are 500. Nothing in the baseline scale is 600 or 700.
+
+| Role | Size | Line height | Weight | Used for |
+|---|---|---|---|---|
+| displayLarge | 57sp | 64sp | 400 | hero and onboarding text |
+| displayMedium | 45sp | 52sp | 400 | large feature text |
+| displaySmall | 36sp | 44sp | 400 | prominent display |
+| headlineLarge | 32sp | 40sp | 400 | screen titles |
+| headlineMedium | 28sp | 36sp | 400 | section headers |
+| headlineSmall | 24sp | 32sp | 400 | card titles |
+| titleLarge | 22sp | 28sp | 400 | top app bar title |
+| titleMedium | 16sp | 24sp | 500 | tabs, navigation |
+| titleSmall | 14sp | 20sp | 500 | subtitles |
+| bodyLarge | 16sp | 24sp | 400 | primary body text |
+| bodyMedium | 14sp | 20sp | 400 | secondary body text |
+| bodySmall | 12sp | 16sp | 400 | captions |
+| labelLarge | 14sp | 20sp | 500 | buttons, prominent labels |
+| labelMedium | 12sp | 16sp | 500 | chips, smaller labels |
+| labelSmall | 11sp | 16sp | 500 | timestamps, annotations |
+
+Floors: body content does not go below 12sp, labels not below 11sp. Reach these through `MaterialTheme.typography`, never as literal sizes, and always in `sp`.
+
+M3 Expressive adds fifteen *emphasized* styles that run parallel to these, at heavier weights, for selection, actions, headlines and editorial moments. They are a second scale to reach into deliberately, not permission to raise the weight of the first one. Where the project ships a variable face, the same feature set covers the expressive axes (weight, grade, width, optical size); those belong to display and headline, which are short enough to carry them.
+
+## iOS text styles
+
+Sizes at the Large content size, which is the default.
+
+| Style | Size | Line height | Weight |
+|---|---|---|---|
+| largeTitle | 34pt | 41pt | Regular |
+| title1 | 28pt | 34pt | Regular |
+| title2 | 22pt | 28pt | Regular |
+| title3 | 20pt | 25pt | Regular |
+| headline | 17pt | 22pt | Semibold |
+| body | 17pt | 22pt | Regular |
+| callout | 16pt | 21pt | Regular |
+| subheadline | 15pt | 20pt | Regular |
+| footnote | 13pt | 18pt | Regular |
+| caption1 | 12pt | 16pt | Regular |
+| caption2 | 11pt | 13pt | Regular |
+
+Floor is 11pt (`caption2`), body is 17pt. Reach these through the text styles, so Dynamic Type carries them; a custom face is registered against a style with `relativeTo:` or `UIFontMetrics` rather than given a fixed size.
+
+Second-hand tables often print the titles as Bold. They are Regular. The only style that ships semibold is `headline`, and it is the same 17pt as `body`.
+
+Letter spacing is not listed here. It comes from the theme, and a guessed tracking value is worse than no value at all.
+
+## What the two scales agree on
+
+- Large text is not bold text. Both platforms grow the size and leave the weight at the regular end.
+- Weight above regular is reserved for the small roles that label a control: M3 labels and title medium at 500, iOS `headline` at semibold.
+- The floor is 11 in both, and it is for genuinely peripheral text.
+- Line height sits near 1.2 at the display end and near 1.4 to 1.5 at the body end. It is a ratio that widens as the text gets smaller, not a constant.

package/src/skills/references/wireframe-frame.md

@@ -0,0 +1,209 @@
+# Wireframe frame
+
+The skeleton every wireframe copies, so two screens in the same project come out in the same drawing and a reviewer compares structure instead of style. Read it when `flow/spec.md` sends you to render a brief, and copy it rather than reinventing a set of conventions per screen.
+
+## The frame
+
+393 by 852 is the reference phone. The status bar occupies the first 59 points and the home indicator the last 34, and both are drawn as occupied area rather than as margin, because the point of the frame is that content cannot use them.
+
+Everything is greyscale by construction: four greys, one ink, and nothing else. A wireframe that acquires a colour has stopped being a wireframe, and `flow/spec.md` says why.
+
+## The skeleton
+
+Save as `.trunative/screens/<name>.wireframe.html`, one file, no imports, no CDN, no framework.
+
+```html
+<!doctype html>
+<meta charset="utf-8">
+<title>Wireframe</title>
+<style>
+  :root {
+    --ink: #1c1c1e;
+    --mute: #8e8e93;
+    --line: #c7c7cc;
+    --fill: #e5e5ea;
+    --ground: #f2f2f7;
+    --paper: #ffffff;
+  }
+  body {
+    margin: 0;
+    padding: 24px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    background: #d9d9de;
+    font: 15px/1.35 -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ink);
+  }
+  /* The label is a sibling, never a child: the frame clips its own content. */
+  .shot { display: flex; flex-direction: column; gap: 6px; }
+  .label { font-size: 12px; color: #55555a; }
+  .frame {
+    width: 393px;
+    height: 852px;
+    display: flex;
+    flex-direction: column;
+    background: var(--ground);
+    border: 1px solid var(--line);
+    border-radius: 44px;
+    overflow: hidden;
+    position: relative;
+  }
+  .status, .indicator {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mute);
+    font-size: 11px;
+  }
+  .status { height: 59px; }
+  .indicator { height: 34px; }
+  .indicator::after {
+    content: "";
+    width: 140px;
+    height: 5px;
+    border-radius: 3px;
+    background: var(--line);
+  }
+  .content {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .bar {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 44px;
+    font-size: 22px;
+    font-weight: 600;
+  }
+  .bar .spacer { flex: 1; }
+  .row { display: flex; align-items: center; gap: 8px; }
+  .scroller { display: flex; gap: 8px; overflow: hidden; }
+  .chip {
+    flex: none;
+    padding: 7px 14px;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    font-size: 13px;
+    color: var(--mute);
+    white-space: nowrap;
+  }
+  .card {
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-radius: 16px;
+    padding: 12px;
+  }
+  .box {
+    background: var(--fill);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+  }
+  /* A cross means an image nobody has chosen yet. */
+  .image {
+    background:
+      linear-gradient(to top right, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px)),
+      linear-gradient(to bottom right, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px)),
+      var(--fill);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+  }
+  .avatar { width: 56px; height: 56px; border-radius: 50%; }
+  .text { height: 12px; border-radius: 3px; background: var(--fill); }
+  .text.short { width: 40%; }
+  .text.half { width: 55%; }
+  .caption { font-size: 13px; color: var(--mute); }
+  .section { font-size: 17px; font-weight: 600; }
+  .button {
+    height: 48px;
+    border: 1px solid var(--ink);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+  }
+  .tabbar {
+    flex: none;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 64px;
+    margin: 0 16px;
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-radius: 20px;
+    font-size: 11px;
+    color: var(--mute);
+  }
+  .tabbar .on { color: var(--ink); font-weight: 600; }
+</style>
+
+<div class="shot">
+<div class="label">Memories, default</div>
+<div class="frame">
+  <div class="status">status bar</div>
+  <div class="content">
+    <div class="bar">Memories<span class="spacer"></span><span class="caption">menu</span></div>
+    <div class="scroller">
+      <div class="chip">Filter</div>
+      <div class="chip">You (12)</div>
+      <div class="chip">Natalia (20)</div>
+      <div class="chip">Favorites (0)</div>
+    </div>
+    <div class="section">You recently viewed</div>
+    <div class="card">
+      <div class="row">
+        <div class="image" style="width:96px;height:96px"></div>
+        <div class="image" style="width:96px;height:96px"></div>
+        <div class="box" style="width:96px;height:96px"></div>
+      </div>
+      <div class="text half" style="margin-top:12px"></div>
+      <div class="caption" style="margin-top:6px">29 Memories, 2023 to 2025</div>
+    </div>
+    <div class="row">
+      <div class="section">People</div>
+      <span class="spacer" style="flex:1"></span>
+      <div class="caption">View all</div>
+    </div>
+    <div class="row" style="justify-content:space-between">
+      <div class="avatar box"></div>
+      <div class="avatar box"></div>
+      <div class="avatar box"></div>
+      <div class="avatar box"></div>
+      <div class="avatar box"></div>
+    </div>
+    <div class="button">Explore Memories</div>
+  </div>
+  <div class="tabbar">
+    <span>Home</span><span class="on">Memories</span><span>Create</span>
+    <span>Profiles</span><span>Account</span>
+  </div>
+  <div class="indicator"></div>
+</div>
+</div>
+```
+
+## Rules the skeleton encodes
+
+- **The frame clips.** `.content` sets `overflow: hidden`, so anything that does not fit is cut off exactly as it would be on the device. A wireframe that scrolls its own frame hides the collision the render exists to find, which is `layout-fold` and `layout-chrome`.
+- **Fixed chrome is a sibling, not an overlay.** The tab bar sits outside `.content`. When a real screen pins something over the content instead, draw it over, and then check what it covers at the end of the scroll.
+- **Real strings only.** Type the words the screen will actually show, including the longest name and the largest count. Lorem text passes every layout and proves none, which is `copy-budget` and `copy-sample-data`.
+- **A cross means an unchosen image**, a plain `.box` means a deliberate empty slot such as an add tile, and neither ever becomes a photograph.
+- **One frame per structurally different state.** Put a second `.shot` beside the first and set its `.label`. They sit side by side on one page, which is how a reviewer sees them in a single capture.
+
+## Rendering
+
+```sh
+chrome --headless --window-size=393,852 --screenshot=wireframe.png .trunative/screens/<name>.wireframe.html
+```
+
+Widen `--window-size` by 440 for every frame past the first, so two frames want about 900 and three about 1340. A window that is a few points short wraps the last frame below the fold and it is missing from the capture with no error, so count the frames rather than guessing the width. Any Chromium binary works, `chromium` and `msedge` included. When none is installed, open the file in whatever browser is and capture it by hand: the HTML is the artefact, and the PNG is a view of it that nothing else depends on.