Agent skill

React General

by LedgerHQ in LedgerHQ/ledger-live

General React and React Native engineering rules for Ledger Live.

MITAuto-check passedFrontend & Design

Install React General

skills CLI
$ npx skills add LedgerHQ/ledger-live --skill react-general -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install LedgerHQ/ledger-live react-general --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/LedgerHQ/ledger-live.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-general .claude/skills/react-general && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-general
GitHub stars
622
Token cost
~738 tokens
SKILL.md length
312 words
Files
1
Skills in repo
50
Repo updated
First seen
Licence
MIT

At a glance

General React and React Native engineering rules for Ledger Live.

  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers Component Architecture, State Management, Styling and Performance, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve React components

What it does

React General is an agent skill from LedgerHQ/ledger-live. General React and React Native engineering rules for Ledger Live. Read when writing or reviewing any .ts/.tsx file.

Its SKILL.md is about 740 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Cross-platform mobile apps, React components and Accessibility. It works with React, React Native and Redux. The repository describes itself as: Mono-repository for Ledger Wallet apps and related packages. The licence is MIT.

When your agent uses it

  • Tasks that involve Cross-platform mobile apps
  • Tasks that involve React components
  • Tasks that involve Accessibility

Example prompts

  • “/react-general”

What it can do on your machine

Read from SKILL.md and the folder at commit 30d7883. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React General loads about 738 tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 312 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~32
When it runs · the whole SKILL.md, loaded when a task matches
~738

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from LedgerHQ/ledger-live at commit 30d7883, republished under its MIT licence (© LedgerHQ). 312 words, ~738 tokens.

Download SKILL.mdSave it as .claude/skills/react-general/SKILL.md (or your agent's skills folder).
name
react-general
description
General React and React Native engineering rules for Ledger Live. Read when writing or reviewing any .ts/.tsx file.

General React & React Native Patterns

These rules apply to all files, including those inside src/mvvm/. See mvvm-architecture for MVVM-specific structure.

Component Architecture

  • Prefer functional components.
  • Keep components focused and reasonably sized.
  • Decompose large UI into smaller reusable elements.
  • Use composition for extensibility.

State Management

  • Prioritize local state for UI-only concerns.
  • Use RTK Query (with slices) only when necessary for app-wide state. See rtk-query-api.
  • Apply optimized selectors to limit re-rendering.
  • Connect Redux at the lowest component level when possible.

Styling

  • Mobile: use Lumen UI React Native — see ldls-native.
  • Desktop: use Lumen UI React — see ldls-web.
  • All styles must support theme switching (dark/light mode).

Performance

  • Memoize expensive operations with useMemo.
  • Stabilize callbacks with useCallback.
  • Wrap costly components in React.memo.
  • Apply list virtualization where needed.
  • Use lazy loading for large screens or modules.

Navigation

  • Mobile: use React Navigation; ensure correct deep-link support; keep navigation types strict.
  • Desktop: use React Router; implement route guards when necessary; maintain clear history logic.

Data Fetching

  • Use RTK Query. See rtk-query-api.
  • Use consistent loading, retry, and error states.
  • Prefer optimistic UI when appropriate.
  • Apply caching and stale-time strategies.

Accessibility

  • Mobile: provide accessible labels for all interactive elements; support screen reader flows; ensure proper focus transitions.
  • Desktop: use semantic HTML tags; implement full keyboard navigation; apply meaningful ARIA attributes when required.

Error Boundaries

  • Wrap critical areas in error boundaries.
  • Report errors to monitoring services.
  • Provide clean, user-friendly fallback UIs.

Platform-Specific Code

  • React Native: use Platform.select for small platform variations; ensure behavior parity across iOS and Android.
  • Desktop: use environment flags for Electron/Web differences; keep platform abstraction consistent.

Animations

  • Mobile: use the native driver whenever feasible; prefer Animated and layout animations for performance.
  • Desktop: use CSS transitions for lightweight animations; use Framer Motion for complex animations; respect reduced-motion system preferences.

Internationalization (i18n)

  • Use react-i18next consistently.
  • Keep translation keys descriptive and structured.
  • Support pluralization, gender, and variable interpolation.
  • Validate components across multiple locales.

© LedgerHQ, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/react-general of LedgerHQ/ledger-live.

Open the folder on GitHubat commit 30d7883

Compare with similar skills

React General next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React General compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React General this skillLedgerHQ/ledger-live622—~738Automated safety check: PassMIT
Taro UI Guidejd-opensource/taro-ui4.7k—~1.3kAutomated safety check: PassMIT
Cometchat I18ncometchat/cometchat-skills130—~1.9kAutomated safety check: PassMIT
Add Featureecency/vision-mobile262—~1.9kAutomated safety check: PassMIT
Frontend Mobile Development Component Scaffoldaiskillstore/marketplace4307 repos~3kAutomated safety check: PassNone
AccessibilityGetStream/stream-chat-react-native1.2k—~6.5kAutomated safety check: PassCustom licence

Similar skills

  • Taro UI Guide

    jd-opensource/taro-ui

    Guides installing, configuring, styling and using taro-ui (At* components) in Taro apps for WeChat, Alipay, H5 and React Native.

    4.7k GitHub stars~1.3k tokensUpdated 12 days ago
    Frontend & DesignAuto-check passed
  • Cometchat I18n

    cometchat/cometchat-skills

    Localize a CometChat integration — set the UI Kit language, register custom/overridden translations, handle RTL, and never leak a raw localization key into the UI.

    130 GitHub stars~1.9k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Add Feature

    ecency/vision-mobile

    A skill your agent uses when adding a new screen, route, or user-facing feature to the Ecency mobile React Native app, covering navigator registration, route params, i18n strings and styling.

    262 GitHub stars~1.9k tokensUpdated 2 days ago
    MobileAuto-check passed
  • You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components.

    430 GitHub starsUsed in 7 repos~3k tokens
    Frontend & DesignAuto-check passed
  • Accessibility

    GetStream/stream-chat-react-native

    Maintain VoiceOver/TalkBack-focused accessibility in stream-chat-react-native.

    1.2k GitHub stars~6.5k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Solar Icons

    saoudi-h/solar-icons

    Add Solar Icons via @solar-icons/cli to any React, Vue, Svelte, Solid, Angular, React Native, Nuxt, Static, vanilla JS, or Laravel Blade project.

    184 GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed

More from LedgerHQ/ledger-live

All 50 skills in this repo
  • Impacting PRs

    LedgerHQ/ledger-live

    Find which open PRs are impacted by a migration/sunset/refactor and notify their authors — blocking review when the old path is already gone from develop, heads-up comment when it is only deprecated…

    622 GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Cloud Sync Module

    LedgerHQ/ledger-live

    Write, review or debug a cloudSyncModule.ts — a CloudSyncDataManager that syncs one slice of user data through Ledger Sync (Cloud Sync).

    622 GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Codeownership

    LedgerHQ/ledger-live

    Maintain CODEOWNERS file and team directories. An agent skill from LedgerHQ/ledger-live.

    622 GitHub stars~687 tokensUpdated today
    Auto-check passed
  • Coin Families Contract

    LedgerHQ/ledger-live

    Coin-specific families logic must live in families/. An agent skill from LedgerHQ/ledger-live.

    622 GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Data Layer Advanced

    LedgerHQ/ledger-live

    Structure a Ledger Wallet data layer where one API response serves several entities.

    622 GitHub stars~509 tokensUpdated today
    Auto-check passed
  • Debug Rn Native Crash

    LedgerHQ/ledger-live

    Investigate native React Native crashes (Fabric/Hermes/iOS) in ledger-live-mobile when JS error logs are missing or unhelpful.

    622 GitHub stars~1.2k tokensUpdated today
    Auto-check passed

Questions about React General

What does React General do?

General React and React Native engineering rules for Ledger Live. React General is an agent skill from LedgerHQ/ledger-live. General React and React Native engineering rules for Ledger Live.

When should I use React General?

React General fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve React components; tasks that involve Accessibility.

How do I install React General in Claude Code?

Run `npx skills add LedgerHQ/ledger-live --skill react-general -a claude-code`. Or copy the skill folder (.agents/skills/react-general in LedgerHQ/ledger-live) into .claude/skills/react-general in your project. Claude Code loads it when a task matches its description.

How do I install React General in Codex?

Run `npx skills add LedgerHQ/ledger-live --skill react-general -a codex`. Or copy the skill folder (.agents/skills/react-general in LedgerHQ/ledger-live) into .agents/skills/react-general in your project. Codex loads it when a task matches its description.

Can I use React General in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LedgerHQ/ledger-live --skill react-general -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-general, .gemini/skills/react-general, .github/skills/react-general and .opencode/skills/react-general in your project.

What does React General need to run?

SKILL.md names no scripts, command-line tools or credentials: React General is instructions for the agent only.

Does React General access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React General safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React General use?

React General is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React General use?

About 738 tokens (SKILL.md is roughly 3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to React General?

Skills that share tags, products or a category with React General: Taro UI Guide (jd-opensource/taro-ui, 4.7k stars), Cometchat I18n (cometchat/cometchat-skills, 130 stars), Add Feature (ecency/vision-mobile, 262 stars) and Frontend Mobile Development Component Scaffold (aiskillstore/marketplace, 430 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React General?

LedgerHQ (a GitHub organization) maintains it in LedgerHQ/ledger-live, which has 622 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 8, 2026.

Source: LedgerHQ/ledger-live on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.