← ClaudeAtlas

reactlynx-best-practiceslisted

ReactLynx dual-thread best practices for writing, reviewing, and refactoring Lynx components. Use when working with ReactLynx code — background-only directives, main-thread scripts, bindtap/catchtap events, runOnMainThread/runOnBackground, lazy/Suspense, globalPropsMode, component-library packaging, or render/diff/commit performance traces. Triggers on tasks involving Lynx, ReactLynx, or @lynx-js/react.
sehyun0518/agent · ★ 0 · Web & Frontend · score 59
Install: claude install-skill sehyun0518/agent
> **⚠️ ReactLynx only (JSX).** 같은 Lynx라도 JSX 없이 Element PAPI로 짜면 > `vanilla-lynx`, 웹 React/Next면 `react-best-practice`, React Native(Expo)면 > `react-native-skills`를 쓰세요. 네 팩은 혼용하지 않습니다. > 어느 팩인지는 저장소 의존성으로 판별합니다 — `@lynx-js/react`. # ReactLynx Best Practices ReactLynx는 React 프로그래밍 모델을 따르지만, Lynx의 **이중 스레드 런타임** 때문에 부수효과·생명주기 타이밍·이벤트 핸들러·메인 스레드 스크립트를 다르게 다뤄야 합니다. 규칙 9개가 `rules/`에 있습니다. 웹 React의 렌더링 최적화 규칙을 그대로 적용하면 스레드 경계를 어기게 되므로, 이 팩과 다른 팩을 섞지 않습니다. ## When to Apply - ReactLynx 컴포넌트나 애플리케이션 코드를 새로 작성할 때 - 재사용 가능한 ReactLynx 컴포넌트 라이브러리를 만들거나 검토할 때 - 스레드 경계·생명주기·이벤트·`lynx.__globalProps`·코드 분할·성능 문제를 검토할 때 - `lynx.getJSModule`, `NativeModules`, `runOnMainThread`, `runOnBackground`, `lazy`, `Suspense`, `useLayoutEffect`를 호출하는 코드를 리팩터링할 때 - ReactLynx render·diff·commit·patch·setState 트레이스를 조사할 때 ## Rules | Rule | Impact | Use for | |---|---|---| | [detect-background-only](rules/detect-background-only.md) | CRITICAL | `lynx.getJSModule`, `NativeModules`, `'background only'`, 커스텀 이벤트·훅 경계 | | [component-library-packaging](rules/component-library-packaging.md) | HIGH | 컴포넌트 라이브러리 export, type-erased ESM, JSX 보존, Rslib, `tsc` | | [avoid-use-layout-effect](rules/avoid-use-layout-effect.md) | MEDIUM | 생명주기와 레이아웃 읽기 | | [proper-event-handlers](rules/proper-event-handlers.md) | MEDIUM | `bindtap`, `catchtap`, 전파, dataset, 커스텀 prop 핸들러 | | [main-thread-scripts-guide](rules/main-thread-scripts-guide.md) | MEDIUM | `main-thread:*`, `useMainThreadRef`, 스레드 간 호출, 공유 모듈 | | [global-pro