PyModel/react-frontend-skills

The layering and boundary rules align with Feature-Sliced Design (FSD), the most widely adopted React architecture standard; see [feature-sliced.design](https://feature-sliced.design/) for the full methodology.

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [CSS Modules Documentation](https://github.com/css-modules/css-modules)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [React Patterns - Container/Presentational](https://reactpatterns.com/)

Reference: [React Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [TanStack Query - Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

useEffect(() => {     fetch(`/api/posts/${postId}`)  // Client-server waterfall

fetch(`/api/posts/${postId}`)  // Client-server waterfall

Reference: [Next.js - Data Fetching](https://nextjs.org/docs/app/building-your-application/data-fetching)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Zustand Documentation](https://zustand-demo.pmnd.rs/)

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [React Docs - Sharing State](https://react.dev/learn/sharing-state-between-components)

Reference: [Zustand - Resetting State](https://zustand-demo.pmnd.rs/)

Reference: [TanStack Query - Overview](https://tanstack.com/query/latest/docs/framework/react/overview)

Reference: [Bulletproof React - Project Structure](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Robin Wieruch - React Folder Structure](https://www.robinwieruch.de/react-folder-structure/)

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [TypeScript Handbook - Type-Only Imports](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)

Reference: [Bulletproof React - Project Structure](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md)

Reference: [React Naming Conventions](https://react.dev/learn/thinking-in-react)

Reference: [Bounded Context - Martin Fowler](https://martinfowler.com/bliki/BoundedContext.html)

Reference: [Airbnb React Style Guide](https://github.com/airbnb/javascript/tree/master/react)

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [Robin Wieruch - React Feature Architecture](https://www.robinwieruch.de/react-feature-architecture/)

Reference: [Bulletproof React - Project Structure](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md)

Reference: [Robin Wieruch - React Folder Structure](https://www.robinwieruch.de/react-folder-structure/)

Reference: [Bulletproof React - Project Structure](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md)

Reference: [Feature-Sliced Design](https://feature-sliced.design/)

Reference: [Bulletproof React - Project Structure](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md)

Reference: [Testing Library - Guiding Principles](https://testing-library.com/docs/guiding-principles)

Reference: [Testing Trophy - Kent C. Dodds](https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications)

Reference: [Testing Library - Setup](https://testing-library.com/docs/react-testing-library/setup)

http.get('/api/user', async () => {   // This request is intercepted by this same handler!   const realResponse = await fetch('/api/user')  // Infinite loop

// This request is intercepted by this same handler!   const realResponse = await fetch('/api/user')  // Infinite loop   return realResponse

const realResponse = await fetch('/api/user')  // Infinite loop

http.get('/api/user', async ({ request }) => {     // bypass() marks the request to skip MSW     const realResponse = await fetch(bypass(request))

// bypass() marks the request to skip MSW     const realResponse = await fetch(bypass(request))     const realData = await realResponse.json()

const realResponse = await fetch(bypass(request))

// Only mock in test environment     if (url.searchParams.get('mock') !== 'true') {       return fetch(bypass(request))

if (url.searchParams.get('mock') !== 'true') {       return fetch(bypass(request))     }

return fetch(bypass(request))

// Pass through external APIs   http.all('https://external-service.com/*', () => {

http.all('https://external-service.com/*', () => {

Reference: [MSW bypass API](https://mswjs.io/docs/api/bypass)

Reference: [MSW Cookies](https://mswjs.io/docs/concepts/request-handler#cookies)

Reference: [Dynamic Mock Scenarios](https://mswjs.io/docs/best-practices/dynamic-mock-scenarios)

size: file.size,       mimeType: file.type,       url: `https://cdn.example.com/uploads/${file.name}`,

mimeType: file.type,       url: `https://cdn.example.com/uploads/${file.name}`,     })

url: `https://cdn.example.com/uploads/${file.name}`,

return HttpResponse.json({       userId,       avatarUrl: `https://cdn.example.com/avatars/${userId}/${avatar.name}`,

userId,       avatarUrl: `https://cdn.example.com/avatars/${userId}/${avatar.name}`,     })

avatarUrl: `https://cdn.example.com/avatars/${userId}/${avatar.name}`,

Reference: [MSW file uploads](https://mswjs.io/docs/http/mocking-responses/file-uploads)

The official [`@msw/playwright`](https://github.com/mswjs/msw/tree/master/packages/playwright) binding lets Playwright tests use the familiar `setupWorker()` API (`use`, `resetHandlers`) directly from the Node.js test process. Without it, o

Reference: [MSW Vitest Browser Mode](https://mswjs.io/docs/recipes/vitest-browser-mode)

// When fetch('http://localhost:3000/api/user') is called,

// the handler doesn't match because '/api/user' !== 'http://localhost:3000/api/user'

// Now fetch('http://localhost:3000/api/user') matches correctly

Reference: [MSW Debugging Runbook](https://mswjs.io/docs/runbook/)

Reference: [MSW Lifecycle Events](https://mswjs.io/docs/api/life-cycle-events)

Reference: [MSW Lifecycle Events](https://mswjs.io/docs/api/life-cycle-events)

it('fetches user', async () => {   // If MSW isn't working, this hits real API or fails silently   const response = await fetch('/api/user')

// If MSW isn't working, this hits real API or fails silently   const response = await fetch('/api/user') })

const response = await fetch('/api/user')

await fetch('/api/health')

// Step 3: Check handler URL vs request URL // Common issues: // - Handler: '/api/user' but request goes to 'http://localhost:3000/api/user'

// Common issues: // - Handler: '/api/user' but request goes to 'http://localhost:3000/api/user' // - Environment variable in URL is undefined

// - Handler: '/api/user' but request goes to 'http://localhost:3000/api/user'

// Check if worker script is accessible fetch('/mockServiceWorker.js')

fetch('/mockServiceWorker.js')

Reference: [MSW Debugging Runbook](https://mswjs.io/docs/runbook/)

const response = await getResponse(handlers, queryRequest)         return response || fetch(bypass(queryRequest))

return response || fetch(bypass(queryRequest))

Reference: [MSW GraphQL Query Batching](https://mswjs.io/docs/graphql/mocking-responses/query-batching)

Reference: [GraphQL Spec - Errors](https://spec.graphql.org/October2021/#sec-Errors)

// If your GraphQL endpoint isn't /graphql graphql.link('https://api.example.com/gql').query('GetUser', () => {

graphql.link('https://api.example.com/gql').query('GetUser', () => {

Reference: [MSW GraphQL API](https://mswjs.io/docs/api/graphql)

Reference: [MSW GraphQL Intercepting Operations](https://mswjs.io/docs/graphql/intercepting-operations)

// Test makes request to full URL await fetch('http://localhost:3000/api/user')

await fetch('http://localhost:3000/api/user')

export const handlers = [   // Absolute URL - matches reliably   http.get('http://localhost:3000/api/user', () => {

// Absolute URL - matches reliably   http.get('http://localhost:3000/api/user', () => {     return HttpResponse.json({ name: 'John' })

http.get('http://localhost:3000/api/user', () => {

Reference: [MSW Debugging Runbook](https://mswjs.io/docs/runbook/)

Reference: [Structuring Handlers - Group by Domain](https://mswjs.io/docs/best-practices/structuring-handlers)

Reference: [Structuring Handlers](https://mswjs.io/docs/best-practices/structuring-handlers)

Reference: [MSW v2 Migration - Request Changes](https://mswjs.io/docs/migrations/1.x-to-2.x/)

Reference: [MSW v2 Migration - Resolver Changes](https://mswjs.io/docs/migrations/1.x-to-2.x/)

Reference: [MSW Comparison - Reusability](https://mswjs.io/docs/comparison)

Reference: [Structuring Handlers](https://mswjs.io/docs/best-practices/structuring-handlers)

Reference: [MSW v2 Migration Guide](https://mswjs.io/docs/migrations/1.x-to-2.x/)

Reference: [MSW Custom Request Predicate](https://mswjs.io/docs/best-practices/custom-request-predicate)

Reference: [MSW Handler Precedence](https://mswjs.io/docs/concepts/request-handler)

Reference: [MSW HTTP Handlers](https://mswjs.io/docs/api/http)

Reference: [MSW query parameters](https://mswjs.io/docs/http/intercepting-requests/query-parameters)

Reference: [MSW Request Matching](https://mswjs.io/docs/http/intercepting-requests)

Reference: [MSW HttpResponse Options](https://mswjs.io/docs/api/http-response)

Reference: [MSW delay API](https://mswjs.io/docs/api/delay)

Reference: [MSW HttpResponse API](https://mswjs.io/docs/api/http-response)

Reference: [MSW HttpResponse API](https://mswjs.io/docs/api/http-response)

Reference: [Network Behavior Overrides](https://mswjs.io/docs/best-practices/network-behavior-overrides)

Reference: [MSW ReadableStream Support](https://mswjs.io/blog/introducing-msw-2.0)

// Tests may pass/fail randomly depending on execution order it('fetches user', async () => {   const response = await fetch('/user')

it('fetches user', async () => {   const response = await fetch('/user')   // This fails silently - no mocking active

const response = await fetch('/user')

Reference: [MSW Quick Start - Test Setup](https://mswjs.io/docs/quick-start)

Reference: [MSW v2 Migration - Requirements](https://mswjs.io/docs/migrations/1.x-to-2.x/)

Reference: [MSW Node.js Integration](https://mswjs.io/docs/integrations/node)

Reference: [MSW v2 Migration - TypeScript](https://mswjs.io/docs/migrations/1.x-to-2.x/)

Reference: [MSW Best Practices - Avoid Request Assertions](https://mswjs.io/docs/best-practices/avoid-request-assertions/)

Reference: [Managing the Worker](https://mswjs.io/docs/best-practices/managing-the-worker/)

Reference: [Testing Library Async Methods](https://testing-library.com/docs/dom-testing-library/api-async/)

Reference: [Avoid Request Assertions](https://mswjs.io/docs/best-practices/avoid-request-assertions/)

Reference: [MSW Debugging Runbook](https://mswjs.io/docs/runbook/)

it.concurrent('fetches user', async () => {   // Uses initial handlers   const response = await fetch('https://api.example.com/user')

// Uses initial handlers   const response = await fetch('https://api.example.com/user')   expect(response.ok).toBe(true)

const response = await fetch('https://api.example.com/user')

it.concurrent('handles error', async () => {   server.use(     http.get('https://api.example.com/user', () => {

server.use(     http.get('https://api.example.com/user', () => {       return new HttpResponse(null, { status: 500 })

http.get('https://api.example.com/user', () => {

)   // This override might affect the other concurrent test!   const response = await fetch('https://api.example.com/user')

// This override might affect the other concurrent test!   const response = await fetch('https://api.example.com/user')   expect(response.status).toBe(500)

const response = await fetch('https://api.example.com/user')

const server = setupServer(   http.get('https://api.example.com/user', () => {

http.get('https://api.example.com/user', () => {

'fetches user',   server.boundary(async () => {     const response = await fetch('https://api.example.com/user')

server.boundary(async () => {     const response = await fetch('https://api.example.com/user')     const user = await response.json()

const response = await fetch('https://api.example.com/user')

// Override is scoped to this boundary only     server.use(       http.get('https://api.example.com/user', () => {

server.use(       http.get('https://api.example.com/user', () => {         return new HttpResponse(null, { status: 500 })

http.get('https://api.example.com/user', () => {

})     )     const response = await fetch('https://api.example.com/user')

)     const response = await fetch('https://api.example.com/user')     expect(response.status).toBe(500)

const response = await fetch('https://api.example.com/user')

server.boundary(async () => {     server.use(       http.get('https://api.example.com/user', () => {

server.use(       http.get('https://api.example.com/user', () => {         return HttpResponse.error()

http.get('https://api.example.com/user', () => {

})     )     await expect(fetch('https://api.example.com/user')).rejects.toThrow()

)     await expect(fetch('https://api.example.com/user')).rejects.toThrow()   })

await expect(fetch('https://api.example.com/user')).rejects.toThrow()

Reference: [server.boundary() API](https://mswjs.io/docs/api/setup-server/boundary)

await fetch('/api/user', {

const fetchPromise = fetch('/api/user')

Reference: [MSW Debugging Runbook](https://mswjs.io/docs/runbook/)

Reference: [MSW v2 Migration - Jest/JSDOM](https://mswjs.io/docs/migrations/1.x-to-2.x/)

Reference: [Network Behavior Overrides](https://mswjs.io/docs/best-practices/network-behavior-overrides)

Reference: [useActionState](https://react.dev/reference/react/useActionState)

Reference: [Next.js updating cached data](https://nextjs.org/docs/app/getting-started/caching-and-revalidating#updating-data)

e.preventDefault()     const formData = new FormData(e.target)     await fetch('/api/posts', {

const formData = new FormData(e.target)     await fetch('/api/posts', {       method: 'POST',

await fetch('/api/posts', {

Reference: [Dynamic Imports](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading)

Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

References: - [Next.js 16 upgrade guide](https://nextjs.org/docs/app/guides/upgrading/version-16#turbopack-by-default)

- [Next.js 16 upgrade guide](https://nextjs.org/docs/app/guides/upgrading/version-16#turbopack-by-default)

- [Turbopack filesystem cache](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackFileSystemCache)

In Next.js 15 and 16, a server `fetch()` without an explicit cache policy is not cached at runtime. Build-time prerendering may still reuse it during the build. State the intended policy instead of relying on older defaults.

// This is fresh at runtime in Next.js 15 and 16; it is not an implicit   // persistent cache entry.   return fetch('https://api.example.com/products')

// persistent cache entry.   return fetch('https://api.example.com/products') }

return fetch('https://api.example.com/products')

export default async function Page() {   const config = await fetch('https://api.example.com/config', {

const config = await fetch('https://api.example.com/config', {

const user = await fetch(`https://api.example.com/users/${userId}`, {

const products = await fetch('https://api.example.com/products', {

const posts = await fetch('https://api.example.com/posts', {

Reference: [Next.js fetch API](https://nextjs.org/docs/app/api-reference/functions/fetch)

// lib/data.ts export async function getUser(id: string) {   const res = await fetch(`/api/users/${id}`)

export async function getUser(id: string) {   const res = await fetch(`/api/users/${id}`)   return res.json()

const res = await fetch(`/api/users/${id}`)

export const getUser = cache(async (id: string) => {   const res = await fetch(`/api/users/${id}`)

const res = await fetch(`/api/users/${id}`)

export async function getProducts() {   cacheTag('products')   const res = await fetch('https://api.store.com/products')

cacheTag('products')   const res = await fetch('https://api.store.com/products')   return res.json()

const res = await fetch('https://api.store.com/products')

Reference: [Next.js revalidateTag](https://nextjs.org/docs/app/api-reference/functions/revalidateTag)

Reference: [Next.js route segment config](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config)

const response = await fetch('https://api.store.com/products')

Reference: [Next.js Cache Components](https://nextjs.org/docs/app/getting-started/cache-components)

<html>       <head>         <script src="https://analytics.example.com/script.js" />

<head>         <script src="https://analytics.example.com/script.js" />         {/* Blocks rendering until script loads */}

<script src="https://analytics.example.com/script.js" />

{/* Analytics - load after page is interactive */}         <Script           src="https://analytics.example.com/script.js"

<Script           src="https://analytics.example.com/script.js"           strategy="afterInteractive"

src="https://analytics.example.com/script.js"

{/* Chat widget - load when idle */}         <Script           src="https://chat.example.com/widget.js"

<Script           src="https://chat.example.com/widget.js"           strategy="lazyOnload"

src="https://chat.example.com/widget.js"

Reference: [OpenGraph Images](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image)

<!-- public/sitemap.xml --> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<url>     <loc>https://example.com/</loc>   </url>

<loc>https://example.com/</loc>

</url>   <url>     <loc>https://example.com/about</loc>

<url>     <loc>https://example.com/about</loc>   </url>

<loc>https://example.com/about</loc>

const productUrls = products.map((product) => ({     url: `https://example.com/products/${product.slug}`,

url: `https://example.com/products/${product.slug}`,

const postUrls = posts.map((post) => ({     url: `https://example.com/blog/${post.slug}`,

url: `https://example.com/blog/${post.slug}`,

return [     {       url: 'https://example.com',

{       url: 'https://example.com',       lastModified: new Date(),

url: 'https://example.com',

Reference: [Next.js proxy file convention](https://nextjs.org/docs/app/api-reference/file-conventions/proxy)

useEffect(() => {     fetch('/api/products')

fetch('/api/products')

// app/products/page.tsx export default async function ProductsPage() {   const products = await fetch('https://api.store.com/products')

export default async function ProductsPage() {   const products = await fetch('https://api.store.com/products')     .then(res => res.json())

const products = await fetch('https://api.store.com/products')

export const getProduct = cache(async (id: string) => {   const res = await fetch(`/api/products/${id}`)

const res = await fetch(`/api/products/${id}`)

Reference: [nuqs Custom Parsers](https://nuqs.dev/docs/parsers/making-your-own)

Reference: [nuqs Custom Parsers](https://nuqs.dev/docs/parsers/making-your-own)

Reference: [nuqs Adapters](https://nuqs.dev/docs/adapters)

Reference: [nuqs urlKeys](https://nuqs.dev/docs/utilities)

Reference: [nuqs Documentation](https://nuqs.dev/docs)

Reference: [nuqs Debugging](https://nuqs.dev/docs)

Reference: [nuqs Testing Adapter](https://nuqs.dev/docs/testing)

Reference: [nuqs Documentation](https://nuqs.dev/docs)

Reference: [nuqs History Option](https://nuqs.dev/docs/options)

Reference: [nuqs History Option](https://nuqs.dev/docs/options)

Reference: [nuqs Scroll Option](https://nuqs.dev/docs/options)

Reference: [nuqs Array Parsers](https://nuqs.dev/docs/parsers)

Reference: [nuqs Date Parsers](https://nuqs.dev/docs/parsers)

Reference: [nuqs Enum Parsers](https://nuqs.dev/docs/parsers)

Reference: [nuqs parseAsHex](https://nuqs.dev/docs/parsers)

Reference: [nuqs parseAsIndex](https://nuqs.dev/docs/parsers)

Reference: [nuqs JSON Parser](https://nuqs.dev/docs/parsers)

Reference: [nuqs Parsers Documentation](https://nuqs.dev/docs/parsers)

Reference: [nuqs withDefault](https://nuqs.dev/docs/parsers)

Reference: [React memo](https://react.dev/reference/react/memo)

Reference: [nuqs clearOnDefault](https://nuqs.dev/docs/options)

Reference: [nuqs debounce option](https://nuqs.dev/docs/options#debounce)

Reference: [nuqs createSerializer](https://nuqs.dev/docs/utilities)

Reference: [nuqs rate-limiting options](https://nuqs.dev/docs/options#rate-limiting-url-updates)

Reference: [Next.js 15 Migration](https://nextjs.org/docs/app/building-your-application/upgrading/version-15)

Reference: [nuqs Server Cache](https://nuqs.dev/docs/server-side)

Reference: [nuqs Server-Side](https://nuqs.dev/docs/server-side)

Reference: [nuqs Shallow Option](https://nuqs.dev/docs/options)

Reference: [nuqs Documentation](https://nuqs.dev/docs)

Reference: [nuqs useTransition Integration](https://nuqs.dev/docs/options)

Reference: [nuqs Server-Side](https://nuqs.dev/docs/server-side)

Reference: [nuqs installation and compatibility](https://nuqs.dev/docs/installation)

Reference: [nuqs Adapters](https://nuqs.dev/docs/adapters)

Reference: [nuqs Documentation](https://nuqs.dev/docs)

Reference: [nuqs Server-Side](https://nuqs.dev/docs/server-side)

Reference: [React Derived State](https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)

Reference: [nuqs Documentation](https://nuqs.dev/docs)

Reference: [React Controlled Components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)

Reference: [nuqs State Updates](https://nuqs.dev/docs)

Reference: [nuqs Options](https://nuqs.dev/docs/options)

Reference: [nuqs Documentation](https://nuqs.dev/docs)

Reference: [nuqs useQueryStates](https://nuqs.dev/docs/batching)

Reference: [Playwright Test Hooks](https://playwright.dev/docs/test-fixtures#automatic-fixtures)

Reference: [Playwright Fixtures](https://playwright.dev/docs/test-fixtures)

Reference: [Playwright Page Object Models](https://playwright.dev/docs/pom)

Reference: [Playwright Parallelism](https://playwright.dev/docs/test-parallel) · [Test locks](https://playwright.dev/docs/test-parallel#test-locks)

Reference: [Playwright Test Isolation](https://playwright.dev/docs/browser-contexts)

webServer: {     command: 'npm run dev', // Dev server has different behavior     url: 'http://localhost:3000',

command: 'npm run dev', // Dev server has different behavior     url: 'http://localhost:3000',     reuseExistingServer: !process.env.CI,

url: 'http://localhost:3000',

webServer: {     command: 'npm run build && npm run start',     url: 'http://localhost:3000',

command: 'npm run build && npm run start',     url: 'http://localhost:3000',     reuseExistingServer: !process.env.CI,

url: 'http://localhost:3000',

? 'npm run build && npm run start'       : 'npm run start', // Assumes build exists locally     url: 'http://localhost:3000',

: 'npm run start', // Assumes build exists locally     url: 'http://localhost:3000',     reuseExistingServer: !process.env.CI,

url: 'http://localhost:3000',

Reference: [Next.js Testing with Playwright](https://nextjs.org/docs/pages/guides/testing/playwright)

test('dashboard renders', async ({ page }) => {   await page.goto('https://demo.playwright.dev/todomvc/')

await page.goto('https://demo.playwright.dev/todomvc/')

Reference: [Playwright API Request Context](https://playwright.dev/docs/api-testing)

Reference: [Playwright Testing Multiple Roles](https://playwright.dev/docs/auth#testing-multiple-roles-together)

Reference: [Playwright Worker-Scoped Fixtures](https://playwright.dev/docs/auth#authenticating-in-ui-mode)

Reference: [Playwright Session Storage](https://playwright.dev/docs/auth#session-storage)

Reference: [Playwright Authentication](https://playwright.dev/docs/auth)

Reference: [Playwright Reporters](https://playwright.dev/docs/test-reporters)

Reference: [Playwright Inspector](https://playwright.dev/docs/debug#playwright-inspector)

Reference: [Playwright Screenshots](https://playwright.dev/docs/screenshots)

Reference: [Playwright Trace Viewer](https://playwright.dev/docs/trace-viewer)

Reference: [Playwright Locator Best Practices](https://playwright.dev/docs/best-practices#use-locators)

Reference: [Playwright Filtering Locators](https://playwright.dev/docs/locators#filtering-locators)

Reference: [Playwright Test ID](https://playwright.dev/docs/locators#locate-by-test-id)

Reference: [Playwright FrameLocator](https://playwright.dev/docs/api/class-framelocator) · [Playwright 1.63 release](https://github.com/microsoft/playwright/releases/tag/v1.63.0)

Reference: [Playwright getByLabel](https://playwright.dev/docs/locators#locate-by-label)

Reference: [Playwright getByPlaceholder](https://playwright.dev/docs/locators#locate-by-placeholder)

Reference: [Playwright Locators](https://playwright.dev/docs/locators#locate-by-role)

Reference: [Playwright getByText](https://playwright.dev/docs/locators#locate-by-text)

Reference: [Playwright Request Interception](https://playwright.dev/docs/network#abort-requests)

Reference: [Playwright Network Mocking](https://playwright.dev/docs/mock)

// Step 1: Record HAR file (run once) // npx playwright codegen --save-har=tests/fixtures/dashboard.har http://localhost:3000/dashboard

// npx playwright codegen --save-har=tests/fixtures/dashboard.har http://localhost:3000/dashboard

Reference: [Playwright HAR](https://playwright.dev/docs/mock#mocking-with-har-files)

await page.route('/api/product/1', async (route) => {     // Get real response     const response = await route.fetch();

// Get real response     const response = await route.fetch();     const json = await response.json();

const response = await route.fetch();

test('handles expired cache', async ({ page }) => {   await page.route('/api/data', async (route) => {     const response = await route.fetch();

const response = await route.fetch();

Reference: [Playwright Route Fetch](https://playwright.dev/docs/mock#mocking-with-har-files)

Reference: [Playwright Network Emulation](https://playwright.dev/docs/api/class-browsercontext#browser-context-set-offline)

Reference: [Next.js App Router](https://nextjs.org/docs/app)

// tests/navigation.spec.ts test('navigate through pages', async ({ page }) => {   await page.goto('http://localhost:3000/');

test('navigate through pages', async ({ page }) => {   await page.goto('http://localhost:3000/');   await page.getByRole('link', { name: 'Products' }).click();

await page.goto('http://localhost:3000/');

await expect(page).toHaveURL('http://localhost:3000/products');

await page.goto('http://localhost:3000/about');

await expect(page).toHaveURL('http://localhost:3000/about');

export default defineConfig({   use: {     baseURL: process.env.BASE_URL || 'http://localhost:3000',

use: {     baseURL: process.env.BASE_URL || 'http://localhost:3000',   },

baseURL: process.env.BASE_URL || 'http://localhost:3000',

webServer: {     command: 'npm run build && npm run start',     url: 'http://localhost:3000',

command: 'npm run build && npm run start',     url: 'http://localhost:3000',     reuseExistingServer: !process.env.CI,

url: 'http://localhost:3000',

// playwright.config.ts const environments = {   local: 'http://localhost:3000',

const environments = {   local: 'http://localhost:3000',   staging: 'https://staging.example.com',

local: 'http://localhost:3000',

staging: 'https://staging.example.com',

production: 'https://example.com',

? {         command: 'npm run build && npm run start',         url: 'http://localhost:3000',

command: 'npm run build && npm run start',         url: 'http://localhost:3000',         reuseExistingServer: !process.env.CI,

url: 'http://localhost:3000',

{       name: 'local',       use: { baseURL: 'http://localhost:3000' },

name: 'local',       use: { baseURL: 'http://localhost:3000' },     },

use: { baseURL: 'http://localhost:3000' },

{       name: 'staging',       use: { baseURL: 'https://staging.example.com' },

name: 'staging',       use: { baseURL: 'https://staging.example.com' },     },

use: { baseURL: 'https://staging.example.com' },

Reference: [Playwright Configuration](https://playwright.dev/docs/test-configuration)

Reference: [Next.js Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)

Reference: [Testing Next.js](https://nextjs.org/docs/app/guides/testing)

Reference: [Next.js Hydration](https://nextjs.org/docs/messages/react-hydration-error)

Reference: [Playwright Projects](https://playwright.dev/docs/test-projects)

Reference: [Playwright Test Configuration](https://playwright.dev/docs/test-configuration#testing-options)

Reference: [Playwright Retries](https://playwright.dev/docs/test-retries)

webServer: {     command: 'npm run build && npm run start',     url: 'http://localhost:3000',

command: 'npm run build && npm run start',     url: 'http://localhost:3000',     // Always starts new server, even if one is running

url: 'http://localhost:3000',

webServer: {     command: 'npm run build && npm run start',     url: 'http://localhost:3000',

command: 'npm run build && npm run start',     url: 'http://localhost:3000',     // Reuse existing server locally, start fresh in CI

url: 'http://localhost:3000',

{       command: 'npm run start:frontend',       url: 'http://localhost:3000',

command: 'npm run start:frontend',       url: 'http://localhost:3000',       reuseExistingServer: !process.env.CI,

url: 'http://localhost:3000',

{       command: 'npm run start:api',       url: 'http://localhost:4000',

command: 'npm run start:api',       url: 'http://localhost:4000',       reuseExistingServer: !process.env.CI,

url: 'http://localhost:4000',

webServer: {     command: 'npm run build && npm run start',     url: 'http://localhost:3000',

command: 'npm run build && npm run start',     url: 'http://localhost:3000',     reuseExistingServer: !process.env.CI,

url: 'http://localhost:3000',

Reference: [Playwright Web Server](https://playwright.dev/docs/test-webserver)

Reference: [Playwright Sharding](https://playwright.dev/docs/test-sharding)

Reference: [Playwright Auto-Waiting](https://playwright.dev/docs/actionability)

Reference: [Playwright Auto-Waiting](https://playwright.dev/docs/actionability)

Reference: [Playwright Timeouts](https://playwright.dev/docs/test-timeouts)

Reference: [Playwright page.goto waitUntil](https://playwright.dev/docs/api/class-page#page-goto-option-wait-until)

Reference: [Playwright Soft Assertions](https://playwright.dev/docs/test-assertions#soft-assertions)

Reference: [Playwright Assertions](https://playwright.dev/docs/test-assertions)

Reference: [React Hook Form DevTools](https://react-hook-form.com/dev-tools)

Reference: [React Hook Form - Advanced Usage](https://react-hook-form.com/advanced-usage)

Reference: [v7.87.0 release](https://github.com/react-hook-form/react-hook-form/releases/tag/v7.87.0) · [TypeScript support](https://react-hook-form.com/ts)

Reference: [React Hook Form - Testing](https://react-hook-form.com/advanced-usage#TestingForm)

Reference: [useFieldArray](https://react-hook-form.com/docs/usefieldarray)

Reference: [useFieldArray](https://react-hook-form.com/docs/usefieldarray)

Reference: [useFieldArray](https://react-hook-form.com/docs/usefieldarray)

Reference: [useFieldArray](https://react-hook-form.com/docs/usefieldarray)

Reference: [React Hook Form - Advanced Usage](https://react-hook-form.com/advanced-usage)

Reference: [useController](https://react-hook-form.com/docs/usecontroller)

Reference: [useController](https://react-hook-form.com/docs/usecontroller)

Reference: [useController](https://react-hook-form.com/docs/usecontroller)

Reference: [useController](https://react-hook-form.com/docs/usecontroller)

Reference: [useController](https://react-hook-form.com/docs/usecontroller)

Reference: [useForm - defaultValues](https://react-hook-form.com/docs/useform)

Reference: [useForm - defaultValues](https://react-hook-form.com/docs/useform)

Reference: [useForm - reValidateMode](https://react-hook-form.com/docs/useform)

Reference: [useForm - shouldUnregister](https://react-hook-form.com/docs/useform)

Reference: [useForm](https://react-hook-form.com/docs/useform)

Reference: [useForm - mode](https://react-hook-form.com/docs/useform)

Reference: [React Hook Form formState](https://react-hook-form.com/docs/useform/formstate)

Reference: [useFormState](https://react-hook-form.com/docs/useformstate)

Reference: [useForm - getFieldState](https://react-hook-form.com/docs/useform/getfieldstate) · [useForm - getErrors](https://react-hook-form.com/docs/useform/geterrors)

Reference: [useFormState](https://react-hook-form.com/docs/useformstate)

Reference: [useFormState](https://react-hook-form.com/docs/useformstate)

Reference: [React Hook Form - UI Libraries](https://react-hook-form.com/get-started#IntegratingwithUIlibraries)

Reference: [shadcn Form](https://ui.shadcn.com/docs/components/form)

Reference: [shadcn Select](https://ui.shadcn.com/docs/components/select)

Reference: [React Hook Form - Advanced Usage](https://react-hook-form.com/advanced-usage)

Reference: [useForm - getValues](https://react-hook-form.com/docs/useform/getvalues)

Reference: [useWatch](https://react-hook-form.com/docs/usewatch)

Reference: [useFormContext](https://react-hook-form.com/docs/useformcontext)

Reference: [useWatch](https://react-hook-form.com/docs/usewatch)

Reference: [useWatch](https://react-hook-form.com/docs/usewatch)

Reference: [useWatch](https://react-hook-form.com/docs/usewatch)

Reference: [useForm - watch](https://react-hook-form.com/docs/useform/watch)

Reference: [useForm - delayError](https://react-hook-form.com/docs/useform)

Reference: [React Hook Form Resolvers](https://github.com/react-hook-form/resolvers)

Reference: [React Hook Form - ErrorMessage](https://react-hook-form.com/docs/useformstate/errormessage) · [Advanced Usage](https://react-hook-form.com/advanced-usage)

Reference: [React Hook Form Resolvers](https://github.com/react-hook-form/resolvers)

Reference: [useForm - shouldUseNativeValidation](https://react-hook-form.com/docs/useform)

Reference: [React Hook Form Resolvers](https://github.com/react-hook-form/resolvers)

Reference: [useForm - trigger](https://react-hook-form.com/docs/useform/trigger) · [v7.87.0 release](https://github.com/react-hook-form/react-hook-form/releases/tag/v7.87.0)

1. [https://react.dev](https://react.dev)

2. [https://react.dev/blog/2024/12/05/react-19](https://react.dev/blog/2024/12/05/react-19)

3. [https://react.dev/blog/2025/10/01/react-19-2](https://react.dev/blog/2025/10/01/react-19-2)

4. [https://react.dev/learn/you-might-not-need-an-effect](https://react.dev/learn/you-might-not-need-an-effect)

5. [https://github.com/facebook/react](https://github.com/facebook/react)

export async function getUser(id: string) {   console.log('Fetching user', id)  // Logs multiple times!   const res = await fetch(`/api/users/${id}`)

console.log('Fetching user', id)  // Logs multiple times!   const res = await fetch(`/api/users/${id}`)   return res.json()

const res = await fetch(`/api/users/${id}`)

export const getUser = cache(async (id: string) => {   console.log('Fetching user', id)  // Logs once   const res = await fetch(`/api/users/${id}`)

console.log('Fetching user', id)  // Logs once   const res = await fetch(`/api/users/${id}`)   return res.json()

const res = await fetch(`/api/users/${id}`)

Reference: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)

fetch('/api/data', { signal: controller.signal })

function ChatRoom({ roomId }) {   const options = { roomId, serverUrl: 'https://chat.example.com' }

const options = { roomId, serverUrl: 'https://chat.example.com' }

function ChatRoom({ roomId }) {   useEffect(() => {     const options = { roomId, serverUrl: 'https://chat.example.com' }

useEffect(() => {     const options = { roomId, serverUrl: 'https://chat.example.com' }     const connection = createConnection(options)

const options = { roomId, serverUrl: 'https://chat.example.com' }

const options = useMemo(() => ({     roomId,     serverUrl: 'https://chat.example.com'

roomId,     serverUrl: 'https://chat.example.com'   }), [roomId])

serverUrl: 'https://chat.example.com'

Reference: [react.dev - browser](https://react.dev/reference/react-dom/browser) · [React 19.3 release](https://react.dev/blog/2026/09/09/react-19-3)

Reference: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)

Reference: [useActionState](https://react.dev/reference/react/useActionState)

useEffect(() => {     fetch(url).then(res => res.json()).then(setData).finally(() => setLoading(false))

fetch(url).then(res => res.json()).then(setData).finally(() => setLoading(false))

useEffect(() => {     fetch(url).then(res => res.json()).then(setData).finally(() => setLoading(false))

fetch(url).then(res => res.json()).then(setData).finally(() => setLoading(false))

useEffect(() => {     fetch(`/api/users/${userId}`)

fetch(`/api/users/${userId}`)

// Server Component - no 'use client' directive export async function UserProfile({ userId }: { userId: string }) {   const user = await fetch(`https://api.example.com/users/${userId}`)

export async function UserProfile({ userId }: { userId: string }) {   const user = await fetch(`https://api.example.com/users/${userId}`)     .then(res => res.json())

const user = await fetch(`https://api.example.com/users/${userId}`)

Reference: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)

Reference: [WCAG Contrast Requirements](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)

Reference: [WAI-ARIA Dialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)

Reference: [Radix Accessibility](https://www.radix-ui.com/primitives/docs/overview/accessibility)

Reference: [WAI-ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)

Reference: [Tailwind Screen Reader](https://tailwindcss.com/docs/screen-readers)

{   "registries": {     "@acme": "https://registry.acme.dev/{name}.json",

"registries": {     "@acme": "https://registry.acme.dev/{name}.json",     "@internal": {

"@acme": "https://registry.acme.dev/{name}.json",

[Credential-related source omitted]

"url": "https://internal.example.com/api/registry/{name}.json",

[Credential-related source omitted]

Reference: [Class Variance Authority](https://cva.style/docs)

Reference: [React 19 — ref as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop)

Reference: [CVA Documentation](https://cva.style/docs/getting-started/variants)

Reference: [shadcn/ui Dialog](https://ui.shadcn.com/docs/components/dialog)

References: - [shadcn Radix dropdown menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu)

- [shadcn Radix dropdown menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu)

- [shadcn Base UI dropdown menu](https://ui.shadcn.com/docs/components/base/dropdown-menu)

Reference: [shadcn/ui Utilities](https://ui.shadcn.com/docs/installation/manual)