This skill provides project-specific knowledge for the wcygan.net blog, covering the four core subsystems. Load the appropriate reference for detailed patterns.
Quick Reference
Area
Entry Point
Reference
Deno runtime & build
deno.json, package.json, vite.config.ts
deno.md
TanStack Start routing & SSR
src/routes/, src/router.tsx
tanstack-start.md
MDX markdown pipeline
vite.config.ts MDX plugin, src/posts/
mdx-pipeline.md
Mermaid diagrams
src/diagrams/, scripts/render-diagrams.mjs
mermaid-diagrams.md
Critical Gotchas
Loaders must return serializable data only. Never return React components, functions, or class instances from TanStack Router loaders — they get JSON-serialized for SSR hydration. Load MDX components client-side via useEffect.
Never use ref.current.innerHTML in React components. Use dangerouslySetInnerHTML via state instead. Direct DOM mutation breaks React's reconciler during hydration (causes removeChild errors).
The $slug route is a catch-all. It matches everything including /rss.xml and /favicon.ico. The beforeLoad guard rejects slugs containing dots to let static files through.
Mermaid must be dynamically imported. It's browser-only and ~2MB. Use import('mermaid') at runtime, never a top-level import. The ESM alias in vite.config.ts points to the optimized build.
MDX frontmatter uses frontmatter not metadata. The remark-mdx-frontmatter plugin exports frontmatter under module.frontmatter, unlike the old MDsveX which used module.metadata.
1---2name: wcygan-net-stack3description: wcygan.net Stack Guide4---56# wcygan.net Stack Guide78This skill provides project-specific knowledge for the wcygan.net blog, covering the four core subsystems. Load the appropriate reference for detailed patterns.910## Quick Reference1112| Area | Entry Point | Reference |13| ---------------------------- | ---------------------------------------------- | ----------------------------------------------------- |14| Deno runtime & build | `deno.json`, `package.json`, `vite.config.ts` | [deno.md](references/deno.md) |15| TanStack Start routing & SSR | `src/routes/`, `src/router.tsx` | [tanstack-start.md](references/tanstack-start.md) |16| MDX markdown pipeline | `vite.config.ts` MDX plugin, `src/posts/` | [mdx-pipeline.md](references/mdx-pipeline.md) |17| Mermaid diagrams | `src/diagrams/`, `scripts/render-diagrams.mjs` | [mermaid-diagrams.md](references/mermaid-diagrams.md) |1819## Critical Gotchas20211. **Loaders must return serializable data only.** Never return React components, functions, or class instances from TanStack Router loaders — they get JSON-serialized for SSR hydration. Load MDX components client-side via `useEffect`.22232. **Never use `ref.current.innerHTML` in React components.** Use `dangerouslySetInnerHTML` via state instead. Direct DOM mutation breaks React's reconciler during hydration (causes `removeChild` errors).24253. **The `$slug` route is a catch-all.** It matches everything including `/rss.xml` and `/favicon.ico`. The `beforeLoad` guard rejects slugs containing dots to let static files through.26274. **Mermaid must be dynamically imported.** It's browser-only and ~2MB. Use `import('mermaid')` at runtime, never a top-level import. The ESM alias in `vite.config.ts` points to the optimized build.28295. **MDX frontmatter uses `frontmatter` not `metadata`.** The `remark-mdx-frontmatter` plugin exports frontmatter under `module.frontmatter`, unlike the old MDsveX which used `module.metadata`.
Run npx skillmds@latest add wcygan/wcygan-net-stack in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
wcygan.net Stack Guide It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
wcygan (@wcygan) published this skill. Their other Agent Skills are listed on their SkillMD profile.
wcygan