Markdown to HTML/PDF build + FTP sync to configured remote host. Pandoc + xelatex templates, branded output, automated deployment. Proven on 29-document HEL series.
Automates visual regression testing using Puppeteer page.screenshot() with pixelmatch diffing. Captures full-page screenshots at multiple viewport sizes and generates HTML diff…
Show native HTML windows from pi agent using Python + pywebview. Use when you need to display HTML to the user, collect input, show a chart, or create any visual interaction.
React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code.
Review React Three Fiber and Three.js code — color management, tone mapping, texture pipeline, GLB handling, useFrame performance, disposal patterns.
Creates Stimulus controllers, configures Turbo Frame lazy loading, sets up Turbo Stream broadcasts, and converts traditional Rails views to Hotwire patterns for interacti — from…
Core React 19 patterns including hooks, Suspense, lazy loading, component structure, TypeScript best practices, and performance optimization.
Guide for React 19 development with Actions, Server Components, and new hooks. Use for building React 19 apps, form handling, optimistic updates, and migrations.
React 19 patterns and React Compiler optimization guidance. Understand when to use manual memoization vs letting the compiler optimize, and leverage new hooks like useActionState…
Comprehensive React 19 patterns including all hooks, Server/Client Components, Suspense, streaming, and transitions. Ensures correct React 19 usage with TypeScript.
ReAct (Reason+Act) agent loop — the canonical Observe/Think/Act cycle. Tool registry, stop conditions, turn budget, observation formatting.
Gera a estrutura completa de um projeto ReactJS configurado e pronto para usar Ant Design. Triggers on: /react-antd-setup, 'criar projeto react ant design', 'setup react antd'.
Async/await correctness in React with Zustand. Use when debugging race conditions, missing awaits, floating promises, or async timing issues.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel.
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization,…
Use when creating UI components in React - functional components, hooks, custom hooks, or component composition patterns.
Crée des composants React/Vue/Angular/Svelte optimisés et réutilisables. Se déclenche avec "composant React", "component", "Vue component", "Angular component", "Svelte" — from…
Component patterns and best practices for React with TypeScript. Covers functional components, custom hooks, state management, composition patterns, error boundaries, server…
트리거: "react 컴포넌트 만들어줘", "component 생성", "리액트 컴포넌트", "react component gen" 수행: 재사용 가능한 React 컴포넌트를 TypeScript + Props 타입 + 접근성(a11y) + Storybook 스텁과 함께 생성 출력: 컴포넌트 파일(.tsx), 스타일…
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
React composition patterns that scale — compound components, state lifting, explicit variants, and React 19 API changes.
Configure react context setup operations. Auto-activating skill for Frontend Development. Triggers on: react context setup, react context setup Part of the Frontend Development…
Build type-safe React/TypeScript components, hooks, events, useEffect, React 18-19/Server Components, generic components, and TanStack/React Router integration.
Specialized skill for React component development, hooks patterns, state management, context API, performance optimization, and modern React best practices.
Créer des interfaces React conformes au Design System de l'État français (DSFR) avec @codegouvfr/react-dsfr.
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or…
React Email is an open source component library for building responsive, cross-client email templates using React and TypeScript.
Build and send HTML email templates using React Email components. Use when creating welcome emails, password resets, notifications, order confirmations, or any transactional email…
Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups.
Comprehensive React development skill with focus on modern React patterns, component design, UI/UX best practices, and design systems
React Flow (@xyflow/react) for workflow visualization with custom nodes and edges. Use when building graph visualizations, creating custom workflow nodes, implementing edge…
Advanced React Flow patterns for complex use cases. Use when implementing sub-flows, custom connection lines, programmatic layouts, drag-and-drop, undo/redo, or complex state…
Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.
Architectural guidance for building node-based UIs with React Flow. Use when designing flow-based applications, making decisions about state management, integration patterns, or…
Best practices for writing, reviewing, and refactoring React Flow / @xyflow/react v12 canvases. Use when work touches React Flow components, custom nodes, custom edges, handles,…
Reviews React Flow code for anti-patterns, performance issues, and best practices. Use when reviewing code that uses @xyflow/react, checking for common mistakes, or optimizing…
Implements React Flow node-based UIs correctly using @xyflow/react. Use when building flow charts, diagrams, visual editors, or node-based applications with React.
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Generate production-ready React components with React Query, design tokens, and enterprise standards
TanStack Form v1 - type-safe forms with Zod/Yup/Valibot validation, async validation, arrays, nested fields, React 19 Server Actions
React architecture patterns, TypeScript, Next.js, hooks, and testing. Use when working with React component structure, state management, Next.js routing, Vitest, React Te — from…
React 19+ component guidelines. Apply when editing `.tsx`/`.jsx` files with React imports or Vite configs.
Design composable custom React hooks with proper dependency management, testing with renderHook, and reusable patterns.
React Hook Creator - Auto-activating skill for Frontend Development. Triggers on: react hook creator, react hook creator Part of the Frontend Development skill category.
Use when writing React components with useEffect or useCallback to ensure every reactive value referenced in the hook body appears in the dependency array.
Deep expertise in React hooks patterns including custom hooks, composition, optimization, and testing strategies.
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage.
react-i18next for React 19 - useTranslation hook, TypeScript Selector API, namespaces, pluralization, lazy loading, Suspense integration.
react-leaflet v5 — Componentes React para Leaflet. Mapa interativo com GeoJSON, marcadores e clusters.
Create React components with localStorage persistence and keyboard navigation support
Use cuando necesites migrar una aplicación de React 16/17/18 a React 19. Keywords: react migration, upgrade react, legacy react, react 19 upgrade.
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.
Provides integration recipes for the React Native AI @react-native-ai packages that wrap the Llama.rn (Llama.cpp), MLC-LLM, Apple Foundation backends.
React Native 0.76+ architect with New Architecture, Fabric renderer, TurboModules, and production navigation/state patterns.
Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns.
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup.
React Native core components, layout, styling, animations, lists, platform APIs, and best practices. Use when building iOS/Android UIs with native components.