pjexaf/rn-typescript icon
public
Published on 4/11/2025
React-Native TypeScript assistant

React-Native TypeScript assistant. Main purpose is to help creating Android/iOS applications.

Rules
Models
Context
anthropic Claude 3.7 Sonnet model icon

Claude 3.7 Sonnet

anthropic

200kinput·8.192koutput
anthropic Claude 3.5 Sonnet model icon

Claude 3.5 Sonnet

anthropic

200kinput·8.192koutput
mistral Codestral model icon

Codestral

mistral

voyage voyage-code-3 model icon

voyage-code-3

voyage

voyage Voyage AI rerank-2 model icon

Voyage AI rerank-2

voyage

## Development Guidelines
1. **General Best Practices**
   - Always follow official [React Native](https://reactnative.dev/docs/getting-started) and [TypeScript](https://www.typescriptlang.org/docs/) guidelines.
   - Use functional components and React Hooks wherever possible.
   - Maintain consistent code formatting (e.g., using Prettier, ESLint).
2. **TypeScript Conventions**
   - Strictly type all function parameters, return values, props, and state.
   - Use `interface` or `type` aliases for component props and complex data structures.
   - Avoid using the `any` type unless absolutely necessary.
3. **File & Folder Structure**
   - Keep files short and focused (e.g., separate large components into multiple smaller files).
   - Use a clear naming convention for files and components (PascalCase for component files, e.g., `UserProfile.tsx`).
4. **Reusability & Composition**
   - Prefer composition over repetition. If a pattern or logic is repeated, refactor it into a reusable component or helper.
   - Keep components small and focused on a single responsibility.
5. **Imports & Dependencies**
   - Import only what you need—avoid unnecessary or unused dependencies.
   - Remove unused imports and variables before committing.
6. **Styling**
   - Use React Native’s `StyleSheet` or other appropriate styling approaches to keep styles organized.
   - Avoid excessive inline styles.
7. **Naming & Readability**
   - Use descriptive, self-explanatory variable and function names (e.g., `fetchUserData`, not `getData`).
   - Avoid generic placeholder names like `foo` or `bar`.
8. **Functions & Handlers**
   - Use arrow functions for internal component utilities, e.g.: (const handleClick = () => {}).
   - Keep each helper function small and focused on a single task.
9. **Commenting & Documentation**
   - Add a brief comment block at the top of each page or component describing its purpose (optional but recommended).
   - Use inline comments for complex logic to help future maintainers.
   - For every exported function or component, include a concise JSDoc block at the top describing its purpose, expected input parameters, and return values. Keep explanations clear and to the point, so future readers can quickly understand how and why to use the function or component.
10. **Performance Considerations**
    - Use `React.memo` or `useCallback`/`useMemo` where appropriate to optimize performance.
    - Ensure that the app will work smoothly on both Android and iOS simulators (or devices).
11. **Testing & Validation**
    - Write unit tests for critical logic, custom hooks, and reusable components.
    - Validate data and handle error states gracefully.
React-Native docshttps://reactnative.dev/docs/getting-started

Prompts

Learn more

No Prompts configured

Context

Learn more
@diff
Reference all of the changes you've made to your current branch
@codebase
Reference the most relevant snippets from your codebase
@url
Reference the markdown converted contents of a given URL
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@terminal
Reference the last command you ran in your IDE's terminal and its output
@code
Reference specific functions or classes from throughout your project
@file
Reference any file in your current workspace

No Data configured

MCP Servers

Learn more

No MCP Servers configured