Skill UI

Learn practical, type-safe patterns for building complex React applications using fp-ts. This guide covers key functional programming concepts like handling optional values (Option), managing failure states (Either), and structuring data fetching and forms, ensuring your code is predictable and robust for React 18/19 and Next.js 14/15.

A comprehensive guide covering Internationalization (i18n) and Localization (L10n) best practices. It details how to build applications that can support multiple languages, regions, and text directions (RTL). Covers implementation patterns for React, Next.js, and Python, along with essential guidelines for handling date/number formats and managing translation keys.

A comprehensive development tool for building and managing enterprise-grade transactional email systems. It supports modern React Email and MJML templates, generating production-ready code for major providers like Resend, Postmark, and SendGrid. Key features include multi-provider integration, internationalization (i18n), dark mode, spam score optimization, and advanced analytics tracking. Ideal for setting up new products or migrating legacy email infrastructure.

Master robust and type-safe patterns for React development using fp-ts. This guide covers managing state with Option, sophisticated form validation using Either (collecting all errors), and handling asynchronous data fetching with TaskEither. It promotes a highly functional, predictable coding style for React 18/19 and Next.js.

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.