react-native-cursor-rules

•

6155 months ago

React Native development best practices for TypeScript, functional components, performance optimization, and styling guidelines.

Quick Install

npxskills add mindrally/skills--skill react-native-cursor-rules

Instructions

React Native Cursor Rules

Expert guidelines for React Native development by Will Sims, focusing on type-safe TypeScript code, performance optimization, and maintainable component architecture.

Code Style and Structure

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

Naming Conventions

Use camelCase for variables and functions (e.g., isFetchingData, handleUserInput)
Use PascalCase for components (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 any type; strive for precise types
Utilize React.FC for defining functional components with props

Performance Optimization

Minimize useEffect, useState, and heavy computations in render methods
Use React.memo() for components with static props to prevent unnecessary re-renders
Optimize FlatLists with the following props:
- removeClippedSubviews
- maxToRenderPerBatch
- windowSize
Use getItemLayout for consistent-sized FlatList items
Avoid anonymous functions in renderItem or event handlers

UI and Styling

Use consistent styling via StyleSheet.create() or Styled Components
Ensure responsive design for different screen sizes and orientations
Optimize images using react-native-fast-image

Best Practices

Follow React Native's threading model for smooth performance
Utilize Expo's EAS Build and Over-The-Air updates
Use React Navigation for navigation and deep linking

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885