llms.txt is an open proposal for a short Markdown file that lists a project's key docs and links, so AI tools can find them without crawling every page.

Where should llms.txt be deployed?

At /llms.txt on your documentation site, or in your repository root. Tools read it when they fetch it; nothing loads it automatically.

# Expo Router & React Native Mobile Specialist

> Modern React Native standards with Expo Router, the New Architecture (on by default), and safe area boundaries.

## Quick Reference

- **Framework**: Expo Router & React Native

- **Language**: TypeScript

- **Styling & UI**: StyleSheet / NativeWind

- **Database / Persistence**: SQLite / Supabase / REST

- **Architectural Philosophy**: modern

## Core Architectural Invariants

- **Feature-Colocated Structure**: Group components, hooks, tests, and utils inside domain feature folders.

- **Guard Clauses & Early Returns**: Exit early from functions to eliminate deeply nested if-else pyramids.

- **Accessible UI by Default**: Enforce semantic HTML, keyboard navigability, and proper ARIA roles.

## Operational Guardrails & Prohibited Patterns

- **Inspect Before Acting**: Always read and understand existing code and imports before suggesting changes.

- **Minimal Surgical Diffs**: Touch only lines relevant to prompt. Preserve existing comments and formatting.

- **Preserve Codebase Idioms**: Match existing naming conventions, indentation, and directory patterns.

## Mandatory Project Directives

- Never perform heavy synchronous calculations during render passes.

- Do not import bare native modules that break Expo Go unless config plugins are configured.

## Implementation Reference

### Preferred Patterns

```typescript

import { View, Text, StyleSheet } from "react-native";

import { Image } from "expo-image";

import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function ProfileScreen() {

const insets = useSafeAreaInsets();

return (

<Text style={styles.title}>User Profile</Text>

</View>

);

}

const styles = StyleSheet.create({

container: { flex: 1, backgroundColor: "#fff", paddingHorizontal: 16 },

avatar: { width: 80, height: 80, borderRadius: 40 },

title: { fontSize: 20, fontWeight: "600", marginTop: 12 },

});

```

### Discouraged Anti-Patterns

```typescript

export default function BadProfile({ navigation }: any) {

return (

<button onClick={() => navigation.navigate("Home")}>Go</button>

</div>

);

}

```

## Verification Commands & Workflows

1. Use Expo Router file-based routing under app/ directory; avoid legacy navigation container wrappers.

2. Guard all screen boundaries with react-native-safe-area-context insets.

3. Use expo-image for high-performance memory-cached image rendering.

4. Test styles on both iOS and Android platforms to prevent layout clipping and notch collisions.

## Context Documents & Specs

- [System Architecture](ARCHITECTURE.md): Authoritative system design, data flows, and state machine invariants.

- [AI Multi-Agent Spec](AGENTS.md): Universal specification for autonomous coding agent operations.

Frontend · Any LLM tool that fetches it

React Native & Expo Router llms.txt

An llms.txt for a React Native & Expo Router project: a short Markdown map of what it is and where the key docs and code live.

Path: llms.txt
Loads: Fetched on request
Format: Markdown index (.txt)
Used by: Any LLM tool that fetches it

All llms.txt presets and how llms.txt works

What this file tells the agent

An llms.txt gives language models and agents a short Markdown map of your React Native & Expo Router project: what it is and where the key docs and code live, so a tool that fetches it can go straight to the right files.

Use Expo Router file-based filesystem routing (app/_layout.tsx, app/(tabs)/index.tsx); ban legacy React Navigation container boilerplate.
Enforce react-native-safe-area-context (useSafeAreaInsets or SafeAreaView) for all top-level mobile screen boundaries.
Use modern Expo SDK native modules (expo-image, expo-secure-store, expo-crypto) instead of unmaintained bare native packages.
Optimize for React Native New Architecture (Fabric renderer): avoid synchronous layout measurements in render passes.
Always test cross-platform styling on both iOS and Android (e.g. elevation vs shadowColor, notch handling).

Code to avoid, and what to write instead

The rule steers the agent away from the left and toward the right.

avoid

// Discouraged: Missing safe-area insets, slow standard Image component, obsolete navigation prop
export default function BadProfile({ navigation }: any) {
  return (
    <div style={{ marginTop: 50 }}>
      <img src="avatar.png" />
      <button onClick={() => navigation.navigate("Home")}>Go</button>
    </div>
  );
}

write instead

import { View, Text, StyleSheet } from "react-native";
import { Image } from "expo-image";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function ProfileScreen() {
  const insets = useSafeAreaInsets();
  return (
    <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
      <Image
        source={{ uri: "https://example.com/avatar.png" }}
        style={styles.avatar}
        contentFit="cover"
        transition={200}
      />
      <Text style={styles.title}>User Profile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#fff", paddingHorizontal: 16 },
  avatar: { width: 80, height: 80, borderRadius: 40 },
  title: { fontSize: 20, fontWeight: "600", marginTop: 12 },
});

Install it in one command

01
Go to your project root
The file goes at llms.txt, relative to the root.
02
Download the file
Run the command on the right. It downloads this preset and writes the file.
03
Make sure it gets used
Nothing loads llms.txt automatically. Serve it at your site root, or point agents to it from CLAUDE.md or AGENTS.md.

$ curl -fsSL "https://www.devscratchpad.tech/api/raw/llms-txt/react-native-expo" -o "llms.txt"

writes llms.txt

path

llms.txt

To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.

More for React Native & Expo Router

Other formats

Other llms.txt presets

Questions

What is llms.txt?: llms.txt is an open proposal for a short Markdown file that lists a project's key docs and links, so AI tools can find them without crawling every page.
Where should llms.txt be deployed?: At /llms.txt on your documentation site, or in your repository root. Tools read it when they fetch it; nothing loads it automatically.

Target Standard & File Format

Identity & Activation Rules

Technology Stack Context

Engineering Philosophy

Architectural & Code Quality Conventions

Agent Behavioral Guardrails

Step-by-Step Workflow Procedures

Target File Location