chore: add error-boundary building block

Author: bartstc

.agents/skills/building-blocks/SKILL.md

@@ -44,6 +44,7 @@ Read the rule file for each block you are about to implement. The summaries belo
 | `compound-component` | `components/`  | Dot-notation sub-components. Composition over configuration — no boolean prop toggles.             | `rules/compound-component.md` |
 | `form`               | `components/`  | Context-driven form via `useForm` + `FormProvider` + field components.                             | `rules/form.md`               |
 | `hoc`                | `components/`  | Component in → enhanced component out. For render-level decisions (auth gates, suspense wrappers). | `rules/hoc.md`                |
+| `error-boundary`     | `components/`  | Scoped error handling for a feature component with its own query.                                  | `rules/error-boundary.md`     |
 | `page`               | `pages/`       | Route-level orchestrator. Only place where router coupling is acceptable.                          | `rules/page.md`               |
 | `facade-hook`        | `components/`  | Private logic extraction for a single component. Defined below the component, not exported.        | `rules/facade-hook.md`        |
 | `named-effect`       | `components/`  | Named function expressions in `useEffect`. Intent visible at a glance.                             | `rules/named-effect.md`       |

.agents/skills/building-blocks/rules/error-boundary.md

@@ -0,0 +1,38 @@
+---
+title: Error Boundary
+category: Component Patterns
+layer: components/
+composedWith: query-options-factory
+---
+
+## Error Boundary
+
+Scoped runtime error handling for a feature component that runs its own query. Contains failure to the component's own DOM so the rest of the page keeps working. Catches both render errors and query fetch errors through a single wrapper.
+
+### Constraints
+
+- Only for components with their own **query hook**.
+- `ErrorBoundary` and `withErrorBoundary` live in `src/lib/components/ErrorBoundary/`. Use `withErrorBoundary` by default — do not hand-roll.
+- Add `throwOnError: true` on the query's `useQuery` call in `providers/`.
+- No retry for ErrorBoundary by default.
+
+### Example
+
+```tsx
+import { withErrorBoundary } from "@/lib/components/ErrorBoundary/with-error-boundary";
+
+interface IProps {
+  productId: string;
+}
+
+const ProductRatingBase = ({ productId }: IProps) => {
+  const { data } = useMarketingProductQuery(productId);
+  // render with data
+};
+
+const ProductRating = withErrorBoundary<IProps>(ProductRatingFallback)(
+  ProductRatingBase
+);
+
+export { ProductRating };
+```

.agents/skills/writing-spec/SKILL.md

@@ -53,7 +53,7 @@ Fill sections 7-10 of the template.
    - Traces to requirement IDs (R1, R2, …)
    - Includes target file paths
    - Is marked `[P]` (parallelizable) or `[S]` (sequential)
-2. Draft **Error & Edge Cases** using GIVEN/WHEN/THEN — cover failure modes, boundary conditions, concurrency
+2. Draft **Error & Edge Cases** using GIVEN/WHEN/THEN — cover failure modes (including fetch errors for data-fetching components), boundary conditions, concurrency
 3. Add **Open Questions** for anything unresolved that blocks a specific task
 4. Present for review
 

docs/spec-driven-development.md

@@ -210,13 +210,13 @@ The building blocks catalog lives in `skills/building-blocks/`. It uses progress
 
 ### Block categories
 
-| Category           | Blocks                                                                                                            | What they cover                                              |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| Data Fetching      | `mutation-hook`, `query-options-factory`, `query-keys-factory`, `dto-model`                                       | Server reads/writes, cache keys, API response types          |
-| State Management   | `store`, `provider`                                                                                               | Zustand stores, React Context dependency injection           |
-| App Orchestration  | `use-case-hook`                                                                                                   | Feature-level operations composing mutations + notifications |
-| Component Patterns | `notification-hook`, `pure-component`, `compound-component`, `form`, `hoc`, `page`, `facade-hook`, `named-effect` | UI components, hooks, and composition patterns               |
-| Data Modeling      | `frontend-model`, `value-object`                                                                                  | Domain types, value-based logic grouping                     |
+| Category           | Blocks                                                                                                                              | What they cover                                              |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| Data Fetching      | `mutation-hook`, `query-options-factory`, `query-keys-factory`, `dto-model`                                                         | Server reads/writes, cache keys, API response types          |
+| State Management   | `store`, `provider`                                                                                                                 | Zustand stores, React Context dependency injection           |
+| App Orchestration  | `use-case-hook`                                                                                                                     | Feature-level operations composing mutations + notifications |
+| Component Patterns | `notification-hook`, `pure-component`, `compound-component`, `form`, `hoc`, `error-boundary`, `page`, `facade-hook`, `named-effect` | UI components, hooks, and composition patterns               |
+| Data Modeling      | `frontend-model`, `value-object`                                                                                                    | Domain types, value-based logic grouping                     |
 
 ### How specs reference building blocks
 

specs/lessons.md

@@ -41,15 +41,3 @@ Patterns captured after corrections. Review at session start.
 **Source:** Correction 2026-04-12 — `MarketingProductDto` leaked into `ProductDetails.tsx` component props.
 
 ---
-
-## L004 — Missing `error-boundary` building block
-
-**Rule:** Feature components embedded inside pages (e.g. `ProductRating` inside `ProductPage`) need scoped error handling so their failure doesn't blank the whole page — an "island" error boundary. The pattern should cover both React render errors and React Query errors (`useQuery({ throwOnError })` composed with `QueryErrorResetBoundary`) in one consistent wrapper. No typed block exists for this in `.agents/skills/building-blocks/SKILL.md`, so specs either skip scoped error UI or reinvent it per feature.
-
-**Why it failed:** Spec 005 needed `ProductRating` to degrade gracefully if the marketing query failed, but no canonical pattern existed — the spec deferred error handling entirely rather than ship a one-off.
-
-**How to apply:** When a spec introduces a feature-level component mounted inside a page, ask whether its failure should blank the page or render a scoped fallback. If scoped, flag the `island-error-boundary` gap and defer the error UI rather than inventing one. When the block is added, it should wrap `react-error-boundary` + `QueryErrorResetBoundary`, surface a `fallback` prop, and standardize the treatment of render vs. query errors.
-
-**Source:** Spec 005 Q1 — rating component error UI deferred because no canonical island-error pattern existed.
-
----