feat(home): crypto listings screen with BTC hero

.claude/skills/react/SKILL.md

@@ -29,6 +29,49 @@ const handlePress = useCallback((id) => router.push(`/coin/${id}`), []);
 
 **Exception**: only add manual memoization if you have a profiler trace proving it's needed.
 
+## Library Memoization Recommendations (TanStack Query, etc.)
+
+Some libraries recommend wrapping callbacks in `useCallback` for referential stability.
+A common example is TanStack Query's `select` option:
+
+```typescript
+// What TanStack docs recommend in projects WITHOUT React Compiler:
+useQuery({
+  queryKey: ['coins'],
+  queryFn: fetchCoins,
+  select: useCallback((data) => data.filter((c) => c.rank <= 10), []),
+});
+
+// ✅ What to do in THIS project (React Compiler enabled):
+useQuery({
+  queryKey: ['coins'],
+  queryFn: fetchCoins,
+  select: (data) => data.filter((c) => c.rank <= 10),
+});
+```
+
+React Compiler automatically stabilizes the function identity — manual `useCallback` is redundant.
+**If this project ever disables React Compiler**, add `useCallback` back to all `select`, `onSuccess`,
+and similar library callbacks that depend on referential stability.
+
+## Arrow Functions for Component Helpers (REQUIRED)
+
+Use arrow functions for all helper functions defined inside or alongside components — render callbacks, event handlers, formatters. Never use `function` declarations for these.
+
+```typescript
+// ✅ Arrow function for render callbacks and helpers
+const renderItem = ({ item }: { item: Coin }) => <CoinRow coin={item} />;
+
+const handlePress = (id: string) => router.push(`/coin/${id}`);
+
+// ❌ NEVER: function declaration for component helpers
+function renderItem({ item }: { item: Coin }) {
+  return <CoinRow coin={item} />;
+}
+```
+
+**Exception**: top-level exported components may use either style — this rule applies to helpers and callbacks, not to the component function itself.
+
 ## Imports (REQUIRED)
 
 ```typescript

.github/workflows/claude-code-review.yml

@@ -0,0 +1,45 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review, reopened]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Optional: Filter by PR author
+    # if: |
+    #   github.event.pull_request.user.login == 'external-contributor' ||
+    #   github.event.pull_request.user.login == 'new-developer' ||
+    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@v1
+        with:
+          allowed_bots: "*"
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
+          plugins: 'code-review@claude-code-plugins'
+          prompt: '/code-review:code-review ${{ github.repository }}/pull/${{ github.event.pull_request.number }}'
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+

.github/workflows/claude.yml

@@ -1,39 +1,51 @@
-  name: Claude Code                                                                                                                                                                                                                                           
-
-  on:                                                             
-    issue_comment:
-      types: [created]
-    pull_request_review_comment:
-      types: [created]
-    issues:
-      types: [opened, assigned]
-    pull_request_review:
-      types: [submitted]  
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          allowed_bots: "*"
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'
 
-  jobs:
-    claude:
-      if: |
-        (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
-        (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
-        (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-        (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))                                                                                                                                                                                                      
-      runs-on: ubuntu-latest
-      permissions:                                                                                                                                                                                                                                            
-        contents: write                                           
-        issues: write
-        pull-requests: write
-        id-token: write
-        actions: read # Required for Claude to read CI results on PRs
-      steps:
-         - name: Checkout repository
-           uses: actions/checkout@v4
-           with:
-             token: ${{ secrets.GITHUB_TOKEN }}                    
-             fetch-depth: 0
-
-         - name: Run Claude Code
-           id: claude
-           uses: anthropics/claude-code-action@beta                                                                                                                                                                                                           
-           with:                                                   
-             anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-             github_token: ${{ secrets.GITHUB_TOKEN }}

app/(tabs)/explore.tsx

@@ -4,8 +4,8 @@ import { Platform, StyleSheet } from 'react-native';
 import { Collapsible } from '@/components/ui/collapsible';
 import { ExternalLink } from '@/components/external-link';
 import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
+import { Text } from '@/components/text';
+import { View } from '@/components/view';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Fonts } from '@/constants/theme';
 
@@ -21,76 +21,76 @@ export default function TabTwoScreen() {
           style={styles.headerImage}
         />
       }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText
+      <View style={styles.titleContainer}>
+        <Text
           type="title"
           style={{
             fontFamily: Fonts.rounded,
           }}>
           Explore
-        </ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
+        </Text>
+      </View>
+      <Text>This app includes example code to help you get started.</Text>
       <Collapsible title="File-based routing">
-        <ThemedText>
+        <Text>
           This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
+          <Text type="defaultSemiBold">app/(tabs)/index.tsx</Text> and{' '}
+          <Text type="defaultSemiBold">app/(tabs)/explore.tsx</Text>
+        </Text>
+        <Text>
+          The layout file in <Text type="defaultSemiBold">app/(tabs)/_layout.tsx</Text>{' '}
           sets up the tab navigator.
-        </ThemedText>
+        </Text>
         <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
+          <Text type="link">Learn more</Text>
         </ExternalLink>
       </Collapsible>
       <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
+        <Text>
           You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
+          <Text type="defaultSemiBold">w</Text> in the terminal running this project.
+        </Text>
       </Collapsible>
       <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
+        <Text>
+          For static images, you can use the <Text type="defaultSemiBold">@2x</Text> and{' '}
+          <Text type="defaultSemiBold">@3x</Text> suffixes to provide files for
           different screen densities
-        </ThemedText>
+        </Text>
         <Image
           source={require('@/assets/images/react-logo.png')}
           style={{ width: 100, height: 100, alignSelf: 'center' }}
         />
         <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
+          <Text type="link">Learn more</Text>
         </ExternalLink>
       </Collapsible>
       <Collapsible title="Light and dark mode components">
-        <ThemedText>
+        <Text>
           This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
+          <Text type="defaultSemiBold">useColorScheme()</Text> hook lets you inspect
           what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
+        </Text>
         <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
+          <Text type="link">Learn more</Text>
         </ExternalLink>
       </Collapsible>
       <Collapsible title="Animations">
-        <ThemedText>
+        <Text>
           This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
+          <Text type="defaultSemiBold">components/HelloWave.tsx</Text> component uses
           the powerful{' '}
-          <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
+          <Text type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
             react-native-reanimated
-          </ThemedText>{' '}
+          </Text>{' '}
           library to create a waving hand animation.
-        </ThemedText>
+        </Text>
         {Platform.select({
           ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
+            <Text>
+              The <Text type="defaultSemiBold">components/ParallaxScrollView.tsx</Text>{' '}
               component provides a parallax effect for the header image.
-            </ThemedText>
+            </Text>
           ),
         })}
       </Collapsible>