「react」の検索結果

React 18/19の画面部品を実装・レビューする際に、状態管理やデータ取得、フォーム、読み込み・エラー表示、アクセシビリティの設計を支えるスキル。

• Reactの画面部品をレビューしたいとき
• 共有する状態の置き場所を決めたいとき
• フォームとデータ取得の設計

Reactの画面部品やフックを、利用者の操作と表示結果に沿ってテストします。通信の模擬やアクセシビリティ確認、実ブラウザーで検証する範囲の判断も支援します。

• Reactのフォームや部品のテスト追加
• 独自フックと非同期更新の検証
• APIの成功・失敗応答を模擬したいとき

ReactやNext.jsのアニメーション設定を共通化し、動きを減らす利用者設定や端末性能、サーバー描画との整合性に配慮した実装の土台を整えるスキル。

• 部品間のアニメーション設定の統一
• ばねの動きの共通設定を作りたいとき
• 動きを減らす設定に対応したいとき

ReactやNext.jsの画面を実装・レビューするために、部品の組み立て、状態管理、データ取得、表示速度、フォームや操作性の改善パターンを示すスキル。

• Reactの部品を再利用したいとき
• 状態管理とデータ取得の見直し
• 長い一覧の表示を軽くしたいとき

Reactで動画を作る際に、Remotionの実装例と制作ルールを参照できるスキル。アニメーション、音声、字幕、グラフ、3D表現や場面転換を扱います。

• 文字アニメーションや場面転換の制作
• 動画に音声や字幕を加えたいとき
• 動画内でグラフや3Dを見せたいとき

ReactとNext.jsの表示や操作の遅さを見直すための指針です。データ取得の待ち時間、配信するコード量、再描画などを優先度順に確認し、改善に役立てます。

• ページの読み込みの遅さを調べたいとき
• 配信するJavaScript量を見直したいとき
• 再描画と操作の遅延を減らしたいとき

Create and engage with LinkedIn content using the Curviate CLI. Covers `post` (get, create, react, unreact, reactions, delete, save, saved, unsave, user-posts, user-reactions), `comment` (list, add, reply, edit, delete, replies, react, unreact, reactions, user), `feed home` and `notification`. Carries the write-versus-read reaction vocabularies, post-identifier forms, and the pagination trap on reaction lists. Use when posting, commenting, reacting, reading the home feed, or working through notifications.

日本語の概要は準備中です。原文の説明を表示しています。

Testing React Native: Jest with jest-expo / react-native preset, React Testing Library Native, native module mocking, hook testing. Optional sections for Detox (native automation) and Maestro (declarative YAML e2e). Use this skill to: - Configure Jest preset based on workflow. - Write component tests with @testing-library/react-native. - Mock native modules (react-native-reanimated, expo-*, react-native-mmkv). - Test custom hooks via renderHook. - Set up Detox or Maestro for e2e (optional, requires native toolchain). Do NOT use this skill for: - General RN conventions (see rn-conventions). - Web-React testing (see react-plugin:react-testing — different jsdom setup). - Plain Node testing patterns (see nodejs-plugin equivalents).

日本語の概要は準備中です。原文の説明を表示しています。

Reactアプリケーションを最新バージョンにアップグレードし、クラスコンポーネントからフックへ移行し、並行機能を採用します。Reactコードベースのモダナイゼーション、React Hooksへの移行、または最新Reactバージョンへのアップグレード時に使用します。

ReactやNext.jsで、ドラッグ操作、スワイプ、文字やSVGのアニメーションを実装します。複数段階の動きや読み込み表示まで扱い、用途に合うAPI選びも支えるスキル。

• ドラッグで閉じる画面や並べ替えリストの実装
• 単語ごとの文字表示や数値アニメーション
• SVGの線描画や円形の進捗表示

React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.

日本語の概要は準備中です。原文の説明を表示しています。

React conventions. Apply automatically whenever writing or editing React code — JSX/TSX files, components, hooks, props, effects, accessibility (WAI-ARIA), file grouping, React 19 APIs, React Compiler, URL state, and the React ecosystem (TanStack Query, Zustand, React Hook Form, nuqs, Next.js, money and crypto inputs). Builds on the typescript skill, which still applies. Use for any new React code or refactor.

日本語の概要は準備中です。原文の説明を表示しています。

Form patterns for React: react-hook-form (most common), Formik (legacy/stable), TanStack Form (newer). Validation via zod / yup / valibot. Controlled vs uncontrolled inputs, field arrays, multi-step wizards. Use this skill to: - Wire react-hook-form with a validation schema. - Pick between controlled and uncontrolled patterns. - Build multi-step forms with state preservation. - Handle async validation (e.g., username availability). - Integrate forms with TanStack Query mutations. Do NOT use this skill for: - General state management (see react-state-management). - Routing (see react-routing). - Component conventions (see react-conventions). - Testing forms (see react-testing).

日本語の概要は準備中です。原文の説明を表示しています。

Expert-level reaction engineering covering reaction kinetics, reactor design, ideal and non-ideal reactors, catalysis, and reactor scale-up.

日本語の概要は準備中です。原文の説明を表示しています。

TanStack Router (型安全 React ルーター、@tanstack/react-router) の API リファレンス。 React Router (react-router) とは別ライブラリ。 createRouter, createFileRoute, createRootRoute, createLazyFileRoute, Link, Outlet, useNavigate, useParams, useSearch, useLoaderData, useBlocker, loader, beforeLoad, validateSearch, redirect, notFound, Await, file-based routing, routeTree.gen.ts, router-plugin, tsr CLI, code splitting, SSR, TanStack Query 統合, eslint-plugin-router。

TanStack Virtual (React 仮想スクロール、@tanstack/react-virtual) の API リファレンス。 useVirtualizer, useWindowVirtualizer, Virtualizer, VirtualItem, estimateSize, measureElement, rangeExtractor, overscan, lanes, getVirtualItems, getTotalSize, scrollToIndex。固定/可変/動的計測、grid、sticky header、infinite scroll、table、 window scroll 仮想化。別名 react-virtual, virtual-core。 react-flow / Compose LazyColumn / WinUI ListView とは別（DOM 向けヘッドレス仮想化）。

JavaScript / React / Vue のフロントエンドコードを実装・レビュー・リファクタリングするときに、 現在のコードベースを調査し、適切な設計・パフォーマンス・レンダリングパターンを エージェントが自律的に選んで適用する。ユーザーが hooks-pattern や dynamic-import などの 個別パターンを指定しなくても、必要な reference を選択する。 Trigger: front-end-design-patterns, frontend design patterns, React設計, Vue設計, JavaScript設計, Reactリファクタリング, Vueリファクタリング, フロントエンドパフォーマンス改善, bundle改善, レンダリング戦略, Reactレビュー, Vueレビュー

React NativeとExpoのアプリで、画面遷移・状態管理・データ取得を設計します。長い一覧の表示、フォーム、端末機能の利用、認証情報の保存方法も扱います。

• Expoで画面と画面遷移を作りたいとき
• 取得データと画面の状態を整理したいとき
• 長い一覧の表示を改善したいとき

React / Next.jsのボタン、モーダル、通知、ページ遷移に動きを加え、表示・消去やスクロールに連動するアニメーションを実装するスキル。

• ボタンの操作に動きを付けたいとき
• モーダルや通知の表示・消去
• Next.js App Routerのページ遷移

ReactやNext.jsのフォームやモーダルを、キーボード操作と画面読み上げに対応させるスキル。ラベル、エラー表示、フォーカス移動を実装・見直しします。

• フォームのラベルとエラー表示の改善
• ドロップダウンのキーボード操作確認
• モーダル開閉時のフォーカス管理

React Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when working with @json-render/react-email, building transactional or marketing emails from JSON, creating email catalogs, rendering AI-generated email specs, or when the user mentions react-email, HTML email, or transactional email.

日本語の概要は準備中です。原文の説明を表示しています。

Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`). Use when writing, reviewing, or fixing React Native component tests. Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers, userEvent, fireEvent, waitFor, and async patterns. Supports v13 (React 18, sync render) and v14 (React 19+, async render). Triggers on: test files for React Native components, RNTL imports, mentions of "testing library", "write tests", "component tests", or "RNTL".

日本語の概要は準備中です。原文の説明を表示しています。

NEB-IRC activation energy pipeline for reaction barriers using GFN2-xTB and pysisyphus. Optimize reactant and product geometries, run CI-NEB path search, optimize the transition state with a Hessian, verify with IRC (one imaginary mode, endpoints matching reactant/product, single NEB maximum), and report the electronic and Gibbs barriers. Use when you need a transition state, reaction barrier, activation energy, minimum energy path, or intrinsic reaction coordinate. Covers reactant/product atom-ordering pitfalls, feasibility sizing for single-core runs, and thermochemistry corrections. Renders an IRC energy-profile plot and an animated TS imaginary-mode HTML viewer. For 2D reaction scheme drawing use rdkit-chemdraw-cdxml.

日本語の概要は準備中です。原文の説明を表示しています。

Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing React code changes, before merging pull requests, after implementing new features, or for component architecture validation. Triggers on "review React code", "React code review", "check my React components".

日本語の概要は準備中です。原文の説明を表示しています。