claudeship 0.2.24 → 0.2.25

package/apps/server/dist/chat/prompts/frontend/flutter.js

@@ -0,0 +1,271 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FLUTTER_PROMPT = void 0;
+exports.FLUTTER_PROMPT = `## Flutter Development Guide
+
+### Project Structure
+
+\`\`\`
+frontend/
+├── lib/
+│   ├── main.dart            # Entry point
+│   ├── app.dart             # App widget with routing
+│   ├── screens/             # Screen widgets
+│   │   ├── home_screen.dart
+│   │   └── profile_screen.dart
+│   ├── widgets/             # Reusable widgets
+│   │   ├── common/          # Generic widgets
+│   │   └── features/        # Feature-specific widgets
+│   ├── models/              # Data models
+│   ├── services/            # API, storage services
+│   ├── providers/           # State management
+│   ├── utils/               # Utilities
+│   └── constants/           # App constants
+├── assets/                  # Images, fonts
+├── android/                 # Android config
+├── ios/                     # iOS config
+├── pubspec.yaml             # Dependencies
+└── analysis_options.yaml    # Lint rules
+\`\`\`
+
+### Essential Dependencies (pubspec.yaml)
+
+\`\`\`yaml
+dependencies:
+  flutter:
+    sdk: flutter
+  go_router: ^14.0.0          # Navigation
+  provider: ^6.1.0            # State management
+  dio: ^5.4.0                 # HTTP client
+  flutter_riverpod: ^2.5.0    # Alternative state management
+  freezed_annotation: ^2.4.0  # Immutable models
+  json_annotation: ^4.8.0     # JSON serialization
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^4.0.0
+  build_runner: ^2.4.0
+  freezed: ^2.4.0
+  json_serializable: ^6.7.0
+\`\`\`
+
+### App Entry Point
+
+\`\`\`dart
+// lib/main.dart
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'app.dart';
+import 'providers/auth_provider.dart';
+
+void main() {
+  runApp(
+    MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => AuthProvider()),
+      ],
+      child: const MyApp(),
+    ),
+  );
+}
+\`\`\`
+
+### Navigation with go_router
+
+\`\`\`dart
+// lib/app.dart
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+final _router = GoRouter(
+  initialLocation: '/',
+  routes: [
+    GoRoute(
+      path: '/',
+      builder: (context, state) => const HomeScreen(),
+    ),
+    GoRoute(
+      path: '/profile/:id',
+      builder: (context, state) {
+        final id = state.pathParameters['id']!;
+        return ProfileScreen(userId: id);
+      },
+    ),
+  ],
+);
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: 'My App',
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
+        useMaterial3: true,
+      ),
+      routerConfig: _router,
+    );
+  }
+}
+\`\`\`
+
+### Screen Widget Pattern
+
+\`\`\`dart
+// lib/screens/home_screen.dart
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class HomeScreen extends StatefulWidget {
+  const HomeScreen({super.key});
+
+  @override
+  State<HomeScreen> createState() => _HomeScreenState();
+}
+
+class _HomeScreenState extends State<HomeScreen> {
+  List<Item> _items = [];
+  bool _isLoading = true;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadItems();
+  }
+
+  Future<void> _loadItems() async {
+    try {
+      final items = await ApiService.getItems();
+      setState(() {
+        _items = items;
+        _isLoading = false;
+      });
+    } catch (e) {
+      setState(() => _isLoading = false);
+      // Handle error
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Home')),
+      body: _isLoading
+          ? const Center(child: CircularProgressIndicator())
+          : ListView.builder(
+              itemCount: _items.length,
+              itemBuilder: (context, index) {
+                final item = _items[index];
+                return ListTile(
+                  title: Text(item.name),
+                  onTap: () => context.go('/details/\${item.id}'),
+                );
+              },
+            ),
+    );
+  }
+}
+\`\`\`
+
+### Data Models with Freezed
+
+\`\`\`dart
+// lib/models/user.dart
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'user.freezed.dart';
+part 'user.g.dart';
+
+@freezed
+class User with _\$User {
+  const factory User({
+    required String id,
+    required String name,
+    required String email,
+  }) = _User;
+
+  factory User.fromJson(Map<String, dynamic> json) => _\$UserFromJson(json);
+}
+\`\`\`
+
+### API Service with Dio
+
+\`\`\`dart
+// lib/services/api_service.dart
+import 'package:dio/dio.dart';
+
+class ApiService {
+  static final _dio = Dio(BaseOptions(
+    baseUrl: const String.fromEnvironment('API_URL', defaultValue: 'http://localhost:3001'),
+    connectTimeout: const Duration(seconds: 10),
+    receiveTimeout: const Duration(seconds: 10),
+  ));
+
+  static Future<List<Item>> getItems() async {
+    final response = await _dio.get('/items');
+    return (response.data as List)
+        .map((json) => Item.fromJson(json))
+        .toList();
+  }
+
+  static Future<Item> createItem(CreateItemInput input) async {
+    final response = await _dio.post('/items', data: input.toJson());
+    return Item.fromJson(response.data);
+  }
+}
+\`\`\`
+
+### State Management with Provider
+
+\`\`\`dart
+// lib/providers/auth_provider.dart
+import 'package:flutter/material.dart';
+import '../models/user.dart';
+
+class AuthProvider extends ChangeNotifier {
+  User? _user;
+
+  User? get user => _user;
+  bool get isLoggedIn => _user != null;
+
+  void setUser(User user) {
+    _user = user;
+    notifyListeners();
+  }
+
+  void logout() {
+    _user = null;
+    notifyListeners();
+  }
+}
+\`\`\`
+
+### Critical Rules
+
+1. **Use const constructors** for performance optimization
+2. **Separate business logic** from UI (use services/providers)
+3. **Use StatelessWidget** when no local state is needed
+4. **Run build_runner** after changing Freezed models: \`dart run build_runner build\`
+5. **Test on both iOS and Android** - platform-specific issues are common
+6. **Handle async errors** with try-catch and show user feedback
+
+### Package Scripts
+
+Add these to your workflow:
+\`\`\`bash
+# Run app
+flutter run
+
+# Build runner for code generation
+dart run build_runner build --delete-conflicting-outputs
+
+# Analyze code
+flutter analyze
+
+# Run tests
+flutter test
+\`\`\``;
+//# sourceMappingURL=flutter.js.map

package/apps/server/dist/chat/prompts/frontend/flutter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flutter.js","sourceRoot":"","sources":["../../../../src/chat/prompts/frontend/flutter.ts"],"names":[],"mappings":";;;AAIa,QAAA,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0QvB,CAAC"}

package/apps/server/dist/chat/prompts/frontend/index.d.ts

@@ -0,0 +1,4 @@
+export { REACT_VITE_PROMPT } from "./react-vite";
+export { NEXTJS_PROMPT } from "./nextjs";
+export { VUE_PROMPT } from "./vue";
+export { SVELTE_PROMPT } from "./svelte";

package/apps/server/dist/chat/prompts/frontend/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVELTE_PROMPT = exports.VUE_PROMPT = exports.NEXTJS_PROMPT = exports.REACT_VITE_PROMPT = void 0;
+var react_vite_1 = require("./react-vite");
+Object.defineProperty(exports, "REACT_VITE_PROMPT", { enumerable: true, get: function () { return react_vite_1.REACT_VITE_PROMPT; } });
+var nextjs_1 = require("./nextjs");
+Object.defineProperty(exports, "NEXTJS_PROMPT", { enumerable: true, get: function () { return nextjs_1.NEXTJS_PROMPT; } });
+var vue_1 = require("./vue");
+Object.defineProperty(exports, "VUE_PROMPT", { enumerable: true, get: function () { return vue_1.VUE_PROMPT; } });
+var svelte_1 = require("./svelte");
+Object.defineProperty(exports, "SVELTE_PROMPT", { enumerable: true, get: function () { return svelte_1.SVELTE_PROMPT; } });
+//# sourceMappingURL=index.js.map

package/apps/server/dist/chat/prompts/frontend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/prompts/frontend/index.ts"],"names":[],"mappings":";;;AAMA,2CAAiD;AAAxC,+GAAA,iBAAiB,OAAA;AAC1B,mCAAyC;AAAhC,uGAAA,aAAa,OAAA;AACtB,6BAAmC;AAA1B,iGAAA,UAAU,OAAA;AACnB,mCAAyC;AAAhC,uGAAA,aAAa,OAAA"}

package/apps/server/dist/chat/prompts/frontend/nextjs.d.ts

@@ -0,0 +1 @@
+export declare const NEXTJS_PROMPT = "## Frontend: Next.js (App Router)\n\nYou are building a Next.js application using the App Router.\n\n### Technology Stack (Frontend)\n\n| Category | Technology | Notes |\n|----------|------------|-------|\n| Framework | Next.js 15+ | App Router only |\n| Language | TypeScript | Strict mode |\n| UI Components | shadcn/ui | Install: `npx shadcn@latest add <component>` |\n| Styling | Tailwind CSS | Use design tokens |\n| State | Zustand | For client state |\n| Forms | React Hook Form + Zod | For validation |\n| Icons | Lucide React | Consistent iconography |\n\n### Project Initialization\n\n```bash\n# Create Next.js project\nnpx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias \"@/*\"\n\n# Install additional dependencies\nnpm install lucide-react clsx tailwind-merge zustand\nnpm install react-hook-form @hookform/resolvers zod\n\n# Initialize shadcn/ui\nnpx shadcn@latest init -d\n```\n\n### Project Structure\n\n```\napp/\n\u251C\u2500\u2500 layout.tsx          # Root layout with fonts, metadata\n\u251C\u2500\u2500 page.tsx            # Home page\n\u251C\u2500\u2500 globals.css         # Tailwind imports + custom styles\n\u251C\u2500\u2500 loading.tsx         # Global loading state\n\u251C\u2500\u2500 error.tsx           # Global error boundary\n\u251C\u2500\u2500 not-found.tsx       # 404 page\n\u251C\u2500\u2500 (routes)/           # Route groups\n\u2502   \u251C\u2500\u2500 about/\n\u2502   \u2502   \u2514\u2500\u2500 page.tsx\n\u2502   \u2514\u2500\u2500 dashboard/\n\u2502       \u2514\u2500\u2500 page.tsx\ncomponents/\n\u251C\u2500\u2500 ui/                 # shadcn/ui components\n\u2514\u2500\u2500 [feature]/          # Feature-specific components\nlib/\n\u251C\u2500\u2500 utils.ts            # cn() helper and utilities\n\u2514\u2500\u2500 api.ts              # API client (if backend exists)\nhooks/                  # Custom React hooks\ntypes/                  # TypeScript type definitions\n```\n\n### SEO Best Practices\n\nEvery page MUST include proper SEO elements:\n\n```tsx\n// app/layout.tsx\nimport { Metadata } from 'next';\n\nexport const metadata: Metadata = {\n  title: {\n    default: 'Site Name',\n    template: '%s | Site Name',\n  },\n  description: 'Site description',\n  openGraph: {\n    title: 'Site Name',\n    description: 'Site description',\n    images: ['/og-image.png'],\n  },\n};\n```\n\n### Server Components vs Client Components\n\n```tsx\n// Server Component (default) - for data fetching\n// app/users/page.tsx\nasync function getUsers() {\n  const res = await fetch('https://api.example.com/users', {\n    cache: 'no-store', // or next: { revalidate: 60 }\n  });\n  if (!res.ok) throw new Error('Failed to fetch');\n  return res.json();\n}\n\nexport default async function UsersPage() {\n  const users = await getUsers();\n  return <UserList users={users} />;\n}\n\n// Client Component - for interactivity\n// components/Counter.tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Button onClick={() => setCount(c => c - 1)}>-</Button>\n      <span className=\"text-2xl font-bold\">{count}</span>\n      <Button onClick={() => setCount(c => c + 1)}>+</Button>\n    </div>\n  );\n}\n```\n\n### API Routes (if no separate backend)\n\n```typescript\n// app/api/users/route.ts\nimport { NextResponse } from 'next/server';\n\nexport async function GET() {\n  const users = await db.user.findMany();\n  return NextResponse.json(users);\n}\n\nexport async function POST(request: Request) {\n  const body = await request.json();\n  const user = await db.user.create({ data: body });\n  return NextResponse.json(user, { status: 201 });\n}\n```\n\n### Form with Server Actions\n\n```tsx\n// app/contact/page.tsx\nimport { submitContactForm } from './actions';\n\nexport default function ContactPage() {\n  return (\n    <form action={submitContactForm}>\n      <input name=\"email\" type=\"email\" required />\n      <textarea name=\"message\" required />\n      <button type=\"submit\">Send</button>\n    </form>\n  );\n}\n\n// app/contact/actions.ts\n\"use server\";\n\nexport async function submitContactForm(formData: FormData) {\n  const email = formData.get('email') as string;\n  const message = formData.get('message') as string;\n\n  // Process form...\n\n  return { success: true };\n}\n```\n\n### UI/UX Requirements\n\n- Use semantic HTML (`<main>`, `<nav>`, `<article>`, `<section>`)\n- One `<h1>` per page, hierarchical headings\n- Implement responsive design (mobile-first)\n- Add proper loading states with `loading.tsx`\n- Keyboard navigation support\n- ARIA labels where needed\n- Color contrast ratio 4.5:1 minimum\n\n### Header/Navbar Best Practices\n\n```tsx\n// GOOD: Full-width header\n<header className=\"sticky top-0 z-50 border-b bg-background\">\n  <div className=\"flex h-14 w-full items-center justify-between px-4\">\n    {/* Logo on left, Nav on right */}\n  </div>\n</header>\n\n// BAD: Header with gaps\n<header>\n  <div className=\"container mx-auto\"> {/* Don't use for headers! */}\n```\n\n### What NOT to Do (Next.js specific)\n\n- Never use outdated patterns (pages router, getServerSideProps, getStaticProps)\n- Never create Python, Ruby, or non-TypeScript files\n- Never mix Server and Client logic in same component without \"use client\"";

package/apps/server/dist/chat/prompts/frontend/nextjs.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NEXTJS_PROMPT = void 0;
+exports.NEXTJS_PROMPT = `## Frontend: Next.js (App Router)
+
+You are building a Next.js application using the App Router.
+
+### Technology Stack (Frontend)
+
+| Category | Technology | Notes |
+|----------|------------|-------|
+| Framework | Next.js 15+ | App Router only |
+| Language | TypeScript | Strict mode |
+| UI Components | shadcn/ui | Install: \`npx shadcn@latest add <component>\` |
+| Styling | Tailwind CSS | Use design tokens |
+| State | Zustand | For client state |
+| Forms | React Hook Form + Zod | For validation |
+| Icons | Lucide React | Consistent iconography |
+
+### Project Initialization
+
+\`\`\`bash
+# Create Next.js project
+npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
+
+# Install additional dependencies
+npm install lucide-react clsx tailwind-merge zustand
+npm install react-hook-form @hookform/resolvers zod
+
+# Initialize shadcn/ui
+npx shadcn@latest init -d
+\`\`\`
+
+### Project Structure
+
+\`\`\`
+app/
+├── layout.tsx          # Root layout with fonts, metadata
+├── page.tsx            # Home page
+├── globals.css         # Tailwind imports + custom styles
+├── loading.tsx         # Global loading state
+├── error.tsx           # Global error boundary
+├── not-found.tsx       # 404 page
+├── (routes)/           # Route groups
+│   ├── about/
+│   │   └── page.tsx
+│   └── dashboard/
+│       └── page.tsx
+components/
+├── ui/                 # shadcn/ui components
+└── [feature]/          # Feature-specific components
+lib/
+├── utils.ts            # cn() helper and utilities
+└── api.ts              # API client (if backend exists)
+hooks/                  # Custom React hooks
+types/                  # TypeScript type definitions
+\`\`\`
+
+### SEO Best Practices
+
+Every page MUST include proper SEO elements:
+
+\`\`\`tsx
+// app/layout.tsx
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Site Name',
+    template: '%s | Site Name',
+  },
+  description: 'Site description',
+  openGraph: {
+    title: 'Site Name',
+    description: 'Site description',
+    images: ['/og-image.png'],
+  },
+};
+\`\`\`
+
+### Server Components vs Client Components
+
+\`\`\`tsx
+// Server Component (default) - for data fetching
+// app/users/page.tsx
+async function getUsers() {
+  const res = await fetch('https://api.example.com/users', {
+    cache: 'no-store', // or next: { revalidate: 60 }
+  });
+  if (!res.ok) throw new Error('Failed to fetch');
+  return res.json();
+}
+
+export default async function UsersPage() {
+  const users = await getUsers();
+  return <UserList users={users} />;
+}
+
+// Client Component - for interactivity
+// components/Counter.tsx
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div className="flex items-center gap-4">
+      <Button onClick={() => setCount(c => c - 1)}>-</Button>
+      <span className="text-2xl font-bold">{count}</span>
+      <Button onClick={() => setCount(c => c + 1)}>+</Button>
+    </div>
+  );
+}
+\`\`\`
+
+### API Routes (if no separate backend)
+
+\`\`\`typescript
+// app/api/users/route.ts
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  const users = await db.user.findMany();
+  return NextResponse.json(users);
+}
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const user = await db.user.create({ data: body });
+  return NextResponse.json(user, { status: 201 });
+}
+\`\`\`
+
+### Form with Server Actions
+
+\`\`\`tsx
+// app/contact/page.tsx
+import { submitContactForm } from './actions';
+
+export default function ContactPage() {
+  return (
+    <form action={submitContactForm}>
+      <input name="email" type="email" required />
+      <textarea name="message" required />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+
+// app/contact/actions.ts
+"use server";
+
+export async function submitContactForm(formData: FormData) {
+  const email = formData.get('email') as string;
+  const message = formData.get('message') as string;
+
+  // Process form...
+
+  return { success: true };
+}
+\`\`\`
+
+### UI/UX Requirements
+
+- Use semantic HTML (\`<main>\`, \`<nav>\`, \`<article>\`, \`<section>\`)
+- One \`<h1>\` per page, hierarchical headings
+- Implement responsive design (mobile-first)
+- Add proper loading states with \`loading.tsx\`
+- Keyboard navigation support
+- ARIA labels where needed
+- Color contrast ratio 4.5:1 minimum
+
+### Header/Navbar Best Practices
+
+\`\`\`tsx
+// GOOD: Full-width header
+<header className="sticky top-0 z-50 border-b bg-background">
+  <div className="flex h-14 w-full items-center justify-between px-4">
+    {/* Logo on left, Nav on right */}
+  </div>
+</header>
+
+// BAD: Header with gaps
+<header>
+  <div className="container mx-auto"> {/* Don't use for headers! */}
+\`\`\`
+
+### What NOT to Do (Next.js specific)
+
+- Never use outdated patterns (pages router, getServerSideProps, getStaticProps)
+- Never create Python, Ruby, or non-TypeScript files
+- Never mix Server and Client logic in same component without "use client"`;
+//# sourceMappingURL=nextjs.js.map

package/apps/server/dist/chat/prompts/frontend/nextjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nextjs.js","sourceRoot":"","sources":["../../../../src/chat/prompts/frontend/nextjs.ts"],"names":[],"mappings":";;;AAMa,QAAA,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EA8L8C,CAAC"}

package/apps/server/dist/chat/prompts/frontend/react-native.d.ts

@@ -0,0 +1 @@
+export declare const REACT_NATIVE_PROMPT = "## React Native Development Guide\n\n### Project Structure\n\n```\nfrontend/\n\u251C\u2500\u2500 src/\n\u2502   \u251C\u2500\u2500 screens/             # Screen components\n\u2502   \u2502   \u251C\u2500\u2500 HomeScreen.tsx\n\u2502   \u2502   \u2514\u2500\u2500 ProfileScreen.tsx\n\u2502   \u251C\u2500\u2500 components/          # Reusable components\n\u2502   \u2502   \u251C\u2500\u2500 ui/              # Basic UI components\n\u2502   \u2502   \u2514\u2500\u2500 features/        # Feature-specific\n\u2502   \u251C\u2500\u2500 navigation/          # Navigation config\n\u2502   \u2502   \u251C\u2500\u2500 RootNavigator.tsx\n\u2502   \u2502   \u2514\u2500\u2500 types.ts\n\u2502   \u251C\u2500\u2500 hooks/               # Custom hooks\n\u2502   \u251C\u2500\u2500 lib/                 # Utilities\n\u2502   \u251C\u2500\u2500 stores/              # State management\n\u2502   \u2514\u2500\u2500 types/               # TypeScript types\n\u251C\u2500\u2500 android/                 # Android native code\n\u251C\u2500\u2500 ios/                     # iOS native code\n\u251C\u2500\u2500 index.js                 # Entry point\n\u251C\u2500\u2500 App.tsx                  # Root component\n\u251C\u2500\u2500 package.json\n\u251C\u2500\u2500 metro.config.js\n\u2514\u2500\u2500 tsconfig.json\n```\n\n### Essential Dependencies\n\n```json\n{\n  \"dependencies\": {\n    \"react\": \"18.2.0\",\n    \"react-native\": \"0.74.0\",\n    \"@react-navigation/native\": \"^6.1.0\",\n    \"@react-navigation/native-stack\": \"^6.9.0\",\n    \"@react-navigation/bottom-tabs\": \"^6.5.0\",\n    \"react-native-screens\": \"^3.29.0\",\n    \"react-native-safe-area-context\": \"^4.8.0\",\n    \"react-native-gesture-handler\": \"^2.14.0\",\n    \"react-native-reanimated\": \"^3.6.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.23.0\",\n    \"@babel/preset-env\": \"^7.23.0\",\n    \"@babel/runtime\": \"^7.23.0\",\n    \"@types/react\": \"^18.2.0\",\n    \"typescript\": \"^5.3.0\"\n  }\n}\n```\n\n### Navigation Setup\n\n**Root Navigator**:\n```tsx\n// src/navigation/RootNavigator.tsx\nimport { NavigationContainer } from \"@react-navigation/native\";\nimport { createNativeStackNavigator } from \"@react-navigation/native-stack\";\nimport { createBottomTabNavigator } from \"@react-navigation/bottom-tabs\";\n\nconst Stack = createNativeStackNavigator<RootStackParamList>();\nconst Tab = createBottomTabNavigator<TabParamList>();\n\nfunction TabNavigator() {\n  return (\n    <Tab.Navigator>\n      <Tab.Screen name=\"Home\" component={HomeScreen} />\n      <Tab.Screen name=\"Profile\" component={ProfileScreen} />\n    </Tab.Navigator>\n  );\n}\n\nexport function RootNavigator() {\n  return (\n    <NavigationContainer>\n      <Stack.Navigator>\n        <Stack.Screen\n          name=\"Main\"\n          component={TabNavigator}\n          options={{ headerShown: false }}\n        />\n        <Stack.Screen name=\"Details\" component={DetailsScreen} />\n      </Stack.Navigator>\n    </NavigationContainer>\n  );\n}\n```\n\n**Navigation Types**:\n```tsx\n// src/navigation/types.ts\nimport type { NativeStackScreenProps } from \"@react-navigation/native-stack\";\n\nexport type RootStackParamList = {\n  Main: undefined;\n  Details: { id: string };\n};\n\nexport type RootStackScreenProps<T extends keyof RootStackParamList> =\n  NativeStackScreenProps<RootStackParamList, T>;\n```\n\n### Screen Component Pattern\n\n```tsx\n// src/screens/HomeScreen.tsx\nimport { StyleSheet, View, Text, FlatList } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport type { RootStackScreenProps } from \"../navigation/types\";\n\nexport function HomeScreen({ navigation }: RootStackScreenProps<\"Main\">) {\n  return (\n    <SafeAreaView style={styles.container}>\n      <Text style={styles.title}>Home</Text>\n      <FlatList\n        data={items}\n        keyExtractor={(item) => item.id}\n        renderItem={({ item }) => (\n          <TouchableOpacity\n            onPress={() => navigation.navigate(\"Details\", { id: item.id })}\n          >\n            <ItemCard item={item} />\n          </TouchableOpacity>\n        )}\n      />\n    </SafeAreaView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: \"bold\",\n    padding: 16,\n  },\n});\n```\n\n### API Communication\n\n```tsx\n// src/lib/api.ts\nimport { Platform } from \"react-native\";\n\n// Android emulator uses 10.0.2.2 for localhost\nconst getBaseUrl = () => {\n  if (__DEV__) {\n    return Platform.OS === \"android\"\n      ? \"http://10.0.2.2:3001\"\n      : \"http://localhost:3001\";\n  }\n  return \"https://api.example.com\";\n};\n\nconst API_URL = getBaseUrl();\n\nexport async function fetcher<T>(endpoint: string, options?: RequestInit): Promise<T> {\n  const response = await fetch(`${API_URL}${endpoint}`, {\n    headers: {\n      \"Content-Type\": \"application/json\",\n      ...options?.headers,\n    },\n    ...options,\n  });\n\n  if (!response.ok) {\n    throw new Error(`API Error: ${response.status}`);\n  }\n\n  return response.json();\n}\n```\n\n### Critical Rules\n\n1. **Use SafeAreaView** from react-native-safe-area-context\n2. **Use FlatList** for lists, not ScrollView with map\n3. **Handle Android back button** with BackHandler\n4. **Test on both platforms** - iOS Simulator and Android Emulator\n5. **Use StyleSheet.create** for performance\n6. **Handle keyboard** with KeyboardAvoidingView\n\n### Platform-Specific Code\n\n```tsx\nimport { Platform, StyleSheet } from \"react-native\";\n\nconst styles = StyleSheet.create({\n  shadow: Platform.select({\n    ios: {\n      shadowColor: \"#000\",\n      shadowOffset: { width: 0, height: 2 },\n      shadowOpacity: 0.1,\n      shadowRadius: 4,\n    },\n    android: {\n      elevation: 4,\n    },\n  }),\n});\n```\n\n### Package Scripts\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"react-native start\",\n    \"android\": \"react-native run-android\",\n    \"ios\": \"react-native run-ios\"\n  }\n}\n```";