mapples 0.2.0-beta.5 → 0.2.0-beta.7

package/templates/claude/skills/mapples-design/reference/layout-contract.md

@@ -0,0 +1,227 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Layout contract — every screen
+
+Ported from the Creator agent's system prompt (`agent/prompt.ts`: `LAYOUT_CONTRACT`,
+`STYLE_MERGE_RULE`, the archetypes, the fonts rule). Vocabulary here is the file's: an element
+is a JSX tag, `style` is `styled.style`, style slots are the other `styled` keys, and design
+tokens are strings.
+
+## Fonts
+
+Typography `fontFamily` values must be bundled family names — `"<Family>-<Weight>"` with
+Family in {Inter, Manrope, DMSans, PlusJakartaSans, Poppins, Nunito, SpaceGrotesk, Sora,
+Outfit, PlayfairDisplay, Fraunces, IBMPlexMono} and Weight in {Regular, Medium, SemiBold, Bold}
+(serifs: Regular/SemiBold/Bold; IBMPlexMono: Regular/Medium) — e.g. `"Manrope-SemiBold"`.
+Never "system", "Helvetica" or any other name: it will not render. Set `fontWeight` to match
+the weight. On screens, fonts apply only through `Typography` variants — never set
+`fontFamily` on an element.
+
+## The contract
+
+- Design for the page's device (default 360×640 "phone"). Everything must fit that width;
+  vertical overflow goes inside a `ScrollView`.
+- The root is a full-size column. Build with `Container` (flex: 1) and `View` (width 100%)
+  columns/rows — never give a layout container a fixed pixel width unless it is a card in a
+  horizontal row. Text elements carry no width; they stretch.
+- Spacing comes from the sizing scale (4/8/12/16/24/32): screen padding 20–24, gap 12–16
+  between controls, 24–32 between groups. Use `gap`, not margins, between siblings. Prefer the
+  token strings (`'sizing.screenPadding'`, `'sizing.gap'`, `'sizing.lg'`).
+- Scroll containers (`ScrollView`, `HorizontalScrollView`, `FlatList`, grids): gap/padding that
+  space the SCROLLING CHILDREN go in the `styled.contentContainerStyle` slot — on `style` they
+  are silently ignored. A horizontal card row is full-bleed with
+  `styled={{ contentContainerStyle: { gap: 12, paddingHorizontal: 20 } }}` so the first card
+  aligns with the screen padding and cards still scroll edge to edge.
+- Hierarchy: one Headline, one supporting Body paragraph (≤ 2 lines of copy on phone),
+  secondary text in `theme.text.secondary`.
+- EVERY piece of text is a `Typography` element with a `variant` (Headline, Subtitle, Body,
+  Caption, Overline, Button, Link, Label, Code) — the project type scale and fonts apply only
+  through variants. NEVER use the raw `Text` type on a screen: it ignores the design tokens and
+  breaks the design system. Colors likewise come from theme tokens, never hardcoded hex.
+- Primary action: exactly one `Button` `{variant: "filled", size: "lg", fullWidth: true}` pinned
+  to the bottom with a parent column using `justifyContent: 'space-between'` and 24–32 of bottom
+  padding — on detail/checkout screens a `BottomActionBar` `{sticky: true}` holds it. Secondary
+  actions are `TextLink` or `Button` `{variant: "text"}` / `{variant: "outlined"}`. Touch
+  targets ≥ 44 high.
+- Hero content (icon/illustration + title + body) is centered with `alignItems: 'center'` and
+  `textAlign: 'center'`; list/detail content is left-aligned.
+- Safe areas: top padding ≥ 48 on the root (or a `SafeAreaView`), bottom ≥ 24.
+- Cards: a `Card` element (variant elevated|filled|outlined; children are the body) or a
+  `MediaCard` for a photo-topped tile — never a hand-styled `View` pretending to be a card.
+  Images: width 100% with an explicit height (160–240) and `borderRadius`.
+- Chrome (chips, pills, badges, breadcrumbs, in-content header rows) is CONTENT-SIZED — never
+  width 100% inside a row or a horizontal scroll. Use the library: `Chip` and `ChipGroup`
+  `{options, value}` for filters and tags, `Badge` for counts and status pills, `Breadcrumbs`
+  `{items}`, `TopAppBar` `{title, showBack, actions}` for an in-content header (only when the
+  stack header is hidden). Stack headers and tab bars are NAVIGATOR options set in Creator
+  (see `playbooks/navigation-chrome.md`), never hand-built elements — `BottomNavigationBar` and
+  `Tabs` are in-content widgets, not a substitute.
+- Depth: the elevation language is a DESIGN-SYSTEM decision — the design instructions state it;
+  follow them exactly, and when they are silent default to RESTRAINT. Shadows are not what makes
+  a design modern: a flat design separated by 1px `theme.neutral.n200` borders or contrasting
+  surface colors is just as shippable. A shadow is only for a surface that genuinely floats or
+  overlaps (a feature card on a contrasting background, a sticky bottom bar, a sheet, a FAB) —
+  and then barely-there: `boxShadow` is an OBJECT `{ x: 0, y: 6, radius: 20, color:
+  'rgba(16,24,40,0.08)' }` (alpha ≤ 0.12, blur ≥ 3× offset, NEVER a CSS string), paired with the
+  surface's `borderRadius`. NEVER shadow TextInputs, chips/pills, or rows inside a card — inputs
+  separate with a border or a tinted fill. At most one elevation level per screen; if everything
+  is elevated, nothing is.
+- Corners may differ per edge (`borderTopLeftRadius`, `borderTopRightRadius`,
+  `borderBottomLeftRadius`, `borderBottomRightRadius`): bottom sheets round only their top
+  corners, edge-to-edge heroes only their bottom corners (20–28). Use `opacity` (0.4–0.6) for
+  disabled/pressed looks.
+- Gradient accent: at most ONE gradient surface per screen (hero band, promo card, or the
+  primary CTA) — a `GradientBackground` container with
+  `gradient={{ type: 'linear', stops: [{ color: '#7C6AE6', position: 0 }, { color: '#4C3BB8', position: 1 }], start: { x: 0, y: 0 }, end: { x: 1, y: 1 } }}`.
+  Stop colors MUST be literal hex/rgba — theme tokens do NOT resolve inside gradients (the
+  gradient silently disappears); pick hexes from the theme's own hues, and make sure text on the
+  gradient still contrasts if the gradient failed to render (`backgroundColor` fallback on the
+  same node). An accent, never wallpaper.
+- Contrast: text on primary uses `theme.primary.contrast`; never grey-on-grey below
+  `text.secondary`.
+- Imagery is REQUIRED for hero, featured-card, detail and list-thumb slots — a tinted box there
+  is a wireframe, not a design. Use a topic-matched placeholder photo:
+  `source="https://picsum.photos/seed/<topic-word>/<width>/<height>"` on `Image`,
+  `ImageBackgroundView` and `MediaCard` (same seed = same photo, so reuse one seed per subject).
+  Never invent Creator asset refs. Icon-scale spots (avatars, list icons) stay tinted
+  circles/squares holding an `Icon` element — never a tiny photo, never a sourceless `Image`.
+- NEVER use emoji — not in copy, not in headlines, not as icons or illustrations. Every
+  pictorial need is an `Icon` element or a photo. Icons color via `styled.styleSvg`
+  `{ color, width, height }`.
+- Icons: `iconName` must be a glyph of the project's icon family (Creator → Project → Settings;
+  ionicons by default: `home-outline`, `search`, `heart`, `chevron-forward`, `add`, `settings-outline`,
+  `person-circle-outline`, `checkmark-circle`, `cart-outline`, `notifications-outline`,
+  `chatbubble-outline`, `close`). An unknown name renders as a broken glyph — when the concept
+  you want is not a name you know, pick the closest common one rather than guessing.
+- Photo card with text (the premium pattern): `ImageBackgroundView` `source=<picsum>` with
+  explicit height 180–260, `borderRadius: 20`, `overflow: 'hidden'` → child `GradientBackground`
+  (flex 1, `justifyContent: 'flex-end'`, padding 16, gradient stops `#00000000` → `#00000099`,
+  top→bottom) → white `Typography` over the scrim.
+
+## Style merge
+
+Each type's defaults come from the component itself — your style MERGES into them. Elements
+you write start from a NEUTRAL base: every element is TRANSPARENT unless you set a
+`backgroundColor` (surfaces — cards, pills, bars — need an explicit theme token; plain text and
+layout containers need none), sized by its content or by flex, and text takes the typography
+document's color unless you set one. Columns still stretch children to full width (React
+Native's `alignItems: 'stretch'`); in rows and horizontal scrolls items size to their content —
+give a container `flex: 1` or an explicit height when it must fill.
+
+## Component library
+
+The themed library (`@mapples/components`) paints itself from the theme — use it FIRST and
+compose primitives (`View`, `Typography`, `Pressable`) only for layouts the library lacks.
+Archetype map: surfaces → `Card` (children are the body) or `MediaCard` (photo tile: source,
+title, subtitle, meta); rows → `List` holding `ListItem` children (leading icon/avatar/photo,
+trailing chevron|text|switch|checkbox); filters and tags → `ChipGroup` / `Chip`; counts and
+status pills → `Badge`; form fields → `InputField`, `SelectField`, `Checkbox`, `RadioGroup`,
+`Switch`, `Slider`, `NumberStepper`, `PinInput` (never a raw `TextInput` in a form); search →
+`SearchBar`; progress and KPIs → `ProgressBar`, `ProgressCircle`, `StatTile`; page dots →
+`PageControl`; multi-step → `Steps`; nothing to show → `EmptyState`; confirmations → `Dialog`;
+pickers and quick details → `BottomSheet` / `ActionSheet`; toasts → `Snackbar`; inline notices →
+`Banner`; section titles → `SectionHeader`; chat → `MessageBubble` + `ChatComposer`; in-content
+header → `TopAppBar` ONLY when the stack header is hidden. `BottomNavigationBar` and `Tabs`
+never stand in for a tabs NAVIGATOR — `Tabs` switches views inside one screen.
+Library defaults live inside the component: change the look through `variant`/`size`/`tone`
+props and the style slots, never by rebuilding a component from Views. Array props (`options`,
+`items`, `columns`) are literal arrays. Overlays (`Dialog`, `BottomSheet`, `ActionSheet`,
+`Snackbar`) go LAST in the page root with `visible={false}` unless the project has a boolean
+variable to bind (`$data={{ visible: { key: 'vars.<name>', active: true } }}`) — an overlay
+left visible with no binding covers the screen forever.
+
+## Screen archetypes (adapt, don't copy)
+
+- Onboarding: 3 screens — hero (gradient circle or edge-to-edge illustration band with
+  bottom-only corner radius 24) + Headline + Body, `PageControl` `{count, value}`, `Button`
+  `{variant "filled", size "lg", fullWidth}`; the last screen has Get started + a `TextLink`
+  "Sign in". One supporting `Card` `{variant "elevated"}` grounds the hero.
+- Auth: logo mark, Headline + one Caption line of warmth, `InputField` email
+  (`keyboardType "email-address"`, `leadingIconName`) and `InputField` password
+  (`secureTextEntry`, `showPasswordToggle`), a right-aligned `TextLink` "Forgot password?",
+  `Button` filled lg fullWidth, a Caption + `TextLink` switch row. Inputs sit in a single `Card`
+  on colored backgrounds.
+- Home (tabs shell): header row (greeting Headline + `Avatar` `{name or source}`), `SearchBar`
+  `{placeholder}`, one featured PHOTO-SCRIM card (pattern above, radius 20) before the content,
+  `SectionHeader` `{title, actionLabel "See all"}` + horizontal rail of `MediaCard`
+  `{source, title, subtitle, meta}` (width 150, gap 12 in contentContainerStyle), then a `List`
+  of `ListItem` rows or a column of MediaCards in a ScrollView.
+- List: a `List` `{variant "plain"|"inset"|"card"}` of `ListItem` rows — leading "image" +
+  `source` (topic-matched placeholder) or leading "icon" + `leadingIconName`, title + subtitle,
+  trailing "chevron" or "text" (price/time). One leading mode per list; the List draws the
+  dividers.
+- Detail: hero PHOTO (`Image` or `ImageBackgroundView`) height 240–280 with bottom-only corner
+  radius — Headline + a meta row of `Chip` `{variant "assist"}` tags and a `Rating`
+  `{readOnly}`, Body, option selectors as `ChipGroup` `{options, value}` rows, a `NumberStepper`
+  for quantity, and a `BottomActionBar` `{sticky}` holding the price (Subtitle) + Button filled lg.
+- Settings: `Avatar` `{size "xl"}` header, then `List` `{variant "inset", header "PREFERENCES"}`
+  groups of `ListItem` rows `{leadingIconName, title, trailing "switch"|"chevron"|"text"}`; the
+  destructive row is a `ListItem` `{tone "error"}` in its own List.
+- Stats: a row of 2–3 `StatTile` `{label, value, unit, trend, trendValue}` (flex 1 each),
+  `ProgressBar` `{value, showLabel}` or `ProgressCircle` `{value, size 72, showLabel}` for goals —
+  never charts faked from Views.
+- Empty state: `EmptyState` `{iconName, title, message, actionLabel}` centred with generous
+  vertical whitespace (top ⅓ empty).
+- Chat: a ScrollView of `MessageBubble` `{text, direction, time, status}` and a `ChatComposer`
+  `{placeholder, leadingIconName "attach-outline"}` pinned to the bottom.
+- Modal sheet: a whole flow presents as a modal ROUTE (set in Creator; note it in `design.md`);
+  a picker or quick detail inside a screen is a `BottomSheet` `{title}` with children; a
+  confirmation is a `Dialog` `{title, message, primaryActionLabel, secondaryActionLabel, tone
+  "error" when destructive}`; a list of actions is an `ActionSheet` `{options}`.
+- Chips, badges, breadcrumbs: `Chip`/`ChipGroup`, `Badge`, `Breadcrumbs` — content-sized library
+  elements; stack headers and tab bars come from navigator options.
+
+## Example — one onboarding screen as a route file
+
+```tsx
+// (the CLI's `// mapples-route:` marker stays on line 1 once the file is synced)
+import { router } from 'expo-router';
+import { Container, GradientBackground, Icon, Typography, View } from '@mapples/ui';
+import { Button, Card, PageControl, TextLink } from '@mapples/components';
+import { Styler } from '@mapples/style';
+
+export default function Welcome() {
+  return (
+    <Container styled={{ style: styles.root }}>
+      <View styled={{ style: styles.topBar }}>
+        <TextLink label="Skip" tone="neutral" underline={false} onPress={() => router.push('/(main)')} />
+      </View>
+      <View styled={{ style: styles.hero }}>
+        <GradientBackground
+          gradient={{ type: 'linear', stops: [{ color: '#7C6AE6', position: 0 }, { color: '#4C3BB8', position: 1 }], start: { x: 0, y: 0 }, end: { x: 1, y: 1 } }}
+          styled={{ style: styles.heroMark }}
+        >
+          <Icon iconName="chatbubble" styled={{ styleSvg: styles.heroGlyph }} />
+        </GradientBackground>
+        <Typography text="Chat like Viver" variant="Headline" styled={{ style: styles.heroTitle }} />
+        <Typography text="Voice, video and messaging in one fast, friendly space." variant="Body" styled={{ style: styles.heroBody }} />
+        <Card variant="elevated" styled={{ style: styles.proofCard }}>
+          <Typography text="End-to-end encrypted" variant="Label" styled={{ style: styles.proofTitle }} />
+          <Typography text="Your calls and chats stay between you." variant="Caption" styled={{ style: styles.proofBody }} />
+        </Card>
+      </View>
+      <View styled={{ style: styles.bottom }}>
+        <PageControl count={3} value={0} variant="bars" />
+        <Button label="Continue" variant="filled" size="lg" fullWidth onPress={() => router.push('/(onboarding)/features')} />
+      </View>
+    </Container>
+  );
+}
+
+const styles = Styler.create({
+  root: { padding: 24, paddingTop: 64, paddingBottom: 32, justifyContent: 'space-between', backgroundColor: 'theme.background.primary' },
+  topBar: { alignItems: 'flex-end' },
+  hero: { alignItems: 'center', gap: 16 },
+  heroMark: { width: 96, height: 96, borderRadius: 48, alignItems: 'center', justifyContent: 'center' },
+  heroGlyph: { width: 44, height: 44, color: '#FFFFFF' },
+  heroTitle: { textAlign: 'center', color: 'theme.text.primary' },
+  heroBody: { textAlign: 'center', color: 'theme.text.secondary', paddingHorizontal: 12 },
+  proofCard: { gap: 4 },
+  proofTitle: { color: 'theme.text.primary' },
+  proofBody: { color: 'theme.text.secondary' },
+  bottom: { gap: 16, alignItems: 'center' },
+});
+```
+
+> Not ported (Creator-only): element ids and `set_element_style`, `capture_page` screenshots
+> (re-read the file against `lint-checklist.md` instead), the storyboard layout, selection
+> chips, `add_placeholder_image` refs (picsum URLs here), `$data` variable creation.

package/templates/claude/skills/mapples-design/reference/lint-checklist.md

@@ -0,0 +1,51 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Review checklist — the layout lint, by hand
+
+Ported from the Creator's `designLint.ts`, which runs on every AI-authored tree before it is
+written. Here you are the lint: after each screen (and in the review pass) re-read the file
+and walk every element against this list. **Error** items must be fixed; **warn** items are
+fixed unless the design instructions justify them.
+
+| # | Rule | Severity | Check | Fix |
+| --- | --- | --- | --- | --- |
+| 1 | full-width-in-row | error | `width: '100%'` on an element inside a row (`flexDirection: 'row'`) or a `HorizontalScrollView` | drop the width (chips, pills, badges size to their content; `alignSelf: 'flex-start'`) or give a fixed width |
+| 2 | unknown-token | error | a `'theme.…'` / `'sizing.…'` string that is not a key of `mapples/theme.ts` | use a real path (`theme.primary.main`, `theme.text.secondary`, `sizing.md`) |
+| 3 | unknown-prop | warn | a prop the type does not have | remove it or use the prop from `component-library.md` |
+| 4 | missing-content-prop | error | a library element without its content prop (`Typography` without `text`, `Button` without `label`, `ListItem` without `title`, `InputField` without `label`/`placeholder`, `EmptyState` without `title`) | set it — otherwise the palette placeholder content ships as the design |
+| 5 | control-without-label-color | warn | `Button`/`SubmitButton` with no `variant` and no `styled.styleTypography.color` | set a `variant` (filled/outlined/text) |
+| 6 | icon-without-color | warn | `Icon` with no `styled.styleSvg.color` | set a theme token |
+| 7 | icon-button-without-label | warn | `IconButton`/`Fab` without `accessibilityLabel` | name the action ("Add to favourites") |
+| 8 | percent-height-in-flow | error | `height: '100%'` on an element sharing a column with siblings | `flex: 1` or a fixed height |
+| 9 | absolute-without-offsets | warn | `position: 'absolute'` without top/left/right/bottom | add offsets or drop the position |
+| 10 | empty-container | warn | a container with no children and no height/minHeight/flex | give it content or a size |
+| 11 | small-touch-target | warn | a control with `height`/`minHeight` < 44 | ≥ 44 |
+| 12 | narrow-text | warn | a `Typography` with a numeric `width` < 120 | drop the width so it stretches |
+| 13 | unknown-icon-glyph | warn | an `iconName` that is not a glyph of the project icon family | pick a common name (`home-outline`, `search`, `chevron-forward`, `add`, …) |
+| 14 | gradient-token-color | warn | a gradient stop using a `theme.`/`sizing.` string | literal hex/rgba stops |
+| 15 | image-without-source | warn | `Image`/`ImageBackgroundView`/`MediaCard` without a `source` | a picsum URL (`https://picsum.photos/seed/<topic>/<w>/<h>`) |
+| 16 | chip-outside-group | warn | a `Chip` directly in a column | put it in a `ChipGroup`, a row or a `HorizontalScrollView` |
+| 17 | overlay-always-visible | warn | `Dialog`/`BottomSheet`/`ActionSheet`/`Snackbar` not `visible={false}` and not bound | `visible={false}` or a `$data` binding to a boolean variable |
+| 18 | raw-text | warn | a `Text` element | `Typography` with a variant |
+| 19 | typography-without-variant | warn | `Typography` with no `variant` | set one (Headline, Body, Caption, …) |
+| 20 | invisible-surface | warn | a container whose `backgroundColor` equals its parent's, with no border or shadow | a contrasting surface color, a 1px `theme.neutral.n200` border, or (only if the elevation language uses them) a soft shadow |
+| 21 | shadow-on-control | warn | `boxShadow` on a flat control (`InputField`, `TextInput`, `Chip`, `Badge`, a `ListItem` inside a card) | remove it; separate with a border or a tinted fill |
+| 22 | scroll-spacing-in-style | warn | `gap`/`padding*` on a scroll container's `style` | move them into `styled.contentContainerStyle` |
+| 23 | unspaced-container | warn | a container with ≥ 2 children and no `gap`/`padding` (and none in `contentContainerStyle`) | `gap` from the sizing scale (12–16) |
+| 24 | literal-color | warn | a hex `backgroundColor`/`color`/`borderColor` outside a gradient or a scrim | a theme token so dark mode and restyles follow |
+
+Then the human pass the Creator does with a screenshot (`capture_page`): read the file top to
+bottom as the phone would draw it — clipping (fixed widths > 360), overflow (tall content not in
+a ScrollView), misalignment (mixed `alignItems`), cramped spacing (gaps < 8 between groups),
+weak hierarchy (two Headlines; no focal point), wrong contrast (grey on grey, white on light),
+grey image boxes (every photo slot has a source), off-topic photo seeds, unreadable text over
+photos (the scrim gradient is there), an emoji anywhere, placeholder copy ("Item 1", "Text").
+
+The squint test: if you blur the screen you should still see WHERE to look first and WHAT is
+tappable. If everything is even grey noise, raise the focal point and quiet the rest.
+
+Finally, `npx -y mapples@__CLI_VERSION__ doctor --json` must show no `duplicate` or `missing` issues, and the last
+`npx -y mapples@__CLI_VERSION__ sync --yes --json` must exit 0 with no `warnings` of kind `UNKNOWN_ELEMENT_WITH_SID`.
+
+> Not ported (Creator-only): `strictProps` per-schematic hint lists, the icon-glyph set and
+> token set validation (both live in the Creator's registry), `aiLint` hints (`selfSpaced`,
+> `selfSurfaced`, `touchTarget`, `overlay`, `flatControl`) — the type lists above stand in.

package/templates/claude/skills/mapples-design/reference/plan.md

@@ -0,0 +1,95 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Implementation plan (phase 3)
+
+Ported from `generate.ts` `generatePlan` and `schemas.ts` `implementationPlanSchema`. Act as a
+senior product engineer planning the MVP build of this mobile app. Inputs: the brief, the
+design instructions (from phase 2) and the scope.
+
+## Scopes
+
+| Scope | Meaning |
+| --- | --- |
+| single | SINGLE SCREEN — a design-quality test bed: exactly ONE section (a stack) holding exactly ONE screen, the app's Home, designed to the highest visual standard — hero/featured content, real copy, depth, imagery placeholders. No auth, no onboarding, no detail screens; decisions record only what was cut. Steps: build the Home screen, then a visual-polish pass, then the review pass. |
+| minimal | MINIMAL — the leanest shippable start: only the screens delivering the core value, plus auth ONLY if the product cannot work without accounts. 3–5 screens. |
+| basic | BASIC — the core value with its supporting screens: main content, detail, settings/profile where they earn their place, auth if needed. 6–9 screens. |
+| advanced | ADVANCED — a near-complete app: every main section, detail screens, profile/settings, onboarding and empty states where they earn their place. 10–14 screens. |
+
+## Decide first
+
+First DECIDE what THIS product actually needs — no habit choices, and record every material
+decision with its product reason:
+
+- Authentication: does it need accounts at all? No accounts → no auth screens.
+- Navigation pattern: plain stack, tabs, or drawer — chosen for the content, not by default.
+- Onboarding: only if it teaches something the first screen cannot.
+- What was deliberately cut at this scope and why.
+
+## Screen set
+
+The GOLDEN PATH comes first — the one flow that proves the product's value end to end (open →
+core content → primary action → payoff); every screen on it exists before any supporting screen
+does. Supporting screens must earn their place: a detail screen only when lists point at it,
+settings only when there is something real to set, profile only when identity matters to this
+product, onboarding only when it teaches what the first screen cannot. At every scope prefer
+fewer screens fully designed over more screens sketched.
+
+Flow integrity — the plan must be walkable on paper: every screen's key elements name where its
+PRIMARY action leads ("Add to order button → Cart"), every screen is reachable from another
+screen or a tab, every flow exits somewhere meaningful (a completed form lands on a success
+state or the content it created, never back on the empty form), and no screen exists that
+nothing links to. The entry screen is the value proof — never settings or profile.
+
+Navigation rules: one root stack; sections are its children (Auth stack, Main tabs…), at most
+two levels. No section for a single screen, no wrapper stacks. Screen names say what the screen
+IS ("Welcome", "Sign in", "Chats"), never numbered. Every screen name is unique across sections;
+exactly one section is `initial`.
+
+## Build steps
+
+Then the ordered build steps. Phase 4 creates the navigation and every screen automatically
+BEFORE step one, so steps never create screens or sections — they design existing empty screens.
+Every step carries `kind` and `screens`: kind **screen** designs one or two screens (their EXACT
+names from the navigation) with concrete content directions (real copy, from the brief) honoring
+the design instructions; kind **wiring** connects the existing screens (list every screen it
+touches) and comes after all screen steps; kind **review** is always the final step, a
+consistency pass across all screens for spacing and contrast (list them all). The first step
+designs the entry screen, and every screen is designed by a screen step. Each step must be
+completable in ONE sitting (one screen file, one sync). 3–12 steps.
+
+## Write it into `design.md`
+
+```md
+## Plan — <name> (<scope>)
+<rationale, one sentence>
+
+### Decisions
+- Authentication: <decision> — <why>
+- Navigation pattern: <decision> — <why>
+- Onboarding: <decision> — <why>
+- Cut at this scope: <what> — <why>
+
+### Navigation
+- (main) tabs — initial
+  - Home — <purpose>. Key elements: <…; "Start button → Session">
+  - Progress — <purpose>. Key elements: <…>
+- (auth) stack
+  - Sign in — <purpose>. Key elements: <…>
+Entry screen: Home
+
+### Steps
+5. Build the Home screen — screen: Home — <detail: exactly what to design and how, real copy directions>
+6. Build Progress and Settings — screen: Progress, Settings — <detail>
+7. Wire the flow — wiring: Home, Progress, Settings, Sign in — <detail>
+8. Review pass — review: all — spacing, contrast, hierarchy
+```
+
+Step numbers continue the fixed index convention (0 Brief · 1 Style guides · 2 Design tokens ·
+3 Plan · 4 Scaffold), so the first plan step is index 5; wiring is N-1 and review is N.
+
+Section slugs become route groups: `(main)`, `(auth)`. Screen slugs become route files:
+`index.tsx` for a section's first screen, kebab-case otherwise (`sign-in.tsx`).
+
+> Not ported (Creator-only): the zod cross-field validation (apply the same checks yourself:
+> unique names, one initial section, entry screen known, first step designs the entry screen,
+> last step is review, every screen designed once), and `set_route_presentation` /
+> `set_navigator_options` (describe modal routes and chrome in `## Navigation chrome`).

package/templates/claude/skills/mapples-design/reference/playbooks/empty-states.md

@@ -0,0 +1,14 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Empty states
+
+First-run and no-content screens: icon, copy formula, one clear action.
+
+An empty state is an onboarding moment, not an apology. Formula: two parts instruction, one part delight. Build it as ONE `EmptyState` {iconName, title, message, actionLabel, secondaryActionLabel} (or `imageSource` instead of the glyph) placed with generous whitespace — the block sits at about 1/3 from the top. What it renders:
+1. Mark: a 96–120 circle — tinted `theme.primary.background`, or a subtle two-hex gradient — holding an `Icon` glyph 40–48 relevant to the missing content (an "image" glyph for no photos, a "cart" glyph for an empty cart). NEVER an emoji.
+2. Headline, ≤ 4 words, stating the situation positively: "No orders yet", "Your cart is empty".
+3. Body, ≤ 2 lines, `theme.text.secondary`, telling the user what this screen WILL show and how to get there: instruction, not decoration.
+4. ONE primary `Button` naming the action ("Browse the menu", "Add your first habit") — only when the user can actually resolve the emptiness here; if the content arrives on its own (e.g. notifications), end at the Body line.
+
+Variants: search-no-results uses iconName "search" and a secondaryActionLabel "Clear search"; error states use tone "error" and an actionLabel "Try again".
+
+Pitfalls: no dead-end screens — something actionable or an explanation, always; do not stack two buttons; the copy speaks the product's voice from the brief, not generic "No data".

package/templates/claude/skills/mapples-design/reference/playbooks/forms-and-auth.md

@@ -0,0 +1,22 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Forms and auth
+
+Sign in/up and any input form: field anatomy, grouping, validation, CTA.
+
+Field anatomy (every input): an `InputField` {label, placeholder, helperText, errorText, leadingIconName, keyboardType, autoCapitalize, variant "outlined" | "filled"} — never a raw `TextInput` in a form. Dropdowns are `SelectField` {options, placeholder}; yes/no is `Checkbox` or `Switch`; an exclusive choice is `RadioGroup` {options}; one-time codes are `PinInput` {length}. Match the app's elevation language through `variant` (outlined vs filled); NEVER a `boxShadow` on an input. Placeholder is an example value ("you@example.com"), never a label substitute. Gap 16 between fields, 24–32 between groups.
+
+Auth screen structure (root column, screen padding 20–24, `justifyContent: 'space-between'`):
+1. Top: logo mark or app-name Headline, plus ONE warm Caption line ("Good to see you again").
+2. Middle (gap 16): the fields — `InputField` email/phone (keyboardType "email-address" | "phone-pad", autoCapitalize "none"), `InputField` password (secureTextEntry, showPasswordToggle). On colored or photo backgrounds, group all fields inside one `Card` {variant "elevated"}.
+3. A right-aligned `TextLink` "Forgot password?" directly under the password field.
+4. Bottom: `Button` {variant "filled", size "lg", fullWidth true}, then a centered switch row ("New here?" Caption + `TextLink` "Create account").
+
+Forms in general:
+- One column, never side-by-side fields on phone (except tiny pairs like MM/YY + CVC).
+- Group related fields under an Overline section label; 3–6 fields per screen, split longer flows into steps with a progress indicator (`Steps`).
+- Validation is inline: the field's `errorText` paints the error border and the message — never only a toast, never clearing the user's input. In code, keep the literal you design with (`errorText` omitted or a literal example); state comes later.
+- Keyboard reality: keep the primary `Button` visible — bottom padding 24–32 and the fields in the upper half of the screen.
+
+Pitfalls: disabled-looking CTAs (use full primary color; validate on submit); asking for data the flow does not need; phone inputs without keyboardType "phone-pad"; password fields without showPasswordToggle.
+
+> Not ported (Creator-only): the `create_page {template: "login"}` shortcut — write the screen.

package/templates/claude/skills/mapples-design/reference/playbooks/home-dashboard.md

@@ -0,0 +1,14 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Home / dashboard
+
+Home screens: greeting header, search, featured card, rails and lists.
+
+The scan order sells the app in 3 seconds: who am I → what is featured → what can I browse. Root is a vertical `ScrollView` (spacing in `styled.contentContainerStyle`: {gap: 24, paddingBottom: 32}); the screen padding lives there too.
+
+1. Header row (`flexDirection: 'row'`, `justifyContent: 'space-between'`, `alignItems: 'center'`): greeting Headline ("Good morning, Alex" — real name from the brief, no emoji) with an optional Caption line under it; trailing `Avatar` {name or source, size "md"}.
+2. Search (when the product searches): a `SearchBar` {placeholder} — filled pill by default; never a bare 1px outline on white.
+3. ONE featured/promo card: the photo-scrim pattern — `ImageBackgroundView` (picsum `source`, height 180–220, borderRadius 20, overflow "hidden") → `GradientBackground` child (flex 1, `justifyContent: 'flex-end'`, padding 16, stops "#00000000" → "#00000099", top→bottom) → white `Typography` (Subtitle + Caption). Elevation only if the app's elevation language says so.
+4. Horizontal rail: `SectionHeader` {title, actionLabel "See all"}, then `HorizontalScrollView` with `styled.contentContainerStyle` {gap: 12, paddingHorizontal: 20} (full-bleed scroll, aligned first card). Cards are `MediaCard` {source (picsum), title, subtitle, meta} at a fixed width 150.
+5. Vertical list: a `List` of 3–5 `ListItem` rows, or a column of MediaCards (see the list-and-detail playbook).
+
+Pitfalls: never two featured cards; never a gradient AND a photo hero competing; one accent surface per screen; rails scroll behind the screen padding (`paddingHorizontal` in `contentContainerStyle`, NOT on the rail's style).

package/templates/claude/skills/mapples-design/reference/playbooks/list-and-detail.md

@@ -0,0 +1,18 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Lists and detail screens
+
+List rows, cards, detail screens with hero, meta pills and sticky CTA.
+
+List rows: a `List` {variant "plain" | "inset" | "card"} holding `ListItem` rows — never hand-built Pressable rows:
+- Leading: leading "image" + `source` (a picsum URL seeded with the row's own topic) when rows have natural imagery; otherwise leading "icon" + `leadingIconName` (the row tints a rounded square itself). One mode per list — never mix thumbs and icon squares.
+- Middle: title + subtitle (one Caption meta line).
+- Trailing: trailing "chevron", or trailing "text" + `trailingText` (a price or a time) — one, not several.
+- Separation follows the app's elevation language: `List` {variant "plain"} draws hairline dividers on the page background; a card list is `List` {variant "card"} or one `MediaCard` per item with gap 12.
+
+Detail screen:
+1. Hero photo: `Image` or `ImageBackgroundView` height 240–280, width 100%, bottom-only corner radius 20–28 (or a content sheet overlapping it with `marginTop: -24` and top-only radius 24).
+2. Title block: Headline + a meta row of `Chip` {variant "assist", label} tags (≤ 2) and a `Rating` {value, readOnly} — content-sized, in a row with gap 8.
+3. Body copy, then option selectors as `ChipGroup` {options, value, scrollable} rows and a `NumberStepper` {min 1} for quantity.
+4. Sticky bottom bar: a `BottomActionBar` {sticky true} holding the price (Subtitle) + `Button` {variant "filled", size "lg"} (flex 1).
+
+Pitfalls: content between hero and CTA scrolls (`ScrollView` with `contentContainerStyle` padding), the bottom bar does not; never let meta chips wrap to three lines — cap at two tags plus a rating.

package/templates/claude/skills/mapples-design/reference/playbooks/microcopy.md

@@ -0,0 +1,20 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Microcopy
+
+Copy that sells: verbs on buttons, benefit headlines, product voice, error tone.
+
+Copy is half of looking real. Generic words are the fastest tell of a template; specific words are the cheapest wow.
+
+Voice: derive it from the brief — a specialty coffee app sounds warm and craft-y, a finance app calm and precise, a fitness app energetic. Pick the voice once and keep it on every screen, in the design instructions' terms.
+
+Buttons are VERBS that name the outcome: "Start brewing", "Book the 9:00 class", "Add to order" — never "Submit", "OK", "Click here", "Continue" where something specific fits (Continue is fine mid-onboarding). One primary verb per screen.
+
+Headlines state the benefit, not the feature: "Your next free coffee is close" beats "Loyalty points"; "Chat like Viver" beats "Messaging features". Keep hero headlines ≤ 5 words; sentence case everywhere except Overline labels (uppercase) — never Title Case Every Word.
+
+Body and meta text carry REAL data shaped like the product: prices with currency, times as a person says them ("Scanned 2 hours ago"), quantities with units ("250g bag"). Lists carry 3–5 believable, varied entries from the brief's world — never Item 1 / Item 2, never lorem ipsum, never the same entry repeated.
+
+Empty and error states: state the situation positively, then the way forward ("No orders yet — your first one lands here"; "That code did not match — try again or resend"). Errors never blame the user and never say "Error:" — they say what to do next.
+
+Numbers and dates: shorten like products do (1.2k, 4.8 stars, "Tue 8:15 AM"); progress copy counts DOWN to the goal ("30 to go for a free coffee") because momentum sells.
+
+Pitfalls: emoji anywhere (hard ban); exclamation marks more than once per screen; "Welcome to [App]" as a headline (say what the user GETS instead); placeholder text that repeats the label; the assistant's own meta-language ("This screen shows…") leaking into the UI.

package/templates/claude/skills/mapples-design/reference/playbooks/navigation-chrome.md

@@ -0,0 +1,21 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Navigation chrome
+
+Headers, tab bars, chips, badges and breadcrumbs: navigator options vs content-sized elements.
+
+Two kinds of chrome, two mechanisms — never mix them up:
+- Stack headers and tab bars belong to the NAVIGATOR. In this version they are set in Creator (navigator options: header visible/title/colors/back, tab bar colors/labels; route options: title, tab label, tab icon asset) and land in the CLI-owned `_layout.tsx` on the next sync — you cannot set them from code, and you must not edit the layouts. Describe the intended chrome per section in `design.md` under `## Navigation chrome` (which sections hide the header, tab labels and icon concepts, modal routes) so the user applies it. A hand-built header row on a screen whose stack also shows a header gives two headers: design for one — the default root layout hides headers (`headerShown: false`), so in-content `TopAppBar` is the norm for apps born from `npx -y mapples@__CLI_VERSION__ create`.
+- Tab icons require an icon ASSET in Creator; an `Icon` element or a glyph name does nothing there. Note the icon concept per tab in `design.md`; keep tab labels short and distinct — never fake a tab bar from a row of buttons on the page.
+- Everything inside the content area (chips, pills, badges, breadcrumbs, in-content title rows) is a CONTENT-SIZED library element: never width 100% inside a row or a horizontal scroll; never a `Button` where a `Chip` is meant.
+
+Recipes:
+- Chip row: `ChipGroup` {options: [{label, value, iconName?}], value, variant "filter", scrollable true} — it scrolls full-bleed itself; single chips are `Chip` {label, variant "assist" | "suggestion"}.
+- Count badge: `IconButton` {iconName, badgeCount, accessibilityLabel} or `Avatar` {badgeCount}; a standalone `Badge` {count} elsewhere. Digits only ("99+" past the max); no badge at zero.
+- Status pill (tags, "New", "Ready"): `Badge` {label, variant "text", tone} or `Chip` {variant "suggestion"}; at most two pills per row — never three lines of pills.
+- Breadcrumbs: `Breadcrumbs` {items: [{label, value}], separator "chevron", maxItems 4}; the last item is the current page. Never as the screen's only title.
+- In-content title row (only when the stack header is hidden): `TopAppBar` {title, showBack true, actions: [{iconName, value}], variant "small"}; the root keeps its safe-area `paddingTop` (≥ 48).
+- In-content tabs inside ONE screen: `Tabs` {items: [{label, value}], value} with each panel shown for one value (bind `$data={{ _visible: … }}` only when the project has the variable; otherwise design the first panel); a `BottomNavigationBar` is only for a single-page demo of a tab shell — real tabs are a tabs navigator (a `(group)/` with a `<Tabs />` layout).
+
+Pitfalls: chips built from Pressables; a badge drawn from Views; breadcrumbs typeset as a Headline; a header built twice (TopAppBar + stack header); `Tabs` or `BottomNavigationBar` used instead of a navigator.
+
+> Not ported (Creator-only): `set_navigator_options` / `set_route_options` and the `ref(theme:…)` / `ref(icon:…)` value syntax.

package/templates/claude/skills/mapples-design/reference/playbooks/onboarding-flow.md

@@ -0,0 +1,15 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Onboarding flow
+
+Welcome/intro flows: 2–3 value-prop screens with hero, dots and CTA arc.
+
+Value first: each screen sells ONE benefit from the brief — never a feature tour of the whole app. 2–3 screens maximum; every extra screen loses users.
+
+Structure per screen (root column, `justifyContent: 'space-between'`, screen padding 20–24, `paddingTop` ≥ 64, `paddingBottom` 32):
+1. Top bar: a right-aligned `TextLink` {label "Skip", tone "neutral", underline false} on every screen except the last.
+2. Hero block (`alignItems: 'center'`, gap 16): ONE hero — either a `GradientBackground` circle 96–120 holding an `Icon` glyph 44–56 (`styleSvg.color` a light hex), or an edge-to-edge photo band (`Image` with a picsum `source`, height 260–320, bottom-only corner radius 24). Then a centered Headline (≤ 5 words, the benefit, not the feature) and one Body line (≤ 2 lines, `theme.text.secondary`).
+3. Bottom block (gap 16, `alignItems: 'center'`): a `PageControl` {count, value, variant "bars"} — then the primary `Button` {variant "filled", size "lg", fullWidth true}.
+
+CTA copy arc: "Continue" on middle screens; the LAST screen carries the real ask — "Get started" primary plus a `TextLink` "Sign in" row underneath for returning users.
+
+Pitfalls: no emoji heroes; one hero per screen, never hero + photo; dots and button positions must not shift between screens (same bottom block on all three); wire screen→screen and last screen→auth or home in the wiring phase (`$actions` navigate + `router.push`).

package/templates/claude/skills/mapples-design/reference/playbooks/screen-flow-wiring.md

@@ -0,0 +1,37 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Screen flow wiring
+
+Wiring flows: every CTA connected, entries set, a walkable prototype.
+
+A project becomes a product when every path is walkable. After the screens exist, wire them — this is as much the design as the pixels.
+
+How a connection is written (both halves, on the element's primary event):
+
+```tsx
+import { router } from 'expo-router';
+// …
+<Button
+  label="Add to order"
+  variant="filled"
+  size="lg"
+  fullWidth
+  onPress={() => router.push('/(main)/cart')}
+  $actions={{ onPress: { type: 'mapples:navigate', staticData: { pageUuid: '<uuid>' } } }}
+/>
+```
+
+`$actions` is the Creator connection (the storyboard arrow); `onPress` is the runtime handler. The `pageUuid` is the `uuid` field of `.mapples/base/pages/<pageId>.json`, where `<pageId>` is the key in `.mapples/pages.json` whose `file` is the target route file. Rows use `ListItem`'s `onPress`, cards `MediaCard`'s / `Card`'s `onPress`.
+
+The contract:
+- Every PRIMARY `Button` navigates to a real page: onboarding Continue → next screen, Get started → auth or home, list row / card → its detail, detail CTA → the flow it starts (cart, booking, player). No dead primary buttons, ever.
+- Secondary paths too: Skip → where Continue ultimately lands; Sign in ↔ Create account cross-links; back is implied by the stack — never draw a back button into the tree (the shell provides it).
+- Every screen is REACHABLE: if nothing navigates to a screen in the plan, either wire the entry that was missed or question why the screen exists.
+- Every flow has an EXIT: the last onboarding screen leaves onboarding; a completed form lands somewhere meaningful (a success state or the content it created), not back at the empty form.
+- Entries: the app must open on the value, not on a settings screen. The initial section/route is a navigator option set in Creator — state the intended entry in `design.md` under `## Navigation chrome` (the scaffold's `index.tsx` of the initial section is the natural default).
+- Presentation: multi-screen interruptions and create-flows present as modal ROUTES (a navigator option — describe them in `design.md`); browsing pushes. Confirmations, pickers and quick details stay on the screen as `Dialog` / `BottomSheet` / `ActionSheet` with `visible={false}`, or bound through `$data={{ visible: { key: 'vars.<name>', active: true } }}` when the project has the variable — an overlay nobody can open or close is a dead end.
+
+Verify like a user: after wiring, walk the golden path mentally from the entry screen — first open → core value → primary action → done. Name the connection chain; every hop must exist. Then `npx -y mapples@__CLI_VERSION__ sync --yes --json` and check that `pushedOps` covers every `$actions` you added (an action on an element without a `$sid` yet lands on the sync after the element is tagged).
+
+Pitfalls: wiring only the happy screen and leaving detail pages orphaned; two buttons navigating to the same place with different labels; a tab bar plus in-content navigation to the same sections.
+
+> Not ported (Creator-only): `set_initial_route`, `set_entry_page`, `set_route_presentation`, `layout_storyboard`, `add_connection {action: {kind: "setState"}}` variable creation.

package/templates/claude/skills/mapples-design/reference/playbooks/settings-profile.md

@@ -0,0 +1,16 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Settings and profile
+
+Settings and profile screens: grouped cards, icon rows, switches, sign out.
+
+Root: vertical `ScrollView`, `contentContainerStyle` {gap: 24, padding: 20, paddingBottom: 40}.
+
+Profile header (when the app has accounts): centered column gap 8 — `Avatar` {size "xl", source a picsum "portrait" seed, or name for initials}, name Subtitle, email/handle Caption in `theme.text.secondary`. A `TextLink` "Edit profile" or `Button` {variant "outlined", size "sm"} under it.
+
+Groups: one `List` {variant "inset", header "PREFERENCES" | "ACCOUNT" | "ABOUT"} per group — the List draws the surface and the dividers (no gaps between rows — the list is the unit).
+
+Row anatomy: `ListItem` {leadingIconName, title, subtitle only for rows that need explanation, trailing "switch" for toggles, trailing "chevron" for navigation rows, trailing "text" + trailingText ("English") for pickers}. Keep one icon tint system across the groups.
+
+The destructive row: "Sign out" / "Delete account" as a `ListItem` {tone "error"} in its own last `List` — never mixed into a normal group.
+
+Pitfalls: no more than 5–6 rows per list; switches bind to real variables only when the project has them (`$data`), otherwise leave them unwired rather than faking state; app version as a final centered Caption is a nice close.

package/templates/claude/skills/mapples-design/reference/playbooks/stats-and-progress.md

@@ -0,0 +1,17 @@
+<!-- GENERATED by Mapples __CLI_VERSION__ — re-run npx -y mapples@__CLI_VERSION__ agent install --force to refresh -->
+# Stats and progress
+
+Numbers, balances, goals: stat cards, progress bars, streaks — no fake charts.
+
+Numbers are the hero — let one big value carry each block.
+
+The hero number: a `StatTile` {label "BONUS BALANCE", value "1,240", unit "pts", caption, trend, trendValue, iconName, variant "elevated"} — or, for a brand-coloured hero, a `Card` with a deep brand-hex fill holding an Overline label and a Headline-sized value (fontSize 40–56 via a `styleTypography` override) with its unit in a Subtitle beside it (`flexDirection: 'row'`, `alignItems: 'flex-end'`, gap 8).
+- CONTRAST RULE: on a dark/brand fill, text is white/near-white hexes; on a light card, `theme.text` tokens. Never white text on a light background — if a gradient supplies the dark fill, the SAME node needs a solid dark `backgroundColor` fallback.
+
+Progress: `ProgressBar` {value, max, showLabel} for goals and uploads, `ProgressCircle` {value, size 72, showLabel} for rings. Under it one Caption: how far to the goal ("30 to go for a free coffee").
+
+Stat rows/grid: 2–3 `StatTile` in a row (`flexDirection: 'row'`, gap 12, each flex 1). Streaks: a row of 7 day-dots (24 circles — filled `theme.primary.main` for done, tinted for not, an `Icon` "checkmark" glyph 12 inside filled ones).
+
+Simple comparisons only: horizontal bar rows (Label + track/fill pair per row). Do NOT fake line/pie charts out of Views — if the product truly needs charts, say so instead of drawing a lie.
+
+Pitfalls: multiple hero numbers competing on one screen (pick one, demote the rest to the row/grid); percent fills must come from the actual data in the copy; progress color and CTA color should match so the goal reads as reachable.