AnythingUI Template

A production-ready React Native starter template with design system workflow, MCP integration, and automation tools. Built for rapid development with Claude Code and Cursor.

✨ Features

• 🎨 Design System First - Comprehensive design token system with style guide
• 🤖 AI-Optimized - Pre-configured Claude Code and Cursor integrations
• 📱 Expo Router - File-based routing with type safety
• 🎯 TypeScript - Full type safety throughout the app
• 🔧 Pre-configured Tools - ESLint, Prettier, and development scripts
• 🚀 Quick Setup - Interactive setup script to get started in minutes
• 🎨 Component Library - Beautiful, accessible UI components
• 📦 State Management - Zustand for simple, scalable state
• 🔐 Auth Ready - Supabase integration out of the box
• 🎭 MCP Servers - Figma MCP pre-configured for design imports

🚀 Quick Start

1. Use This Template

Click "Use this template" on GitHub or clone:

git clone https://github.com/[your-username]/AnythingUI my-app
cd my-app

2. Run Setup

npm run setup
# or
bun run setup

This will:

• Configure project name and metadata
• Create .env file
• Set up initial configuration

3. Install Dependencies

npm install
# or
bun install

4. Start Development

npm start

📖 Workflow

Import Design from Figma or Mobbin

1. Open Claude Code in your project
2. Use the /import-design command
3. Provide Figma URL or paste screenshot
4. Claude will extract design tokens and update your design system

Generate Style Guide

/generate-style-guide

This creates a comprehensive style guide at /design/style-guide.md with:

• Color palette
• Typography system
• Spacing scale
• Component styles
• Shadows, animations, and more

Add New Components

npm run new:component
# or
/add-component (in Claude Code)

Add New Screens

npm run new:screen
# or
/add-screen (in Claude Code)

📁 Project Structure

AnythingUI/
├── app/                      # Expo Router app directory
│   ├── (tabs)/              # Tab navigator screens
│   │   ├── index.tsx        # Home screen
│   │   ├── explore.tsx      # Explore screen
│   │   └── profile.tsx      # Profile screen
│   ├── _layout.tsx          # Root layout
│   └── modal.tsx            # Example modal
├── components/
│   ├── ui/                  # Reusable UI components
│   ├── layout/              # Layout components
│   └── features/            # Feature-specific components
├── constants/               # Design tokens
│   ├── colors.ts
│   ├── typography.ts
│   └── spacing.ts
├── contexts/                # React contexts
├── design/                  # Design system documentation
│   ├── style-guide.md
│   ├── design-tokens.json
│   └── design-references.md
├── lib/                     # Utilities and API clients
├── types/                   # TypeScript types
├── scripts/                 # Automation scripts
└── .claude/                 # Claude Code configuration
    ├── commands/            # Custom slash commands
    └── claude.json          # MCP server config

🎨 Design System

The template includes a complete design system with:

• Design Tokens - JSON-based tokens in /design/design-tokens.json
• Platform Files - Auto-generated TypeScript constants in /constants/
• Style Guide - Comprehensive documentation in /design/style-guide.md
• Component Library - Pre-built components following the design system

Using Design Tokens

import { colors, typography, spacing } from '@/constants';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
    padding: spacing.md,
  },
  title: {
    fontSize: typography.fontSize.h1,
    fontWeight: typography.fontWeight.bold,
    color: colors.text.primary,
  },
});

🤖 Claude Code Integration

Available Commands

• /generate-style-guide - Create comprehensive style guide
• /import-design - Import design from Figma or screenshot
• /add-component - Generate new UI component
• /add-screen - Generate new screen

MCP Servers

Pre-configured MCP servers:

• Figma MCP - Extract designs and design tokens from Figma
• More servers can be added in .claude/claude.json

🛠️ Available Scripts

npm start           # Start Expo development server
npm run android     # Run on Android
npm run ios         # Run on iOS
npm run web         # Run on web

npm run setup       # Interactive project setup
npm run new:component   # Generate new component
npm run new:screen      # Generate new screen

npm run lint        # Run ESLint
npm run lint:fix    # Fix ESLint errors
npm run format      # Format code with Prettier
npm run type-check  # TypeScript type checking

📦 Tech Stack

• Framework: Expo ~52.0.0
• Routing: Expo Router ~4.0.0
• Language: TypeScript ~5.3.3
• State: Zustand ^5.0.2
• Data Fetching: TanStack Query ^5.28.4
• UI Library: React Native Paper ^5.12.5
• Backend: Supabase ^2.39.7
• Icons: Lucide React Native ^0.447.0
• Validation: Zod ^3.22.4

🔐 Environment Variables

Copy .env.example to .env and fill in your values:

EXPO_PUBLIC_SUPABASE_URL=your-supabase-url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
FIGMA_ACCESS_TOKEN=your-figma-token

📝 License

MIT License - feel free to use this template for any project!

🤝 Contributing

This is a template repository. Feel free to fork and customize for your needs!

📚 Learn More

• Expo Documentation
• React Native Documentation
• TypeScript Documentation
• Supabase Documentation

---

Built with ❤️ for rapid React Native development