@3lineas/grooveskills 1.7.2 → 1.8.0

package/skills/react-core/SKILL.md

@@ -11,158 +11,91 @@ Canonical reference for React fundamentals in GrooveSkills projects: function co
 
 ## 1. Golden Rules (Non-negotiable)
 
-1. **One Component per File & < 200 Lines**:
+1. **Strictly Prohibited: `React.FC` and `React.FunctionComponent`**:
+   - In modern React (React 18 / 19), **NEVER** type components with `React.FC` or `React.FunctionComponent`.
+   - Declare standard functions and type `props` directly in the parameter list.
+   - For components requiring children, type `children: ReactNode` explicitly in the props interface.
+
+2. **One Component per File & < 200 Lines**:
    - Every exported React component resides in its own dedicated `.tsx` file and never exceeds **200 lines**.
    - Extract sub-components or custom hooks (`use-*.ts`) into atomic files before reaching the limit.
-2. **Mandatory Path Aliases (`@/...`) & Zero Barrel Files**:
+
+3. **Domain Custom Hooks for Form Encapsulation**:
+   - Form components must encapsulate their own state using domain hooks (e.g. `useLoginForm`, `useRegisterForm`) instead of bubbling raw `form` and `onSubmit` props up to higher-level screen containers.
+
+4. **Mandatory Path Aliases (`@/...`) & Zero Barrel Files**:
    - Import components, hooks, schemas, and utilities directly via path aliases (`@/components/ui/card`, `@/hooks/use-window-width`).
    - Never create `index.ts` or `index.tsx` barrel files to re-export components or hooks.
-3. **Strict Props Typing (Zero `any`)**:
-   - Define explicit `interface` or `type` declarations for component props.
-   - Treat `props` and `state` as strictly immutable.
-4. **Early Returns for UI States (No Nested Ternaries)**:
+
+5. **Early Returns for UI States (No Nested Ternaries)**:
    - Handle loading, error, and empty states with top-level guard clauses (`if (!data) return <EmptyState />;`) instead of deeply nested JSX conditionals.
-5. **Top-Level Hooks Only (Rules of Hooks)**:
-   - Call hooks unconditionally at the top level of function components or custom hooks—never inside loops, conditions, or nested functions (except React 19's `use()`, covered in `react-advanced`).
+
 6. **Immutable State Updates & Functional Updaters**:
    - Never mutate arrays or objects in place (`items.push()`). Always pass a new reference (`[...items, next]`).
    - Use functional updaters (`setCount((prev) => prev + step)`) whenever next state depends on previous state.
-7. **Compiler-Aware Memoization**:
-   - Do not wrap every value or callback in `useMemo` or `useCallback` by reflex. When the React Compiler is active, it memoizes automatically.
-   - Reserve manual `useMemo` and `useCallback` for stabilizing references passed to `useEffect` dependency arrays or for genuinely expensive computations in uncompiled modules.
-8. **Stable Identity Keys in Lists**:
+
+7. **Stable Identity Keys in Lists**:
    - Always provide a stable, unique `key` derived from domain identity (`item.id`), never the array index (`i`) for dynamic or reorderable lists.
-9. **Controlled Inputs with Single Source of Truth**:
-   - Derive input `value` from state and handle updates via `onChange`, validating user input with **Valibot** (`* as v from "valibot"`) where applicable.
 
 ---
 
-## 2. Components, JSX, Props, and Early Returns
-
-Name components in `PascalCase`. Return a single root element or Fragment (`<>...</>`). Use guard clauses to keep the primary render path flat.
+## 2. Component Typing Standards
 
 ```tsx
-import { useState } from "react";
+import type { ReactNode } from "react";
 
-interface UserSummaryProps {
+// ✅ Component with props
+export interface UserAvatarProps {
   name: string;
-  role?: string;
-  isActive: boolean;
-  step?: number;
+  avatarUrl?: string;
 }
 
-export function UserSummary({ name, role = "Member", isActive, step = 1 }: UserSummaryProps) {
-  const [count, setCount] = useState<number>(0);
-
-  if (!isActive) {
-    return <p className="text-muted">This account is currently inactive.</p>;
-  }
-
+export function UserAvatar({ name, avatarUrl }: UserAvatarProps) {
   return (
-    <section className="user-summary">
-      <h2>Hello, {name} ({role})</h2>
-      <button type="button" onClick={() => setCount((prev) => prev + step)}>
-        Count: {count}
-      </button>
-    </section>
+    <div className="flex items-center gap-2">
+      {avatarUrl ? <img src={avatarUrl} alt={name} /> : null}
+      <span>{name}</span>
+    </div>
   );
 }
-```
-
----
-
-## 3. Core Hooks Guide
-
-- **`useState`**: Holds reactive local state (`const [isOpen, setIsOpen] = useState<boolean>(false);`).
-- **`useEffect`**: Synchronizes with external systems (DOM listeners, timers, subscriptions). Always declare accurate dependencies and return a cleanup function.
-- **`useRef`**: Holds a mutable value across renders without causing re-renders, or references a DOM node.
-- **`useMemo` & `useCallback`**: Deliberate escape hatches to stabilize references for `useEffect` dependency arrays or heavy computations in uncompiled components.
-- **`useContext`**: Reads shared state from a `Context` higher in the tree (`<ThemeContext value={theme}>` in React 19).
-
-```tsx
-import { useEffect, useRef, useState } from "react";
-
-export function AutoFocusWindowTracker() {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [width, setWidth] = useState<number>(() => window.innerWidth);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-    const handleResize = (): void => setWidth(window.innerWidth);
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  return <input ref={inputRef} placeholder={`Viewport: ${width}px`} />;
-}
-```
-
----
-
-## 4. Composition, Lists, and Controlled Inputs
-
-Favor composition via `children` over bloated configuration props, use stable domain keys (`todo.id`) for lists, and bind controlled inputs to state:
-
-```tsx
-import { useState, type ReactNode } from "react";
-
-export interface TodoItem {
-  id: string;
-  text: string;
-  done: boolean;
-}
 
-export function TodoCard({
-  title,
-  todos,
-  children,
-}: {
+// ✅ Component with children
+export interface CardProps {
   title: string;
-  todos: TodoItem[];
-  children?: ReactNode;
-}) {
-  const [filter, setFilter] = useState<string>("");
-
-  if (todos.length === 0) {
-    return <p>Your task list is clear. Add a new item to get started.</p>;
-  }
-
-  const visible = todos.filter((t) => t.text.toLowerCase().includes(filter.toLowerCase()));
+  children: ReactNode;
+}
 
+export function Card({ title, children }: CardProps) {
   return (
-    <article className="card">
-      <h2>{title}</h2>
-      <input
-        value={filter}
-        onChange={(event) => setFilter(event.target.value)}
-        placeholder="Filter tasks..."
-      />
-      <ul>
-        {visible.map((todo) => (
-          <li key={todo.id}>{todo.done ? <s>{todo.text}</s> : todo.text}</li>
-        ))}
-      </ul>
+    <section className="rounded-lg border p-4">
+      <h3 className="font-semibold text-lg">{title}</h3>
       {children}
-    </article>
+    </section>
   );
 }
+
+// ✅ Component without props
+export function EmptyState() {
+  return <p className="text-muted-foreground text-sm">No items found.</p>;
+}
 ```
 
 ---
 
-## 5. Anti-Patterns to Avoid
+## 3. Anti-Patterns to Avoid
 
 | Anti-Pattern | Why It Fails | Correct Pattern |
 | :--- | :--- | :--- |
+| `export const Button: React.FC<Props>` | Verbose, breaks TS generics, legacy implicit children | `export function Button({ label }: ButtonProps)` |
 | Mutating state in place (`items.push(next)`) | Same array reference; React skips re-render | Create a new reference: `setItems((prev) => [...prev, next])` |
-| Calling hooks after `if` or inside loops | Breaks React's deterministic hook call order | Call hooks unconditionally at the top level; branch on results |
+| Calling hooks after `if` or inside loops | Breaks React's deterministic hook call order | Call hooks unconditionally at top level |
 | Using array index `key={i}` on dynamic lists | Misattributes component state on insert, delete, or sort | Use a stable domain identifier: `key={item.id}` |
-| Fetching or deriving synchronous state inside `useEffect` | Triggers an extra render pass and causes UI flicker | Derive values inline during render; use `use()` / Suspense or Actions for async data (`react-advanced`) |
 | Re-exporting components via `components/index.ts` | Violates Zero Barrel Files and harms tree-shaking | Import directly from `@/components/ui/card` |
 
 ---
 
-## 6. Sibling Skills
+## 4. Sibling Skills
 
 - **`best-practices`**: Universal clean architecture, `< 200` lines limit, `@/` path aliases, strict typing, and courteous user feedback.
-- **`react-advanced`**: React 19 platform features, React Compiler 1.0 auto-memoization, concurrent rendering (`useTransition`, `useDeferredValue`, `Suspense`), `use()`, Actions (`useActionState`, `useOptimistic`, `useFormStatus`), context optimization, virtualization, and RSC boundaries.
+- **`react-advanced`**: React 19 platform features, React Compiler auto-memoization, concurrent rendering, and RSC boundaries.
+- **`react-create-page`**: Page coordinator architecture, custom domain hooks, and Valibot forms.

package/skills/testing-vitest/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: testing-vitest
-description: Clean, deterministic unit and integration testing with Vitest. Enforces Arrange-Act-Assert (AAA), behavioral testing over implementation details, in-memory fakes over brittle mocks, strict assertions, and boundary/edge case test matrices. TRIGGER when writing, maintaining, or fixing automated tests (*.test.ts, *.spec.ts), test utilities, or testing infrastructure with Vitest.
+description: Clean, deterministic unit, integration, and HTTP route testing with Vitest. Enforces Arrange-Act-Assert (AAA), behavioral testing over implementation details, in-memory SQLite/D1 fakes over brittle mocks, four-tier testing pyramid, and strict assertion contracts. TRIGGER when writing, maintaining, or fixing automated tests (*.test.ts, *.spec.ts), test utilities, or testing infrastructure with Vitest.
 ---
 
-# Vitest Testing Standards
+# Vitest Testing Standards & 4-Tier Backend Pyramid
 
-Guidelines for authoring reliable, fast, and maintainable unit and integration tests with **Vitest**.
+Guidelines for authoring reliable, fast, and maintainable unit, integration, and route tests with **Vitest**.
 
 ---
 
@@ -22,88 +22,95 @@ Guidelines for authoring reliable, fast, and maintainable unit and integration t
      - `// Assert`: Verify outputs and invariants.
 
 3. **In-Memory Fakes Over Brittle Mocks**:
-   - Prefer in-memory fakes (e.g., `FakeUserRepository`, `MemoryStorage`) over deeply nested `vi.spyOn()` or mock chains.
-   - Only mock external boundaries (network HTTP calls, system clocks, third-party APIs).
+   - Prefer in-memory fakes (e.g., `testDb` backed by `:memory:` SQLite / D1 emulator) over mock chains.
+   - Only mock external boundaries (network HTTP calls, system clocks, third-party payment APIs).
 
-4. **Deterministic & Isolated (Zero Shared Mutable State)**:
-   - Each test must run independently in any order without relying on state from preceding tests.
-   - Use `beforeEach` strictly to reset test fixtures.
+4. **Four-Tier Testing Pyramid**:
+   - **Tier 1 (DTOs / Schemas)**: Test constraint validations, sanitization, trims, and invalid payload rejections.
+   - **Tier 2 (Actions)**: Test isolated business logic functions with typed context.
+   - **Tier 3 (Transactions)**: Test multi-mutation atomic batching and rollback mechanics.
+   - **Tier 4 (HTTP Routes)**: Mount thin routes on `testApp`, inject `testDb`, and verify HTTP lifecycle with `testApp.request()`.
 
-5. **Exhaustive Edge Cases & Failure Modes**:
-   - Always test boundary values: empty strings, zero, negative numbers, missing optional fields, expired tokens, and rejected promises.
-   - Never write happy-path-only tests.
+5. **Mandatory Response Envelope Validation (`ActionResponse<T>`)**:
+   - Route tests must assert that responses adhere to `ActionResponse<T>` (`success`, `message`, `data`, `error`).
+   - Verify that sensitive fields (e.g. `passwordHash`) are stripped by output whitelisting schemas.
 
-6. **Clear, Intention-Revealing Test Names**:
-   - Use descriptive sentences: `it("should calculate tax accurately when order total exceeds threshold")`.
-   - Avoid vague names like `it("works")` or `it("test 1")`.
+6. **Hard Size Limit: <200 Lines**:
+   - Keep test files focused and under 200 lines (target: 30-100 lines).
 
 ---
 
-## 2. Standard Test Pattern (AAA)
-
-```ts
-import { describe, it, expect } from "vitest";
-import { calculateDiscount } from "./calculate-discount";
-
-describe("calculateDiscount", () => {
-  it("should apply 15% discount when user is a premium member", () => {
-    // Arrange
-    const originalPrice = 100;
-    const isPremium = true;
-
-    // Act
-    const finalPrice = calculateDiscount(originalPrice, isPremium);
+## 2. Directory Taxonomy
+
+```text
+packages/testing/src/backend/ (or tests/)
+├── setup.ts                    # Global testDb initialization & migrations
+├── mocks/
+│   └── in-memory-d1.ts         # In-memory SQLite emulator applying migrations
+└── {domain}/
+    ├── {entity}-dto.test.ts    # Tier 1: Schema validation tests
+    ├── {domain}-actions.test.ts# Tier 2: Pipeline actions unit tests
+    └── {action}.route.test.ts  # Tier 4: Route integration tests
+```
 
-    // Assert
-    expect(finalPrice).toBe(85);
-  });
+---
 
-  it("should return unchanged price when discount percentage is zero", () => {
-    // Arrange & Act
-    const finalPrice = calculateDiscount(50, false);
+## 3. Four-Tier Pattern Examples
 
-    // Assert
-    expect(finalPrice).toBe(50);
+### Tier 1: DTO Validation Test
+```ts
+import { describe, it, expect } from "vitest";
+import * as v from "valibot";
+import { CreateUserDto } from "@/dtos/users/create-user.dto";
+
+describe("Users DTO Validation", () => {
+  it("should accept valid payload and lowercase email", () => {
+    const input = { fullName: "Carlos Santana", email: "CARLOS@EXAMPLE.COM" };
+    const parsed = v.parse(CreateUserDto, input);
+    expect(parsed.email).toBe("carlos@example.com");
   });
 
-  it("should throw an AppError when input price is negative", () => {
-    // Arrange, Act & Assert
-    expect(() => calculateDiscount(-10, true)).toThrowError(/Price must be non-negative/);
+  it("should reject invalid email", () => {
+    expect(() => v.parse(CreateUserDto, { fullName: "Carlos", email: "invalid" })).toThrow();
   });
 });
 ```
 
----
-
-## 3. Mocking External Boundaries Safely
-
+### Tier 4: Route Integration Test with `testApp.request()`
 ```ts
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { fetchExchangeRate } from "./fetch-exchange-rate";
-
-describe("fetchExchangeRate", () => {
-  beforeEach(() => {
-    vi.restoreAllMocks();
+import { describe, it, expect, vi } from "vitest";
+import { Hono } from "hono";
+import { createUserRoute } from "@/routes/modules/users/create-user.route";
+import { testDb } from "@/backend/setup";
+import type { AppContext } from "@/types/context/app-context.type";
+import type { ActionResponse } from "@/types/common/action-response.type";
+
+describe("POST /users Route Integration", () => {
+  const testApp = new Hono<AppContext>();
+  testApp.use("*", async (ctx, next) => {
+    ctx.set("db", testDb);
+    ctx.set("logger", { info: vi.fn(), warn: vi.fn(), error: vi.fn() } as any);
+    await next();
   });
+  testApp.route("/users", createUserRoute);
 
-  it("should parse rate safely when API returns 200", async () => {
-    const fakeFetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: async () => ({ rate: 1.08 }),
+  it("should return 201 with ActionResponse contract", async () => {
+    const response = await testApp.request("/users", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ fullName: "Valeria Gomez", email: "valeria@example.com" }),
     });
-    vi.stubGlobal("fetch", fakeFetch);
-
-    const rate = await fetchExchangeRate("EUR", "USD");
 
-    expect(rate).toBe(1.08);
-    expect(fakeFetch).toHaveBeenCalledWith(expect.stringContaining("EUR/USD"));
+    expect(response.status).toBe(201);
+    const json = (await response.json()) as ActionResponse<{ id: string; passwordHash?: string }>;
+    expect(json.success).toBe(true);
+    expect(json.data?.passwordHash).toBeUndefined();
   });
 });
 ```
 
 ---
 
-## 4. Sibling Skills
+## 4. Deep References
 
-- **`best-practices`**: Universal clean code rules.
-- **`error-handling-logging`**: Testing expected `AppError` throws and error payloads.
+- `./references/backend-d1-testing-pyramid.md`: Comprehensive guide for In-Memory SQLite/D1 setup and test matrices.

package/skills/testing-vitest/references/backend-d1-testing-pyramid.md

@@ -0,0 +1,69 @@
+# Implementation Reference: Backend Testing Pyramid & In-Memory D1 Setup
+
+A complete guide for orchestrating Vitest test suites across the 4-tier testing pyramid using in-memory SQLite / Cloudflare D1 emulators.
+
+---
+
+## 1. Global Setup with In-Memory Database (`setup.ts`)
+
+Instead of recreating database tables inside every test file, initialize migrations once on an in-memory database:
+
+```ts
+import { beforeAll, afterAll } from "vitest";
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import { migrate } from "drizzle-orm/better-sqlite3/migrator";
+import * as schema from "@/db/schema";
+
+const sqliteConnection = new Database(":memory:");
+export const testDb = drizzle(sqliteConnection, { schema });
+
+beforeAll(async () => {
+  // Apply schema migrations automatically before suite execution
+  migrate(testDb, { migrationsFolder: "./drizzle" });
+});
+
+afterAll(() => {
+  sqliteConnection.close();
+});
+```
+
+---
+
+## 2. Testing Transactions & Rollback (Tier 3)
+
+```ts
+import { describe, it, expect } from "vitest";
+import { withD1Transaction } from "@/common/utils/d1-transaction";
+import { testDb } from "@/backend/setup";
+import { usersTable } from "@/db/schema";
+
+describe("D1 Atomic Batch Transactions", () => {
+  it("should rollback all mutations if an error occurs mid-transaction", async () => {
+    const executeFailingTransaction = async () => {
+      await withD1Transaction(testDb as any, async (transaction) => {
+        transaction.stage(
+          testDb.insert(usersTable).values({ id: "user_1", email: "first@example.com" }) as any
+        );
+
+        throw new Error("Simulated failure mid-transaction");
+      });
+    };
+
+    await expect(executeFailingTransaction()).rejects.toThrow("Simulated failure mid-transaction");
+
+    const users = await testDb.select().from(usersTable);
+    expect(users).toHaveLength(0);
+  });
+});
+```
+
+---
+
+## 3. Best Practices Checklist
+
+- [ ] Run migrations on in-memory SQLite rather than hitting live cloud databases.
+- [ ] Reset mutable database state between tests using transaction rollbacks or truncation.
+- [ ] Validate both happy path and rejection paths on every DTO schema.
+- [ ] Ensure route tests never assert raw implementation details, only HTTP status codes and `ActionResponse<T>` envelopes.
+- [ ] Keep every test file strictly below 200 lines.

package/skills/typescript-clean/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: typescript-clean
-description: Advanced TypeScript 5.5+ standards, strict tsconfig rules, discriminated unions, satisfies operator, const type parameters, unknown over any, custom type guards, and elimination of unsafe type assertions (as / any). TRIGGER when writing or modifying TypeScript files (.ts, .tsx), type definitions, tsconfig.json, or when handling complex polymorphic domain models.
+description: Advanced TypeScript 5.5+ standards, strict tsconfig rules, discriminated unions, satisfies operator, const type parameters, unknown over any, atomic type isolation in @/types/, and elimination of unsafe type assertions (as / any). TRIGGER when writing or modifying TypeScript files (.ts, .tsx), type definitions, tsconfig.json, or when handling complex polymorphic domain models.
 ---
 
 # TypeScript Clean Code Standards (TS 5.5+)
 
-Guidelines for writing safe, expressive, and strictly typed TypeScript with zero unsafe casts, exhaustive pattern matching, and modern language features.
+Guidelines for writing safe, expressive, strictly typed TypeScript with zero unsafe casts, exhaustive pattern matching, and atomic domain type isolation.
 
 ---
 
@@ -15,31 +15,57 @@ Guidelines for writing safe, expressive, and strictly typed TypeScript with zero
    - `any` disables the compiler and hides runtime bugs. Use `unknown` with narrowers or generics.
    - Non-null assertion operator `!` assumes runtime state without proof. Use optional chaining `?.` or explicit guard clauses.
 
-2. **Discriminated Unions for Domain States**:
+2. **Strict Type Isolation (`@/types/{domain}/`)**:
+   - In modular domain architectures, **NEVER** write `interface` or `type` definitions inside DTOs, Actions, Routes, or Utility helpers.
+   - Every contract has its own dedicated file: `@/types/{domain}/{name}.type.ts`.
+   - Organize into domains: `common/`, `context/`, `db/`, `pipeline/`, `services/`, and `{domain}/`.
+
+3. **Discriminated Unions for Domain States**:
    - Represent valid combinations of state using tagged unions (`type = "idle" | "loading" | "success" | "error"`).
    - Never use "optional soup" where every field is `x?: string`.
 
-3. **Exhaustive Type Checking with `never`**:
+4. **Exhaustive Type Checking with `never`**:
    - Every `switch` or conditional on a union must have an `assertNever(value)` exhaustive check in default branch.
 
-4. **Favor `satisfies` Over Type Annotations on Literals**:
+5. **Favor `satisfies` Over Type Annotations on Literals**:
    - `satisfies` checks that a value adheres to a contract without widening or discarding specific literal types.
 
-5. **`const` Type Parameters (TS 5.0+)**:
+6. **`const` Type Parameters (TS 5.0+)**:
    - Use `<const T>` in generic helper functions to preserve literal types without requiring `as const` at call site.
 
-6. **Custom Type Guards & Inferred Type Predicates (TS 5.5+)**:
+7. **Custom Type Guards & Inferred Type Predicates (TS 5.5+)**:
    - Use type predicates (`x is TargetType`) or rely on TS 5.5 automatic type narrowing for array filters.
 
-7. **Avoid Unsafe `as` Type Assertions**:
+8. **Avoid Unsafe `as` Type Assertions**:
    - Never use `value as SomeType` to bypass the type checker. Validate with Valibot schema or custom type guard first.
 
+9. **Hard Size Limit of <200 Lines**:
+   - Keep type definition files atomic and concise (target: 10-50 lines).
+
 ---
 
-## 2. Key Patterns
+## 2. Directory Structure for Type Isolation
+
+```text
+src/types/
+├── common/                           # Global shared contracts
+│   └── action-response.type.ts       # interface ActionResponse<T>
+├── context/                          # Infrastructure & runtime execution context
+│   ├── env.type.ts                   # interface Env (Bindings / Secrets)
+│   └── app-context.type.ts           # Context typing (Bindings, Variables)
+├── db/                               # Database client and ORM entities
+│   ├── database-client.type.ts       # Database client handle
+│   └── {entity}.type.ts              # Select / Insert schema types
+└── {domain}/                         # Domain-specific DTO & action contracts
+    ├── create-{entity}-input.type.ts # Inferred from input DTO
+    └── {entity}-response.type.ts     # Inferred from output DTO
+```
 
-### A. Discriminated Unions & Exhaustiveness
+---
 
+## 3. Key Patterns
+
+### A. Discriminated Unions & Exhaustiveness
 ```ts
 export type RequestState<T> =
   | { status: "idle" }
@@ -68,33 +94,27 @@ export function renderStatus<T>(state: RequestState<T>): string {
 ```
 
 ### B. `satisfies` vs Widening Annotations
-
 ```ts
 type RouteConfig = Record<string, { path: string; isProtected: boolean }>;
 
-// ✅ Preserves exact key literals and structure
 export const APP_ROUTES = {
   HOME: { path: "/", isProtected: false },
   DASHBOARD: { path: "/dashboard", isProtected: true },
 } satisfies RouteConfig;
-
-// APP_ROUTES.HOME.path is typed as "/" not string!
 ```
 
 ### C. Const Generic Parameters
-
 ```ts
 export function createEnumSet<const T extends readonly string[]>(values: T): ReadonlySet<T[number]> {
   return new Set(values);
 }
 
-// Inferred as ReadonlySet<"admin" | "editor" | "viewer">
 export const ROLES = createEnumSet(["admin", "editor", "viewer"]);
 ```
 
 ---
 
-## 3. Strict TSConfig Expectations
+## 4. Strict TSConfig Expectations
 
 Always enable:
 - `"strict": true`
@@ -104,8 +124,8 @@ Always enable:
 
 ---
 
-## 4. Sibling Skills
+## 5. Sibling Skills
 
-- **`best-practices`**: Universal clean code rules and 200-line limit.
+- **`best-practices`**: Universal clean code rules, descriptive naming, and 200-line limit.
 - **`valibot-validation`**: Runtime validation inferred to static TS types.
-- Reference guide: `references/js-ts-antipatterns.md`.
+- Reference guide: `./references/js-ts-antipatterns.md`.