Ensuring Mobile Standards

Mobile App Coding Standards

When to use this skill

• When writing new code or refactoring existing code.
• During code reviews to check for adherence to standards.
• When configuring linting or formatting rules.
• When creating new components to ensure they meet quality guidelines.

Code Style

• Type Checking: Use TypeScript (React Native) or Dart (Flutter) with strict type checking enabled. Avoid any.
• Linting: Follow established rules (ESLint/Prettier for JS/TS, Dart Analyzer for Dart).
• Naming Conventions:
  • Use PascalCase for Components, Classes, and Types.
  • Use camelCase for variables, functions, and hooks.
  • Use UPPER_CASE for constants.
  • Use meaningful, descriptive names (e.g., fetchUserData instead of getData).
• Documentation: Add JSDoc/DartDoc comments for complex functions, interfaces, and public APIs.

Component Guidelines

• Functional Components: Prefer functional components with hooks over class components in React Native.
• Typed Props: Define props interfaces for all components.
• Size Limit: Keep components small and focused. Aim for <300 lines. Split larger components into smaller sub-components.
• Logic Extraction: Move complex business logic, data fetching, and side effects into custom hooks or services. Keep the UI layer dumb.

State Management

• Tooling: Use the agreed-upon state manager (e.g., Redux Toolkit, Context API, Riverpod).
• Structure: Keep state normalized (avoid deep nesting).
• Actions: Use descriptive action names that describe what happened (e.g., userLoggedIn), not what to do.
• Async Handling: Handle loading, error, and success states explicitly for all async operations.

API Integration

• Async/Await: Use async/await syntax for cleaner asynchronous code.
• Error Handling: Implement try/catch blocks and handle errors gracefully. Display user-friendly error messages.
• Interceptors: Use request/response interceptors for common tasks like adding auth tokens or logging errors.
• Resilience: Handle network failures and offline states.

Performance

• Lazy Loading: Lazy load heavy components or screens to improve initial startup time.
• Assets: Optimize images and use proper formats (WebP, SVG).
• Rendering: Avoid unnecessary re-renders. Use React.memo, useMemo, and useCallback appropriately (but don't premature optimize).
• Lists: Use FlatList or SectionList for long lists with removeClippedSubviews.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.