Guides building cross-platform React interfaces with Tamagui styled components, tokens, themes, and animations.
npx skills add https://github.com/AO-HyS/aohys.com --skill tamagui-ao-hys
Please help me install this Agent Skill. Skill: tamagui Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/tamagui Command: npx skills add https://github.com/AO-HyS/aohys.com --skill tamagui-ao-hys
styled(), typed variants using as const, and compound components via createStyledContext. - Tokens, Themes & Responsive Design: Apply $-prefixed design tokens, nested themes with the 12-step color scale, and media query props like $gtMd. - Animations & UI Components: Configure animation drivers (CSS, Reanimated, Motion), use AnimatePresence for exit animations, and compose Dialog, Sheet, Select, Tabs, and other components. - Use Case: When building a settings screen that must work on iOS and web, use this Skill to generate a responsive layout with XStack/YStack, a Dialog that adapts to a Sheet on touch devices, and theme-aware colors. ## Quick Start Ask the assistant to create a Tamagui card component with size variants and theme-aware background colors for your project.High-intent search queries and answers about installing and using this skill.
Use the styled() function from @tamagui/core with a base component, style object, and a variants object marked with as const for TypeScript inference. Reference design tokens with the $ prefix, such as padding: "$4", and set defaultVariants for fallback values.
Tokens are design values (space, size, radius, color) referenced with a $ prefix, while themes define semantic colors like background and color1-12. Themes nest hierarchically with the Theme component, so dark plus blue resolves to a dark_blue sub-theme.
Use @tamagui/animations-css for web-only apps with the smallest bundle, @tamagui/animations-reanimated for the best native performance, or @tamagui/animations-motion for cross-platform spring physics. The CSS driver only supports easing strings, not spring configs.
Exit animations only run when the component is wrapped in AnimatePresence and has a stable key prop. Without AnimatePresence, the exitStyle is ignored when the component unmounts.
Yes, Tamagui supports media query props like $gtSm and $gtMd defined in your config's media section, plus the useMedia hook for conditional rendering. Place responsive props after base props so they override correctly.
Extraction fails when styles use runtime variables or platform conditionals like Platform.OS inside styled(). Use inline ternaries, token values, and $platform-web modifiers so the compiler can statically extract styles to CSS.
tiantangcao1980-webConfigure Tamagui to render shared UI components on web and React Native.
xtoneGuide Flutter widget architecture decisions through structured interview questions.
ArcReelAudit UI code against Web Interface Guidelines and report violations in file:line format.
Alejandro05-afkGenerate Expo/React Native mobile UI code with NativeWind, Tamagui, or StyleSheet.