Coding

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

Project Summary:

promptBeginner5 min to valuemarkdown

0 views

Feb 7, 2026

Sign in to like and favorite skills

View Original Source

Share:

Related Skills

PromptBeginner5 minmarkdown

Markdown Converter

Agent skill for markdown-converter

PromptBeginner5 minmarkdown

Nano Banana Pro

Agent skill for nano-banana-pro

PromptBeginner5 minmarkdown

1password

Agent skill for 1password

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.