AgentSkillsCN

mdx-runtime

在仓库（docs/blog/projects）中渲染和处理MDX运行时内容，使用MdxRemote + next-mdx-remote-client。用于制作MDX内容、清理内容或映射MDX组件时使用。

SKILL.md
--- frontmatter
name: mdx-runtime
description: Render và xử lý nội dung MDX runtime trong repo (docs/blog/projects), dùng MdxRemote + next-mdx-remote-client. Dùng khi làm nội dung MDX, sanitize, hoặc map components cho MDX.

MDX runtime

Khi nào dùng skill này

  • •Khi bạn nói: “render MDX từ database”, “MDX Remote”, “docs content”, “MDX components”, “sanitize MDX”.

Repo patterns

  • •Component render MDX: apps/web/src/components/docs/mdx-remote.tsx (export MdxRemote).
  • •Data source: Supabase (nội dung MDX string trong DB), fetch qua apps/web/src/services/docs-service.ts (docs) và apps/web/src/services/blog-service.ts (blog nếu có content MDX).

Checklist khi render MDX

  • •Ưu tiên Server Component.
  • •Nội dung đến từ DB: luôn xử lý theo pattern hiện có (sanitization/transform) trước khi render.
  • •Dùng MdxRemote thay vì tự dangerouslySetInnerHTML.

Khi sửa/extend MDX components

  • •Tìm components mapping trong apps/web/src/components/docs/mdx-remote.tsx.
  • •Chỉ thêm mapping tối thiểu cần thiết.
  • •UI text (nếu có) phải lấy từ next-intl và tiếng Việt.

Không được làm

  • •Không render raw HTML trực tiếp từ DB bằng dangerouslySetInnerHTML.
  • •Không tự ý thay đổi pipeline MDX (remark/rehype) nếu không có yêu cầu rõ ràng; ưu tiên theo pattern đang dùng.