tamagui

Name: tamagui
Availability: InStock
Author: fyndx

Build React Native screens with Tamagui UI components and design tokens.

1|Updated Oct 19, 2023

Search Tags:#ui #design system #components #styling #react native #tamagui

Ready to run

npx skills add https://github.com/fyndx/coinx --skill tamagui-fyndx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tamagui
Source: https://github.com/fyndx/coinx/tree/main/skills/tamagui
Command: npx skills add https://github.com/fyndx/coinx --skill tamagui-fyndx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of UI components and styling guidelines for building consistent and performant user interfaces within the CoinX application using the Tamagui library.

Core Features & Use Cases

Reusable UI Components: Utilize pre-built components for layouts, text, buttons, inputs, lists, and more.
Design System Adherence: Leverage defined spacing, font size, and color tokens for a unified look and feel.
Styling Flexibility: Apply styles using Tamagui's powerful styling props and integrate with React Native's StyleSheet for complex scenarios.
Use Case: Quickly assemble a new screen by using YStack for layout, H3 for titles, Input for user text entry, and Button for actions, all while adhering to the project's design tokens.

Quick Start

Use the tamagui skill to create a vertical stack with a gap of 16px and padding of 16px.

Frequently Asked Questions about tamagui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a React Native UI with a consistent design system?▼

You can build a consistent React Native UI using Tamagui universal components and predefined design tokens for spacing, font size, and color. This approach ensures a unified look and feel across your application screens.

How do I create a vertical layout in React Native with spacing and padding?▼

Create a vertical layout in React Native with spacing and padding by using Tamagui's `YStack` component. You can apply styling props directly to set a 16px gap and 16px padding for your screen layout.

Can I use React Native StyleSheet for complex component styling with Tamagui?▼

You can integrate React Native `StyleSheet` for complex component styling scenarios alongside Tamagui. This allows you to apply Tamagui styling props while utilizing `StyleSheet` for more intricate UI requirements.

What components do I need to assemble a user input screen in React Native?▼

To assemble a user input screen, use Tamagui's `YStack` for vertical layout, `H3` for titles, `Input` for text entry, and `Button` for actions. These UI components automatically adhere to your project's design tokens.

Does Tamagui support interactive elements and icon integration for mobile apps?▼

Yes, Tamagui supports interactive elements and icon integration for mobile apps. It provides universal UI components and styling utilities specifically designed to facilitate screen construction and interactive elements within React Native.