ScrapeGraphAI x Hivemind: Enrich AI Agent Skills With Web Scraping

---
name: nextjs-server-client-boundary-verification
description: "Catch all server/client boundary violations in Next.js before declaring fixes done by systematically checking data flow through component trees."
source_sessions:
  - 177626fa-90c1-4d83-b130-8aad087c3b5c
version: 1
created_by_agent: claude_code
---
 
## When to Use
After fixing any Next.js server→client prop passing issue, before marking work complete.
 
## Workflow
1. Identify the error component (e.g., PermitsTable, CorridorsTable)
2. Trace the component tree, verify directives and props
3. For each prop: function? data? serializable?
4. Run dev server and check for residual errors before closing the task

---
name: nextjs-server-client-boundary-verification
version: 2
enriched_by: scrapegraph
enriched_at: 2026-05-26T15:58:00.000Z
enrichment_sources:
  - https://nextjs.org/docs/app/getting-started/server-and-client-components
  - https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
  - https://react.dev/reference/react/use-server#serializable-parameters-and-return-values
  - https://stackoverflow.com/questions/77091418/warning-only-plain-objects-can-be-passed-to-client-components-from-server-compo
  - https://github.com/vercel/next.js/discussions/46795
  - https://upsun.com/blog/avoid-common-mistakes-with-next-js-app-router/
  - https://www.propelauth.com/post/5-common-pitfalls-with-server-components-in-next13-with-examples
---

## Error → Cause → Fix lookup table (enriched)
 
| Error Message | Root Cause | Fix |
|---|---|---|
| Only plain objects can be passed to Client Components from Server Components | Server passing class instance, Mongoose doc, Map, Set, or object with prototype | JSON.parse(JSON.stringify(obj)) OR manually extract primitives |
| Event handlers cannot be passed to Client Component props | Server passing a function (onClick, formatter) to a client component | Add "use client" to the receiving component, or define the handler inside the client component |
| Objects with toJSON methods are not supported | Object has custom toJSON (common with ORMs) | Strip the method via destructuring or JSON.parse(JSON.stringify(obj)) |
| Hydration mismatch: Server rendered markup does not match client rendered markup | Prop changed between server/client render (Date, random ID, Date.now()) | Move the dynamic value generation into the client component via useState(() => ...) or useEffect |
| Passing a server function reference to an onClick handler is not allowed | onClick={serverAction} forwards the event object to the server action | Wrap in arrow: onClick={() => serverAction()} |
| Mongoose document cannot be serialized when passed to a client component | Mongoose docs contain ObjectId, Date, internal methods | Use .lean() on the query, then _id: doc._id.toString() |
| Missing "use server" directive in a server action | File exporting server actions without the pragma | Add "use server"; at the top of the file or function |
| Fetch response returned directly to a client component | Returned raw Response object from fetch | return await response.json() instead of return response |
| API route returns 404 / unexpected behavior | API file named page.ts instead of route.ts | Rename to route.ts |

## Serialization rules — what CAN cross the boundary (enriched)
 
Allowed (serializable):
- Primitives: string, number, bigint, boolean, undefined, null, globally-registered Symbols
- Plain objects (object literals) with only serializable properties
- Arrays, Map, Set, TypedArray, ArrayBuffer containing serializable values
- Date and FormData instances (Next.js handles these specifically)
- Promise (resolved values must be serializable)
- Server Actions (functions marked with "use server")
 
NOT allowed (will throw):
- Functions (except Server Actions)
- React elements / JSX
- Class instances (Mongoose documents, Prisma models, custom classes)
- Objects with custom prototypes
- Objects with custom toJSON methods
- RegExp, raw Request/Response, Node.js streams
- Symbols NOT registered globally
- Circular references
 
Hidden traps:
- undefined values are silently dropped during serialization, don't rely on them surviving
- ORM result objects look plain but have hidden prototype methods, always .lean() (Mongoose) or destructure (Prisma)

// Pattern 1 — Server action as onClick handler (forward-event bug)
 
// ❌ Wrong — forwards the event object to the server, breaks
<button onClick={revalidateEvents}>Refresh</button>
 
// ✅ Right — wrap in arrow, drop the event arg
<button onClick={() => revalidateEvents()}>Refresh</button>

// Pattern 2 — Mongoose document leak
 
// ❌ Wrong — full Mongoose doc has ObjectId + methods
const user = await UserModel.findById(id);
return <UserCard user={user} />;
 
// ✅ Right — .lean() returns plain obj, stringify _id
const user = await UserModel.findById(id).lean();
user._id = user._id.toString();
return <UserCard user={user} />;

## Tooling (enriched)
 
| Tool | Purpose |
|------|---------|
| next lint (built-in) | Runs ESLint with Next.js config, catches missing directives |
| @next/eslint-plugin-next | Server/client boundary checks, illegal imports |
| typescript-plugin-next | TS helpers surfacing server/client contract violations in your editor |
| React DevTools | Inspect component hierarchy and actual props received post-boundary |
| next-safe-action | Library enforcing serializable inputs to server actions, with runtime type checks |

---
name: enrich-hivemind-skill
description: Enrich thin Hivemind-codified skills with real-world web research using ScrapeGraph MCP tools. Use when the user asks to "enrich", "deepen", "research-boost", or "improve" a SKILL.md, OR when you encounter a SKILL.md under ~/.claude/skills/ that has Hivemind provenance frontmatter (source_sessions, created_by_agent) but lacks an `enriched_by: scrapegraph` field and is missing depth (under ~50 lines, no Code Examples section, no References section). The skill uses mcp__scrapegraph-mcp__search with a topic-adapted output_schema to research the skill's topic on the open web in a single call, then rewrites the SKILL.md with added Known Gotchas, Code Examples, Best Practices, and References while preserving the original pattern and frontmatter.
version: 2
---
 
# Enrich Hivemind Skill with ScrapeGraph
 
You are the enrichment loop between a memory tool (which writes thin skills from
agent traces) and the open web. Read a thin SKILL.md, research its topic with
ScrapeGraph, and rewrite it with thicker, sourced content.
 
## When to fire
- A SKILL.md has provenance frontmatter (source_sessions, created_by_agent)
- It does NOT already have `enriched_by: scrapegraph`
- The topic is researchable on the open web (a library, tool, or pattern, not a
  generic principle like "verify before claiming")
 
## Pipeline
1. Read the target SKILL.md. Hold the original body in memory verbatim.
2. Write a SPECIFIC research query. Not "Next.js bugs" but "Next.js 15 App
   Router server client component boundary errors serialization".
3. Pick an output_schema shaped to the topic. Always include a floor of
   gotchas, code_patterns, best_practices, tools_and_libraries, key_references.
   Add topic-specific fields:
   - error-debugging skills: error_messages, wrong_vs_right_patterns
   - detection skills: detection_heuristics, diagnostic_workflow
   - API skills: auth_requirements, rate_limits, endpoint_patterns
4. Call mcp__scrapegraph-mcp__search with user_prompt + prompt + output_schema.
   One call does search + scrape + extract together.
5. If the response is too large for context, it is auto-saved to disk. Pull
   sections out with jq instead of reading the whole file.
6. Dedupe: tools by name, references by url, gotchas by meaning, code by
   language+purpose. Keep the most specific version. Aim to cut 30-50%.
7. Compose the new file:
   - Preserve the original body and frontmatter verbatim.
   - Bump version, add enriched_by: scrapegraph, enriched_at, enrichment_sources.
   - Append new sections, each suffixed "(enriched)" so they stay distinct.
   - Order by what the reader reaches for first (errors -> lookup table first,
     detection -> heuristics first, API -> endpoints first).
   - Tables for 3+ column data, bullets for flat lists, fenced+language-tagged
     code blocks for every snippet.
8. Quality gate. Refuse to write if the content is generic ("be careful"), the
   code looks hallucinated, all references share one domain, or the extract is
   nearly empty.
9. Atomic write: write SKILL.md.new, then mv it over SKILL.md.
10. Report one line: enriched <name>: +N gotchas, +M code, +K refs, vX->vY.
 
## Non-goals
- Do NOT enrich hand-written skills (no provenance frontmatter).
- Do NOT call ScrapeGraph for topics that need no web research.
- Do NOT modify the original body or the source_sessions / created_by_agent fields.