[{"_1":2,"_296":-5,"_297":-5},"loaderData",{"_3":4,"_8":9,"_23":24},"root",{"_5":-5,"_6":7},"user","countable",true,"routes/_main",{"_5":-5,"_10":11},"recentPosts",[12,17,20],{"_13":14,"_15":16},"slug","claude-code-channels","title","Claude Code Channels: Pushing Events Into a Session",{"_13":18,"_15":19},"claude-code-monitor-tool","What Claude Code's Monitor Tool Does",{"_13":21,"_15":22},"claude-code-subagent-forking","How Claude Code's Subagent Forking Works","routes/creators.$handle",{"_25":26,"_27":26,"_28":29,"_30":31,"_32":33,"_294":31,"_295":110},"handle","tamagui","displayName","profileUrl","https://github.com/tamagui","verified",false,"skills",[34],{"_35":36,"_13":37,"_38":39,"_40":26,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_60":61,"_62":63,"_64":65,"_80":81,"_82":-5,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":-5,"_94":95,"_96":26,"_30":31,"_97":31,"_98":86,"_99":100,"_101":86,"_102":86,"_103":104,"_105":106,"_135":136,"_171":172,"_221":222,"_266":267,"_278":279,"_290":291,"_292":293},"id","gh__tamagui__tamagui__plans-tamagui-skill-skills-tamagui","tamagui-tamagui","name","Tamagui","canonicalName","tagline","Build cross-platform apps with ease using Tamagui.","description","Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui,\ncreating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components,\nor working with animations. Triggers: \"tamagui\", \"styled()\", \"$token\", \"XStack/YStack\", \"useTheme\",\n\"@tamagui/*\" imports, \"createStyledContext\", \"variants\".","longDescription","Tamagui is a universal React UI framework designed for building applications that run seamlessly on both web and native platforms. It provides an optimizing compiler that enhances performance and allows developers to create styled components effortlessly. With features like design tokens, responsive styles, and a rich set of UI components, Tamagui aims to streamline the development process for cross-platform applications.\n\nOne of the core functionalities of Tamagui is the `styled()` function, which allows developers to create new components by extending existing ones. This promotes code reuse and consistency across applications. By utilizing design tokens, developers can maintain a cohesive design language without hardcoding values. The framework also supports responsive design through media query props, making it easier to adapt layouts to different screen sizes.\n\nTamagui emphasizes theming and customization, allowing developers to nest themes hierarchically. This feature is particularly beneficial for applications that require different visual styles based on user preferences or branding requirements. The framework also includes capabilities for animations, enabling developers to create engaging user experiences with minimal effort. With built-in support for various animation drivers, Tamagui ensures smooth transitions and interactions across platforms.\n\nOverall, Tamagui is well-suited for developers and designers looking to build modern, responsive applications that function across multiple platforms. Its focus on performance and ease of use makes it a valuable tool for anyone involved in front-end development.","primaryCategory","development","subcategory","frontend","secondaryCategories",[],"tags",[55,56,57,58,59],"react","ui-framework","cross-platform","styled-components","responsive-design","skillType","workflow","complexity","intermediate","platforms",[66,67,68,69,70,71,72,73,74,75,76,77,78,79],"claude-code","claude-api","codex-cli","cursor","antigravity","github-copilot","windsurf","opencode","cline","roo-code","goose","kiro","continue","trae","delivery","source-link","skillFileUrl","pricing","free","price",0,"thumbnailType","icon","thumbnailIcon","rocket","thumbnailColor","blue","thumbnailImageUrl","sellerId","gh__tamagui","sellerName","featured","downloads","views",4,"rating","reviewCount","status","active","metrics",{"_107":108,"_109":110,"_111":112,"_113":108,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":86,"_131":132,"_133":134},"freshnessScore",100,"mirrorCount",1,"skillCountInRepo",3,"qualityScore","popularityScore",84,"trustScore",65,"repoOpenIssues",90,"repoStars",14129,"repoWatchers",46,"repoContributors",249,"overallScore",89,"repoCreatedAt","2020-10-16T21:19:51Z","daysSinceUpdate","repoForks",606,"repoPushedAt","2026-08-10T21:24:06Z","source",{"_137":26,"_138":139,"_140":141,"_146":26,"_147":-5,"_144":148,"_149":150,"_151":31,"_152":153,"_154":155,"_161":162,"_163":7,"_164":165,"_166":167,"_168":169,"_170":169},"owner","repoUrl","https://github.com/tamagui/tamagui","author",{"_28":29,"_142":143,"_38":26,"_25":26,"_144":145},"avatarUrl","https://github.com/tamagui.png","type","User","repo","commitSha","github","branch","main","isOfficial","path","plans/tamagui-skill/skills/tamagui","license",{"_38":156,"_157":158,"_159":160},"MIT License","spdxId","MIT","url","https://github.com/tamagui/tamagui/blob/main/LICENSE","sourceUpdatedAt","2026-08-09T02:57:55.000Z","redistributable","permalink","https://github.com/tamagui/tamagui/blob/main/plans/tamagui-skill/skills/tamagui/SKILL.md","repoFullName","tamagui/tamagui","lastSyncedAt","2026-08-11T01:19:24.286Z","firstSeenAt","seo",{"_173":174,"_185":186,"_187":188,"_206":-5,"_207":208,"_213":214,"_215":216,"_217":218,"_219":220},"useCases",[175,179,182],{"_15":176,"_177":178},"Cross-Platform App Development","body","Use Tamagui to build applications that work on both web and mobile, ensuring a consistent user experience across devices.",{"_15":180,"_177":181},"Theming and Customization","Leverage Tamagui's theming capabilities to create applications that can easily switch between different visual styles based on user preferences.",{"_15":183,"_177":184},"Responsive Design Implementation","Utilize Tamagui's responsive styles to adapt your application's layout and components to different screen sizes effortlessly.","whenNotToUse","Tamagui may not be suitable for projects that require highly specialized UI components or those that do not need cross-platform compatibility.","faqs",[189,194,197,200,203],{"_190":191,"_192":193},"q","What is Tamagui?","a","Tamagui is a universal React UI framework that allows developers to create applications for both web and native platforms using a single codebase.",{"_190":195,"_192":196},"How do I create styled components in Tamagui?","You can create styled components using the `styled()` function, which allows you to extend existing components with custom styles and variants.",{"_190":198,"_192":199},"What are design tokens in Tamagui?","Design tokens are a way to define design values like colors, spacing, and typography in a centralized manner, allowing for consistent styling across your application.",{"_190":201,"_192":202},"Can I use animations with Tamagui?","Yes, Tamagui supports animations through various drivers, enabling you to create smooth transitions and interactive elements in your applications.",{"_190":204,"_192":205},"Is Tamagui suitable for large projects?","Yes, Tamagui is designed to handle complex applications with its theming capabilities, responsive styles, and component-based architecture.","ogImageUrl","keywords",[39,209,210,211,212],"React UI framework","cross-platform development","styled components","responsive design","whenToUse","Use Tamagui when developing applications that need to run on both web and mobile platforms, especially when consistent styling and responsive design are priorities.","metaTitle","Tamagui: Universal React UI Framework","problemSolved","Tamagui simplifies the process of building cross-platform applications by providing a unified framework for styling and component creation.","metaDescription","Build cross-platform apps easily with Tamagui's optimizing compiler and styled components.","content",{"_223":100,"_224":225,"_245":246,"_256":257,"_258":31,"_259":260,"_264":265},"bundledFiles","fileTree",[226,233,236,239,242],{"_152":227,"_228":229,"_144":230,"_231":232},"README.md","size",1129,"file","language","markdown",{"_152":234,"_228":235,"_144":230,"_231":232},"SKILL.md",9887,{"_152":237,"_228":238,"_144":230,"_231":232},"references/animations.md",4477,{"_152":240,"_228":241,"_144":230,"_231":232},"references/components.md",6393,{"_152":243,"_228":244,"_144":230,"_231":232},"references/configuration.md",4522,"codeExamples",[247,251,254],{"_231":248,"_249":250},"bash","snippet","npx tamagui generate-prompt",{"_231":252,"_249":253},"tsx","import { View, Text, styled } from '@tamagui/core'\n\nconst Card = styled(View, {\n padding: '$4', // use tokens with $\n backgroundColor: '$background',\n borderRadius: '$4',\n\n variants: {\n size: {\n small: { padding: '$2' },\n large: { padding: '$6' },\n },\n elevated: {\n true: {\n shadowColor: '$shadowColor',\n shadowRadius: 10,\n },\n },\n } as const, // required for type inference\n\n defaultVariants: {\n size: 'small',\n },\n})\n\n// usage\n",{"_231":252,"_249":255},"import { XStack, YStack, ZStack } from 'tamagui'\n\n// XStack = flexDirection: 'row'\n// YStack = flexDirection: 'column'\n// ZStack = position: 'relative' with absolute children\n\n\n \n Label\n \n \n","skillMd","# Tamagui Skill\n\nUniversal React UI framework for web and native with an optimizing compiler.\n\n## Getting Project-Specific Config\n\n**Before writing Tamagui code**, get the project's actual configuration:\n\n```bash\nnpx tamagui generate-prompt\n```\n\nThis outputs `tamagui-prompt.md` with the project's specific:\n- Design tokens (space, size, radius, color, zIndex)\n- Theme names and hierarchy\n- Available components\n- Media query breakpoints\n- Shorthand properties\n- Font families\n\n**Always reference this file for token/theme/media query names** rather than guessing or using defaults.\n\n---\n\n## Core Concepts\n\n### styled() Function\n\nCreate components by extending existing ones:\n\n```tsx\nimport { View, Text, styled } from '@tamagui/core'\n\nconst Card = styled(View, {\n padding: '$4', // use tokens with $\n backgroundColor: '$background',\n borderRadius: '$4',\n\n variants: {\n size: {\n small: { padding: '$2' },\n large: { padding: '$6' },\n },\n elevated: {\n true: {\n shadowColor: '$shadowColor',\n shadowRadius: 10,\n },\n },\n } as const, // required for type inference\n\n defaultVariants: {\n size: 'small',\n },\n})\n\n// usage\n\n```\n\n**Key rules:**\n- Always use `as const` on variants objects\n- Tokens use `$` prefix: `$4`, `$background`, `$color11`\n- Prop order matters - later props override earlier ones\n- Variants defined later in the object override earlier ones\n\n### Stack Components\n\n```tsx\nimport { XStack, YStack, ZStack } from 'tamagui'\n\n// XStack = flexDirection: 'row'\n// YStack = flexDirection: 'column'\n// ZStack = position: 'relative' with absolute children\n\n\n \n Label\n \n \n\n```\n\n### Themes\n\nThemes nest and combine hierarchically:\n\n```tsx\nimport { Theme } from 'tamagui'\n\n// base theme\n\n {/* sub-theme */}\n \n {/* uses dark_blue theme */}\n \n \n\n\n// access theme values\nconst theme = useTheme()\nconsole.log(theme.background.val) // actual color value\nconsole.log(theme.color11.val) // high contrast text\n```\n\n**12-step color scale convention:**\n- `$color1-4`: backgrounds (subtle to emphasized)\n- `$color5-6`: borders, separators\n- `$color7-8`: hover/active states\n- `$color9-10`: solid backgrounds\n- `$color11-12`: text (low to high contrast)\n\n### Responsive Styles\n\nUse media query props (check your `tamagui-prompt.md` for actual breakpoint names):\n\n```tsx\n\n\n// or with hook\nconst media = useMedia()\nif (media.gtMd) {\n // render for medium+ screens\n}\n```\n\n### Animations\n\n```tsx\nimport { AnimatePresence } from 'tamagui'\n\n\n {show && (\n \n )}\n\n```\n\n**Animation drivers:**\n- `@tamagui/animations-css` - web only, CSS transitions\n- `@tamagui/animations-react-native` - native Animated API\n- `@tamagui/animations-reanimated` - best native performance\n- `@tamagui/animations-motion` - spring physics\n\nCSS driver uses easing strings, others support spring physics.\n\n---\n\n## Compound Components\n\nUse `createStyledContext` for components that share state:\n\n```tsx\nimport { createStyledContext, styled, View, Text } from '@tamagui/core'\nimport { withStaticProperties } from '@tamagui/helpers'\n\nconst CardContext = createStyledContext({ size: 'medium' as 'small' | 'medium' | 'large' })\n\nconst CardFrame = styled(View, {\n context: CardContext,\n padding: '$4',\n backgroundColor: '$background',\n\n variants: {\n size: {\n small: { padding: '$2' },\n medium: { padding: '$4' },\n large: { padding: '$6' },\n },\n } as const,\n})\n\nconst CardTitle = styled(Text, {\n context: CardContext, // inherits size from parent\n fontWeight: 'bold',\n\n variants: {\n size: {\n small: { fontSize: '$4' },\n medium: { fontSize: '$5' },\n large: { fontSize: '$6' },\n },\n } as const,\n})\n\nexport const Card = withStaticProperties(CardFrame, {\n Title: CardTitle,\n})\n\n// usage - size cascades to children\n\n Large Title\n\n```\n\n---\n\n## Common Patterns\n\n### Dialog with Adapt (Sheet on Mobile)\n\n```tsx\nimport { Dialog, Sheet, Adapt, Button } from 'tamagui'\n\n\n```\n\n### Form with Input/Label\n\n```tsx\nimport { Input, Label, YStack, XStack, Button } from 'tamagui'\n\n\n \n Email\n \n \n\n \n \n \n \n\n```\n\n---\n\n## Anti-Patterns\n\n### ❌ Hardcoded values instead of tokens\n\n```tsx\n// bad\n\n\n// good - uses design tokens\n\n```\n\n### ❌ Missing `as const` on variants\n\n```tsx\n// bad - TypeScript can't infer variant types\nvariants: {\n size: { small: {...}, large: {...} }\n}\n\n// good\nvariants: {\n size: { small: {...}, large: {...} }\n} as const\n```\n\n### ❌ Platform detection in styled()\n\n```tsx\n// bad - won't be extracted by compiler\nconst Box = styled(View, {\n padding: Platform.OS === 'web' ? 10 : 20,\n})\n\n// good - use platform modifiers\nconst Box = styled(View, {\n padding: 20,\n '$platform-web': { padding: 10 },\n})\n```\n\n### ❌ exitStyle without AnimatePresence\n\n```tsx\n// bad - exit animation won't work\n{show && }\n\n// good\n\n {show && }\n\n```\n\n### ❌ Dynamic values that prevent extraction\n\n```tsx\n// bad - runtime variable prevents compiler extraction\nconst dynamicPadding = isPremium ? '$6' : '$4'\n\n\n// good - inline ternary is extractable\n\n```\n\n### ❌ Wrong media query order\n\n```tsx\n// bad - base value overrides responsive\n\n\n// good - base first, then responsive overrides\n\n```\n\n### ❌ Spring animations with CSS driver\n\n```tsx\n// bad - CSS driver doesn't support spring physics\nimport { createAnimations } from '@tamagui/animations-css'\nconst anims = createAnimations({\n bouncy: { type: 'spring', damping: 10 } // won't work\n})\n\n// good for CSS driver - use easing strings\nconst anims = createAnimations({\n bouncy: 'cubic-bezier(0.68, -0.55, 0.265, 1.55) 300ms'\n})\n```\n\n---\n\n## Compiler Optimization\n\nThe Tamagui compiler extracts static styles to CSS at build time. For styles to be extracted:\n\n1. **Use tokens** - `$4` extracts, `16` may not\n2. **Inline ternaries** - `padding={x ? '$4' : '$2'}` extracts\n3. **Avoid runtime variables** - computed values don't extract\n4. **Use variants** - better than conditional props\n\nCheck if extraction is working:\n- Look for `data-tamagui` attributes in dev mode\n- Bundle size should be smaller with compiler enabled\n- Styles should appear as CSS classes, not inline\n\n---\n\n## TypeScript\n\n```tsx\nimport { GetProps, styled, View } from '@tamagui/core'\n\nconst MyComponent = styled(View, {\n variants: {\n size: { small: {}, large: {} }\n } as const,\n})\n\n// extract props type\ntype MyComponentProps = GetProps\n\n// extend with custom props\ninterface ExtendedProps extends MyComponentProps {\n onCustomEvent?: () => void\n}\n```\n\n---\n\n## Quick Reference\n\n| Pattern | Example |\n|---------|---------|\n| Token | `padding=\"$4\"` |\n| Theme value | `backgroundColor=\"$background\"` |\n| Color scale | `color=\"$color11\"` (high contrast text) |\n| Responsive | `$gtSm={{ padding: '$6' }}` |\n| Variant | `