Objective
Implement the non-interactive primitive layer using only the approved semantic tokens.
Components
Box/Stack/Inline/Grid, Text/Heading, Surface/Card/Divider, Icon/Image/Avatar, Spinner/Progress/Skeleton, Badge and visually hidden content. Keep the public API minimal and compatible with React Native Web; platform-specific behavior must be explicit.
Acceptance criteria
Parent: #7
Required visual evidence
The draft PR must provide a runnable component-gallery route plus before/after screenshots at 390×844, 768×1024, and 1440×900. Cover light, dark, high-contrast, default, hover, focus-visible, disabled, loading, empty, error, and overflow states applicable to the component. Playwright must exercise keyboard interaction and capture deterministic screenshots. A reviewer other than the implementing agent must approve intentional baseline changes; screenshot generation or a passing pixel threshold is not visual approval.
Tembo execution contract
automation:
eligible: true
executor_profile: tembo
readiness: blocked
primary_repository: TinyChain-Inc/client
base_branch: main
writable_scope:
- web/src/ui/primitives/**
- web/src/ui/gallery/**
- web/tests/**
prerequisites:
- "#76"
concurrency_group: ui-foundation-primitives
required_commands:
- "cd web && npm ci"
- "cd web && npm run test:all"
external_actions: none
draft_pr_only: true
completion_authority: human
visual_validation:
required: true
browsers: [chromium]
viewports: [mobile, tablet, desktop]
evidence: [component-gallery-url, screenshot-bundle, playwright-report]
baseline_update_requires: human-visual-approval
failure_policy: never-auto-accept-diff
budget:
size: large
max_revisions: 3
max_wall_minutes: 120
Objective
Implement the non-interactive primitive layer using only the approved semantic tokens.
Components
Box/Stack/Inline/Grid, Text/Heading, Surface/Card/Divider, Icon/Image/Avatar, Spinner/Progress/Skeleton, Badge and visually hidden content. Keep the public API minimal and compatible with React Native Web; platform-specific behavior must be explicit.
Acceptance criteria
Parent: #7
Required visual evidence
The draft PR must provide a runnable component-gallery route plus before/after screenshots at 390×844, 768×1024, and 1440×900. Cover light, dark, high-contrast, default, hover, focus-visible, disabled, loading, empty, error, and overflow states applicable to the component. Playwright must exercise keyboard interaction and capture deterministic screenshots. A reviewer other than the implementing agent must approve intentional baseline changes; screenshot generation or a passing pixel threshold is not visual approval.
Tembo execution contract