From 03f8793e31ff5818891f37e00bbbfbb1c2348544 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Thu, 5 Mar 2026 16:22:30 -0500 Subject: [PATCH 1/3] Use teamHubs API and update pnpm workspace Switch CreateOrderDialog to the new team hubs API: replace useListHubs with useListTeamHubs, iterate hubsData.teamHubs, and show h.hubName in the Select. Also adjust pnpm configuration: add packages: ['.'] to pnpm-workspace.yaml and remove the overrides block from pnpm-lock.yaml (overrides moved into the workspace file). These changes align the UI with the updated dataconnect-generated API shape and correct the pnpm workspace setup. --- apps/web/pnpm-lock.yaml | 3 --- apps/web/pnpm-workspace.yaml | 3 +++ .../operations/orders/components/CreateOrderDialog.tsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/web/pnpm-lock.yaml b/apps/web/pnpm-lock.yaml index 6f3eca62..bd577ae8 100644 --- a/apps/web/pnpm-lock.yaml +++ b/apps/web/pnpm-lock.yaml @@ -4,9 +4,6 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false -overrides: - '@dataconnect/generated': link:src/dataconnect-generated - importers: .: diff --git a/apps/web/pnpm-workspace.yaml b/apps/web/pnpm-workspace.yaml index 117a15bd..9410b45d 100644 --- a/apps/web/pnpm-workspace.yaml +++ b/apps/web/pnpm-workspace.yaml @@ -1,2 +1,5 @@ +packages: + - '.' + overrides: '@dataconnect/generated': link:src/dataconnect-generated diff --git a/apps/web/src/features/operations/orders/components/CreateOrderDialog.tsx b/apps/web/src/features/operations/orders/components/CreateOrderDialog.tsx index 718e6e82..763e1f81 100644 --- a/apps/web/src/features/operations/orders/components/CreateOrderDialog.tsx +++ b/apps/web/src/features/operations/orders/components/CreateOrderDialog.tsx @@ -6,7 +6,7 @@ import { DialogTitle, } from "@/common/components/ui/dialog"; import EventFormWizard from "./EventFormWizard"; -import { useCreateOrder, useListBusinesses, useListHubs } from "@/dataconnect-generated/react"; +import { useCreateOrder, useListBusinesses, useListTeamHubs } from "@/dataconnect-generated/react"; import { OrderType, OrderStatus } from "@/dataconnect-generated"; import { dataConnect } from "@/features/auth/firebase"; import { useToast } from "@/common/components/ui/use-toast"; @@ -26,7 +26,7 @@ export default function CreateOrderDialog({ open, onOpenChange }: CreateOrderDia const [selectedHubId, setSelectedHubId] = React.useState(""); const { data: businessesData } = useListBusinesses(dataConnect); - const { data: hubsData } = useListHubs(dataConnect); + const { data: hubsData } = useListTeamHubs(dataConnect); const createOrderMutation = useCreateOrder(dataConnect, { onSuccess: () => { @@ -109,9 +109,9 @@ export default function CreateOrderDialog({ open, onOpenChange }: CreateOrderDia - {hubsData?.hubs.map((h) => ( + {hubsData?.teamHubs.map((h) => ( - {h.name} + {h.hubName} ))} From 456ead39601e57bcf8f6c0f75da92c8bc00ea032 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Thu, 5 Mar 2026 16:42:11 -0500 Subject: [PATCH 2/3] feat(launchpad): embed M4 demonstration video and update links structure --- internal/launchpad/assets/data/links.json | 17 +++++++++++++++++ internal/launchpad/assets/images/icon-video.svg | 3 +++ internal/launchpad/assets/js/links-loader.js | 5 +++-- 3 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 internal/launchpad/assets/images/icon-video.svg diff --git a/internal/launchpad/assets/data/links.json b/internal/launchpad/assets/data/links.json index 08bc2bea..b10af39b 100644 --- a/internal/launchpad/assets/data/links.json +++ b/internal/launchpad/assets/data/links.json @@ -1,4 +1,21 @@ [ + { + "title": "Demonstrations", + "iconColorClass": "bg-cyan-100", + "iconPath": "assets/images/icon-video.svg", + "links": [ + { + "title": "KROW Platform - M4 Demonstration", + "url": "https://www.youtube.com/embed/hD-Ngt5xfSc", + "badge": "Demo", + "badgeColorClass": "bg-cyan-500", + "containerClass": "bg-gradient-to-r from-cyan-50 to-blue-100 hover:from-cyan-100 hover:to-blue-200", + "iconClass": "w-2 h-2 bg-cyan-500 rounded-full", + "textHoverClass": "group-hover:text-cyan-700", + "isVideo": true + } + ] + }, { "title": "Applications", "iconColorClass": "bg-primary-100", diff --git a/internal/launchpad/assets/images/icon-video.svg b/internal/launchpad/assets/images/icon-video.svg new file mode 100644 index 00000000..3f7d6840 --- /dev/null +++ b/internal/launchpad/assets/images/icon-video.svg @@ -0,0 +1,3 @@ + + + diff --git a/internal/launchpad/assets/js/links-loader.js b/internal/launchpad/assets/js/links-loader.js index 47f20edf..8a5eb6cd 100644 --- a/internal/launchpad/assets/js/links-loader.js +++ b/internal/launchpad/assets/js/links-loader.js @@ -48,8 +48,9 @@ async function loadLinks() {
${group.links.map(link => { const isPrototype = link.url.startsWith('/prototypes/'); - const hrefAttr = isPrototype ? 'href="#"' : `href="${link.url}" target="_blank"`; - const onclickAttr = isPrototype ? `onclick="event.preventDefault(); showView('iframe', this, '${link.url}', '${link.title}')"` : ''; + const isVideo = link.isVideo === true; + const hrefAttr = (isPrototype || isVideo) ? 'href="#"' : `href="${link.url}" target="_blank"`; + const onclickAttr = (isPrototype || isVideo) ? `onclick="event.preventDefault(); showView('iframe', this, '${link.url}', '${link.title}')"` : ''; return ` Date: Sat, 7 Mar 2026 16:49:39 -0500 Subject: [PATCH 3/3] feat: enhance CLAUDE.md with skills and sub-agents sections for improved guidance --- .claude/skills/krow-paper-design/SKILL.md | 413 ++++++++++++++++++++++ CLAUDE.md | 23 +- 2 files changed, 417 insertions(+), 19 deletions(-) create mode 100644 .claude/skills/krow-paper-design/SKILL.md diff --git a/.claude/skills/krow-paper-design/SKILL.md b/.claude/skills/krow-paper-design/SKILL.md new file mode 100644 index 00000000..df9b2994 --- /dev/null +++ b/.claude/skills/krow-paper-design/SKILL.md @@ -0,0 +1,413 @@ +--- +name: krow-paper-design +description: KROW Paper design file conventions covering design tokens, component patterns, screen structure, and naming rules. Use this when creating or updating screens in the Paper design tool, auditing designs for token compliance, building new flows, or restructuring existing frames. Ensures visual consistency across all Paper design files for the KROW staff and client apps. +--- + +# KROW Paper Design Conventions + +This skill defines the design token system, component patterns, screen structure conventions, and workflow rules established for the KROW Design Revamp Paper file. All design work in Paper must follow these conventions. + +## When to Use This Skill + +- Creating new screens or flows in Paper +- Updating existing frames to match the design system +- Auditing designs for token compliance +- Adding components (buttons, chips, inputs, badges, cards) +- Structuring shift detail pages, onboarding flows, or list screens +- Setting up navigation patterns (back buttons, bottom nav, CTAs) +- Reviewing Paper designs before handoff to development + +## 1. Design Tokens + +### Color Palette + +| Token | Hex | Usage | +|-------|-----|-------| +| Primary | `#0A39DF` | CTAs, active states, links, selected chips, nav active icons, pay rates | +| Foreground | `#121826` | Headings, primary text, dark UI elements | +| Text Secondary | `#6A7382` | Labels, captions, inactive nav, section headers, placeholder text, back chevrons | +| Secondary BG | `#F1F3F5` | Subtle backgrounds, dividers, map placeholders | +| Border | `#D1D5DB` | Card borders, unselected chip borders, outline button borders | +| Input Border | `#E2E8F0` | Text input borders (lighter than general border) | +| Destructive | `#F04444` | Error states, destructive actions (e.g., Request Swap) | +| Background | `#FAFBFC` | Page/artboard background | +| Card BG | `#FFFFFF` | Card surfaces, input backgrounds | +| Success | `#059669` | Active status dot, checkmark icons, requirement met | +| Warning Amber | `#D97706` | Urgent/Pending badge text | + +### Semantic Badge Colors + +| Badge | Background | Text Color | +|-------|-----------|------------| +| Active | `#ECFDF5` | `#059669` | +| Confirmed | `#EBF0FF` | `#0A39DF` | +| Pending | `#FEF9EE` | `#D97706` | +| Urgent | `#FEF9EE` | `#D97706` | +| One-Time | `#ECFDF5` | `#059669` | +| Recurring | `#EBF0FF` | `#0A39DF` (use `#EFF6FF` bg on detail pages) | + +### Typography + +| Style | Font | Size | Weight | Line Height | Usage | +|-------|------|------|--------|-------------|-------| +| Display | Inter Tight | 28px | 700 | 34px | Page titles (Find Shifts, My Shifts) | +| H1 | Inter Tight | 24px | 700 | 30px | Detail page titles (venue names) | +| H2 | Inter Tight | 20px | 700 | 26px | Section headings | +| H3 | Inter Tight | 18px | 700 | 22px | Card titles, schedule values | +| Body Large | Manrope | 16px | 600 | 20px | Button text, CTA labels | +| Body Default | Manrope | 14px | 400-500 | 18px | Body text, descriptions | +| Body Small | Manrope | 13px | 400-500 | 16px | Card metadata, time/pay info | +| Caption | Manrope | 12px | 500-600 | 16px | Small chip text, tab labels | +| Section Label | Manrope | 11px | 700 | 14px | Uppercase section headers (letter-spacing: 0.06em) | +| Badge Text | Manrope | 11px | 600-700 | 14px | Status badge labels (letter-spacing: 0.04em) | +| Nav Label | Manrope | 10px | 600 | 12px | Bottom nav labels | + +### Spacing + +| Token | Value | Usage | +|-------|-------|-------| +| Page padding | 24px | Horizontal padding from screen edge | +| Section gap | 16-24px | Between major content sections | +| Group gap | 8-12px | Within a section (e.g., label to input) | +| Element gap | 4px | Tight spacing (e.g., subtitle under title) | +| Bottom safe area | 40px | Padding below last element / CTA | + +### Border Radii + +| Token | Value | Usage | +|-------|-------|-------| +| sm | 8px | Small chips, badges, status pills, map placeholder | +| md | 12px | Cards, inputs, location cards, contact cards, search fields | +| lg | 14px | Buttons, CTA containers, shift cards (Find Shifts) | +| xl | 24px | Not commonly used | +| pill | 999px | Progress bar segments only | + +## 2. Component Patterns + +### Buttons + +**Primary CTA:** +- Background: `#0A39DF`, radius: 14px, height: 52px +- Text: Manrope 16px/600, color: `#FFFFFF` +- Padding: 16px vertical, 16px horizontal + +**Secondary/Outline Button:** +- Background: `#FFFFFF`, border: 1.5px `#D1D5DB`, radius: 14px, height: 52px +- Text: Manrope 16px/600, color: `#121826` + +**Destructive Outline Button:** +- Background: `#FFFFFF`, border: 1.5px `#F04444`, radius: 14px +- Text: Manrope 14px/600, color: `#F04444` + +**Back Icon Button (Bottom CTA):** +- 52x52px square, border: 1.5px `#D1D5DB`, radius: 14px, background: `#FFFFFF` +- Contains chevron-left SVG (20x20, viewBox 0 0 24 24, stroke `#121826`, strokeWidth 2) +- Path: `M15 18L9 12L15 6` + +### Chips + +**Default (Large) - for role/skill selection:** +- Selected: bg `#EFF6FF`, border 1.5px `#0A39DF`, radius 10px, padding 12px/16px + - Checkmark icon (14x14, stroke `#0A39DF`), text Manrope 14px/600 `#0A39DF` +- Unselected: bg `#FFFFFF`, border 1.5px `#6A7382`, radius 10px, padding 12px/16px + - Text Manrope 14px/500 `#6A7382` + +**Small - for tabs, filters:** +- Selected: bg `#EFF6FF`, border 1.5px `#0A39DF`, radius 8px, padding 6px/12px + - Checkmark icon (12x12), text Manrope 12px/600 `#0A39DF` +- Unselected: bg `#FFFFFF`, border 1.5px `#D1D5DB`, radius 8px, padding 6px/12px + - Text Manrope 12px/500 `#6A7382` +- Active (filled): bg `#0A39DF`, radius 8px, padding 6px/12px + - Text Manrope 12px/600 `#FFFFFF` +- Dark (filters button): bg `#121826`, radius 8px, padding 6px/12px + - Text Manrope 12px/600 `#FFFFFF`, with leading icon + +**Status Badges:** +- Radius: 8px, padding: 4px/8px +- Text: Manrope 11px/600-700, uppercase, letter-spacing 0.04em +- Colors follow semantic badge table above + +### Text Inputs + +- Border: 1.5px `#E2E8F0`, radius: 12px, padding: 12px/14px +- Background: `#FFFFFF` +- Placeholder: Manrope 14px/400, color `#6A7382` +- Filled: Manrope 14px/500, color `#121826` +- Label above: Manrope 14px/500, color `#121826` +- Focused: border color `#0A39DF`, border-width 2px +- Error: border color `#F04444`, helper text `#F04444` + +### Cards (Shift List Items) + +- Background: `#FFFFFF`, border: 1px `#D1D5DB`, radius: 12-14px +- Padding: 16px +- Content: venue name (Manrope 15px/600 `#121826`), subtitle (Manrope 13px/400 `#6A7382`) +- Metadata row: icon (14px, `#6A7382`) + text (Manrope 13px/500 `#6A7382`) +- Pay rate: Inter Tight 18px/700 `#0A39DF` + +### Schedule/Pay Info Cards + +- Two-column layout with 12px gap +- Background: `#FFFFFF`, border: 1px `#D1D5DB`, radius: 12px, padding: 16px +- Label: Manrope 11px/500-700 uppercase `#6A7382` (letter-spacing 0.05em) +- Value: Inter Tight 18px/700 `#121826` (schedule) or `#121826` (pay) +- Sub-text: Manrope 13px/400 `#6A7382` + +### Contact/Info Rows + +- Container: radius 12px, border 1px `#D1D5DB`, background `#FFFFFF`, overflow clip +- Row: padding 13px/16px, gap 10px, border-bottom 1px `#F1F3F5` (except last) +- Icon: 16px, stroke `#6A7382` +- Label: Manrope 13px/500 `#6A7382`, width 72px fixed +- Value: Manrope 13px/500 `#121826` (or `#0A39DF` for phone/links) + +### Section Headers + +- Text: Manrope 11px/700, uppercase, letter-spacing 0.06em, color `#6A7382` +- Gap to content below: 10px + +## 3. Screen Structure + +### Artboard Setup + +- Width: 390px (iPhone standard) +- Height: 844px (default), or `fit-content` for scrollable detail pages +- Background: `#FAFBFC` +- Flex column layout, overflow: clip + +### Frame Naming Convention + +``` +-
-- +``` + +Examples: +- `staff-1-1-splash` +- `staff-2-3-personal-information` +- `staff-4-1-my-shifts` +- `staff-5-2-shift-details` +- `shift-5-3-confirmation` + +Section headers use: ` -
` (e.g., `4 - My Shifts`) + +### Status Bar + +- Height: 44px, full width (390px) +- Left: "9:41" text (system font) +- Right: Signal, WiFi, Battery SVG icons (68px wide) + +### Header Back Button + +- Placed below status bar in a combined "Status Bar + Back" frame (390x72px) +- Chevron SVG: 20x20, viewBox 0 0 24 24, stroke `#6A7382`, strokeWidth 2 +- Path: `M15 18L9 12L15 6` +- Back button frame: 390x28px, padding-left: 24px + +### Progress Bar (Onboarding) + +- Container: 342px wide (24px margins), 3px height segments +- Segments: pill radius (999px), gap between +- Filled: `#0A39DF`, Unfilled: `#F1F3F5` + +### Bottom CTA Convention + +- Pinned to bottom using `marginTop: auto` on the CTA container +- Layout: flex row, gap 12px, padding 0 24px +- Back button: 52x52px icon-only button with chevron-left (stroke `#121826`) +- Primary CTA: flex 1, height 52px, radius 14px, bg `#0A39DF` +- Bottom safe padding: 40px (on artboard paddingBottom) + +### Bottom Navigation Bar + +- Full width, padding: 10px top, 28px bottom +- Border-top: 1px `#F1F3F5`, background: `#FFFFFF` +- 5 items: Home, Shifts, Find, Payments, Profile +- Active: icon stroke `#0A39DF`, label Manrope 10px/600 `#0A39DF` +- Inactive: icon stroke `#6A7382`, label Manrope 10px/600 `#6A7382` +- Active icon may have light fill (e.g., `#EBF0FF` on calendar/search) + +## 4. Screen Templates + +### List Screen (My Shifts, Find Shifts) + +``` +Artboard (390x844, bg #FAFBFC) + Status Bar (390x44) + Header Section + Page Title (Display: Inter Tight 28px/700) + Tab/Filter Chips (Small chip variant) + Content + Date Header (Section label style, uppercase) + Shift Cards (12px radius, 1px border #D1D5DB) + Bottom Nav Bar +``` + +### Detail Screen (Shift Details) + +``` +Artboard (390x fit-content, bg #FAFBFC) + Status Bar (390x44) + Header Bar (Back chevron + "Shift Details" title + share icon) + Badges Row (status chips) + Role Title (H1) + Venue (with avatar) + Schedule/Pay Cards (two-column) + Job Description (section label + body text) + Location (card with map + address) + Requirements (section label + checkmark list) + Shift Contact (section label + contact card with rows) + [Optional] Note from Manager (warm bg card) + Bottom CTA (pinned) +``` + +### Onboarding Screen + +``` +Artboard (390x844, bg #FAFBFC, justify: flex-start, paddingBottom: 40px) + Status Bar + Back (390x72) + Progress Bar (342px, 3px segments) + Step Counter ("Step X of Y" - Body Small) + Page Title (H1: Inter Tight 24px/700) + [Optional] Subtitle (Body Default) + Form Content (inputs, chips, sliders) + Bottom CTA (marginTop: auto - back icon + Continue) +``` + +### Confirmation Screen + +``` +Artboard (390x844, bg #FAFBFC) + Status Bar + Centered Content + Success Icon (green circle + checkmark) + Title (Display: Inter Tight 26px/700, centered) + Subtitle (Body Default, centered, #6A7382) + Details Card (border #D1D5DB, rows with label/value pairs) + Bottom CTAs (primary + outline) +``` + +## 5. Workflow Rules + +### Write Incrementally + +Each `write_html` call should produce ONE visual group: +- A header, a card, a single list row, a button bar, a section +- Never batch an entire screen in one call + +### Review Checkpoints + +After every 2-3 modifications, take a screenshot and evaluate: +- **Spacing**: Uneven gaps, cramped groups +- **Typography**: Hierarchy, readability, correct font/weight +- **Contrast**: Text legibility, element distinction +- **Alignment**: Vertical lanes, horizontal alignment +- **Clipping**: Content cut off at edges +- **Token compliance**: All values match design system tokens + +### Color Audit Process + +When updating frames to match the design system: +1. Get computed styles for all text, background, border elements +2. Map old colors to design system tokens: + - Dark navy (`#0F4C81`, `#1A3A5C`) -> Primary `#0A39DF` + - Near-black (`#111827`, `#0F172A`) -> Foreground `#121826` + - Gray variants (`#94A3B8`, `#64748B`, `#475569`) -> Text Secondary `#6A7382` + - Green accents (`#20B486`) -> Primary `#0A39DF` (for pay) or `#059669` (for status) +3. Batch update using `update_styles` with multiple nodeIds per style change +4. Verify with screenshots + +### Structural Consistency + +When creating matching screens (e.g., two shift detail views): +- Use identical section ordering +- Match section header styles (11px/700 uppercase `#6A7382`) +- Use same card/row component patterns +- Maintain consistent padding and gap values + +## 6. SVG Icon Patterns + +### Chevron Left (Back) +```html + + + +``` + +### Map Pin +```html + + + + +``` + +### User (Supervisor) +```html + + + + +``` + +### Phone +```html + + + +``` + +### Checkmark (Requirement Met) +```html + + + + +``` + +### Chip Checkmark +```html + + + + + + + + + +``` + +## 7. Anti-Patterns + +### Colors +- Never use `#0F4C81`, `#1A3A5C` (old navy) - use `#0A39DF` (Primary) +- Never use `#111827`, `#0F172A` - use `#121826` (Foreground) +- Never use `#94A3B8`, `#64748B`, `#475569` - use `#6A7382` (Text Secondary) +- Never use `#20B486` for pay rates - use `#0A39DF` (Primary) +- Never use `#E2E8F0` for card borders - use `#D1D5DB` (Border) + +### Components +- Never use pill radius (999px) for chips or badges - use 8px or 10px +- Never use gradient backgrounds on buttons +- Never mix font families within a role (headings = Inter Tight, body = Manrope) +- Never place back buttons at the bottom of frames - always after status bar +- Never hardcode CTA position - use `marginTop: auto` for bottom pinning + +### Structure +- Never batch an entire screen in one `write_html` call +- Never skip review checkpoints after 2-3 modifications +- Never create frames without following the naming convention +- Never use `justifyContent: space-between` on artboards with many direct children - use `marginTop: auto` on the CTA instead + +## Summary + +**The design file is the source of truth for visual direction.** Every element must use the established tokens: + +1. **Colors**: 7 core tokens + semantic badge colors +2. **Typography**: Inter Tight (headings) + Manrope (body), defined scale +3. **Spacing**: 24px page padding, 16-24px section gaps, 40px bottom safe area +4. **Radii**: 8px (chips/badges), 12px (cards/inputs), 14px (buttons/CTAs) +5. **Components**: Buttons, chips (large/small), inputs, cards, badges, nav bars +6. **Structure**: Status bar > Back > Content > Bottom CTA (pinned) +7. **Naming**: `-
--` + +When in doubt, screenshot an existing screen and match its patterns exactly. diff --git a/CLAUDE.md b/CLAUDE.md index 86facd07..8b17176f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -135,27 +135,12 @@ lib/src/ ## Skills & Sub-Agents -The project has 4 specialized skills in `.claude/skills/` that provide deep domain knowledge. **Invoke them when working in their domains** — they contain detailed rules, patterns, and code examples beyond what's in this file. +#### Skills +- The project has 4 specialized skills in `.claude/skills/` that provide deep domain knowledge. Invoke them and other global skills that you have when working in their domains. -### krow-mobile-architecture -**When to use:** Architecting new mobile features, debugging state management or BLoC lifecycle issues, preventing prop drilling, managing session state, implementing Data Connect connector repositories, setting up feature modules and DI, refactoring to Clean Architecture. +#### Sub-Agents +- The project has 4 sub-agents in `.claude/sub-agents/` that can be invoked for specific tasks. Invoke them and other global sub-agents that you have when working in their domains. -**What it covers:** Full Clean Architecture implementation, package dependency graph, Data Connect service & session management (SessionHandlerMixin, SessionListener), connector pattern for reusable backend queries, BLoC lifecycle safety (singleton registration, BlocProvider.value(), BlocErrorHandler mixin with _safeEmit()), feature isolation rules, typed navigation with safe extensions, session store pattern. - -### krow-mobile-development-rules -**When to use:** Creating new mobile features/packages, implementing BLoCs/Use Cases/Repositories, integrating with Firebase Data Connect, migrating from prototypes, reviewing code compliance, setting up navigation flows. - -**What it covers:** Non-negotiable enforcement rules — file creation & package structure with exact path conventions, naming conventions, zero-tolerance logic placement boundaries (business rules → Use Cases only, state → BLoCs only, data transformation → Repositories), localization integration (all strings via core_localization, BLoCs emit failures not strings), Data Connect repository pattern with `_service.run()`, prototype migration rules, error handling pattern (domain failures → ErrorTranslator), enforcement checklist. - -### krow-mobile-design-system -**When to use:** Implementing any UI in mobile features, migrating POC/prototype designs to production, creating themed widgets, reviewing UI code for design system compliance, matching colors/typography from designs, adding icons/spacing/layout. - -**What it covers:** Immutable design token rules — all colors from `UiColors` (zero hex codes), all typography from `UiTypography` (zero custom TextStyle), all spacing/radius/elevation from `UiConstants` (zero magic numbers), all icons from `UiIcons` (zero direct library imports). POC → Production workflow (structure → architecture → design system integration), color/typography matching tables, extension policy for adding new tokens, review checklist. - -### krow-mobile-release -**When to use:** Preparing mobile releases, updating CHANGELOGs, triggering GitHub Actions release workflows, creating hotfix branches, understanding versioning strategy, setting up APK signing, troubleshooting release failures. - -**What it covers:** Versioning strategy (`v{major}.{minor}.{patch}-{milestone}`), CHANGELOG management (Keep a Changelog format, writing guidelines), Git tagging (`krow-withus--mobile/-vX.Y.Z`), GitHub Actions workflows (Product Release, Product Hotfix), APK signing setup (24 GitHub Secrets), step-by-step release process for dev/stage/prod, hotfix procedures, release cadence, troubleshooting guide, helper scripts. ## CI/CD