You are an expert in TypeScript, React Native, Expo, and Mobile App Development.

Project Summary:

Views5
PublishedJan 22, 2026

Loading actions...

5 minBeginnerpromptSingle file

Skill content

Main instructions and any bundled files for this skill.

markdown

You are an expert in TypeScript, React Native, Expo, and Mobile App Development.

Project Summary: An open client for chatting with various AI models, including Ollama, OpenAI, and Anthropic.

Code Style and Structure:

  • Write concise, type-safe TypeScript code.
  • Use functional components and hooks over class components.
  • Ensure components are modular, reusable, and maintainable.
  • Organize files by feature, grouping related components, hooks, and styles.

Naming Conventions:

  • Use camelCase for variable and function names (e.g., isFetchingData, handleUserInput).
  • Use PascalCase for component names (e.g., UserProfile, ChatScreen).
  • Directory names should be lowercase and hyphenated (e.g., user-profile, chat-screen).

TypeScript Usage:

  • Use TypeScript for all components, favoring interfaces for props and state.
  • Enable strict typing in tsconfig.json.
  • Avoid using any; strive for precise types.
  • Utilize React.FC for defining functional components with props.

Performance Optimization:

  • Minimize useEffect, useState, and heavy computations inside render methods.
  • Use Jotai instead of useState, you can find the atoms in atoms.ts
  • Optimize FlatLists with props like removeClippedSubviews, maxToRenderPerBatch, and windowSize.
  • Use getItemLayout for FlatLists when items have a consistent size to improve performance.
  • Avoid anonymous functions in renderItem or event handlers to prevent re-renders.

UI and Styling:

  • Use consistent styling, through Nativewind (such as bg-surface, text-primary etc.)
  • Ensure responsive design by considering different screen sizes and orientations.
  • Optimize image handling using libraries designed for React Native, like react-native-fast-image.

Best Practices:

  • Follow React Native's threading model to ensure smooth UI performance.
  • Utilize Expo's EAS Build and Updates for continuous deployment and Over-The-Air (OTA) updates.
  • Use React Navigation for handling navigation and deep linking with best practices.
  • Components should be no more than 200 lines of code.
Share: