tamagui-designer

What problem does it solve?

This Skill streamlines the development of cross-platform UI components with Tamagui, eliminating the complexity and time associated with building responsive interfaces for both React Native and web from scratch. It ensures design consistency and accelerates UI implementation.

Core Features & Use Cases

• Bento First Methodology: Enforces a template-driven approach, guiding users to adapt existing, high-quality Tamagui UI templates from a comprehensive catalog before writing new code.
• Cross-Platform UI Generation: Facilitates the creation of components (forms, cards, lists, layouts) that are inherently responsive and work seamlessly across iOS, Android, and Web.
• Token-Based Styling Enforcement: Promotes the use of Tamagui's semantic design tokens for spacing, colors, and fonts, leading to maintainable, themeable, and consistent UIs.
• Use Case: Need to build a new user profile settings screen that looks great on both mobile and web? Use this Skill to quickly browse the Bento component catalog, retrieve a matching template, and adapt it to your specific needs, ensuring best practices and cross-platform compatibility from the start.

Quick Start

Use the tamagui-designer skill to find a suitable template for a "settings card" component. Then, retrieve the template code and adapt it for a new file in 'src/features/settings/components/SettingsCard.tsx'.