skills.rest
fyndx
fyndxOFFICIAL
Explore all skills by this author →
GitHub

tamagui

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
One-click install
npx skills add https://github.com/fyndx/coinx --skill tamagui-fyndx
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ramariveraramarivera

tamagui-v2

Build universal React Native and Web apps with Tamagui v2 styling and tokens.

Community
Advanced
IvorisnoobIvorisnoob
100

kotlin-android

Design Kotlin Android apps with Jetpack Compose, MVVM, Hilt, and Room.

Community
Advanced
bidahbidah
28

animations

Guide animation decisions and debugging for Reanimated 4 in React Native apps.

Community
Intermediate
anicca-labsanicca-labs

coding-standards

Enforce React Native coding standards with TypeScript, Prettier, and custom rules.

Official
Intermediate