@design-ai/cli 4.55.0

package/knowledge/patterns/list-and-feed.md

@@ -0,0 +1,371 @@
+<!-- hand-written -->
+---
+title: List and feed patterns
+applies_to: [web, mobile, all-ui]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# List and feed patterns
+
+Lists are everywhere — transaction history, search results, settings, chat threads, product feeds. The pattern looks simple; getting it right is harder than it appears.
+
+## When list vs grid vs table
+
+| Pattern | Use when |
+| --- | --- |
+| **List** (vertical, single column) | Items have variable text length; primary scan is "what's at the top"; mobile-first |
+| **Grid** (2+ columns) | Items have visual primary (photos); items are equal; product browsing |
+| **Table** (multi-column with headers) | Multi-attribute comparison; data analysis; desktop-first; `<table>` semantics |
+| **Card list** (vertical with cards) | Each item is a self-contained unit (article, project, listing); medium info density |
+
+This file covers **lists** and **feeds** (a list with infinite scroll or refresh).
+
+## List item anatomy
+
+A list item is a small composition:
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ [icon/avatar]  Primary text             [meta]    [→]    │
+│                Secondary text                              │
+└──────────────────────────────────────────────────────────┘
+```
+
+| Slot | Required | Notes |
+| --- | --- | --- |
+| Leading visual | optional | Icon, avatar, color swatch, status dot |
+| Primary text | yes | The thing |
+| Secondary text | optional | Metadata, subtitle |
+| Trailing meta | optional | Timestamp, count, amount, status badge |
+| Trailing affordance | optional | Chevron `>` (drill in), checkbox, switch |
+
+### Heights
+
+| Density | Single-line | Two-line | Three-line |
+| --- | --- | --- | --- |
+| Compact | 40px | 56px | 72px |
+| Comfortable (default) | 48px | 64px | 80px |
+| Spacious | 56px | 72px | 88px |
+
+For Korean consumer apps: lean toward **compact-to-comfortable**. Western apps default spacious.
+
+## Common list patterns
+
+### Settings list
+
+```
+┌──────────────────────────────────────────────────┐
+│  알림                                       >    │
+│ ─────────────────────────────────────────────── │
+│  결제 수단                                  >    │
+│ ─────────────────────────────────────────────── │
+│  보안                                  ●    >    │  ← red dot = needs attention
+│ ─────────────────────────────────────────────── │
+│  버전                              v1.4.2        │
+│ ─────────────────────────────────────────────── │
+│  로그아웃                                        │  ← destructive, red
+└──────────────────────────────────────────────────┘
+```
+
+Conventions:
+- Section headers (group settings into 2–4 sections).
+- Chevron `>` for items that drill in.
+- Trailing value for items that show the current setting (`v1.4.2`, `한국어`).
+- Switch on the right for booleans (Wi-Fi, notifications).
+- Destructive actions (logout, delete) at the bottom, in `--color-error`, no chevron.
+
+### Conversation / chat list
+
+```
+┌──────────────────────────────────────────────────┐
+│ ●  김민지 (3)              어제 오후 11:23  [3]   │
+│    "내일 점심 같이 먹을래?"                       │
+├──────────────────────────────────────────────────┤
+│    이서준                  오전 10:42            │
+│    이미지를 보냈습니다                            │
+├──────────────────────────────────────────────────┤
+│    가족 단톡방              화                    │
+│    엄마: "오늘 저녁 6시"                          │
+└──────────────────────────────────────────────────┘
+```
+
+- Avatar/group icon on left.
+- Primary line: name (+ unread count).
+- Secondary line: latest message preview, single-line truncated.
+- Timestamp far right (relative — "어제 오후 11:23", "방금 전", "화", "10/05").
+- Unread indicator: dot on left or count badge on right.
+- Bold weight for unread items (entire row).
+
+### Transaction list (fintech)
+
+See [knowledge/patterns/money-and-amount.md](money-and-amount.md). Tabular numerals, right-aligned amounts.
+
+```
+┌────────────────────────────────────────────────────┐
+│ 5월 7일                                             │   ← date header (sticky)
+├────────────────────────────────────────────────────┤
+│ 🍽 스타벅스 강남점               -₩5,500           │
+│    카페 · 12:34                                     │
+├────────────────────────────────────────────────────┤
+│ 💼 급여                            +₩2,500,000     │
+│    회사 · 09:00                                     │
+└────────────────────────────────────────────────────┘
+```
+
+- Sticky date headers between sections.
+- Income / expense color via `--color-money-positive` / `--color-money-negative`.
+
+### Search results
+
+```
+┌──────────────────────────────────────────────────┐
+│ "결과 142건"                          [필터]      │
+├──────────────────────────────────────────────────┤
+│ Result item 1                                    │
+├──────────────────────────────────────────────────┤
+│ Result item 2 (highlighted match)                │
+├──────────────────────────────────────────────────┤
+│ ...                                              │
+└──────────────────────────────────────────────────┘
+```
+
+- Result count.
+- Filter / sort affordance.
+- Highlighted matches (bold or `<mark>` background).
+- "더 보기" or pagination at bottom (or infinite scroll).
+
+## Pull-to-refresh
+
+Mobile-native gesture. Required for any feed that updates from a server.
+
+### Behavior
+
+1. User pulls down at top of list. List moves with finger.
+2. Past threshold (~64–80px), refresh indicator appears (spinner).
+3. Release: list bounces back, indicator stays for ~1s while fetch happens.
+4. Indicator disappears, new content (if any) is at top.
+
+### Implementation cues
+
+- iOS: native via `UIRefreshControl`. RN: `RefreshControl` component on FlatList/ScrollView.
+- Android: native via `SwipeRefreshLayout`. Material default.
+- Web: not native; use a library (no clean cross-browser implementation).
+
+### Don't
+
+- Don't pull-to-refresh on lists where the user controls when data appears (e.g., a static settings list).
+- Don't pull-to-refresh AND have a refresh button in the header — pick one.
+- Don't show "no new items" toast after every refresh — silent if nothing new.
+
+## Infinite scroll
+
+Auto-loads next page when user scrolls near the bottom.
+
+### Implementation
+
+1. Reserve a "load more" trigger at the bottom (last 3 items in viewport).
+2. When trigger enters viewport, fetch next page.
+3. Append to list.
+4. If error, show inline error with "다시 시도" button.
+
+### Versus explicit "Load more" button
+
+| Use infinite scroll | Use Load More button |
+| --- | --- |
+| Feed-style content (social, news, transactions) | Search results, e-commerce results |
+| Mobile primarily | Desktop primarily |
+| Engagement is a goal | User needs to know "where am I?" |
+
+Infinite scroll has tradeoffs:
+- Footer becomes unreachable (avoid on sites with critical footer).
+- Browser back doesn't restore scroll position by default.
+- Accessibility: screen reader users get lost. Add `aria-live` updates: "20 more results loaded".
+
+### Hybrid: chunked infinite scroll
+
+After every 3 pages, pause and show an explicit "Load more" or "View all 142 results". Lets the user catch breath, restores reachability of footer.
+
+## Empty state
+
+Required for any list that can be empty.
+
+```
+┌──────────────────────────────────────────────────┐
+│                                                  │
+│                                                  │
+│                    ┌────────┐                    │
+│                    │  📭    │                    │
+│                    └────────┘                    │
+│                                                  │
+│             아직 거래 내역이 없어요                │
+│             첫 거래를 추가해보세요                  │
+│                                                  │
+│              [거래 추가하기]                       │
+│                                                  │
+└──────────────────────────────────────────────────┘
+```
+
+| Element | Notes |
+| --- | --- |
+| Illustration / icon | Friendly, related to content type. Don't use generic "empty box". |
+| Title | What's empty, in user terms ("아직 거래 내역이 없어요"). |
+| Description | Why and what to do next (1 sentence). |
+| Primary CTA | The action that fills the list (if applicable). |
+
+### Don't
+
+- Don't show "No data" alone. That's hostile.
+- Don't auto-redirect to onboarding.
+- Don't show empty state with a "Refresh" button as the only action — refresh won't change the state; an "add" action will.
+
+## Loading states
+
+### First load (initial render)
+
+Show **skeleton placeholders** matching the shape of the eventual list. Cite [knowledge/patterns/ux-guidelines.md](ux-guidelines.md).
+
+```
+┌──────────────────────────────────────────────────┐
+│  ▢▢▢       ▔▔▔▔▔▔▔▔▔                            │   ← shimmer animation
+│              ▔▔▔▔▔▔                              │
+├──────────────────────────────────────────────────┤
+│  ▢▢▢       ▔▔▔▔▔▔▔▔▔▔                           │
+│              ▔▔▔▔▔                               │
+└──────────────────────────────────────────────────┘
+```
+
+- 3–5 skeleton items.
+- Shimmer animation: 1500ms loop, linear easing.
+- Match the actual layout's heights — no jumping when real data arrives.
+- Stop shimmer immediately when data arrives.
+
+### Pagination load (load-more)
+
+Inline spinner at the bottom:
+
+```
+┌──────────────────────────────────────────────────┐
+│ ... existing items ...                          │
+├──────────────────────────────────────────────────┤
+│             ⏳ 더 불러오는 중...                  │
+└──────────────────────────────────────────────────┘
+```
+
+### Refresh (already-loaded list)
+
+Use the platform's native refresh indicator (RefreshControl). Don't replace existing items with skeletons during refresh.
+
+## Error states
+
+```
+┌──────────────────────────────────────────────────┐
+│                                                  │
+│             ⚠ 불러오기에 실패했어요               │
+│             네트워크 연결을 확인하고                 │
+│             다시 시도해주세요.                      │
+│                                                  │
+│              [다시 시도]                           │
+│                                                  │
+└──────────────────────────────────────────────────┘
+```
+
+- Specific message ("네트워크 연결을 확인" not "오류 발생").
+- Retry action.
+- For pagination errors: inline at the bottom, not full-screen.
+
+## Swipe actions (mobile)
+
+iOS-native pattern. Swipe left on a list item reveals trailing actions:
+
+```
+[item content                     ]   ← drag right-to-left
+                  → [Archive] [Delete]
+```
+
+| Action position | Use |
+| --- | --- |
+| Trailing (right) — destructive | Delete, Remove, Archive |
+| Trailing (right) — non-destructive | Mark read, Pin, Mute |
+| Leading (left) | Quick positive action (Mark unread, Star) |
+
+### Rules
+
+- Swipe-to-delete must show a confirmation. Don't delete on first swipe — that's destructive without explicit confirm.
+- Provide visible action button as a fallback (long-press menu, kebab `⋮`). Never gate destructive actions behind ONLY swipe — discoverability fails for new users and accessibility.
+- Swipe affordance hint: on first list view, briefly reveal the action color on the rightmost ~10% of an item, then settle. Once per session.
+
+### Implementation
+
+- iOS: `UITableView` swipe actions are native.
+- Android: not a native pattern — Material 3 deprecated swipe-to-dismiss. Use long-press → contextual action bar.
+- RN: libraries like `react-native-gesture-handler` Swipeable.
+
+## Section headers
+
+For grouped lists (chat by date, transactions by date, contacts by initial):
+
+```
+─── 어제 ─────────────────────────────────────────
+[item]
+[item]
+
+─── 5월 5일 ──────────────────────────────────────
+[item]
+```
+
+| Spec | Notes |
+| --- | --- |
+| Sticky | Header stays at top of viewport while scrolling within its section |
+| Style | Smaller text (12–13px), uppercase or bold, color `--color-text-tertiary` |
+| Background | Often subtle bg `--color-bg-subtle` to differentiate from items |
+| Spacing | More space above (16–24px) than between items |
+
+## Dividers
+
+| Style | Use |
+| --- | --- |
+| Hairline (1px `--color-divider`) | Default between similar items |
+| Inset (skip leading visual) | When items have leading icons/avatars — divider starts after icon column |
+| Heavy (4–8px gap, no line) | Between major sections |
+| None | When items already have card backgrounds (cards in a list) |
+
+## Long press
+
+Long-press (500ms+) opens a contextual action menu. Common in:
+- Chat (message → react, copy, reply, forward, delete)
+- Photo grid (tap to select, long-press to enter selection mode)
+- Item in a list with multiple actions
+
+### Don't
+
+- Don't make long-press the only path to a destructive action — too easy to trigger accidentally.
+- Don't use long-press for primary action (it has a 500ms delay; users feel the lag).
+
+## Accessibility
+
+- Lists are `<ul>`/`<ol>` (web). RN lists are read by screen readers as collections.
+- Items are `<li>` (web). RN: each item should have `accessibilityRole="button"` if interactive.
+- Long lists: announce count and position. "Item 5 of 142."
+- Empty state: announce on render (`aria-live="polite"`).
+- Loading: announce ("Loading"). On data arrive: announce result count.
+- Pull-to-refresh: announce when refresh starts and when complete.
+- Skeleton loaders: don't announce as "loading loading loading" — set `aria-hidden="true"` on skeletons; announce loading state once at container level.
+
+## Performance
+
+For lists > 50 items on mobile, virtualization is mandatory:
+- RN: `FlatList` (not `ScrollView`).
+- Web: `react-window` or `@tanstack/react-virtual`.
+- Native iOS/Android: `UITableView` / `RecyclerView` are virtualized natively.
+
+Don't render 1,000 items in a `ScrollView`. Frame drops, memory issues, scroll lag.
+
+## Cross-reference
+
+- [knowledge/patterns/money-and-amount.md](money-and-amount.md) — transaction list specifics
+- [knowledge/patterns/mobile-navigation.md](mobile-navigation.md) — search lists
+- [knowledge/patterns/ux-guidelines.md](ux-guidelines.md) — skeleton loading conventions
+- [knowledge/platforms/react-native.md](../platforms/react-native.md) — FlatList performance, RefreshControl
+- [knowledge/a11y/keyboard-and-focus.md](../a11y/keyboard-and-focus.md) — list keyboard navigation

package/knowledge/patterns/mobile-navigation.md

@@ -0,0 +1,278 @@
+<!-- hand-written -->
+---
+title: Mobile navigation patterns
+applies_to: [mobile, ios, android, react-native, responsive-web]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Mobile navigation patterns
+
+The four primary mobile navigation patterns, when to use each, and the rules they obey. Skipping these conventions makes the app read as foreign.
+
+## The four patterns
+
+| Pattern | Use when | Examples |
+| --- | --- | --- |
+| **Bottom tab bar** | 3–5 top-level destinations equally important | Toss, Instagram, KakaoTalk, banking apps |
+| **Top app bar** | Single primary destination per screen with secondary actions | Settings, detail screens, compose |
+| **Drawer (hamburger)** | 5+ destinations, secondary frequency | Gmail, Slack channels |
+| **Stack-only** | Linear flows (onboarding, multi-step forms, checkout) | Wizards |
+
+## Bottom tab bar
+
+The dominant pattern for Korean consumer apps. **Default for any consumer mobile product with multiple top-level sections.**
+
+### Rules
+
+| Rule | Detail |
+| --- | --- |
+| Tab count | **3–5**. 6+ becomes a scroll target on iOS or hamburger on Android. |
+| Always present | At every top-level screen. Hidden on detail / modal / form screens. |
+| Persistent across navigation within a tab | Stack pushes inside a tab keep the bar visible. |
+| Active state | Highlighted color + filled icon (vs outlined inactive) + bold label. |
+| Labels | **Always show** — Korean apps include Korean labels. Icon-only is acceptable for Western iOS-native style but reads as foreign in KR. |
+| Height | iOS: 49pt + safe-area-inset-bottom. Android: 56–64dp. RN: ~56–60 + insets. |
+
+### Tab anatomy
+
+```
+┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
+│   🏠    │ │   📊    │ │   ➕    │ │   🔔    │ │   👤    │
+│   홈    │ │  통계   │ │  추가   │ │  알림   │ │   MY   │
+└─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘
+   active     inactive   center      inactive   inactive
+```
+
+| Part | Spec |
+| --- | --- |
+| Icon | 24×24 typical. Filled when active, outlined when inactive. |
+| Label | 11–12px font, weight 500 active / 400 inactive. |
+| Spacing | Equal-width tabs, label centered under icon. |
+| Active color | `--color-primary-default` |
+| Inactive color | `--color-text-tertiary` |
+
+### Center-tab variants
+
+Korean apps frequently elevate the center tab as a primary action:
+
+```
+┌─────────┐ ┌─────────┐ ┌─────╮ ╭─────┐ ┌─────────┐ ┌─────────┐
+│   홈    │ │  검색   │ │  ╲ ╱     │ │  알림   │ │   MY    │
+│         │ │         │ │  ┌─┐     │ │         │ │         │
+│         │ │         │ │  │+│     │ │         │ │         │
+│         │ │         │ │  └─┘     │ │         │ │         │
+└─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘
+```
+
+The center is a **floating action**, raised by 8–12px, with a colored background (often primary). It's a separate button, not a tab — it triggers a modal or compose screen rather than navigating to a destination.
+
+Use when there's a clear "create / send / 추가" primary action that would otherwise be buried.
+
+### Hiding the tab bar
+
+Hide on:
+- Modal screens
+- Forms (so keyboard + footer button can claim space)
+- Full-bleed media viewers
+- Onboarding
+
+Don't hide on:
+- Top-level destinations (always show)
+- Stack pushes within a tab (keep visible)
+- Settings (it's still browsing)
+
+### Don't
+
+- Don't put 6+ tabs. If you have 6, your app has 5 destinations + something that should be in a menu.
+- Don't change tab order across screens.
+- Don't have a "More" tab as the 5th — find the meaningful 4 or 5 and commit.
+- Don't use the tab bar as a loading indicator (animating active state).
+- Don't gate tabs behind login state. Show all tabs; auth-walled tabs go to login screen on tap.
+
+## Top app bar
+
+The header strip with title and actions on most non-tab screens.
+
+### Anatomy
+
+```
+┌──────────────────────────────────────────────────┐
+│  ←   Screen title              ⋮       ✕ Close   │
+└──────────────────────────────────────────────────┘
+```
+
+| Slot | Use |
+| --- | --- |
+| Left | Back button (chevron + optional label) OR Close (✕) on modal screens OR menu button (≡) on top-level |
+| Center | Screen title (truncate if long, no wrap) |
+| Right | Up to 2 action buttons (search, share, more menu) |
+
+### Rules
+
+- Height: 44pt (iOS) / 56dp (Android). RN: ~56 + status bar inset.
+- One title per bar. No subtitle unless absolutely needed; if it's needed, the design likely needs a hero block, not a stuffed bar.
+- Right-side actions: max 2 visible. 3+ goes into a `⋮` (kebab) menu.
+- Title alignment: centered (iOS / KR consumer convention) or left (Android Material 3).
+
+### Variants
+
+| Variant | Use |
+| --- | --- |
+| Standard | Most screens |
+| Large title (iOS native) | Top of stack, sets tone for content. Collapses to standard on scroll. |
+| Search-as-bar | Replace the title with a search input (e.g., "🔍 search...") |
+| Tabs-in-bar | Bottom of bar has segmented control or scrollable tabs |
+
+### Don't
+
+- Don't put the back button on the right.
+- Don't omit the back button on inner screens. Even if the system back gesture works, users want a tappable affordance.
+- Don't use the title as a navigation menu (Android pre-Material 3 convention is dead — don't revive).
+- Don't put primary CTAs in the header. Headers are for navigation and meta-actions; primary CTAs go in the body or footer.
+
+## Drawer (hamburger menu)
+
+Side-panel that slides in. Use sparingly.
+
+### When to use
+
+- 5+ top-level destinations and they're not all equally accessed.
+- Account / settings / less-frequent destinations live here.
+- Apps with many "spaces" or "channels" (e.g., team chat with many rooms).
+
+### When NOT to use
+
+- Default consumer mobile app with 3–5 destinations: use bottom tab bar instead.
+- Korean consumer apps: drawer is uncommon. Korean users prefer visible tabs.
+- E-commerce: drawer reduces discoverability of categories.
+
+### Anatomy
+
+```
+←─────────────  drawer (75–85% screen width)
+│ ┌─────────┐
+│ │ Avatar  │
+│ │ Name    │
+│ │ Email   │
+│ └─────────┘
+│ 
+│ 🏠 Home
+│ 📊 Statistics
+│ ⚙  Settings
+│ 🚪 Logout
+│ 
+└──────────────
+```
+
+- Width: 75–85% of screen. Don't go full-width (must show backdrop).
+- Backdrop: 50% black. Tappable to close.
+- Slide-in: 250ms ease-out from left (LTR) or right (RTL).
+- Header section: user identity (avatar, name, email) — most common pattern.
+
+### Don't
+
+- Don't combine drawer + bottom tabs. Pick one as primary.
+- Don't put main app navigation in a drawer if the user uses it more than 3x per session — they'll resent the extra tap. Move to a tab.
+
+## Stack-only navigation
+
+For linear flows: onboarding (4–5 screens), multi-step forms, checkout, signup.
+
+- No tab bar visible.
+- Top app bar shows progress (1/4, 2/4, ...) or step name.
+- Back button always available (don't trap user without an exit).
+- Final screen has a clear "complete" affordance — not just disappearing.
+- Skipping: provide an "Skip" affordance for non-critical onboarding screens, but never for required setup.
+
+## Back navigation
+
+Mobile back has multiple sources:
+
+| Source | Behavior |
+| --- | --- |
+| Header back button (`←`) | Standard pop-stack |
+| iOS swipe-from-edge gesture | System-native; respect it |
+| Android system back button | OS-level; must respect |
+| Android system back gesture | Newer Android; respect |
+| In-page link / button | Application-defined |
+
+**Always** make these all work consistently. The system back must:
+- Pop one stack level at a time.
+- Close modals if open.
+- Close the keyboard before popping if the keyboard is visible (some prefer popping immediately).
+- Show a confirmation if there's unsaved work (`이 화면을 나가시겠습니까? 작성 중인 내용이 사라집니다.`).
+
+Don't:
+- Don't intercept Android back to do nothing.
+- Don't remap back to "go to home" — it's pop-stack semantically everywhere else.
+- Don't show a custom back button without also handling system back.
+
+## Search behavior
+
+Korean consumer apps **search heavily**. Make search prominent.
+
+### Patterns
+
+| Pattern | Use |
+| --- | --- |
+| Persistent search at top of screen | Apps where search is the primary action (Naver, e-commerce) |
+| Search icon in app bar → opens overlay | Apps where search is secondary (gmail, banking) |
+| Tab dedicated to search | Multi-purpose apps (Instagram, KakaoTalk has chat search but not a tab) |
+
+### Search overlay (icon-tap-to-open variant)
+
+```
+┌─────────────────────────────────────────────────┐
+│ ←  🔍 [               type to search          ] │
+├─────────────────────────────────────────────────┤
+│ 최근 검색어                                      │
+│ • previous query 1                       ✕      │
+│ • previous query 2                       ✕      │
+│ ─────                                            │
+│ 추천 검색어                                       │
+│ • trending 1                                    │
+│ • trending 2                                    │
+└─────────────────────────────────────────────────┘
+```
+
+Must include:
+- Recent searches (with clear-each + clear-all)
+- Recommended / trending (if applicable)
+- Clear input button (✕) when input has value
+- Cancel / back to close
+
+Search type-ahead: debounce 200–300ms, cancel previous request on new keystroke.
+
+## Modal screens
+
+Different from inline modal/dialog. A "modal screen" takes over the full screen, often presented from below (iOS sheet style):
+
+- Used for: compose, settings detail, photo viewer, camera.
+- Presentation: slide up from bottom (iOS) or fade (Android typically).
+- Dismissal: explicit Close (✕) or Cancel button. iOS swipe-down gesture on sheet handle. Don't rely on backdrop tap (no backdrop visible above status bar).
+- Header pattern: ✕ on left, "Save" / primary action on right.
+
+### Sheet variants (iOS 15+ and pull-up sheets in apps)
+
+```
+                        ╱─╲ (drag handle)
+┌───────────────────────────────────────────┐
+│         ✕         Title              Save │
+│                                           │
+│  body content                             │
+│                                           │
+└───────────────────────────────────────────┘
+```
+
+- Pull-handle indicator at top.
+- Detents: 25%, 50%, 90% sizes (user can drag to resize).
+- Use for: filter panels, location pickers, brief forms.
+
+## Cross-reference
+
+- [knowledge/i18n/korean-product-conventions.md](../i18n/korean-product-conventions.md) — KR navigation conventions
+- [knowledge/platforms/react-native.md](../platforms/react-native.md) — RN-specific implementation
+- [knowledge/a11y/keyboard-and-focus.md](../a11y/keyboard-and-focus.md) — focus on route change
+- [knowledge/motion/principles.md](../motion/principles.md) — drawer/sheet timing