Skill UI

A comprehensive guide to advanced frontend architectural patterns for building robust and scalable user interfaces using React and Next.js. Covers essential techniques such as Compound Components, Render Props, custom hooks (e.g., useQuery, useDebounce), and advanced state management using Context and Reducers, ensuring optimal performance and maintainability.

This comprehensive guide establishes strict architectural and performance standards for senior frontend engineers working with React, TypeScript, and Suspense. It dictates best practices for component design, feature implementation, data fetching (useSuspenseQuery), and code structure (feature-based organization). Use this when building any new component, feature, or handling data mutation to ensure the resulting application is scalable, predictable, and maintainable.

A senior specialist for building modern, production-grade React applications using React 19, Server Components, and Next.js App Router. Expertise includes implementing complex state management (Redux, Zustand), optimizing performance with memoization, handling data fetching with TanStack Query, and ensuring strict TypeScript typing and accessibility standards. Ideal for architecting large-scale frontend systems.

This comprehensive workflow guides the development of modern, scalable full-stack applications using Next.js 14+, React, and TypeScript. It covers all phases, from project setup and component architecture to advanced data fetching (Server Components, React Query), styling with Tailwind CSS, robust testing (E2E via Playwright), and deployment optimization. Ideal for building complex, production-grade web interfaces.

A comprehensive guide to modern React state management patterns. It covers various state types—including local, global, server, and form state—and demonstrates best practices using industry-leading libraries like Redux Toolkit, Zustand, Jotai, and React Query. Use this when building complex, scalable React applications and needing to select the optimal state solution.

A comprehensive skill guide for implementing all forms of data fetching and networking in React Native/Expo environments. Covers best practices for using the native fetch API, managing state with React Query (TanStack Query), implementing robust error handling with retry logic, handling offline scenarios, and securely managing authentication tokens. Essential for building reliable, scalable mobile applications that interact with external APIs.

This skill provides expertise in TanStack Query (React Query), a powerful tool for asynchronous state management in modern React and Next.js applications. It covers advanced patterns like data fetching, cache invalidation, optimistic updates, and handling SSR hydration, ensuring highly performant and reliable data layers.

A comprehensive discipline for managing the write path in React or React Native applications using a query/cache layer. It codifies the full optimistic update lifecycle, ensuring that UI updates feel instantaneous, rollbacks are verbatim upon failure, and the global cache remains perfectly coherent across all components and list views. This pattern is essential for complex, highly interactive user experiences.

A comprehensive guide detailing modern architectural patterns for building high-performance user interfaces with React and Next.js. Covers advanced techniques including Compound Components, Render Props, custom state hooks (like useQuery and useDebounce), advanced state management (Context + Reducer), and performance optimization strategies like memoization and code splitting.

A comprehensive guide to best practices for building production-ready React Native and Expo applications. Covers core concepts including Expo Router navigation, state management separation, robust data fetching with TanStack Query and Zod, efficient list rendering, styling consistency, and accessing native APIs.

A comprehensive guide and workflow tool for converting high-fidelity visual designs from Stitch into production-grade, component-based dashboards. Targets the modern stack including React 18, Vite, TypeScript, and TanStack Query. It integrates design tokens from DESIGN.md for styling consistency, supports complex data visualization, and includes patterns for Web3 integration (ethers/viem) for reading on-chain data.

A portable discipline for the write path in React or React Native apps using a query/cache layer. It codifies the optimistic-update lifecycle including canceling in-flight queries, snapshotting affected caches, patching instantly, rolling back verbatim on error, and invalidating on success. Ensures the UI feels instant, remains safe on failure, and maintains cache coherence across detail and list views.