mapcn-docs
✓Use when building documentation sites with live code previews, component library docs, API reference pages, or interactive code examples using Next.js App Router and shadcn/ui.
Installation
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 |
Use when building documentation sites with live code previews, component library docs, API reference pages, or interactive code examples using Next.js App Router and shadcn/ui. Source: lucking7/mapcn-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/lucking7/mapcn-skills --skill mapcn-docs- Source
- lucking7/mapcn-skills
- Category
- ""Writing
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is mapcn-docs?
Use when building documentation sites with live code previews, component library docs, API reference pages, or interactive code examples using Next.js App Router and shadcn/ui. Source: lucking7/mapcn-skills.
How do I install mapcn-docs?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/lucking7/mapcn-skills --skill mapcn-docs Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/lucking7/mapcn-skills
Details
- Category
- ""Writing
- Source
- skills.sh
- First Seen
- 2026-02-01