### Full-Stack Setup with TanStack Start

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Initializes a new full-stack application using the TanStack Start CLI, including common libraries like React Query, Zod, and Drizzle ORM.

```bash
pnpm create @tanstack/start my-app
cd my-app
pnpm add @tanstack/react-query zod drizzle-orm
```

--------------------------------

### Install HTTP Client (ky or axios)

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs either ky (lightweight) or axios (full-featured) for making HTTP requests in your application.

```bash
# Lightweight (6KB)
pnpm add ky

# Full-featured (30KB)
pnpm add axios
```

--------------------------------

### Install Zustand for Client State Management

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs the Zustand library, a small, fast, and scalable bearbones state-management solution for React.

```bash
pnpm add zustand
```

--------------------------------

### Install SolidJS DevTools

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/references/debugging.md

Install the SolidJS DevTools package and the Vite plugin for Vite projects.

```bash
pnpm add -D solid-devtools

# For Vite projects
pnpm add -D vite-plugin-solid-devtools
```

--------------------------------

### Install @t3-oss/env-core for Environment Variables

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Install the @t3-oss/env-core package and zod for environment variable management. This setup provides type-safe access to environment variables.

```bash
pnpm add @t3-oss/env-core zod
```

--------------------------------

### Install Radix UI Primitives

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs headless UI components from Radix Primitives, providing accessible building blocks for custom UIs.

```bash
pnpm add @radix-ui/react-dialog @radix-ui/react-dropdown-menu
```

--------------------------------

### Analyze Nuxt 3 Bundle Size

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/nuxtjs-mastery-skill/references/performance.md

Guides on installing and running `nuxt-bundle-analyze` to visualize and analyze the generated JavaScript bundles. This helps identify large dependencies and optimize code splitting.

```bash
# Install analyzer
npm install -D nuxt-bundle-analyze

# nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-bundle-analyze'],
})

# Run analysis
npx nuxt analyze
```

--------------------------------

### Install Core React and TanStack Libraries

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs the foundational libraries for a React project using TanStack Query and Router, along with TypeScript and Vite for building.

```bash
pnpm add react react-dom
pnpm add @tanstack/react-query @tanstack/react-router

pnpm add -D typescript @types/react @types/react-dom

pnpm add -D vite @vitejs/plugin-react
```

--------------------------------

### Install TanStack Query and Devtools

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs the TanStack Query library for server state management and its associated developer tools for debugging.

```bash
pnpm add @tanstack/react-query
pnpm add -D @tanstack/react-query-devtools
```

--------------------------------

### Install TanStack Form and Zod Adapter

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs the TanStack Form library for complex form handling and its Zod adapter for schema validation.

```bash
pnpm add @tanstack/react-form @tanstack/zod-form-adapter zod
```

--------------------------------

### Install DevTools Extensions

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/debugging-guide.md

Install the React Query and React Router DevTools extensions using npm or pnpm for use in CI/testing environments.

```bash
pnpm add -D @tanstack/react-query-devtools @tanstack/router-devtools
```

--------------------------------

### TanStack Router Setup

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-router.md

Configure the TanStack Router with a QueryClient and define the router instance. Includes type registration for context.

```typescript
// app/router.tsx
import { createRouter } from '@tanstack/react-router'
import { QueryClient } from '@tanstack/react-query'
import { routeTree } from './routeTree.gen' // Generated file

export const queryClient = new QueryClient()

export const router = createRouter({
  routeTree,
  context: {
    queryClient,
    auth: undefined!, // Will be set by AuthProvider
  },
  defaultPreload: 'intent', // Preload on hover/focus
  defaultPreloadStaleTime: 0,
})

// Type registration
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

// main.tsx
import { RouterProvider } from '@tanstack/react-router'
import { QueryClientProvider } from '@tanstack/react-query'
import { router, queryClient } from './router'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  )
}
```

--------------------------------

### TanStack Start API Routes for Users

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-start.md

Defines API routes for managing users, including GET, POST, PATCH, and DELETE operations. Handles dynamic route parameters for user IDs.

```typescript
// app/routes/api/users.ts
import { json } from '@tanstack/start'
import { createAPIFileRoute } from '@tanstack/start/api'
import { db } from '@/server/db'

export const Route = createAPIFileRoute('/api/users')({
  // GET /api/users
  GET: async ({ request }) => {
    const url = new URL(request.url)
    const status = url.searchParams.get('status')
    
    const users = await db.user.findMany({
      where: status ? { status } : undefined,
    })
    
    return json(users)
  },

  // POST /api/users
  POST: async ({ request }) => {
    const body = await request.json()
    
    const user = await db.user.create({ data: body })
    
    return json(user, { status: 201 })
  },
})

// app/routes/api/users/$id.ts
export const Route = createAPIFileRoute('/api/users/$id')({
  // GET /api/users/:id
  GET: async ({ params }) => {
    const user = await db.user.findUnique({
      where: { id: params.id },
    })
    
    if (!user) {
      return json({ error: 'Not found' }, { status: 404 })
    }
    
    return json(user)
  },

  // PATCH /api/users/:id
  PATCH: async ({ params, request }) => {
    const body = await request.json()
    
    const user = await db.user.update({
      where: { id: params.id },
      data: body,
    })
    
    return json(user)
  },

  // DELETE /api/users/:id
  DELETE: async ({ params }) => {
    await db.user.delete({ where: { id: params.id } })
    return json({ success: true })
  },
})
```

--------------------------------

### Install Playwright for E2E Testing

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Install Playwright for end-to-end testing and execute the command to install necessary browser binaries. Playwright provides a robust framework for browser automation.

```bash
pnpm add -D @playwright/test
pnpm exec playwright install
```

--------------------------------

### Install date-fns for Date Handling

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs the date-fns library, a modern JavaScript utility library for manipulating dates with a consistent API.

```bash
pnpm add date-fns
```

--------------------------------

### Basic TanStack Table Setup

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-table.md

Sets up a basic TanStack Table component with data and columns. Requires importing necessary hooks and types from '@tanstack/react-table'.

```typescript
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
} from '@tanstack/react-table'
import type { User } from '../types'

interface UserTableProps {
  data: User[]
}

export function UserTable({ data }: UserTableProps) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}
```

--------------------------------

### Docker Deployment Configuration

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-start.md

Dockerfile for building and running a TanStack Start application in a Docker container, including build and runtime stages.

```dockerfile
FROM node:20-slim AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm build

FROM node:20-slim
WORKDIR /app
COPY --from=builder /app/.output .output
EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]
```

--------------------------------

### Module Boundaries Rule Example

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/folder-structure.md

Illustrates the module boundaries rule, showing which modules a feature can import from. This example highlights that 'features/auth/' can import from shared and lib directories but not from other features like 'features/users/' to prevent cross-feature dependencies.

```plaintext
features/auth/ can import from:
  ✅ @/shared/*
  ✅ @/lib/*
  ❌ @/features/users/*  (cross-feature import)  
  
If needed, lift to shared/ or create integration layer
```

--------------------------------

### Install Tailwind CSS and Utility Libraries

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs Tailwind CSS for styling, along with PostCSS and Autoprefixer, and utility libraries like tailwind-merge and clsx for class name management.

```bash
pnpm add -D tailwindcss postcss autoprefixer
pnpm add tailwind-merge clsx
```

--------------------------------

### Install Development Tools for Code Quality

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Install ESLint, TypeScript ESLint plugins, Prettier, Husky, and lint-staged for maintaining code quality and consistency. These tools help automate linting and formatting checks.

```bash
# Linting
pnpm add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
pnpm add -D eslint-plugin-react-hooks

# Formatting
pnpm add -D prettier

# Git hooks
pnpm add -D husky lint-staged
```

--------------------------------

### TanStack Query Client Setup

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-query.md

Configure default options for queries and mutations, including stale times, garbage collection, retries, and error handling. This setup is crucial for consistent data fetching behavior across your application.

```typescript
// lib/query-client.ts
import { QueryClient } from '@tanstack/react-query'

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Stale time: data considered fresh for 5 minutes
      staleTime: 5 * 60 * 1000,
      // Garbage collection: unused data removed after 30 minutes  
      gcTime: 30 * 60 * 1000,
      // Retry failed requests 3 times with exponential backoff
      retry: 3,
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
      // Refetch on window focus for fresh data
      refetchOnWindowFocus: true,
      // Don't refetch on mount if data is fresh
      refetchOnMount: false,
    },
    mutations: {
      // Show error toast on mutation failure
      onError: (error) => {
        console.error('Mutation failed:', error)
        // toast.error(error.message)
      },
    },
  },
})
```

```typescript
// app/providers.tsx
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}
```

--------------------------------

### TanStack Start Root Route with Context

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-start.md

Sets up the root route with context, fetching the user's session before the application loads. This context is available throughout the application.

```typescript
// app/routes/__root.tsx
export const Route = createRootRouteWithContext<RouterContext>()({
  beforeLoad: async () => {
    const session = await getSession()
    return { auth: session }
  },
  component: RootLayout,
})
```

--------------------------------

### React DevTools Profiler Setup

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/debugging-guide.md

Set up the React DevTools Profiler by wrapping components with the Profiler component and defining a callback to log slow renders.

```typescript
import { Profiler } from 'react'

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number
) {
  if (actualDuration > 16) { // > 1 frame (60fps)
    console.warn(`Slow render: ${id} took ${actualDuration}ms`)
  }
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <Dashboard />
    </Profiler>
  )
}
```

--------------------------------

### Basic Form Setup with Zod Validation

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-form.md

Demonstrates the fundamental setup of a React form using TanStack Form, including default values, submission logic, and Zod validation integration. It shows how to render fields, handle input changes, and display validation errors.

```typescript
import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'

const userSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  age: z.number().min(18, 'Must be at least 18'),
})

type UserFormData = z.infer<typeof userSchema>

function UserForm() {
  const form = useForm({
    defaultValues: {
      name: '',
      email: '',
      age: 0,
    } satisfies UserFormData,
    onSubmit: async ({ value }) => {
      // Submit logic
      console.log(value)
    },
    validatorAdapter: zodValidator(),
  })

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }}
    >
      <form.Field
        name="name"
        validators={{
          onChange: z.string().min(2),
        }}
      >
        {(field) => (
          <div>
            <label htmlFor={field.name}>Name</label>
            <input
              id={field.name}
              value={field.state.value}
              onBlur={field.handleBlur}
              onChange={(e) => field.handleChange(e.target.value)}
            />
            {field.state.meta.errors.length > 0 && (
              <span className="error">{field.state.meta.errors[0]}</span>
            )}
          </div>
        )}
      </form.Field>

      <form.Field name="email">
        {(field) => (
          <div>
            <label htmlFor={field.name}>Email</label>
            <input
              id={field.name}
              type="email"
              value={field.state.value}
              onBlur={field.handleBlur}
              onChange={(e) => field.handleChange(e.target.value)}
            />
            <FieldError field={field} />
          </div>
        )}
      </form.Field>

      <form.Field name="age">
        {(field) => (
          <div>
            <label htmlFor={field.name}>Age</label>
            <input
              id={field.name}
              type="number"
              value={field.state.value}
              onBlur={field.handleBlur}
              onChange={(e) => field.handleChange(Number(e.target.value))}
            />
            <FieldError field={field} />
          </div>
        )}
      </form.Field>

      <form.Subscribe
        selector={(state) => [state.canSubmit, state.isSubmitting]}
      >
        {([canSubmit, isSubmitting]) => (
          <button type="submit" disabled={!canSubmit || isSubmitting}>
            {isSubmitting ? 'Submitting...' : 'Submit'}
          </button>
        )}
      </form.Subscribe>
    </form>
  )
}

// Reusable error component
function FieldError({ field }: { field: FieldApi<any, any, any, any> }) {
  return field.state.meta.isTouched && field.state.meta.errors.length > 0 ? (
    <span className="text-red-500 text-sm">
      {field.state.meta.errors[0]}
    </span>
  ) : null
}

```

--------------------------------

### Install Vitest for Unit Testing

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Add Vitest, @testing-library/react, @testing-library/jest-dom, and jsdom to your development dependencies for unit testing. Vitest offers a fast and modern testing experience.

```bash
pnpm add -D vitest @testing-library/react @testing-library/jest-dom jsdom
```

--------------------------------

### Install Vite Bundle Visualizer

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Add vite-bundle-visualizer to your development dependencies to analyze your Vite build output. This helps in identifying large dependencies and optimizing bundle size.

```bash
pnpm add -D vite-bundle-visualizer
```

--------------------------------

### Initialize SolidStart Project with TypeScript and TailwindCSS

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/SKILL.md

Use this command to create a new SolidStart project with the latest version, including TypeScript and TailwindCSS configurations. pnpm is recommended for package management.

```bash
npm create solid@latest my-app
# Select: SolidStart, TypeScript, TailwindCSS

# Or with pnpm (recommended)
pnpm create solid@latest my-app
```

--------------------------------

### Usage of Environment Variables in Server Functions

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-start.md

Import and use validated environment variables within TanStack Start server functions, for example, to determine the production status.

```typescript
// Usage in server functions
import { env } from './env'

export const getConfig = createServerFn('GET', async () => {
  return {
    isProduction: env.NODE_ENV === 'production',
  }
})
```

--------------------------------

### Initialize and Add Shadcn/ui Components

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Initializes Shadcn/ui in your project and adds specific components like Button, Input, and Card.

```bash
pnpm dlx shadcn-ui@latest init
pnpm dlx shadcn-ui@latest add button input card
```

--------------------------------

### TanStack Start Authentication Functions

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-start.md

Provides server functions for managing user sessions, including getting the current session, logging in a user with email and password, and logging out by deleting the session cookie.

```typescript
// app/server/auth.ts
import { createServerFn } from '@tanstack/start'
import { getCookie, setCookie, deleteCookie } from 'vinxi/http'
import { db } from './db'

export const getSession = createServerFn('GET', async () => {
  const sessionId = getCookie('session')
  if (!sessionId) return null
  
  const session = await db.session.findUnique({
    where: { id: sessionId },
    include: { user: true },
  })
  
  return session
})

export const login = createServerFn(
  'POST',
  async ({ email, password }: { email: string; password: string }) => {
    const user = await db.user.findUnique({ where: { email } })
    
    if (!user || !verifyPassword(password, user.passwordHash)) {
      throw new Error('Invalid credentials')
    }
    
    const session = await db.session.create({
      data: { userId: user.id },
    })
    
    setCookie('session', session.id, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'lax',
      maxAge: 60 * 60 * 24 * 7, // 7 days
    })
    
    return { user }
  }
)

export const logout = createServerFn('POST', async () => {
  const sessionId = getCookie('session')
  if (sessionId) {
    await db.session.delete({ where: { id: sessionId } })
    deleteCookie('session')
  }
  return { success: true }
})
```

--------------------------------

### Initialize Vanilla SolidJS Project (Client-only SPAs)

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/SKILL.md

Use this command to initialize a vanilla SolidJS project, suitable for client-only Single Page Applications (SPAs).

```bash
npx degit solidjs/templates/ts my-app
```

--------------------------------

### Define API Mock Handlers with MSW

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Set up request handlers for MSW to intercept specific API requests and return mock responses. This example shows mocking a GET request to '/api/users'.

```typescript
// mocks/handlers.ts
import {
  http,
  HttpResponse
} from 'msw'

export const handlers =
  [
    http.get('/api/users', () => {
      return HttpResponse.json([
        {
          id: '1',
          name: 'John'
        },
      ])
    }),
  ]

// mocks/server.ts (for tests)
import {
  setupServer
} from 'msw/node'
import {
  handlers
} from './handlers'

export const server =
  setupServer(...handlers)
```

--------------------------------

### Mocking API Responses for Query Tests

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-query.md

Mock API responses using `msw` (Mock Service Worker) within your tests to simulate different backend scenarios. This example shows how to mock a GET request for users.

```typescript
// UserList.test.tsx
import { screen, waitFor } from '@testing-library/react'
import { http, HttpResponse } from 'msw'
import { server } from '@/mocks/server'
import { renderWithQuery } from '@/test-utils'
import { UserList } from './UserList'

describe('UserList', () => {
  it('renders users', async () => {
    server.use(
      http.get('/api/users', () => {
        return HttpResponse.json([
          { id: '1', name: 'John' },
          { id: '2', name: 'Jane' },
        ])
      })
    )

    renderWithQuery(<UserList />)

    await waitFor(() => {
      expect(screen.getByText('John')).toBeInTheDocument()
      expect(screen.getByText('Jane')).toBeInTheDocument()
    })
  })
})
```

--------------------------------

### Test Setup File for Vitest

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/references/testing.md

Set up the testing environment for Vitest by importing necessary libraries like '@testing-library/jest-dom/vitest' and '@solidjs/testing-library'. Includes cleanup after each test and mocks for ResizeObserver, IntersectionObserver, and matchMedia.

```typescript
// src/test/setup.ts
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@solidjs/testing-library';
import { afterEach, vi } from 'vitest';

// Cleanup after each test
afterEach(() => {
  cleanup();
});

// Mock ResizeObserver
global.ResizeObserver = vi.fn().mockImplementation(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn(),
}));

// Mock IntersectionObserver
global.IntersectionObserver = vi.fn().mockImplementation(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn(),
}));

// Mock matchMedia
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});
```

--------------------------------

### Install Lucide React Icons

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs the Lucide React library for easily incorporating SVG icons into your React application.

```bash
pnpm add lucide-react
```

--------------------------------

### Implement File-Based Routing for Dynamic User Pages

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/SKILL.md

Utilize SolidStart's file-based routing to create dynamic routes for user profiles. Includes server-side data fetching with cache and preload for optimized loading.

```typescript
// routes/users/[id].tsx
import { useParams } from '@solidjs/router';
import { createAsync, cache } from '@solidjs/router';

const getUser = cache(async (id: string) => {
  'use server';
  return db.user.findUnique({ where: { id } });
}, 'user');

export const route = {
  preload: ({ params }) => getUser(params.id),
};

export default function UserPage() {
  const params = useParams<{ id: string }>();
  const user = createAsync(() => getUser(params.id));

  return (
    <Show when={user()} fallback={<Loading />}>
      {(u) => <UserProfile user={u()} />}
    </Show>
  );
}
```

--------------------------------

### Install Zod for Validation

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs Zod, a TypeScript-first schema declaration and validation library, essential for robust data validation.

```bash
pnpm add zod
```

--------------------------------

### Bundle Analysis Script in package.json

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/references/performance.md

Configure npm scripts in `package.json` to build your SolidStart application and analyze the bundle size using `source-map-explorer` and run Lighthouse audits.

```json
// package.json
{
  "scripts": {
    "build": "vinxi build",
    "build:analyze": "vinxi build && npx source-map-explorer dist/**/*.js",
    "build:stats": "vinxi build --mode production",
    "lighthouse": "lighthouse http://localhost:3000 --output html --output-path ./lighthouse-report.html"
  }
}
```

--------------------------------

### SolidJS Resource Creation and Usage

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/SKILL.md

Demonstrates creating and using SolidJS resources for managing asynchronous data. Includes basic resource creation, refetching on signal change, and SSR-friendly initial values. Usage within components requires Suspense and ErrorBoundary for robust handling.

```typescript
import { createResource, Suspense, ErrorBoundary } from 'solid-js';

// ✅ Basic resource
const [user] = createResource(() => fetchUser(userId()));

// ✅ With source signal (refetches on change)
const [userId, setUserId] = createSignal('1');
const [user, { mutate, refetch }] = createResource(userId, fetchUser);

// ✅ Resource with initial value (SSR-friendly)
const [posts] = createResource(
  () => fetchPosts(),
  { initialValue: [] }
);

// ✅ Usage in components
function UserProfile() {
  return (
    <ErrorBoundary fallback={(err) => <ErrorDisplay error={err} />}>
      <Suspense fallback={<Skeleton />}>
        <Show when={user()} fallback={<NotFound />}>
          {(u) => <UserCard user={u()} />}
        </Show>
      </Suspense>
    </ErrorBoundary>
  );
}
```

--------------------------------

### Node.js Build and Run Commands

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/tanstack-start.md

Commands to build the application and run the Node.js server using pnpm.

```bash
pnpm build
node .output/server/index.mjs
```

--------------------------------

### Install React Hook Form and Zod Resolver

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Installs React Hook Form for form management and the Zod resolver for integrating Zod schemas with React Hook Form.

```bash
pnpm add react-hook-form @hookform/resolvers zod
```

--------------------------------

### Avoid Accessing Signals During Setup (SolidJS)

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/references/patterns.md

Accessing signals directly during component setup outside a reactive context can lead to stale data. Use reactive accessors for `createResource`.

```typescript
// ❌ BAD: Signal accessed outside reactive context
function BadComponent(props: { userId: string }) {
  const userId = props.userId; // Not reactive!
  const [user] = createResource(() => fetchUser(userId));
  // ...
}

// ✅ GOOD: Access in reactive context
function GoodComponent(props: { userId: string }) {
  const [user] = createResource(
    () => props.userId, // Reactive accessor
    fetchUser
  );
  // ...
}
```

--------------------------------

### Configure Vitest for Unit Testing

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/react-tanstack-mastery-skill/references/recommended-libraries.md

Configure Vitest by specifying the test environment as 'jsdom', including setup files, and enabling global test functions. Ensure '@testing-library/jest-dom' is imported in setup.

```typescript
// vitest.config.ts
import {
  defineConfig
} from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./test/setup.ts'],
    globals: true,
  },
})

// test/setup.ts
import '@testing-library/jest-dom'
```

--------------------------------

### Create API Routes for User Data Management

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/SKILL.md

Define API routes in SolidStart for handling HTTP requests like GET to retrieve users and POST to create new users. Includes request parsing and JSON responses.

```typescript
// routes/api/users.ts
import { json } from '@solidjs/router';
import type { APIEvent } from '@solidjs/start/server';

export async function GET(event: APIEvent) {
  const users = await db.user.findMany();
  return json(users);
}

export async function POST(event: APIEvent) {
  const body = await event.request.json();
  const parsed = userSchema.safeParse(body);
  if (!parsed.success) {
    return json({ error: parsed.error.flatten() }, { status: 400 });
  }
  const user = await db.user.create({ data: parsed.data });
  return json(user, { status: 201 });
}
```

--------------------------------

### API Route Validation (GET and POST)

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/references/security.md

Demonstrates how to validate incoming API requests using Zod schemas for both GET (pagination) and POST (user creation) routes. Includes error handling for validation failures.

```APIDOC
## GET /api/users

### Description
Retrieves a paginated list of users with optional sorting and search functionality.

### Method
GET

### Endpoint
/api/users

### Query Parameters
- **page** (number) - Required - The page number for pagination.
- **limit** (number) - Required - The number of items per page.
- **sort** (string) - Optional - The field to sort by (e.g., 'createdAt').
- **search** (string) - Optional - The search term to filter users by name or email.

### Response
#### Success Response (200)
- An array of user objects.

#### Error Response (400)
- {"error": {"formErrors": ["string"], "fieldErrors": {"string": ["string"]}}}

## POST /api/users

### Description
Creates a new user after validating the request body and checking for existing email.

### Method
POST

### Endpoint
/api/users

### Request Body
- **email** (string) - Required - The user's email address.
- **password** (string) - Required - The user's password.
- **name** (string) - Required - The user's name.

### Request Example
{
  "email": "test@example.com",
  "password": "securepassword123",
  "name": "Test User"
}

### Response
#### Success Response (201)
- {"id": "string", "email": "string", "name": "string"}

#### Error Response (400)
- {"error": "Validation failed", "details": {"formErrors": ["string"], "fieldErrors": {"string": ["string"]}}}

#### Error Response (409)
- {"error": "Email already registered"}
```

--------------------------------

### Async Signal Usage Example

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/references/patterns.md

Demonstrates using the createAsyncSignal hook to load user data. Handles loading, error, and data states using SolidJS's Switch and Match components.

```typescript
// Usage
function UserProfile() {
  const [userState, { execute: loadUser }] = createAsyncSignal(
    () => api.getUser(userId),
    { immediate: true }
  );

  return (
    <Switch>
      <Match when={userState().loading}>
        <Spinner />
      </Match>
      <Match when={userState().error}>
        <Error error={userState().error!} onRetry={loadUser} />
      </Match>
      <Match when={userState().data}>
        <UserCard user={userState().data!} />
      </Match>
    </Switch>
  );
}
```

--------------------------------

### Solid Testing Library: Test Utilities and Providers

Source: https://github.com/modra40/claude-codex-skills-directory/blob/main/frontend-skills/solidjs-solidstart-mastery-skill/references/testing.md

Helper functions for setting up Solid components in tests. Includes a query client provider and a wrapper for routing and query client integration.

```typescript
// src/test/utils.tsx
import { render, RenderOptions } from '@solidjs/testing-library';
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
import { Router } from '@solidjs/router';
import { ParentComponent, JSX } from 'solid-js';

interface ProvidersProps {
  queryClient?: QueryClient;
}

export function createTestQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
        gcTime: 0,
      },
    },
  });
}

export function createWrapper(options: ProvidersProps = {}): ParentComponent {
  const queryClient = options.queryClient ?? createTestQueryClient();

  return (props) => (
    <QueryClientProvider client={queryClient}>
      <Router>
        {props.children}
      </Router>
    </QueryClientProvider>
  );
}

export function renderWithProviders(
  ui: () => JSX.Element,
  options?: Omit<RenderOptions, 'wrapper'> & ProvidersProps
) {
  const { queryClient, ...renderOptions } = options ?? {};
  
  return render(ui, {
    wrapper: createWrapper({ queryClient }),
    ...renderOptions,
  });
}

// Mock factories
export function createMockUser(overrides = {}) {
  return {
    id: '1',
    name: 'Test User',
    email: 'test@example.com',
    createdAt: new Date().toISOString(),
    ...overrides,
  };
}

export function createMockTodo(overrides = {}) {
  return {
    id: crypto.randomUUID(),
    text: 'Test todo',
    completed: false,
    createdAt: new Date().toISOString(),
    ...overrides,
  };
}

```