Skip to content
Agentmart
Submit a tool

Agent skills for React in Claude Code

962 agent skills for React in the catalog list Claude Code as a supported host. These are the 15 that rank highest, ordered by adoption, freshness and documentation. how-to-write-component, frontend-testing and ui-core-components lead the list. Claude Code reads them from .claude/skills/<name>/SKILL.md in the project, or ~/.claude/skills/<name>/ for every project. A skill is a folder with a SKILL.md file; Claude Code loads it when a task matches its description. Every listing links to its source and shows a freshness grade.

Updated Oct 26, 2026 · Built from catalog data; how we rank and grade

How to install in Claude Code

npx skills add <owner>/<repo> --skill <name> -a claude-code

Where it goes: .claude/skills/<name>/SKILL.md in the project, or ~/.claude/skills/<name>/ for every project.

The host's docs describe copying a folder with a SKILL.md into a skills directory; the npx skills command is a third-party shortcut for the same thing.

Each listing page has the exact command for that listing.

Top 15 of 962

  1. 1
    how-to-write-component

    langgenius

    Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    • Largest repository here (159,418 stars)
    • Active in the last 30 days

    ★ 159.4KLast active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  2. 2
    frontend-testing

    langgenius

    Use when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests frontend test…

    • Largest repository here (159,418 stars)
    • Active in the last 30 days

    ★ 159.4KLast active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  3. 3
    ui-core-components

    open-metadata

    Use when writing or editing React/TSX in `openmetadata-ui/src/main/resources/ui/src/` or `openmetadata-ui-core-components/`, before reaching for a raw `<div>`…

    • Repository has 15.6K stars
    • Active in the last 30 days
    • Open source (Apache-2.0)

    ★ 15.6KLast active Oct 22, 2026Claude Code, Claude apps, Codex, Cursor +6

  4. 4
    markstream-install

    Simon-He95

    Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, or markstream-svelte into an existing repository.

    • Repository has 3K stars
    • Active in the last 30 days
    • Open source (MIT)

    ★ 3KLast active Oct 18, 2026Claude Code, Claude apps, Codex, Cursor +6

  5. 5
    markstream-custom-components

    Simon-He95

    Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Svelte, and Angular.

    • Repository has 3K stars
    • Active in the last 30 days
    • Open source (MIT)

    ★ 3KLast active Oct 18, 2026Claude Code, Claude apps, Codex, Cursor +6

  6. 6
    expo-web-to-native

    expo

    Migrate an existing web React app to a native iOS/Android app with Expo.

    • Repository has 3K stars
    • Active in the last 30 days
    • Open source (MIT)

    ★ 3KLast active Oct 22, 2026Claude Code, Claude apps, Codex, Cursor +6

  7. 7
    expo-brownfield

    expo

    Integrate Expo and React Native into an existing native iOS or Android app.

    • Repository has 3K stars
    • Active in the last 30 days
    • Open source (MIT)

    ★ 3KLast active Oct 22, 2026Claude Code, Claude apps, Codex, Cursor +6

  8. 8
    vendure-dashboard-migration

    vendurehq

    Migrates Vendure Admin UI extensions (legacy Angular-based) to the new React Dashboard.

    • Repository has 8.5K stars
    • Active in the last 30 days

    ★ 8.5KLast active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  9. 9
    react-native-brownfield-migration

    callstackincubator

    Implements an accepted incremental brownfield migration from native iOS or Android to React Native or Expo using @callstack/react-native-brownfield.

    • Repository has 1.7K stars
    • Active in the last 30 days
    • Open source (MIT)

    ★ 1.7KLast active Oct 8, 2026Claude Code, Claude apps, Codex, Cursor +6

  10. 10
    seed-component

    daangn

    SEED 컴포넌트의 경로 조회·React·Lynx API 비교, 신규·포팅·기존 구현 변경, React·Lynx 문서·예제 작성, 또는 컴포넌트와 무관한 색상 토큰의 지도·WCAG 대비 조사를 할 때 사용한다.

    • Repository has 1.2K stars
    • Active in the last 30 days
    • Open source (Apache-2.0)

    ★ 1.2KLast active Oct 22, 2026Claude Code, Claude apps, Codex, Cursor +6

  11. 11
    performance-react-hooks

    trezor

    React render performance for Trezor Suite — memoization under React Compiler, referentially stable hook dependencies, minimal dependency arrays, and telling a…

    • Repository has 1.1K stars
    • Active in the last 30 days

    ★ 1.1KLast active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  12. 12
    components

    trezor

    React component file structure and patterns for Trezor Suite.

    • Repository has 1.1K stars
    • Active in the last 30 days

    ★ 1.1KLast active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  13. 13
    component-refactoring

    Charlie85270

    Refactor high-complexity React components in Dify frontend.

    • Active in the last 30 days
    • Open source (MIT)

    ★ 353Last active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  14. 14
    stitch::extract-static-html

    google-labs-code

    Extract self-contained static HTML from a built web application or React components by inlining CSS and images.

    • Repository has 8.6K stars
    • Open source (Apache-2.0)
    • Ships helper scripts

    ★ 8.6KLast active Jul 29, 2026Claude Code, Claude apps, Codex, Cursor +6

  15. 15
    resend-cli

    resendOfficial

    Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts…

    • Published by the vendor
    • Active in the last 30 days
    • Open source (MIT)

    ★ 205Last active Oct 16, 2026Claude Code, Claude apps, Codex, Cursor +6

Related