Use when building cross-platform UI components with Tamagui, creating forms, cards, lists, or layouts for React Native and web. Triggers on "create component", "build form", "Tamagui", "Bento template", "cross-platform UI", "migrate to Tamagui". Enforces Bento First methodology - check templates before building from scratch.
/plugin marketplace add cmtkdot/xanbzs-toolkit/plugin install cmtkdot-xanbzs-toolkit@cmtkdot/xanbzs-toolkitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
documentations/bento-bundle-ui-templates.xmldocumentations/config.jsondocumentations/tamagui-basic-ui-docs.mdBuild cross-platform UI components using Tamagui with the Bento First methodology: adapt existing templates before building from scratch.
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
| 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 |
// Read config.json, find matching category
// Example: "settings card" → structure.user.categories.preferences
// Search XML for the component path
// Copy the template code
src/tamagui/ui/_shared/ (reusable) or src/features/<feature>/components/fileName properties/** ------ EXAMPLE ------ */ comments| 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 |
| 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.* |
$gtSm, $xs media props)config.jsononClick instead of onPressreact-native directlyAll mean: Start over, check templates first.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.