Skill UI

Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.

Provides internationalization/localization best practices for detecting hardcoded strings, organizing translation keys, managing locale files, supporting RTL, and using React, Next.js, or Python patterns, plus a checklist and script for verifying coverage before release.

Design and generate production-ready transactional email templates, previews, i18n, dark mode, spam checks, and analytics hooks for providers like Resend, Postmark, SendGrid, and AWS SES.

Practical fp-ts patterns for React 18/19 and Next.js 14/15 that cover hooks, state, forms, validation, and data fetching with Option, Either, TaskEither, RemoteData, and pipe utilities.

This library provides a complete and verified set of grep command patterns designed for auditing existing React codebases. It is essential for developers preparing for major React upgrades, specifically migration audits for React 18.3.1 or React 19. It detects deprecated APIs, removed features, unsafe lifecycle methods, batching vulnerabilities, and dependency conflicts, ensuring a smooth transition.

A comprehensive matrix detailing minimum required dependency versions for stable operation with React 18.3.1 and React 19.0.0. Use this guide before running `npm install` during major React upgrades to check for peer dependency conflicts, assess compatibility risks (e.g., concurrent mode issues), and determine if a package needs version pinning or specific migration strategies.

This guide provides comprehensive patterns for migrating Enzyme unit tests to React Testing Library (RTL), especially when upgrading to React 18. It emphasizes the crucial philosophical shift from testing internal implementation details (like state or props) to asserting visible user behavior. Learn best practices for rewriting shallow/mount/simulate calls into modern, accessible, and resilient RTL queries, ensuring your tests reflect how a user genuinely interacts with the component.

This guide provides the complete, step-by-step migration pattern for outdated React context APIs (such as contextTypes, childContextTypes, and getChildContext) to the modern createContext API. Since context migration is always a cross-file process, this skill emphasizes the required coordination between the provider and all consumer components to prevent runtime failures and correctly update the entire application codebase.

Provides a comprehensive reference for migrating deprecated and unsafe class component lifecycle methods (such as componentWillMount, componentWillReceiveProps, and componentWillUpdate) to modern, React 18 compliant patterns. This guide is essential when updating legacy codebases, helping developers correctly identify the semantic purpose of the method and choose the correct replacement hook (e.g., componentDidMount or getDerivedStateFromProps), thus preventing common migration errors.

This skill provides comprehensive migration patterns for handling deprecated string refs in React (e.g., ref="name" + this.refs.name). As string refs are removed in React 19, this guide details how to safely migrate all usage—including single element refs, list refs, and callback refs—to the modern, recommended pattern using React.createRef(). It ensures developers can update their codebase for robust compatibility with React 18 and beyond.

A comprehensive reference for diagnosing and fixing silent breaking changes in React 18 class components. This guide covers how React 18 automatically batches state updates in asynchronous contexts (e.g., setTimeout, Promises, async/await), providing patterns for handling state reads after awaiting, and offering guidance on when to correctly use `flushSync` versus refactoring.

Guides preserving React 18 concurrent patterns during migration to React 19 while outlining post-migration adoption of new APIs like use(), Actions, useOptimistic, and Suspense data fetching so concurrent behavior stays intact.