@su-record/vibe 2.8.24 → 2.8.26

package/skills/techdebt/templates/report.md

@@ -0,0 +1,86 @@
+# Technical Debt Report
+
+**Project**: {{PROJECT_NAME}}
+**Date**: {{DATE}}
+**Scanned Directory**: {{SCAN_DIR}}
+**Files Scanned**: {{FILE_COUNT}}
+
+---
+
+## Summary
+
+| Priority | Count | Status |
+|----------|-------|--------|
+| P1 — Blocks Merge | {{P1_COUNT}} | {{P1_STATUS}} |
+| P2 — Fix Before PR | {{P2_COUNT}} | {{P2_STATUS}} |
+| P3 — Backlog | {{P3_COUNT}} | {{P3_STATUS}} |
+| **Total** | **{{TOTAL_COUNT}}** | |
+
+---
+
+## P1 — Blocks Merge ({{P1_COUNT}} items)
+
+{{P1_ITEMS}}
+
+<!-- Example entry:
+- `src/services/auth.ts:42` — `any` type usage: parameter `payload` typed as `any`
+-->
+
+---
+
+## P2 — Fix Before PR ({{P2_COUNT}} items)
+
+### Console Statements ({{CONSOLE_COUNT}})
+
+{{CONSOLE_ITEMS}}
+
+### Unused Imports ({{UNUSED_IMPORT_COUNT}})
+
+{{UNUSED_IMPORT_ITEMS}}
+
+### Long Functions ({{LONG_FUNCTION_COUNT}})
+
+{{LONG_FUNCTION_ITEMS}}
+
+### Deep Nesting ({{DEEP_NESTING_COUNT}})
+
+{{DEEP_NESTING_ITEMS}}
+
+---
+
+## P3 — Backlog ({{P3_COUNT}} items)
+
+### Magic Numbers ({{MAGIC_NUMBER_COUNT}})
+
+{{MAGIC_NUMBER_ITEMS}}
+
+### Commented-Out Code ({{COMMENTED_CODE_COUNT}})
+
+{{COMMENTED_CODE_ITEMS}}
+
+---
+
+## Auto-fixable Items
+
+The following can be removed safely without review:
+
+{{AUTOFIXABLE_LIST}}
+
+> Run with user confirmation before applying auto-fixes.
+
+---
+
+## Requires Manual Review
+
+The following require human judgment:
+
+{{MANUAL_REVIEW_LIST}}
+
+---
+
+## Next Steps
+
+1. Fix all P1 items immediately
+2. Address P2 items before opening PR
+3. Create tracked tickets for P3 items
+4. Re-run scan after fixes: `node skills/techdebt/scripts/scan.js {{SCAN_DIR}}`

package/skills/tool-fallback/rubrics/fallback-chain.md

@@ -0,0 +1,58 @@
+# Tool Fallback Priority Chain
+
+## Web / Documentation Search
+
+```
+1. Web Search (Brave/Tavily)
+2. context7 plugin          ← library/framework docs
+3. Claude built-in knowledge ← last resort, may be stale
+```
+
+**Skip to step 2 immediately** for library/API questions — context7 is faster and more accurate than web search for docs.
+
+## Code/File Discovery
+
+```
+1. Glob (pattern match by name)
+2. Grep (content search)
+3. git log --all -- <path>  ← file was deleted or renamed
+4. Ask user for path        ← exhausted all options
+```
+
+## LLM Routing
+
+| Task Type | Primary | Secondary | Fallback |
+|-----------|---------|-----------|----------|
+| Architecture, debugging | GPT | Gemini | Claude direct |
+| UI/UX, code analysis | Gemini | GPT | Claude direct |
+| Code generation, general | Claude | — | — |
+
+**On 429 / rate limit**: skip to secondary immediately — no retry on rate-limited primary.
+
+## External API Calls
+
+```
+1. Try primary endpoint
+2. On 429: skip to alternative, mark circuit OPEN
+3. On 5xx: retry once with backoff (2s), then skip
+4. On timeout: retry once with smaller payload, then skip
+5. On 401/403: re-auth, do NOT count as circuit failure
+```
+
+## Circuit States
+
+| State | Trigger | Recovery |
+|-------|---------|----------|
+| CLOSED | Normal | — |
+| OPEN | 3 failures | Auto after 30s cooldown |
+| HALF-OPEN | After cooldown | 1 test request; success → CLOSED |
+
+## Never-Stop Rule
+
+Every chain must have a terminal fallback that produces **some** output. Acceptable terminal fallbacks:
+
+- Partial result with `TODO` annotation
+- Claude's own knowledge with explicit uncertainty note
+- Ask the user for the missing piece (with specific question)
+
+**Never** return empty-handed without exhausting the chain first.

package/skills/typescript-advanced-types/rubrics/type-patterns.md

@@ -0,0 +1,109 @@
+# Advanced TypeScript Type Patterns
+
+## Discriminated Unions
+
+Use a literal `kind`/`type` field to let TypeScript narrow exhaustively.
+
+```typescript
+type Result<T> =
+  | { kind: 'ok'; value: T }
+  | { kind: 'err'; error: string };
+
+function handle<T>(r: Result<T>): T {
+  if (r.kind === 'ok') return r.value;   // narrowed: r.value exists
+  throw new Error(r.error);              // narrowed: r.error exists
+}
+```
+
+**Exhaustive check pattern** — compile-time guard against missing branches:
+
+```typescript
+function assertNever(x: never): never {
+  throw new Error(`Unhandled case: ${JSON.stringify(x)}`);
+}
+// In switch default: case: return assertNever(action);
+```
+
+## Template Literal Types
+
+Compose string types at the type level.
+
+```typescript
+type EventName = 'click' | 'focus' | 'blur';
+type Handler = `on${Capitalize<EventName>}`;
+// → 'onClick' | 'onFocus' | 'onBlur'
+
+type RouteParam<T extends string> =
+  T extends `${infer _Start}:${infer Param}/${infer Rest}`
+    ? Param | RouteParam<Rest>
+    : T extends `${infer _Start}:${infer Param}`
+    ? Param
+    : never;
+// RouteParam<'/user/:id/post/:postId'> → 'id' | 'postId'
+```
+
+**Gotcha**: Template literals distribute over unions — one type per combination.
+
+## Conditional Types
+
+Branch the type system on type relationships.
+
+```typescript
+type NonNullable<T> = T extends null | undefined ? never : T;
+type Awaited<T> = T extends Promise<infer U> ? Awaited<U> : T;
+```
+
+**Distributive gotcha** — to prevent distribution, wrap in a tuple:
+
+```typescript
+type IsArray<T> = T extends unknown[] ? true : false;
+// IsArray<string | number[]> → boolean (distributed!)
+
+type IsArrayExact<T> = [T] extends [unknown[]] ? true : false;
+// IsArrayExact<string | number[]> → false (no distribution)
+```
+
+## Mapped Types
+
+Transform every property in a type.
+
+```typescript
+type Readonly<T> = { readonly [K in keyof T]: T[K] };
+type Optional<T> = { [K in keyof T]?: T[K] };
+
+// Key remapping with 'as'
+type Getters<T> = {
+  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
+};
+// Getters<{ name: string }> → { getName: () => string }
+```
+
+## Branded / Opaque Types
+
+Prevent mixing semantically different strings/numbers.
+
+```typescript
+type UserId = string & { readonly _brand: 'UserId' };
+type PostId = string & { readonly _brand: 'PostId' };
+
+function toUserId(id: string): UserId {
+  return id as UserId;  // only one cast, at the boundary
+}
+// toUserId('abc') satisfies UserId ✅
+// 'raw-string' satisfies UserId    ✗ (compile error)
+```
+
+## `satisfies` vs `as const`
+
+```typescript
+const config = {
+  port: 3000,
+  host: 'localhost',
+} satisfies Record<string, string | number>;
+// satisfies: validates shape AND keeps literal types (port: 3000, not number)
+
+const colors = ['red', 'green', 'blue'] as const;
+// as const: freezes to readonly tuple of literals
+```
+
+Use `satisfies` when you need both **validation** and **literal type preservation**.

package/skills/ui-ux-pro-max/rubrics/interaction-states.md

@@ -0,0 +1,83 @@
+# Required Interaction States Checklist
+
+Every interactive element must implement all applicable states. Missing states are P1–P2 findings.
+
+---
+
+## State Definitions
+
+| State | Trigger | Visual Requirement | ARIA Requirement |
+|-------|---------|-------------------|-----------------|
+| **Default** | No user interaction | Base appearance defined with sufficient contrast | — |
+| **Hover** | Mouse enters element | Visible color, shadow, or opacity change | — |
+| **Focus** | Keyboard navigation / tab | Clearly visible focus ring (≥ 2px, non-color-only) | — |
+| **Active / Pressed** | Mouse down or tap | Distinct from hover (darker, scale-down, or depressed look) | `aria-pressed` on toggles |
+| **Disabled** | Element not actionable | Reduced opacity (≤ 50%) + `cursor: not-allowed` | `disabled` attr or `aria-disabled="true"` |
+| **Loading** | Async operation in progress | Spinner, skeleton, or progress bar replaces or overlays content | `aria-busy="true"` |
+| **Error** | Validation fails or operation fails | Error color on border/background + error message visible | `aria-invalid="true"` + `aria-describedby` pointing to error |
+| **Success** | Operation completes | Confirmation feedback (color change, checkmark, toast) | `aria-live` announcement |
+
+---
+
+## Element-State Matrix
+
+Use this matrix to verify each element type has all required states implemented.
+
+| Element | Default | Hover | Focus | Active | Disabled | Loading | Error | Success |
+|---------|---------|-------|-------|--------|----------|---------|-------|---------|
+| Button (primary) | Required | Required | Required | Required | Required | Required | — | — |
+| Button (destructive) | Required | Required | Required | Required | Required | Required | — | — |
+| Link | Required | Required | Required | Required | — | — | — | — |
+| Text input | Required | Optional | Required | — | Required | — | Required | Optional |
+| Select / dropdown | Required | Required | Required | — | Required | — | Required | — |
+| Checkbox | Required | Required | Required | Required | Required | — | — | — |
+| Radio button | Required | Required | Required | Required | Required | — | — | — |
+| Toggle / switch | Required | Required | Required | Required | Required | — | — | — |
+| Form submit button | Required | Required | Required | Required | Required | Required | — | Required |
+| Card (interactive) | Required | Required | Required | — | — | Required | — | — |
+| Tab | Required | Required | Required | Required | Required | — | — | — |
+| Menu item | Required | Required | Required | Required | Required | — | — | — |
+| Icon button | Required | Required | Required | Required | Required | Required | — | — |
+
+---
+
+## Implementation Checklist
+
+### Hover
+- [ ] Color change uses a dedicated hover token (not inline opacity hack)
+- [ ] Transition applied (`transition-colors duration-150` or equivalent)
+- [ ] Layout does not shift on hover (no margin/padding changes)
+
+### Focus
+- [ ] Focus ring visible at 2:1 contrast against adjacent color
+- [ ] `outline: none` never used without a custom focus-visible replacement
+- [ ] `:focus-visible` used instead of `:focus` to avoid visible ring on mouse click
+
+### Active / Pressed
+- [ ] Distinct visual from hover state
+- [ ] `scale(0.97–0.98)` or darker color on press — not just removing hover
+- [ ] Touch devices: active state triggers on `touchstart`
+
+### Disabled
+- [ ] `opacity: 0.4–0.5` on disabled elements
+- [ ] `pointer-events: none` prevents interaction
+- [ ] `cursor: not-allowed` set
+- [ ] `disabled` attribute or `aria-disabled="true"` set on element
+- [ ] Disabled state does not rely on color alone
+
+### Loading
+- [ ] Original button/element width preserved during loading (no layout jump)
+- [ ] Spinner or skeleton shown within 100ms of action trigger
+- [ ] Interaction re-enabled after completion or error
+- [ ] `aria-busy="true"` set on loading container
+
+### Error
+- [ ] Error message visible near the element (not just a global toast)
+- [ ] Error styling uses `--color-error` token
+- [ ] `aria-invalid="true"` set on invalid input
+- [ ] Error message linked via `aria-describedby`
+
+### Success
+- [ ] Confirmation feedback shown within 300ms of completion
+- [ ] Success message auto-dismisses or provides clear dismiss action
+- [ ] `aria-live="polite"` region announces success to screen readers

package/skills/ui-ux-pro-max/rubrics/responsive-breakpoints.md

@@ -0,0 +1,99 @@
+# Standard Breakpoint Definitions
+
+Reference for responsive design implementation across all stacks.
+
+---
+
+## Core Breakpoints
+
+| Name | Min Width | Target Devices | Priority |
+|------|-----------|---------------|----------|
+| `xs` | 375px | Small phones (iPhone SE, Galaxy A) | Test target |
+| `sm` | 640px | Large phones (landscape), small tablets | Layout change |
+| `md` | 768px | Tablets (portrait), large phones | Major breakpoint |
+| `lg` | 1024px | Tablets (landscape), small laptops | Major breakpoint |
+| `xl` | 1280px | Standard desktop | Primary design target |
+| `2xl` | 1536px | Large monitors | Wide-layout target |
+
+---
+
+## Framework Mappings
+
+| Breakpoint | Tailwind class | CSS media query | Common use |
+|------------|---------------|-----------------|------------|
+| Mobile default | (no prefix) | base styles | Mobile-first base |
+| sm | `sm:` | `@media (min-width: 640px)` | Large phone adjustments |
+| md | `md:` | `@media (min-width: 768px)` | Tablet layout |
+| lg | `lg:` | `@media (min-width: 1024px)` | Desktop layout |
+| xl | `xl:` | `@media (min-width: 1280px)` | Wide desktop |
+| 2xl | `2xl:` | `@media (min-width: 1536px)` | Ultra-wide |
+
+---
+
+## Layout Behavior by Breakpoint
+
+### Navigation
+| Breakpoint | Pattern |
+|------------|---------|
+| < md | Hamburger menu / bottom tab bar |
+| md–lg | Collapsed sidebar or top nav with fewer items |
+| ≥ lg | Full sidebar or top nav with all items visible |
+
+### Content Grid
+| Breakpoint | Columns |
+|------------|---------|
+| xs–sm | 1 column |
+| md | 2 columns |
+| lg | 3 columns |
+| xl+ | 4 columns (data-heavy) or 3 columns (content) |
+
+### Typography Scale Adjustments
+| Element | Mobile | Desktop |
+|---------|--------|---------|
+| Hero heading | `text-3xl` (30px) | `text-5xl` (48px) |
+| Section heading | `text-xl` (20px) | `text-3xl` (30px) |
+| Body | `text-base` (16px) | `text-base` (16px) — never reduce below 16px |
+| Caption | `text-sm` (14px) | `text-sm` (14px) |
+
+---
+
+## Touch Target Rules
+
+| Device | Minimum touch target | Recommended |
+|--------|---------------------|-------------|
+| Mobile (< md) | 44×44px | 48×48px |
+| Tablet (md–lg) | 44×44px | 44×44px |
+| Desktop (≥ lg) | 32×32px (mouse) | 36×36px |
+
+---
+
+## Testing Checklist
+
+| Breakpoint | Must Verify |
+|------------|-------------|
+| 375px | No horizontal scroll; text readable; nav accessible; forms usable |
+| 768px | Layout transitions correctly; no content overlap |
+| 1024px | Desktop features visible; sidebar or nav fully expanded |
+| 1440px | Max-width container centered; content not stretched too wide |
+
+### Max-width containers
+
+| Use case | Recommended max-width |
+|----------|-----------------------|
+| Marketing / landing pages | `max-w-5xl` (1024px) or `max-w-6xl` (1152px) |
+| Application layouts | `max-w-7xl` (1280px) |
+| Reading / article content | `max-w-2xl` (672px) or `max-w-3xl` (768px) |
+| Full-bleed dashboards | None (use grid with sidebars) |
+
+---
+
+## Container Query Usage
+
+Use `@container` when a component's layout depends on its parent width, not the viewport.
+
+| Scenario | Use viewport breakpoint | Use container query |
+|----------|------------------------|---------------------|
+| Page-level layout | Yes | No |
+| Component in sidebar vs main | No | Yes |
+| Card grid columns | No | Yes |
+| Navbar collapsing | Yes | No |

package/skills/user-personas/rubrics/research-methods.md

@@ -0,0 +1,56 @@
+# Persona Research Methodology
+
+## Research Method Selection
+
+| Situation | Recommended Method | Sample Size |
+|-----------|-------------------|-------------|
+| New product, no users yet | Exploratory interviews | 8–12 participants |
+| Existing product, need depth | In-depth interviews | 5–8 per segment |
+| Validating existing personas | Survey | 50+ respondents |
+| Behavioral patterns | Analytics + session recordings | All available data |
+| Competitive landscape | Competitor review + job forums | Qualitative |
+
+## Interview Design Checklist
+
+- [ ] Questions focus on past behavior, not hypothetical future behavior
+- [ ] "Tell me about a time when..." used instead of "Would you...?"
+- [ ] No leading questions (avoid "Don't you find X frustrating?")
+- [ ] Follow-up probes prepared: "Why?", "What happened next?", "How did that make you feel?"
+- [ ] Job-to-be-done lens: ask what they're trying to accomplish, not what features they want
+- [ ] Session recorded (with consent) for later synthesis
+- [ ] Duration: 45–60 minutes per interview
+
+## Data Collection Quality Gates
+
+- [ ] Minimum 5 interviews per distinct segment before drawing conclusions
+- [ ] Direct quotes captured verbatim (not paraphrased during interview)
+- [ ] Demographic bias checked — sample matches target market
+- [ ] B2B: multiple roles interviewed (buyer, user, influencer)
+- [ ] Negative cases included — interview users who churned or rejected the product
+
+## Synthesis Process
+
+1. **Affinity mapping**: Group raw observations by theme (not by participant)
+2. **Pattern extraction**: Identify recurring pain points and jobs across 3+ participants
+3. **Segmentation**: Cluster participants by shared motivations (not demographics)
+4. **Persona drafting**: One persona per distinct motivation cluster
+5. **Validation**: Cross-reference each persona claim against source data
+
+## Persona Validity Checklist
+
+- [ ] Each persona grounded in ≥3 real participants from research
+- [ ] Personas are mutually distinct — overlapping personas should be merged
+- [ ] Unexpected insights included — if all insights are obvious, dig deeper
+- [ ] Demographics are secondary — job-to-be-done drives persona definition
+- [ ] Quotes used are verbatim from research (not invented)
+- [ ] Data gaps explicitly flagged — don't fill gaps with assumptions
+
+## Common Research Mistakes
+
+| Mistake | Consequence | Fix |
+|---------|-------------|-----|
+| Asking "what features do you want?" | Users design solutions, not needs | Ask about current behavior and pain |
+| Only interviewing enthusiasts | Survivorship bias | Include churned users and non-adopters |
+| Conflating segment with persona | Personas become stereotypes | Base personas on motivations, not age/gender |
+| Too many personas (>5) | Team ignores them | Merge overlapping clusters, max 3–4 |
+| No data gaps acknowledged | False confidence | Flag what you don't yet know |

package/skills/user-personas/templates/persona.md

@@ -0,0 +1,89 @@
+# User Persona: {{PERSONA_NAME}}
+
+> Product: {{PRODUCT_NAME}} | Research basis: {{DATA_SOURCE}} | Created: {{DATE}}
+
+---
+
+## Identity
+
+| Field | Value |
+|-------|-------|
+| Name (fictional) | {{PERSONA_NAME}} |
+| Age range | {{AGE_RANGE}} |
+| Role / Title | {{ROLE}} |
+| Company size | {{COMPANY_SIZE}} (if B2B) |
+| Location | {{LOCATION}} |
+| Tech comfort | {{LOW / MEDIUM / HIGH}} |
+
+**In their own words**: "{{REPRESENTATIVE_QUOTE_FROM_RESEARCH}}"
+
+---
+
+## Primary Job-to-be-Done
+
+> {{THE CORE OUTCOME THIS PERSONA IS TRYING TO ACHIEVE}}
+
+**Context**: {{WHEN AND HOW OFTEN DOES THIS JOB ARISE?}}
+**Definition of done**: {{HOW DOES THIS PERSONA KNOW THEY SUCCEEDED?}}
+
+---
+
+## Top 3 Pain Points
+
+| # | Pain | Impact | Severity |
+|---|------|--------|----------|
+| 1 | {{PAIN_1}} | {{CONSEQUENCE}} | High / Med / Low |
+| 2 | {{PAIN_2}} | {{CONSEQUENCE}} | High / Med / Low |
+| 3 | {{PAIN_3}} | {{CONSEQUENCE}} | High / Med / Low |
+
+---
+
+## Top 3 Desired Gains
+
+| # | Gain | How They Measure It |
+|---|------|---------------------|
+| 1 | {{GAIN_1}} | {{METRIC_OR_FEELING}} |
+| 2 | {{GAIN_2}} | {{METRIC_OR_FEELING}} |
+| 3 | {{GAIN_3}} | {{METRIC_OR_FEELING}} |
+
+---
+
+## Unexpected Insight
+
+> {{A COUNTERINTUITIVE BEHAVIORAL PATTERN OR MOTIVATION FROM RESEARCH DATA}}
+
+**Why it matters for product decisions**: {{IMPLICATION}}
+
+---
+
+## Current Alternatives
+
+How does this persona solve the problem today?
+
+| Alternative | Why they use it | What frustrates them |
+|-------------|----------------|----------------------|
+| {{ALT_1}} | {{REASON}} | {{FRUSTRATION}} |
+| {{ALT_2}} | {{REASON}} | {{FRUSTRATION}} |
+
+---
+
+## Product Fit Assessment
+
+**How {{PRODUCT_NAME}} addresses their needs**:
+- {{FIT_POINT_1}}
+- {{FIT_POINT_2}}
+
+**Potential friction points**:
+- {{FRICTION_1}}
+- {{FRICTION_2}}
+
+**Unmet needs (future opportunities)**:
+- {{UNMET_NEED_1}}
+
+---
+
+## Data Sources
+
+- {{SOURCE_1}} (e.g., "10 user interviews, March 2026")
+- {{SOURCE_2}} (e.g., "NPS survey, n=142")
+- **Data gaps**: {{WHAT WE DON'T KNOW YET}}

package/skills/vercel-react-best-practices/rubrics/performance.md

@@ -0,0 +1,82 @@
+# React Performance Patterns
+
+## memo — Skip Re-render
+
+Wrap components that receive stable props but re-render from parent updates.
+
+```typescript
+const ItemRow = memo(function ItemRow({ item }: { item: Item }) {
+  return <tr>{item.name}</tr>;
+});
+```
+
+**When to use**: Pure display components in long lists, or children of frequently-updating parents.
+**When NOT to use**: Components that almost always re-render anyway (memo check costs CPU too).
+
+## useMemo — Cache Expensive Computation
+
+```typescript
+// Expensive filter/sort that depends on list + query
+const filtered = useMemo(
+  () => items.filter(i => i.name.includes(query)).sort(byDate),
+  [items, query]
+);
+```
+
+**Rule**: Only memoize when the computation is genuinely expensive (> 1ms). Measuring before adding is best practice.
+
+**Gotcha**: Object/array deps break memoization — use primitive values:
+
+```typescript
+// Bad: new object reference every render breaks memo
+useMemo(() => compute(config), [config]);
+
+// Good: primitive values stay stable
+useMemo(() => compute(config), [config.id, config.mode]);
+```
+
+## useCallback — Stable Function References
+
+```typescript
+// Without useCallback: new function ref → effect re-runs every render
+const handleSubmit = useCallback(
+  (e: FormEvent) => { submitForm(formData); },
+  [formData]
+);
+```
+
+**Use when**: passing callbacks to memo-wrapped children, or as useEffect dependencies.
+**Skip when**: the component receiving it is not memoized (no benefit).
+
+## Suspense — Stream Slow Components
+
+```tsx
+// Without Suspense: entire page waits for slowComponent
+// With Suspense: page streams, slot renders when ready
+<Suspense fallback={<Skeleton />}>
+  <SlowDataComponent />   {/* server component with slow fetch */}
+</Suspense>
+```
+
+**Gotcha**: Suspense boundaries must be placed at the **component that fetches**, not a parent.
+
+## useTransition — Keep UI Responsive
+
+```typescript
+const [isPending, startTransition] = useTransition();
+
+// Mark state update as non-urgent — keeps input responsive
+startTransition(() => setSearchQuery(inputValue));
+```
+
+Use for filtering, sorting, navigation — updates that can briefly lag without hurting UX.
+
+## Quick Reference
+
+| Pattern | Use Case | Skip When |
+|---------|----------|-----------|
+| `memo` | Pure component in updating tree | Almost always re-renders anyway |
+| `useMemo` | Expensive calculation | Fast computation (< 1ms) |
+| `useCallback` | Stable dep for memo/effect | Recipient is not memoized |
+| `Suspense` | Slow async data in subtree | Synchronous rendering |
+| `useTransition` | Non-urgent state updates | Critical/immediate feedback |