npm - @dennisrongo/skills - Versions diffs - 0.1.0 - Mend

@dennisrongo/skills 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/LICENSE +21 -0
package/README.md +230 -0
package/bin/claude-skills.js +189 -0
package/lib/install.js +111 -0
package/lib/list.js +63 -0
package/lib/paths.js +39 -0
package/lib/remove.js +52 -0
package/lib/skills.js +121 -0
package/package.json +48 -0
package/skills/_template/SKILL.md +34 -0
package/skills/conventional-commits/SKILL.md +136 -0
package/skills/diagnose/SKILL.md +140 -0
package/skills/dotnet-onion-api/SKILL.md +267 -0
package/skills/dotnet-onion-api/references/anti-patterns.md +155 -0
package/skills/dotnet-onion-api/references/solution-layout.md +113 -0
package/skills/dotnet-onion-api/references/templates/appsettings.md +75 -0
package/skills/dotnet-onion-api/references/templates/base-controller.cs.md +90 -0
package/skills/dotnet-onion-api/references/templates/csproj-files.md +178 -0
package/skills/dotnet-onion-api/references/templates/dbcontext.cs.md +149 -0
package/skills/dotnet-onion-api/references/templates/exception-middleware.cs.md +101 -0
package/skills/dotnet-onion-api/references/templates/feature-slice.md +349 -0
package/skills/dotnet-onion-api/references/templates/program-cs.md +171 -0
package/skills/dotnet-onion-api/references/templates/worker-program.cs.md +166 -0
package/skills/grill-with-docs/SKILL.md +203 -0
package/skills/handoff/SKILL.md +155 -0
package/skills/improve-codebase-architecture/DEEPENING.md +37 -0
package/skills/improve-codebase-architecture/INTERFACE-DESIGN.md +44 -0
package/skills/improve-codebase-architecture/LANGUAGE.md +53 -0
package/skills/improve-codebase-architecture/SKILL.md +121 -0
package/skills/nextjs-app-router/SKILL.md +328 -0
package/skills/nextjs-app-router/references/anti-patterns.md +203 -0
package/skills/nextjs-app-router/references/folder-layout.md +151 -0
package/skills/nextjs-app-router/references/good-patterns.md +212 -0
package/skills/nextjs-app-router/references/templates/api-base.md +62 -0
package/skills/nextjs-app-router/references/templates/api-slice.md +75 -0
package/skills/nextjs-app-router/references/templates/auth-slice.md +95 -0
package/skills/nextjs-app-router/references/templates/ci-and-hooks.md +94 -0
package/skills/nextjs-app-router/references/templates/components-json.md +41 -0
package/skills/nextjs-app-router/references/templates/env-and-utils.md +110 -0
package/skills/nextjs-app-router/references/templates/eslint-prettier.md +82 -0
package/skills/nextjs-app-router/references/templates/feature-slice.md +184 -0
package/skills/nextjs-app-router/references/templates/form-with-zod.md +192 -0
package/skills/nextjs-app-router/references/templates/middleware.md +88 -0
package/skills/nextjs-app-router/references/templates/next-config.md +42 -0
package/skills/nextjs-app-router/references/templates/package.md +99 -0
package/skills/nextjs-app-router/references/templates/providers-and-store.md +79 -0
package/skills/nextjs-app-router/references/templates/root-layout.md +146 -0
package/skills/nextjs-app-router/references/templates/route-group-layouts.md +90 -0
package/skills/nextjs-app-router/references/templates/tailwind-config.md +89 -0
package/skills/nextjs-app-router/references/templates/testing.md +137 -0
package/skills/nextjs-app-router/references/templates/tsconfig.md +40 -0
package/skills/plan-and-build/SKILL.md +214 -0
package/skills/pr-review/SKILL.md +132 -0
package/skills/write-a-skill/SKILL.md +191 -0

package/skills/nextjs-app-router/references/folder-layout.md ADDED Viewed

@@ -0,0 +1,151 @@
+# Canonical Folder Layout
+This is the source-of-truth tree for a new project. Every file/folder listed here exists in a scaffolded project unless the user opted out. The skill must not reorganize this layout when adding features.
+```
+{{project-name}}/
+├── .env.example                      # committed; documents required env vars
+├── .eslintrc.json                    # or eslint.config.mjs — strict TS + a11y + hooks
+├── .gitignore
+├── .husky/
+│   └── pre-commit                    # runs lint-staged
+├── .prettierrc
+├── README.md
+├── components.json                   # shadcn config; rsc: true, tsx: true
+├── middleware.ts                     # AUTH GUARD. Wired via Next.js convention.
+├── next.config.ts
+├── next-env.d.ts                     # generated; do not edit
+├── package.json                      # scripts: dev, build, start, lint, typecheck, test, test:e2e
+├── playwright.config.ts
+├── postcss.config.js
+├── tailwind.config.ts
+├── tsconfig.json                     # strict + @/* alias
+├── vitest.config.ts
+│
+├── .github/
+│   └── workflows/
+│       └── ci.yml                    # install → lint → typecheck → test → build
+│
+├── public/                           # static assets only (favicons, robots.txt, og images)
+│   └── favicon.ico
+│
+├── src/
+│   ├── app/
+│   │   ├── layout.tsx                # SERVER. <html><body><Providers>{children}
+│   │   ├── page.tsx                  # SERVER. redirect('/dashboard') or render landing.
+│   │   ├── error.tsx                 # global error boundary
+│   │   ├── not-found.tsx
+│   │   ├── globals.css
+│   │   ├── favicon.ico               # (optional duplicate of public/)
+│   │   │
+│   │   ├── (public)/                 # unauthenticated routes
+│   │   │   ├── layout.tsx            # SERVER. minimal chrome (centered card).
+│   │   │   └── auth/
+│   │   │       ├── login/
+│   │   │       │   ├── page.tsx
+│   │   │       │   └── _components/LoginForm.tsx   # 'use client'
+│   │   │       ├── signup/
+│   │   │       └── forgot-password/
+│   │   │
+│   │   ├── (app)/                    # authenticated routes
+│   │   │   ├── layout.tsx            # SERVER. reads session, renders shell.
+│   │   │   ├── loading.tsx
+│   │   │   ├── error.tsx
+│   │   │   ├── _components/
+│   │   │   │   ├── AppShell.tsx      # 'use client'; Sidebar + Header
+│   │   │   │   └── Sidebar.tsx
+│   │   │   ├── _hooks/
+│   │   │   │   └── useSessionExpiryWarning.ts
+│   │   │   ├── dashboard/
+│   │   │   │   ├── page.tsx
+│   │   │   │   ├── loading.tsx
+│   │   │   │   └── _components/
+│   │   │   └── <feature>/
+│   │   │       ├── page.tsx
+│   │   │       ├── loading.tsx
+│   │   │       ├── schema.ts
+│   │   │       ├── _components/
+│   │   │       └── _hooks/
+│   │   │
+│   │   └── (admin)/                  # OPTIONAL: role-gated. middleware enforces role.
+│   │       └── layout.tsx
+│   │
+│   ├── components/
+│   │   ├── ui/                       # shadcn primitives. OWNED by the project.
+│   │   │   ├── button.tsx
+│   │   │   ├── input.tsx
+│   │   │   ├── label.tsx
+│   │   │   ├── form.tsx
+│   │   │   ├── dialog.tsx
+│   │   │   ├── toast.tsx
+│   │   │   ├── toaster.tsx
+│   │   │   └── use-toast.ts
+│   │   ├── forms/                    # composed form fields built on ui/form.tsx
+│   │   │   ├── FormInputField.tsx
+│   │   │   ├── FormPasswordField.tsx
+│   │   │   ├── FormSelectField.tsx
+│   │   │   ├── FormDatePickerField.tsx
+│   │   │   └── FormTextareaField.tsx
+│   │   ├── Notifications.tsx         # toast-driven notification surface
+│   │   ├── UnsavedChangesWarning.tsx # in-app + beforeunload guard
+│   │   └── AlertMessage.tsx
+│   │
+│   ├── redux/
+│   │   ├── store.ts                  # typed; combined reducer; logout resets state.
+│   │   ├── providers.tsx             # 'use client'; <Provider> + <Toaster> + <ProgressBar>
+│   │   ├── hooks.ts                  # typed useAppDispatch, useAppSelector
+│   │   ├── api/
+│   │   │   ├── api.ts                # base createApi + auth-aware baseQuery
+│   │   │   ├── tags.ts               # tag-type union
+│   │   │   ├── authApi.ts            # injectEndpoints
+│   │   │   └── <domain>Api.ts
+│   │   └── features/
+│   │       ├── authSlice.ts
+│   │       └── <other>Slice.ts       # only for shared async/global state
+│   │
+│   ├── lib/
+│   │   ├── utils.ts                  # cn() — clsx + tailwind-merge
+│   │   ├── zod-utils.ts              # getDefaultValuesFromSchema, unwrapZodEffects, getMaxLengthsFromSchema
+│   │   ├── formatters/
+│   │   │   ├── date.ts               # date-fns wrappers ONLY. No moment.
+│   │   │   └── currency.ts
+│   │   └── hooks/
+│   │       └── useDebouncedValue.ts
+│   │
+│   ├── config/
+│   │   └── env.ts                    # Zod-parsed runtime env. Fail fast at startup.
+│   │
+│   └── types/                        # cross-cutting TS types only.
+│       └── api.ts                    # shared API envelope types if any
+│
+└── tests/
+    ├── unit/
+    │   ├── auth.slice.test.ts
+    │   ├── login-form.test.tsx
+    │   └── zod-utils.test.ts
+    ├── e2e/
+    │   └── auth.spec.ts
+    └── setup.ts                      # @testing-library/jest-dom, vi globals
+```
+## Rules that govern the layout
+1. **Server-by-default in `app/`.** A file gets `'use client'` only if it itself uses a client API. A page can be a server component that renders a `'use client'` child from `_components/`.
+2. **`_components/` and `_hooks/` are private.** Anything inside `_<name>/` may only be imported by files in the same route folder or its descendants. If two routes need the same component, lift it to `src/components/`.
+3. **One RTK Query base; many injected slices.** `redux/api/api.ts` is the only file that calls `createApi(...)`. All other `*Api.ts` files import that `api` and call `api.injectEndpoints(...)`. Multiple `createApi` instances are forbidden — they fragment the cache and complicate invalidation.
+4. **Domain models live with their feature.** A `Customer` type used only by `(app)/customers/` lives in `(app)/customers/types.ts` or is inferred from the Zod schema. Only cross-cutting types belong in `src/types/`. Avoid a global `src/models/` dumping ground.
+5. **`middleware.ts` is the only auth gate at the network boundary.** No `src/proxy.ts` or `src/middleware/*.ts` standing in for it. Client guards exist only to handle session expiry during an active session.
+6. **`tests/` mirrors `src/` loosely, not strictly.** Tests are organized by what they test, not by 1:1 directory parity.
+7. **`public/` holds only static assets.** No code. Image components import from there via the standard `next/image` workflow.
+8. **No duplicate-by-case paths.** Linux CI will break what works on Windows/macOS. The linter cannot catch this; the scaffolder must.
+9. **Feature schemas are local.** `(app)/<feature>/schema.ts` exports Zod schemas owned by that feature. They are not re-exported from `src/lib/`.
+10. **`components/ui/` is owned, not imported.** shadcn-style primitives are generated *into* the project and modified as needed. They are not a node_modules dependency.

package/skills/nextjs-app-router/references/good-patterns.md ADDED Viewed

@@ -0,0 +1,212 @@
+# Good Patterns to Keep
+These are the patterns the scaffolder must emit by default. Each one is here because it solves a recurring problem in real-world Next.js + Redux + Tailwind projects.
+## 1. Route groups for auth and role boundaries
+`app/(public)/`, `app/(app)/`, `app/(admin)/` carve the route tree by who is allowed in. Each group has its own `layout.tsx`, so the chrome (or lack of it) for unauthenticated pages doesn't bleed into authenticated pages. Groups don't appear in URLs — they're purely an organizational tool.
+**Why it works:** auth boundaries become a property of the file system, not a runtime check sprinkled into every page. The `middleware.ts` `config.matcher` mirrors the group structure and gates on the server.
+## 2. Server-by-default with `'use client'` islands
+`app/layout.tsx`, `app/page.tsx`, every group `layout.tsx`, and every feature `page.tsx` is a server component. The interactive parts — forms, table state, sidebars with toggles — are extracted into `_components/Something.tsx` files marked `'use client'` and imported from the server page.
+**Why it works:** SSR for free, streaming, smaller client JS, `metadata` exports work, server-only data sources (cookies, DB calls) are reachable from the page.
+## 3. Server `redirect()` and middleware-driven navigation
+Top-level redirects (e.g. `/` → `/dashboard`) are server calls inside a server `page.tsx`. Auth-conditional redirects live in `middleware.ts`. The client `useRouter().push()` is reserved for in-app navigation triggered by user actions (button clicks, form submissions).
+## 4. One RTK Query base, many injected slices
+```ts
+// redux/api/api.ts
+export const api = createApi({
+  reducerPath: 'api',
+  baseQuery: authAwareBaseQuery,
+  tagTypes: TAG_TYPES,
+  endpoints: () => ({}),
+});
+// redux/api/customersApi.ts
+export const customersApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getCustomers: build.query<Customer[], void>({
+      query: () => '/customers',
+      providesTags: [{ type: 'Customers', id: 'LIST' }],
+    }),
+    createCustomer: build.mutation<Customer, NewCustomer>({
+      query: (body) => ({ url: '/customers', method: 'POST', body }),
+      invalidatesTags: [{ type: 'Customers', id: 'LIST' }],
+    }),
+  }),
+});
+```
+**Why it works:** one cache, one middleware, one set of tag types. Cross-domain invalidation just works (a mutation in `invoicesApi` can invalidate `Customers` tags). The base file stays small; domain logic lives next to the domain.
+## 5. Auth-aware `baseQuery` with clean 401 handling
+`baseQuery` injects the session into requests (via cookies for `httpOnly` flows, or via a `prepareHeaders` callback that reads from state for bearer flows). On a 401, it dispatches a typed logout action that the root reducer uses to reset state, then signals the router (not `window.location`) to navigate to `/auth/login`.
+**Why it works:** no hard reloads, no race conditions when multiple in-flight requests 401, and the redirect target stays consistent with whatever `middleware.ts` would have done.
+## 6. State-reset on logout via wrapped root reducer
+```ts
+const combinedReducer = combineReducers({ ... });
+export const store = configureStore({
+  reducer: (state, action) => {
+    if (authApi.endpoints.logout.matchFulfilled(action)) {
+      return combinedReducer(undefined, action);
+    }
+    return combinedReducer(state, action);
+  },
+  // ...
+});
+```
+**Why it works:** logout wipes every slice (including RTK Query cache) in one place. No per-slice `extraReducers` listening for the logout action. Fully typed — no `@ts-ignore`.
+## 7. Typed Redux hooks
+`redux/hooks.ts` exports `useAppDispatch` and `useAppSelector` typed against `RootState` and `AppDispatch`. Components never import the raw `useDispatch` / `useSelector` from `react-redux`.
+## 8. React Hook Form + Zod with schema-introspected defaults
+```ts
+const schema = z.object({ name: z.string().min(1), age: z.number().min(0) });
+const form = useForm<z.infer<typeof schema>>({
+  resolver: zodResolver(schema),
+  defaultValues: getDefaultValuesFromSchema(unwrapZodEffects(schema)),
+});
+```
+`getDefaultValuesFromSchema` walks the Zod tree and produces a defaults object that matches the schema shape (empty string for `z.string()`, `null` for nullable, `0` for numeric, etc.). `unwrapZodEffects` peels `.refine()` / `.transform()` wrappers so the introspection works.
+`getMaxLengthsFromSchema` reads `z.string().max(N)` and feeds the `maxLength` attribute to the rendered `<Input>`.
+**Why it works:** the schema is the single source of truth for both validation and field configuration. No drift between "what the form accepts" and "what the API will accept."
+## 9. Composed form fields built on shadcn `<Form>`
+`components/forms/FormInputField.tsx` and siblings take `form`, `schema`, `fieldName`, `formLabel` props and render a fully wired `<FormField>`, `<FormItem>`, `<FormLabel>`, `<FormControl>`, `<FormMessage>` block. Every form in the app reuses these.
+**Why it works:** form layout/spacing/error display is consistent across the app, and changes to the shared field components propagate everywhere. New forms are mostly schema + a list of fields.
+## 10. `UnsavedChangesWarning` tied to RHF `formState.isDirty`
+A small component that hooks into in-app navigation (Next router events) and `window.beforeunload` to warn when a form has unsaved changes. Used inside every non-trivial form.
+## 11. `error.tsx`, `loading.tsx`, `not-found.tsx` at meaningful segments
+At minimum: global ones at `app/`, group-level ones at `(app)/`, and feature-level `loading.tsx` for any feature that fetches data via Suspense.
+## 12. Runtime env validation
+```ts
+// src/config/env.ts
+import { z } from 'zod';
+const envSchema = z.object({
+  NEXT_PUBLIC_API_BASE_URL: z.string().url(),
+  NEXT_PUBLIC_PUSHER_KEY: z.string().optional(),
+});
+export const env = envSchema.parse({
+  NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
+  NEXT_PUBLIC_PUSHER_KEY: process.env.NEXT_PUBLIC_PUSHER_KEY,
+});
+```
+**Why it works:** misconfiguration crashes the app at startup with a clear error, not deep inside a request handler with a cryptic `undefined` later.
+## 13. shadcn primitives owned by the project
+`components/ui/button.tsx`, `input.tsx`, `form.tsx`, etc. live in the repo and are editable. They are not pulled from `node_modules`. When the design system evolves, you edit these files; you don't fork a library.
+## 14. `cn()` in `lib/utils.ts`
+```ts
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
+```
+Single source of class merging across the app.
+## 15. Per-feature `_components/` and `_hooks/`
+Co-locate the implementation details with the route. When a feature is deleted, the entire folder goes with it; no orphaned files in a shared directory. Promote to `src/components/` only when a second feature genuinely needs the same code.
+## 16. One date library: `date-fns`
+Tree-shakeable, immutable, ESM-friendly. Format helpers live in `lib/formatters/date.ts` so the rest of the codebase doesn't import `date-fns` directly — the wrapper makes it easy to change the underlying library later.
+## 17. Strict TypeScript
+`tsconfig.json` with `"strict": true`, `"noUncheckedIndexedAccess": true`, `"forceConsistentCasingInFileNames": true`. The last one catches the duplicate-by-case folder bug at compile time, which is the only place to catch it before Linux production.
+## 18. Strict ESLint
+`@typescript-eslint/recommended`, `plugin:react-hooks/recommended`, `plugin:jsx-a11y/recommended`, plus `no-console: warn`, `no-explicit-any: error`, `exhaustive-deps: error`. Pre-commit hook runs `eslint --fix` so the rules actually get enforced.
+## 19. `middleware.ts` as the auth gate
+```ts
+// middleware.ts
+import { NextResponse, type NextRequest } from 'next/server';
+export function middleware(req: NextRequest) {
+  const session = req.cookies.get('session')?.value;
+  if (!session && req.nextUrl.pathname.startsWith('/app')) {
+    const url = req.nextUrl.clone();
+    url.pathname = '/auth/login';
+    url.searchParams.set('returnTo', req.nextUrl.pathname);
+    return NextResponse.redirect(url);
+  }
+  return NextResponse.next();
+}
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico|api/public).*)'],
+};
+```
+(The matcher syntax here is illustrative — the scaffolder picks one that mirrors the project's actual route groups.)
+## 20. Vitest + RTL for unit, Playwright for E2E
+A new project gets at least:
+- One reducer/slice test (catches accidental shape changes).
+- One form-renders-and-submits test (catches RHF/zod wiring regressions).
+- One Playwright spec that boots the app, logs in, and asserts the dashboard renders (catches middleware and provider regressions).
+Three tests is enough to make CI meaningful.
+## 21. Husky + lint-staged
+```jsonc
+// package.json
+"lint-staged": {
+  "*.{ts,tsx}": ["prettier --write", "eslint --fix"],
+  "*.{json,md,css}": ["prettier --write"]
+}
+```
+Pre-commit hook keeps formatting and lint clean without anyone having to remember.
+## 22. GitHub Actions CI
+A single `ci.yml` that runs install → lint → typecheck → test → build on every PR. Build catches RSC/server-component boundary errors that `tsc --noEmit` misses.
+## 23. `next-nprogress-bar` for top loading bar
+One small, well-maintained library that hooks into Next.js's router events. Configured once in `providers.tsx`.
+## 24. Toaster via shadcn `use-toast` (or `react-toastify`, not both)
+Pick one toast library and wrap it. Composed `Notifications.tsx` is what features call; the underlying library can change without touching feature code.

package/skills/nextjs-app-router/references/templates/api-base.md ADDED Viewed

@@ -0,0 +1,62 @@
+# Base RTK Query API and tag-types
+## `src/redux/api/tags.ts`
+```ts
+// Single source of truth for cache tags. Every domain adds to this union.
+export const TAG_TYPES = [
+  'Auth',
+  // Add domain tags here as features are added, e.g. 'Customers', 'Customer', 'Invoices', 'Invoice'.
+] as const;
+export type TagType = (typeof TAG_TYPES)[number];
+```
+## `src/redux/api/api.ts`
+```ts
+import { createApi, fetchBaseQuery, type BaseQueryFn, type FetchArgs, type FetchBaseQueryError } from '@reduxjs/toolkit/query/react';
+import { env } from '@/config/env';
+import { TAG_TYPES } from './tags';
+import { logout } from '@/redux/features/authSlice';
+const rawBaseQuery = fetchBaseQuery({
+  baseUrl: env.NEXT_PUBLIC_API_BASE_URL,
+  // For httpOnly cookie auth, this is mandatory. Drop it only for bearer-token-only flows.
+  credentials: 'include',
+  prepareHeaders: (headers, { getState }) => {
+    // If the project uses a JS-readable bearer token, attach it here.
+    // For httpOnly cookie flows, leave this empty — the browser sends the cookie.
+    const token = (getState() as { auth?: { token?: string } }).auth?.token;
+    if (token) headers.set('Authorization', `Bearer ${token}`);
+    return headers;
+  },
+});
+export const baseQueryWithAuth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
+  args,
+  api,
+  extraOptions,
+) => {
+  const result = await rawBaseQuery(args, api, extraOptions);
+  if (result.error?.status === 401) {
+    // Clean logout: dispatch action → root reducer resets state → middleware/router handles redirect.
+    api.dispatch(logout());
+  }
+  return result;
+};
+export const api = createApi({
+  reducerPath: 'api',
+  baseQuery: baseQueryWithAuth,
+  tagTypes: TAG_TYPES,
+  endpoints: () => ({}),
+});
+```
+**Notes:**
+- `createApi` is called **once** in this file. Every other `*Api.ts` file uses `api.injectEndpoints(...)`.
+- The 401 handler dispatches a plain action; it does **not** call `window.location.href = '...'`. Navigation is handled by middleware on the next request or by an in-app guard listening to the auth state.
+- `tagTypes` reads from the shared `TAG_TYPES` constant — domains add to that one array, not here.

package/skills/nextjs-app-router/references/templates/api-slice.md ADDED Viewed

@@ -0,0 +1,75 @@
+# Domain API slice template (injected endpoints)
+One file per domain. Imports the shared `api` and calls `api.injectEndpoints(...)`. Never calls `createApi`.
+## Example: `src/redux/api/customersApi.ts`
+```ts
+import { api } from './api';
+export interface Customer {
+  id: string;
+  name: string;
+  email: string;
+  createdAt: string;
+}
+export type NewCustomer = Omit<Customer, 'id' | 'createdAt'>;
+export type UpdateCustomer = Partial<NewCustomer>;
+export const customersApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getCustomers: build.query<Customer[], void>({
+      query: () => '/customers',
+      providesTags: (result) =>
+        result
+          ? [
+              ...result.map(({ id }) => ({ type: 'Customer' as const, id })),
+              { type: 'Customers' as const, id: 'LIST' },
+            ]
+          : [{ type: 'Customers' as const, id: 'LIST' }],
+    }),
+    getCustomer: build.query<Customer, string>({
+      query: (id) => `/customers/${id}`,
+      providesTags: (_result, _err, id) => [{ type: 'Customer', id }],
+    }),
+    createCustomer: build.mutation<Customer, NewCustomer>({
+      query: (body) => ({ url: '/customers', method: 'POST', body }),
+      invalidatesTags: [{ type: 'Customers', id: 'LIST' }],
+    }),
+    updateCustomer: build.mutation<Customer, { id: string; patch: UpdateCustomer }>({
+      query: ({ id, patch }) => ({ url: `/customers/${id}`, method: 'PATCH', body: patch }),
+      invalidatesTags: (_result, _err, { id }) => [
+        { type: 'Customer', id },
+        { type: 'Customers', id: 'LIST' },
+      ],
+    }),
+    deleteCustomer: build.mutation<void, string>({
+      query: (id) => ({ url: `/customers/${id}`, method: 'DELETE' }),
+      invalidatesTags: (_result, _err, id) => [
+        { type: 'Customer', id },
+        { type: 'Customers', id: 'LIST' },
+      ],
+    }),
+  }),
+});
+export const {
+  useGetCustomersQuery,
+  useGetCustomerQuery,
+  useCreateCustomerMutation,
+  useUpdateCustomerMutation,
+  useDeleteCustomerMutation,
+} = customersApi;
+```
+**Don't forget:** add `'Customer'` and `'Customers'` to `TAG_TYPES` in `src/redux/api/tags.ts`. TypeScript will error on the `providesTags` / `invalidatesTags` lines until you do.
+**Forbidden:**
+- `createApi(...)` in this file — only the base does that.
+- `any` in the generic slots (`build.query<any, any>`). Type both sides.
+- `transformResponse` that does data mangling that should be the backend's job. Use it only when the contract truly demands it (renaming a field that the backend can't change, unwrapping a `{ data: ... }` envelope, etc.).

package/skills/nextjs-app-router/references/templates/auth-slice.md ADDED Viewed

@@ -0,0 +1,95 @@
+# Auth slice and auth API template
+## `src/redux/features/authSlice.ts`
+```ts
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import { authApi } from '@/redux/api/authApi';
+export interface AuthUser {
+  id: string;
+  email: string;
+  name: string;
+  roles: string[];
+}
+interface AuthState {
+  user: AuthUser | null;
+  token: string | null; // only populated for bearer-flow projects; null for httpOnly-cookie flows
+  expiresAt: number | null;
+}
+const initialState: AuthState = {
+  user: null,
+  token: null,
+  expiresAt: null,
+};
+export const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    logout: () => initialState,
+    setUser: (state, action: PayloadAction<AuthUser>) => {
+      state.user = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addMatcher(authApi.endpoints.login.matchFulfilled, (state, { payload }) => {
+      state.user = payload.user;
+      state.token = payload.token ?? null;
+      state.expiresAt = payload.expiresAt ?? null;
+    });
+    builder.addMatcher(authApi.endpoints.getMe.matchFulfilled, (state, { payload }) => {
+      state.user = payload;
+    });
+  },
+});
+export const { logout, setUser } = authSlice.actions;
+```
+**Note:** the store's `rootReducer` already wipes the entire store on `authApi.endpoints.logout.matchFulfilled` — so a `logout()` action dispatched here from the 401 handler still triggers a full state reset via the wrapped reducer in `store.ts`. The slice's own `logout` reducer is there for cases where the user explicitly clicks "Sign out" without hitting the logout endpoint.
+## `src/redux/api/authApi.ts`
+```ts
+import { api } from './api';
+import type { AuthUser } from '@/redux/features/authSlice';
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+export interface LoginResponse {
+  user: AuthUser;
+  /** Populated only for bearer-token flows. httpOnly-cookie flows leave this undefined. */
+  token?: string;
+  expiresAt?: number;
+}
+export const authApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    login: build.mutation<LoginResponse, LoginRequest>({
+      query: (body) => ({ url: '/auth/login', method: 'POST', body }),
+      invalidatesTags: ['Auth'],
+    }),
+    logout: build.mutation<void, void>({
+      query: () => ({ url: '/auth/logout', method: 'POST' }),
+      invalidatesTags: ['Auth'],
+    }),
+    getMe: build.query<AuthUser, void>({
+      query: () => '/auth/me',
+      providesTags: ['Auth'],
+    }),
+  }),
+});
+export const { useLoginMutation, useLogoutMutation, useGetMeQuery } = authApi;
+```
+**Forbidden:**
+- Storing the token via `js-cookie` inside the slice (`Cookies.set('token', ...)`). For `httpOnly` flows, the backend sets the cookie; for bearer flows, the token lives in Redux state and the `prepareHeaders` callback attaches it. Never both.
+- Base64-encoding the user and writing it to a cookie (`Cookies.set('user', btoa(JSON.stringify(...)))`). It's not encryption, it's obfuscation. If the server needs the user, the server reads it from the session cookie / database.
+- Decoding the JWT on the client to drive auth decisions. Decode only for non-sensitive display (e.g. showing the user's name pulled from a claim) — never as the gate. The gate is the server.