React

React skills teach your agent component patterns, hooks, performance rules, and ecosystem conventions for production-quality UI.

このトピックの 237 個のスキル

エージェントができること

  • Compose reusable components with modern React patterns
  • Apply hooks and state management best practices
  • Optimize rendering with memo, lazy loading, and profiling
  • Handle server and client component boundaries in modern stacks
  • Write accessible JSX with semantic markup
  • Test React components with Vitest and Testing Library

このトピックのスキル

steipete/slack

Slack tool actions: send/read/edit/delete messages, react, pin/unpin, list pins/reactions/emoji, member info.

steipete/clawdis

npx skills add steipete/clawdis

steipete/discord

Discord message-tool ops: send/read/edit/delete, react, poll, pin, thread, search, presence, media/components.

steipete/clawdis

npx skills add steipete/clawdis

affaan-m/motion-foundations

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this.

affaan-m/everything-claude-code

npx skills add affaan-m/everything-claude-code

affaan-m/java-coding-standards

Java coding standards for Spring Boot and Quarkus services: naming, immutability, Optional usage, streams, exceptions, generics, CDI, reactive patterns, and project layout. Automatically applies framework-specific conventions.

affaan-m/everything-claude-code

npx skills add affaan-m/everything-claude-code

affaan-m/coding-standards

Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.

affaan-m/everything-claude-code

npx skills add affaan-m/everything-claude-code

langgenius/frontend-testing

Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.

langgenius/dify

npx skills add langgenius/dify

langgenius/component-refactoring

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.

langgenius/dify

npx skills add langgenius/dify

langgenius/frontend-code-review

Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.

langgenius/dify

npx skills add langgenius/dify

vercel/next.js

The React Framework

vercel/next.js

npx skills add vercel/next.js

sickn33/frontend-dev-guidelines

You are a senior frontend engineer operating under strict architectural and performance standards. Use when creating components or pages, adding new features, or fetching or mutating data.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/discord-bot-architect

Specialized skill for building production-ready Discord bots. Covers Discord.js (JavaScript) and Pycord (Python), gateway intents, slash commands, interactive components, rate limiting, and sharding.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/3d-web-experience

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/nextjs-best-practices

Next.js App Router principles. Server Components, data fetching, routing patterns.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

github/unit-test-vue-pinia

Write and review unit tests for Vue 3 + TypeScript + Vitest + Pinia codebases. Use when creating or updating tests for components, composables, and stores; mocking Pinia with createTestingPinia; applying Vue Test Utils patterns; and enforcing black-box assertions over implementation details.

github/awesome-copilot

npx skills add github/awesome-copilot

github/oo-component-documentation

Create or update standardized object-oriented component documentation using a shared template plus mode-specific guidance for new and existing docs.

github/awesome-copilot

npx skills add github/awesome-copilot

github/web-coder

Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.

github/awesome-copilot

npx skills add github/awesome-copilot

github/update-oo-component-documentation

Update existing object-oriented component documentation following industry best practices and architectural documentation standards.

github/awesome-copilot

npx skills add github/awesome-copilot

github/msstore-cli

Microsoft Store Developer CLI (msstore) for publishing Windows applications to the Microsoft Store. Use when asked to configure Store credentials, list Store apps, check submission status, publish submissions, manage package flights, set up CI/CD for Store publishing, or integrate with Partner Center. Supports Windows App SDK/WinUI, UWP, .NET MAUI, Flutter, Electron, React Native, and PWA applications.

github/awesome-copilot

npx skills add github/awesome-copilot

github/create-oo-component-documentation

Create comprehensive, standardized documentation for object-oriented components following industry best practices and architectural documentation standards.

github/awesome-copilot

npx skills add github/awesome-copilot

CopilotKit/CopilotKit

The Frontend Stack for Agents & Generative UI. React + Angular. Makers of the AG-UI Protocol

CopilotKit/CopilotKit

npx skills add CopilotKit/CopilotKit

googleworkspace/gws-events-renew

Google Workspace Events: Renew/reactivate Workspace Events subscriptions.

googleworkspace/cli

npx skills add googleworkspace/cli

alirezarezvani/generate

Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", or "test this feature".

alirezarezvani/claude-skills

npx skills add alirezarezvani/claude-skills

alirezarezvani/engineering-skills

Index of the engineering-team skills bundle for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365 (stdlib-only Python tools). Use when browsing or choosing among engineering-team role skills — load only the one specialist SKILL.md you need, never bulk-load the bundle.

alirezarezvani/claude-skills

npx skills add alirezarezvani/claude-skills

ComposioHQ/codebase-migrate

Run large codebase migrations and multi-file refactors. Uses the Composio CLI to coordinate issue tracking, batched PRs, and CI verification while the agent executes the transforms locally across hundreds of files.

ComposioHQ/awesome-codex-skills

npx skills add ComposioHQ/awesome-codex-skills

ComposioHQ/skill-creator

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations.

ComposioHQ/awesome-codex-skills

npx skills add ComposioHQ/awesome-codex-skills

anomalyco/opentui

Build terminal UIs with OpenTUI. Covers the core API, native audio, keymaps, React and Solid bindings, components, layout, keyboard input, plugins, and testing.

anomalyco/opentui

npx skills add anomalyco/opentui

tambo-ai/tambo

Generative UI SDK for React

tambo-ai/tambo

npx skills add tambo-ai/tambo

huggingface/huggingface-gradio

Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.

huggingface/skills

npx skills add huggingface/skills

jeffallan/vue-expert-js

Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type coverage without a TS compiler. Use when building Vue 3 applications with JavaScript only (no TypeScript), when projects require JSDoc-based type hints, when migrating from Vue 2 Options API to Composition API in JS, or when teams prefer vanilla JavaScript, .mjs modules, or need quick prototypes without TypeScript setup.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

jeffallan/vue-expert

Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

jeffallan/csharp-developer

Use when building C# applications with .NET 8+, ASP.NET Core APIs, or Blazor web apps. Builds REST APIs using minimal or controller-based routing, configures database access with Entity Framework Core, implements async patterns and cancellation, structures applications with CQRS via MediatR, and scaffolds Blazor components with state management. Invoke for C#, .NET, ASP.NET Core, Blazor, Entity Framework, EF Core, Minimal API, MAUI, SignalR.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

jeffallan/angular-architect

Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

jeffallan/react-native-expert

Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

jeffallan/react-expert

Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

jeffallan/java-architect

Use when building, configuring, or debugging enterprise Java applications with Spring Boot 3.x, microservices, or reactive programming. Invoke to implement WebFlux endpoints, optimize JPA queries and database performance, configure Spring Security with OAuth2/JWT, or resolve authentication issues and async processing challenges in cloud-native Spring applications.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

jeffallan/php-pro

Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks. Invokes strict typing, PHPStan level 9, async patterns with Swoole, and PSR standards. Creates controllers, configures middleware, generates migrations, writes PHPUnit/Pest tests, defines typed DTOs and value objects, sets up dependency injection, and scaffolds REST/GraphQL APIs. Use when working with Eloquent, Doctrine, Composer, Psalm, ReactPHP, or any PHP API development.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

antfu/vue-testing-best-practices

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

antfu/skills

npx skills add antfu/skills

antfu/vue-router-best-practices

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

antfu/skills

npx skills add antfu/skills

antfu/vue

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

antfu/skills

npx skills add antfu/skills

millionco/expect

Use when editing .tsx/.jsx/.css/.html, React components, pages, routes, forms, styles, or layouts. Also when asked to test, verify, validate, QA, find bugs, check for issues, or fix expect-cli failures.

millionco/expect

npx skills add millionco/expect

markdown-viewer/uml

Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.

markdown-viewer/skills

npx skills add markdown-viewer/skills

flutter/flutter-embedding-native-views

Embeds native Android, iOS, or macOS views into a Flutter app. Use when integrating complex native components like maps or web views.

flutter/skills

npx skills add flutter/skills

hyf0/vue-jsx-best-practices

JSX syntax in Vue (e.g., class vs className, JSX plugin config).

hyf0/vue-skills

npx skills add hyf0/vue-skills

hyf0/vue-testing-best-practices

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

hyf0/vue-skills

npx skills add hyf0/vue-skills

hyf0/create-adaptable-composable

Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.

hyf0/vue-skills

npx skills add hyf0/vue-skills

hyf0/vue-router-best-practices

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

hyf0/vue-skills

npx skills add hyf0/vue-skills

hyf0/vue-pinia-best-practices

Pinia stores, state management patterns, store setup, and reactivity with stores.

hyf0/vue-skills

npx skills add hyf0/vue-skills

samber/golang-samber-ro

Reactive streams and event-driven programming in Golang using samber/ro — ReactiveX implementation with 150+ type-safe operators, cold/hot observables, 5 subject types (Publish, Behavior, Replay, Async, Unicast), declarative pipelines via Pipe, 40+ plugins (HTTP, cron, fsnotify, JSON, logging), automatic backpressure, error propagation, and Go context integration. Apply when using or adopting samber/ro, when the codebase imports github.com/samber/ro, or when building asynchronous event-driven pipelines, real-time data processing, streams, or reactive architectures in Go. Not for finite slice transforms (→ See `samber/cc-skills-golang@golang-samber-lo` skill).

samber/cc-skills-golang

npx skills add samber/cc-skills-golang

expo/expo-brownfield

Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.

expo/skills

npx skills add expo/skills

expo/use-dom

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

expo/skills

npx skills add expo/skills

Frequently asked questions

Many React skills apply broadly. For App Router-specific patterns (server components, caching), browse the Next.js topic too.

こちらも見る

すべてのトピック