Build Your First Screen

Time to change something. You will add a Notes screen, link to it, and see it live. Roughly ten minutes, and most of it is the agent's.

Keep both terminals from Run It on Your Computer running, and have Claude Code open in the project as set up in Open It in Claude Code.

The only thing you need to know before you start: files in apps/mobile/app/ are screens. Create a file, get a route.

1. Ask for the screen

/new-screen is one of the four slash commands in .claude/commands/. It reads the repo's own rule for adding a screen before it writes anything.

2. Check four things before you look at the app

The point of the prompt is not that it saves typing. It is that the result is checkable. Open what it wrote and confirm:

1. The file is apps/mobile/app/notes.tsx. Not screens/, not components/. That is Expo Router's rule and it is in CLAUDE.md.
2. It imports from @repo/ui, not from react-native directly. Screen, Card, Input, Button, Text should all come from the kit.
3. There are no colours in the file. No hex codes, no StyleSheet.create with a backgroundColor. Theming comes from the design tokens.
4. It uses className, not a styles object. That is NativeWind, and it is why the screen follows dark mode without being told to.

If any of those four are wrong, the agent answered from training data instead of from the repo. Send it back:

3. Look at it

Save. The browser reloads on its own. Go to http://localhost:8081/notes.

Type something, press Add note, and it appears above the form. Toggle dark mode from the home screen and this screen follows, because you never wrote a colour.

4. Link it from the home screen

It should reach for Link from expo-router wrapping a Button, the same as the links already there.

5. Keep the app healthy

pnpm test

Still 85 passed, 0 failed. You added a screen without breaking anything.

Why that worked

Nothing above depended on the agent being clever. It depended on three things being written down:

• Routing is the file system. app/index.tsx is the home screen. app/demo/toasts.tsx is the screen at /demo/toasts. There is no route table to update, which is why "create the file in the right folder" is the whole of check 1.
• <Screen> handles the safe areas, so content never sits under the notch. That is one import instead of a per-platform inset calculation the agent would otherwise invent differently each time.
• className is real Tailwind, through NativeWind, and every component in @repo/ui is already themed for light and dark. The reason check 3 says "no colours" is that a colour in the file is the one thing that breaks theming later.

The kit exports 27 components from packages/ui: Text, Button, Card and its parts, Input, Skeleton, Screen, Toaster, ErrorBoundary, Dialog and its parts, AlertDialog, EmptyState, Avatar, SearchBar, and FilterChips. Open packages/ui/src/index.ts for the full list. It is worth reading once, because it is the list your agent reuses from instead of writing a fourth button.

If you would rather type it yourself

The generator is a convenience, not a dependency. This is a complete apps/mobile/app/notes.tsx:

import * as React from 'react';
import { View } from 'react-native';
import { Button, Card, CardContent, CardHeader, CardTitle, Input, Screen, Text } from '@repo/ui';

export default function NotesScreen() {
  const [draft, setDraft] = React.useState('');
  const [notes, setNotes] = React.useState<string[]>([]);

  function addNote() {
    const text = draft.trim();
    if (!text) return;
    setNotes((current) => [text, ...current]);
    setDraft('');
  }

  return (
    <Screen>
      <View className="gap-3 py-4">
        <Card>
          <CardHeader>
            <CardTitle>New note</CardTitle>
          </CardHeader>
          <CardContent>
            <View className="gap-2">
              <Input placeholder="Write something" value={draft} onChangeText={setDraft} />
              <Button onPress={addNote}>
                <Text className="font-medium text-primary-foreground">Add note</Text>
              </Button>
            </View>
          </CardContent>
        </Card>

        {notes.length === 0 ? (
          <Text variant="muted">No notes yet. Add one above.</Text>
        ) : (
          notes.map((note, i) => (
            <Card key={`${note}-${i}`}>
              <CardContent>
                <Text className="py-3">{note}</Text>
              </CardContent>
            </Card>
          ))
        )}
      </View>
    </Screen>
  );
}

And the link for apps/mobile/app/index.tsx, next to the buttons already there:

<Link href="/notes" asChild>
  <Button variant="outline">
    <Text className="font-medium">My notes</Text>
  </Button>
</Link>

If Link is not imported yet, add import { Link } from 'expo-router'; at the top.

Typed by hand or generated, it is the same file. The four checks in step 2 are what matter either way.

Do the next one on your own

Run the same four checks. When they pass twice in a row without you correcting anything, you can stop checking every time and start checking when something looks off.

Next: Connect Your Own Backend, or jump to Charge For It.