Skip to main content
skill CX Codex

monorepo-tamagui — Claude Code skill: monorepo guidelines

Gives your agent a rulebook for cross-platform monorepos built on Tamagui, Turbo, Next.js, Expo and Supabase. Useful when web and mobile apps share one repo.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add Mindrally/skills --skill monorepo-tamagui -a claude-code
Open on GitHub

What monorepo-tamagui does

The skill spells out how code should be written in a monorepo that serves both web and native. Your agent picks up a set of conventions: concise TypeScript with functional patterns, interfaces over types, literal types instead of enums, Zod for schema validation. On the UI side it asks for Tamagui components and mobile-first responsive layout so styling stays consistent across web and native.

State lives in Zustand, data fetching and caching in TanStack React Query, and useEffect is kept to a minimum. Internationalization runs through i18next and react-i18next on web and expo-localization in React Native. Workspace structure follows Turbo practices, platform-specific code goes into .native.tsx files, and navigation uses Solito. There is also a Stripe section: payments, subscriptions, the Customer Portal, webhooks, and keeping subscription status in sync with Supabase.

These are text guidelines, not a code generator, so nothing gets installed for you. If your project uses a different state library or has no Supabase, you will have to ignore those parts by hand — the skill does not adapt to your setup. What it does well is give a small team one shared vocabulary for the agent, which cuts down drift on details like variable naming.

What it helps with

  • settle on one TypeScript style across a shared repo
  • split platform-specific code into .native.tsx files
  • keep packages isolated with shared configs under Turbo
  • wire Stripe subscriptions to status stored in Supabase
  • move all user-facing strings into i18next and expo-localization

Example prompts for the agent

  • Add a new screen to the monorepo with shared Tamagui layout for web and native
  • Split the subscription flow: Stripe, webhooks and syncing status with Supabase
  • Review the workspace structure and package dependencies against Turbo practices

How to install monorepo-tamagui

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill monorepo-tamagui -a claude-code

2Manually: put the files in place

~/.claude/skills/monorepo-tamagui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/monorepo-tamagui/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about monorepo-tamagui

How do I install monorepo-tamagui in Claude?

Run npx skills add Mindrally/skills --skill monorepo-tamagui -a claude-code. The skill file then lands at ~/.claude/skills/monorepo-tamagui/SKILL.md.

What does monorepo-tamagui do?

It hands your agent development guidelines for a cross-platform monorepo: Tamagui for UI, Zustand and TanStack React Query for state and data, Turbo for workspace structure, Solito for navigation.

Do I need Supabase and Stripe for the skill to work?

No, those are recommendations rather than dependencies. The Supabase and Stripe sections simply will not apply if your project does not use them.

Source text

SKILL.md · Apache-2.0
---
name: monorepo-tamagui
description: Monorepo development guidelines using Tamagui, Turbo, Next.js, Expo, Supabase, and cross-platform best practices.
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Monorepo using Tamagui

Expert developer guidelines for building cross-platform applications with TypeScript, React, Next.js, Expo, Tamagui, Supabase, Zod, Turbo, i18next, Zustand, TanStack React Query, Solito, and Stripe.

## Code Style and Structure

- Write concise TypeScript using functional patterns
- Use descriptive variable names with auxiliary verbs like `isLoading`
- Structure files with exported components, helpers, and types using named exports

## TypeScript and Validation

- Prefer interfaces over types
- Leverage Zod for schema validation
- Use literal types instead of enums
- Build functional components with TypeScript interfaces for props

## UI and Styling

- Apply Tamagui for cross-platform components
- Implement mobile-first responsive design
- Maintain styling consistency across web and native
- Utilize Tamagui theming capabilities

## State Management

- Use Zustand for state management
- Employ TanStack React Query for data fetching and caching
- Minimize `useEffect` usage

## Internationalization

- Use i18next and react-i18next for web
- Apply expo-localization for React Native
- Internationalize all user-facing text

## Error Handling

- Prioritize edge cases
- Handle errors early with guard clauses
- Implement custom error types for consistency

## Performance Optimization

- Optimize both web and native platforms
- Use dynamic imports in Next.js
- Implement lazy loading
- Optimize images with proper formats

## Monorepo Structure

- Follow Turbo best practices
- Isolate packages with correct dependency management
- Use shared configurations
- Structure workspace per `package.json`

## Cross-Platform Development

- Use Solito for navigation
- Create `.native.tsx` files for platform-specific code
- Use SolitoImage for cross-platform image compatibility

## Stripe Integration

- Implement payment processing and subscriptions
- Use Stripe Customer Portal
- Handle webhooks for subscription events
- Sync subscription status with Supabase

© Mindrally · Apache-2.0 · Mindrally/skills

Similar skills

Everything for Frontend and UI →

From the same set168

clerk-authentication Rules for wiring Clerk into Next.js: middleware, hooks, protected server actions and API routes. Useful once your app already runs on Clerk. CX Codex +1 683installs nx A skill that tells the agent how to work inside an Nx workspace: apps and libs layout, tags, module boundaries, generators, caching. Useful once your repo runs on Nx. CX Codex +1 682installs langchain-development Gives your agent a rulebook for LangChain and LangGraph work in Python: chain composition, agents, memory, RAG. Useful once a Python LLM project outgrows one file. CX Codex +1 681installs apollo-graphql A skill that gives the agent rules for Apollo Client work: queries, mutations, fragments, caching and optimistic updates in React GraphQL apps. CX Codex +1 677installs swiftui-development A rule pack that keeps your coding agent on MVVM, modern state management and Swift 6 concurrency when it writes SwiftUI. CX Codex +1 676installs react-native-cursor-rules A rule set that tells your coding agent how to write React Native: typed TypeScript, functional components, fewer re-renders, tuned FlatLists. CX Codex +1 670installs netlify-development A skill that gives your agent Netlify build and deploy rules: serverless and edge functions, Blobs, Image CDN, build config. Useful when it writes functions or edits netlify.toml. CX Codex +1 665installs viewcomfy-api-rules Guides an agent through wiring the ViewComfy API into a Python and FastAPI web app: flatten workflow params, call the endpoint, save the returned files. CX Codex +1 663installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor