Навыки 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-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

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 • 24.10.2026 Открыть версионный отчет

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.

Сведения для разработчиков

Автор

masseater

Лицензия

MIT

Ревизия Skillstore

Примечание о версии

Автор не указал версию.

Репозиторий

https://github.com/masseater/skills/tree/4810c8f1186a229ca57d2f278c0a94f0fc862fec/skills/how-to-use-react

Ссылка

a129dea7b240b40731e20a19640542df37d4cabd

Актуальность поддержки

24.10.2026

Использование

0 загрузок · 0 просмотров

Структура файлов

📁 references/

📄 action-queue.md

📄 async.md

📄 component-apis.md

📄 concurrent-ux.md

📄 deferred-consistency.md

📄 design-theory.md

📄 effects-and-data.md

📄 naming.md

Оптимизация производительности React и Next.js

от vercel-labs

Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.

Кодинг и разработка Просмотр

how-to-use-react

Установить с помощью моего Агента

Ресурсы для AI-агентов

Протестировать

Аудит безопасности

Факторы риска

Копировать ссылку на отчёт

Значок Markdown

Значок HTML

Встраиваемая карточка

Цитата APA

Цитата BibTeX

CITATION.cff

Оценка Skillstore

Что вы можете построить

Choose State Ownership

Review Slow Loader Dependencies

Standardize Component Contracts

Попробуйте эти промпты

Лучшие практики

Избегать

Часто задаваемые вопросы

Сведения для разработчиков

Больше от masseater

skill-authoring

integrate

humanity-and-humanness

dont-it-yourself

writing

poteto-principles

Связанные навыки

senior-fullstack

vercel-react-view-transitions

react-dev

senior-frontend

nextjs-optimization

vercel-react-best-practices