skills.rest
LedgerHQ
LedgerHQOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-general

Applies React and React Native engineering rules when writing or reviewing TypeScript files.

615|491|Updated Jan 4, 2022
Search Tags:#react native#Performance#typeScript# accessibility#reAct#rtk query#Code review
One-click install
npx skills add https://github.com/LedgerHQ/ledger-live --skill react-general
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-general
Source: https://github.com/LedgerHQ/ledger-live/tree/main/.agents/skills/react-general
Command: npx skills add https://github.com/LedgerHQ/ledger-live --skill react-general

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams working on Ledger Live need consistent React and React Native conventions across desktop and mobile codebases, and this Skill enforces those shared patterns during code writing and review.

Core Features & Use Cases

  • Component & State Standards: Enforces functional components, local-first state, RTK Query for app-wide state, and optimized selectors to limit re-renders.
  • Platform-Specific Guidance: Covers styling with Lumen UI, navigation (React Navigation vs React Router), animations, and platform-specific code for iOS, Android, Electron, and Web.
  • Quality Rules: Defines expectations for performance memoization, accessibility, error boundaries, and react-i18next internationalization.
  • Use Case: When reviewing a new .tsx screen for the mobile app, the Skill checks memoization, accessible labels, theme-aware styling, and strict navigation typing against the documented rules.

Quick Start

Review this React component file and check it against the Ledger Live React engineering rules.

Frequently Asked Questions about react-general

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure React components in Ledger Live?▼

Use functional components that stay focused and reasonably sized, decomposing large UI into smaller reusable elements. Prefer composition for extensibility and connect Redux at the lowest component level possible.

When should I use RTK Query versus local state in React?▼

Use local state for UI-only concerns and reserve RTK Query with slices for app-wide state and data fetching. Apply optimized selectors to limit re-rendering and use consistent loading, retry, and error states.

What styling library does Ledger Live use for React Native?▼

Mobile uses Lumen UI React Native while desktop uses Lumen UI React. All styles must support theme switching between dark and light modes.

How do I handle navigation differences between mobile and desktop?▼

Mobile uses React Navigation with deep-link support and strict navigation types. Desktop uses React Router with route guards when necessary and clear history logic.

What performance optimizations should React components include?▼

Memoize expensive operations with useMemo, stabilize callbacks with useCallback, wrap costly components in React.memo, and apply list virtualization. Use lazy loading for large screens or modules.

Does this guidance cover accessibility requirements?▼

Yes. Mobile requires accessible labels for interactive elements, screen reader support, and focus transitions. Desktop requires semantic HTML, full keyboard navigation, and meaningful ARIA attributes.

Related Skills

Explore More Software Engineering Skills→
tsparticlestsparticles
9.0k

nx-generate

Generates applications, libraries, and boilerplate code using Nx workspace generators.

Official
Intermediate
Ledger-Wallet-LLCLedger-Wallet-LLC

cleanup

Lint, format, and typecheck modified files in a multi-app repo.

Official
Intermediate
Sheon-SSheon-S

react-shadcn-redux-rtkq

Define feature-driven React architecture with shadcn UI, Redux Toolkit, and RTK Query.

Community
Intermediate
AgentientAgentient
2

typescript-code-review-and-linting

Configure ESLint for TypeScript and React code review.

Official
Intermediate