Topic

React

Component patterns, hooks, and React best practices

Skills in this topic

#

Skill

Source

8W Activity

Installs

design-mobile-apps Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, …

designed-by-ai/skills

vercel-react-best-practices Official React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing…

vercel-labs/agent-skills

lark-event Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume …

git-guardrails-claude-code Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they exe…

mattpocock/skills

setup-pre-commit Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when use…

mattpocock/skills

remotion-to-hyperframes Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/conv…

heygen-com/hyperframes

lark-event Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume …

supabase Official Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, St…

supabase/agent-skills

vercel-react-native-skills Official React Native and Expo best practices for building performant mobile apps. Use when building React Native components, …

vercel-labs/agent-skills

vercel-react-view-transitions Official Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` compon…

vercel-labs/agent-skills

higgsfield-websites Build, edit, and deploy full-stack websites, apps and games via the Higgsfield CLI (`higgsfield website …`). Each is …

higgsfield-ai/skills

ask-sonner Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and …

emilkowalski/skills

animate-expo Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right …

emilkowalski/skills

web-artifacts-builder Official Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologie…

anthropics/skills

convex Convex is the backend agents get right on the first try: an all-TypeScript reactive platform where the database, serv…

get-convex/agent-skills

remotion-render Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs…

101-skills/superpowers

stripe-best-practices Official >- Guides Stripe integration decisions across API selection (Checkout Sessions vs PaymentIntents), Connect platform s…

remotion-render Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs…

magentosh/superpowers

gsap-core Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMe…

greensock/gsap-skills

opentui OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task includi…

msmps/opentui-skill

gsap-react Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in Rea…

greensock/gsap-skills

remotion-render Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs…

qu-skills/superpowers

gsap-frameworks Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmoun…

greensock/gsap-skills

clerk-custom-ui Official Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use …

insforge-debug >- Use when diagnosing problems in an InsForge project — reactive failures (SDK error object, HTTP 4xx/5xx, gateway t…

insforge/insforge-skills

extension-to-functions-codebase Official Skill for converting an installed Firebase Extension (or extension source) into a standalone Cloud Functions for Fire…

firebase/agent-skills

clerk-webhooks Official Clerk webhooks for real-time events and data syncing. Verify with verifyWebhook from the framework-specific package. …

react:components Official Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

google-labs-code/stitch-skills

planning-with-files Persistent file-based planning for multi-step AI-agent work. Keeps task_plan.md, findings.md, and progress.md on disk…

othmanadi/planning-with-files

angular-developer Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or …

remotion-render Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs…

skills-shell/superpowers

remotion-render Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs…

its-a-skill-issue/superpowers

golang-samber-ro Reactive streams and event-driven programming in Golang using samber/ro — ReactiveX implementation with 150+ type-saf…

samber/cc-skills-golang

vue Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, de…

golang-uber-fx Golang application framework using uber-go/fx — fx.New, fx.Provide, fx.Invoke, fx.Module, fx.Lifecycle hooks, fx.Anno…

samber/cc-skills-golang

convex-design Design and build reactive, type-safe, production-grade backends on Convex. Covers schema, queries/mutations/actions, …

get-convex/agent-skills

convex-monitor Watch for the next dev/prod error or request in a Convex app and react to it.

get-convex/agent-skills

sanity-best-practices Official Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, St…

sanity-io/agent-toolkit

gws-events-renew Official Google Workspace Events: Renew/reactivate Workspace Events subscriptions.

googleworkspace/cli

react-native-best-practices Official Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and an…

callstackincubator/agent-skills

migrate-radix-to-base Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-u…

limrun-xcode Build an iOS / Apple app on remote Xcode with `lim xcode build` instead of local xcodebuild, or run its XCTest suites…

limrun-inc/skills

limrun-expo-development Prepare and run Expo / React Native apps on Limrun with Expo dev-client iteration. Use when the user wants an Expo de…

limrun-inc/skills

extension-core-infrastructure Core infrastructure providing backend connection configuration, storage client, and React app entry point.

caffeinelabs/skills

expo-brownfield Official Framework (OSS). Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentio…

expo-data-fetching Official Framework (OSS). Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API…

argent-react-native-optimization Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Entry-…

software-mansion/argent

argent-react-native-app-workflow Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator. Use when s…

software-mansion/argent

argent-react-native-profiler Profile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when opti…

software-mansion/argent

argent-metro-debugger Debug a JS runtime via CDP using argent debugger tools. Primary path is React Native via Metro (iOS / Android / Vega)…

software-mansion/argent

limrun-gradle Build an Android app on a remote Gradle sandbox with `lim gradle build` instead of local Gradle or Android Studio, fr…

limrun-inc/skills

laravel-specialist Build and configure Laravel 10+ applications, including creating Eloquent models and relationships, implementing Sanc…

jeffallan/claude-skills

resend Official Use when working with the Resend email API — sending transactional emails (single or batch), receiving inbound emails…

resend/resend-skills

clerk-react-patterns Official React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React R…

health Runs a budget-aware agent-assisted engineering health audit for instruction/config drift, hooks/MCP, verifier surface…

react-doctor Use when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to s…

millionco/react-doctor

expo-web-to-native Official Framework (OSS). Migrate an existing web React app to a native iOS/Android app with Expo. Use when the user wants to …

vue-pinia-best-practices Pinia stores, state management patterns, store setup, and reactivity with stores.

vuejs-ai/skills

react-native-design Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when bu…

wshobson/agents

clerk-react-router-patterns Official React Router v7/v8 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR u…

clerk-tanstack-patterns Official TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vin…

php-pro Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks. Invokes strict typi…

jeffallan/claude-skills

react Official React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react,…

vercel-labs/json-render

react-state-management Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global …

wshobson/agents

react-native-architecture Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. …

wshobson/agents

documenting-contracts Use when documenting an HTTP API, message payloads, queue contracts, DTOs, file formats, or webhooks - or when writin…

riekelt/technical-writer

frontend-patterns Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. …

hook development Official This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate …

anthropics/claude-code

migrate-radix-to-base Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-u…

clerk-expo Official Add Clerk authentication to Expo and React Native apps using @clerk/expo. Use for Expo setup, prebuilt native compone…

create-adaptable-composable Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can…

vuejs-ai/skills

hono Use when building Hono web applications or when the user asks about Hono APIs, routing, middleware, JSX, validation, …

yusukebe/hono-skill

email-best-practices Official Use when building email features, emails going to spam, high bounce rates, setting up SPF/DKIM/DMARC authentication, …

resend/resend-skills

dart-setup-ffi-assets Official Guides agents in compiling and packaging C/C++ source code into dynamic or static libraries (Code Assets) using Dart'…

flutter/agent-plugins

resend-cli Official Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email),…

resend/resend-skills

react-modernization Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.…

wshobson/agents

tanstack-query-best-practices TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activ…

deckardger/tanstack-agent-skills

upgrading-react-native Official Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependen…

callstackincubator/agent-skills

stock-analysis Analyze stocks and cryptocurrencies using Yahoo Finance data. Supports portfolio management (create, add, remove asse…

gracefullight/stock-checker

design-motion-principles Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes —…

kylezantos/design-motion-principles

heroui-react HeroUI v3 React component library (Tailwind CSS v4 + React Aria).

heroui-inc/heroui

react-email Official Use when building HTML email templates with React components, adding a visual email editor to an application using th…

resend/resend-skills

prompt-optimizer >- Analyze raw prompts, identify intent and gaps, match ECC components (skills/commands/agents/hooks), and output a r…

stripe-apps >- Use when building, modifying, or reviewing a Stripe App — or when the user describes something that implies one (e…

docs.stripe.com

java-coding-standards Java coding standards for Spring Boot and Quarkus services: naming, immutability, Optional usage, streams, exceptions…

daisyui Official daisyUI component-library skill for Tailwind CSS. When you write HTML or JSX code, you must use it. Even if …

saadeghi/daisyui

dart-setup-ffi-assets Guides agents in compiling and packaging C/C++ source code into dynamic or static libraries (Code Assets) using Dart'…

dart-lang/skills

angular-component DEPRECATED - this skill is unmaintained. Use the official Angular skills at https://github.com/angular/skills instead…

analogjs/angular-skills

heroui-native HeroUI Native component library for React Native (Tailwind v4 via Uniwind).

heroui-inc/heroui

pi-planning-with-files Persistent file-based planning for multi-step AI-agent work. Keeps task_plan.md, findings.md, and progress.md on disk…

othmanadi/planning-with-files

vue-jsx-best-practices JSX syntax in Vue (e.g., class vs className, JSX plugin config).

vuejs-ai/skills

github-actions Official GitHub Actions workflow patterns for React Native iOS simulator and Android emulator cloud builds with downloadable a…

callstackincubator/agent-skills

agentmemory-hooks The agentmemory plugin hooks that capture observations automatically across the agent session lifecycle. Use when exp…

rohitg00/agentmemory

stitch::extract-design-md Official Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, p…

google-labs-code/stitch-skills

tanstack-start-best-practices TanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, a…

deckardger/tanstack-agent-skills

stitch::code-to-design Official Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design…

google-labs-code/stitch-skills

tanstack-query Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelt…

tanstack-skills/tanstack-skills

react-email Official Use when building HTML email templates with React components, adding a visual email editor to an application using th…

resend/react-email

documentation-lookup Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, A…

stitch::extract-static-html Official Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use t…

google-labs-code/stitch-skills