mapcn-docs
✓在使用 Next.js App Router 和 shadcn/ui 构建具有实时代码预览、组件库文档、API 参考页面或交互式代码示例的文档网站时使用。
SKILL.md
Build beautiful, interactive documentation sites with live component previews and copy-paste code examples.
Key pattern: Always wrap examples in a fixed-height container (h-[400px]) for consistent preview rendering.
| DocsLayout | Page wrapper with prev/next nav and TOC | | DocsSection | Content section with auto-generated slug IDs | | DocsHeader | Page title and description | | DocsNote | Highlighted callout boxes | | DocsCode | Inline code styling | | DocsLink | Styled links with external support | | DocsPropTable | API reference tables |
在使用 Next.js App Router 和 shadcn/ui 构建具有实时代码预览、组件库文档、API 参考页面或交互式代码示例的文档网站时使用。 来源：lucking7/mapcn-skills。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/lucking7/mapcn-skills --skill mapcn-docs- 分类
- ""沟通写作
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 mapcn-docs？
在使用 Next.js App Router 和 shadcn/ui 构建具有实时代码预览、组件库文档、API 参考页面或交互式代码示例的文档网站时使用。 来源：lucking7/mapcn-skills。
如何安装 mapcn-docs？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/lucking7/mapcn-skills --skill mapcn-docs 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/lucking7/mapcn-skills
详情
- 分类
- ""沟通写作
- 来源
- skills.sh
- 收录时间
- 2026-02-01