markdown-content

SKILL.md

This skill defines how to build content-driven pages (blog posts, changelogs, legal pages, knowledge bases) in a Next.js App Router project using MDX.

| Content framework | fumadocs-mdx | MDX collection definitions, frontmatter schemas, build-time processing | | Content runtime | fumadocs-core | Source loader, page tree, slug resolution | | Syntax highlighting | shiki + rehype-pretty-code | Dual-theme code highlighting at build time (MDX) and runtime (components) |

| Schema validation | zod | Typed frontmatter with defaults and optional fields | | Styling | Tailwind CSS v4 | Utility-first styles, custom prose CSS, code block styles | | Framework | Next.js (App Router) | File-based routing with catch-all [[...slug]] for content pages |

fumadocs-mdx、rehype-pretty-code、shiki を使用して Next.js でマークダウン コンテンツ ページ (ブログ、法律、変更ログ) を構築するためのガイド。 MDX コレクション、自己完結型の散文タイポグラフィ、構文が強調表示されたコード ブロック、レンダリングされたマークダウンとカスタム React コード コンポーネントの視覚的な一貫性を保つコンポーネント マッピングについて説明します。ドキュメント UI フレームワークは必要ありません。 ソース: joyco-studio/skills。

原文を見る