Tamagui Designer

Build cross-platform UI components using Tamagui with the Bento First methodology: adapt existing templates before building from scratch.

CRITICAL: Bento First

Before writing ANY component, check templates:

# Step 1: Read the component catalog
Read documentations/config.json

# Step 2: Search for matching category (e.g., "forms", "ecommerce", "user")

# Step 3: Get template code from XML
Read documentations/bento-bundle-ui-templates.xml
# Search for the component path found in config.json

Local Knowledge Base

Resource	Path	Use When
Component Catalog	documentations/config.json	Find template by category (184+ components)
Template Source	documentations/bento-bundle-ui-templates.xml	Get actual component code
Tamagui Docs	documentations/tamagui-basic-ui-docs.md	API reference, tokens, theming

Workflow

1. Discover (Check Catalog)

// Read config.json, find matching category
// Example: "settings card" → structure.user.categories.preferences

2. Retrieve (Get Template)

// Search XML for the component path
// Copy the template code

3. Adapt & Implement

1. Create file in src/tamagui/ui/_shared/ (reusable) or src/features/<feature>/components/
2. Paste template code
3. Refactor:
   • Remove fileName properties
   • Remove /** ------ EXAMPLE ------ */ comments
   • Fix imports to point to your dependencies

Critical Rules

Rule	Do	Don't
Templates	Check Bento catalog FIRST	Build from scratch without checking
Tokens	$background, $4, $color	Hardcoded #fff, 16, blue
Events	onPress	onClick (breaks native)
Layout	XStack, YStack	div, View from react-native
DOM APIs	useMedia hook	window, document

Quick Reference

Need	Category in config.json
Forms/Inputs	forms.*
Product cards	ecommerce.product_list
Settings/Profile	user.preferences, user.profile
Navigation	shells.navbar, shells.tabbar
Lists/Tables	elements.list, panelists.tables
Dialogs/Modals	elements.dialogs
Charts	charts.*

Definition of Done

• Uses Bento template as base (or documented why not)
• Semantic tokens for spacing, colors, fonts
• Responsive ($gtSm, $xs media props)
• Clean exports, no template boilerplate
• Works on iOS, Android, and Web

Red Flags - STOP

• Building from scratch without checking config.json
• Using onClick instead of onPress
• Importing from react-native directly
• Hardcoded colors or spacing values

All mean: Start over, check templates first.