Skip to content
Agentmart
Submit a tool

Alternatives to how-to-write-component

how-to-write-component is an agent skill by langgenius: Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…. If it doesn't fit your setup, these 12 agent skills cover similar ground. They are ordered by how closely they match how-to-write-component and by our rank, which weighs adoption, freshness and documentation; money never changes the order. frontend-testing leads the list (largest repository here (159,418 stars); active in the last 30 days). Each entry shows data reasons to switch, and you can open a side-by-side comparison with how-to-write-component.

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

You're replacing

how-to-write-component

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

12 alternatives

Ordered by how closely each matches how-to-write-component (shared product, category or stated alternative) and by rank.

  1. 1
    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

  2. 2
    redesign-my-landingpage

    instructa

    Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all…

    • Active in the last 30 days

    ★ 139Last active Oct 15, 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>`…

    • Open source

    ★ 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.

    • Open source

    ★ 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.

    • Open source

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

  6. 6
    expo-module

    expo

    Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).

    • Open source

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

  7. 7
    expo-web-to-native

    expo

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

    • Open source

    ★ 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.

    • Open source

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

  10. 10
    seed-component

    daangn

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

    • Open source
    • Supports TypeScript

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

  11. 11
    typescript

    trezor

    TypeScript-specific conventions including ts-expect-error usage, unknown vs any, const assertions, and type vs interface preferences.

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

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

  12. 12
    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

Related