스킬 how-to-use-react

📦

how-to-use-react

Name: how-to-use-react
Author: masseater

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어🌐 네트워크 접근

Build Responsive React Interfaces With Clear State

React interfaces can become slow and difficult to maintain when state ownership and asynchronous dependencies are unclear. This skill guides stack-specific decisions with Effect Atom, TanStack Query, and concurrent React patterns.

지원: Claude Codex Code(CC)

📊 75 적절함

Maintain this Skill? Claim it 📊 75 적절함

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "how-to-use-react" from https://skillstore.io/skills/masseater-how-to-use-react.md and its manifest at https://skillstore.io/api/skills/masseater-how-to-use-react/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/masseater-how-to-use-react.md 서명된 manifest GET /api/skills/masseater-how-to-use-react/manifest 서명된 lockfile GET /api/skills/masseater-how-to-use-react/lockfile

테스트해 보기

"how-to-use-react" 사용 중입니다. Where should search input, fetched results, and save progress live?

예상 결과:

Keep the current search input in Effect Atom.
Manage fetched results with TanStack Query and query definitions in the API segment.
Use mutation status for save progress instead of maintaining a separate pending flag.
Pass a deferred search value to expensive result rendering when needed.

"how-to-use-react" 사용 중입니다. Configuration and profile data load sequentially, but only the profile needs the user result.

예상 결과:

Start configuration loading independently.
Keep user loading before profile loading because the profile requires the user identifier.
Combine the independent configuration task with the dependent user-to-profile task.
Wait inside the content boundary so navigation does not depend on all data completing.

"how-to-use-react" 사용 중입니다. Review a dialog that stores its own open state and exposes separate header and footer slots.

예상 결과:

Expose controlled open and onOpenChange props.
Keep temporary open state in the caller's Effect Atom.
Compose dialog content through children and related components.
Use string props for fixed confirmation text when the dialog content is predetermined.

보안 감사

안전

v1 • 2026. 10. 24. 버전별 보고서 열기

All 51 static findings are false positives in readable React documentation. Markdown backticks, attribution URLs, Japanese text, and mutation scope identifiers explain the detections. No evidence found of prompt injection, credential access, data exfiltration, or executable shell instructions.

스캔된 파일

295

분석된 줄 수

검토 항목

오탐 무시됨

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: codex

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/masseater-how-to-use-react/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/masseater-how-to-use-react/security.svg)](https://skillstore.io/skills/masseater-how-to-use-react?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/masseater-how-to-use-react?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/masseater-how-to-use-react/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/masseater-how-to-use-react.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

학술 인용 (APA · BibTeX · CFF)

APA 인용

masseater. (2026). how-to-use-react security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/masseater-how-to-use-react/audits/1

BibTeX 인용

@techreport{masseater-masseater-how-to-use-react-2026,
  author = {masseater},
  title = {how-to-use-react security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/masseater-how-to-use-react/audits/1},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "how-to-use-react security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "masseater"
date-released: "2026-10-24"
url: "https://skillstore.io/skills/masseater-how-to-use-react/audits/1"
identifiers:
  - type: other
    value: "skillstore:masseater-how-to-use-react:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 점수

이 점수의 이유 증거 신뢰도: 중간

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

Choose State Ownership

Plan where form values, shared UI state, server responses, and mutation status belong before building a feature.

Review Slow Loader Dependencies

Identify independent reads, preserve authentication dependencies, and choose Suspense boundaries that keep navigation visible.

Standardize Component Contracts

Review controlled props, event names, composition patterns, and visual variants for reusable components.

이 프롬프트를 사용해 보세요

Beginner: Classify State

Use how-to-use-react to classify state for [feature]. Separate temporary UI values, server data, and mutation status. Explain the recommended owner for each.

Intermediate: Review Component Props

Review [component] with how-to-use-react. Check controlled values, event names, boolean props, children composition, and visual variants. List concrete changes.

Advanced: Remove Sequential Waits

Review [loader or server function] with how-to-use-react. Identify independent operations and required dependencies. Preserve authorization checks and propose Effect or Promise composition.

Expert: Coordinate Concurrent Updates

Review [interactive screen] with how-to-use-react. Address ordered mutations, optimistic feedback, deferred lists, Suspense boundaries, and React Compiler assumptions. Include failure cases and verification steps.

모범 사례

Confirm the repository stack, React API availability, and Compiler configuration before applying the recommendations.
Map asynchronous dependencies before parallelizing work, and keep ordered mutations within a shared scope.
Review state ownership, component contracts, and loading boundaries together when assessing an interactive feature.

피하기

Apply stack-specific restrictions unchanged to repositories built around different state libraries or frameworks.
Parallelize dependent operations or ordered mutations without preserving required execution order.
Copy source examples without checking installed APIs, failure behavior, and application authorization requirements.

자주 묻는 질문

What does this skill help with?

It guides React state ownership, asynchronous dependencies, mutation ordering, concurrent UI behavior, and component API design.

Which AI tools are supported?

The marketplace metadata lists Claude, Codex, and Claude Code.

Can I use it in any React project?

Its rules target masseater/typescript-template repositories. Adapt them carefully when your project uses different state libraries, frameworks, or conventions.

Does it install dependencies or run tests?

The supplied files are documentation. They contain no installation scripts, executable test runner, or automated performance benchmark.

Does it require React 19.3?

The source targets React 19.3. Check each recommended API against your installed release and release channel before using it.

How does it approach memoization?

It avoids manual memoization when React Compiler is enabled. Otherwise, it recommends lint-guided or measured optimization.