mapcn-docs_skill

This skill helps you build comprehensive Next.js App Router documentation sites with live previews, code samples, and accessible, theme-aware UI.

Shell

0

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill lucking7/mapcn-skills --skill mapcn-docs

SKILL.md9.8 KB

Overview

This skill helps you build a polished, interactive documentation site for component libraries and design systems using Next.js App Router and shadcn/ui. It provides live component previews, tabbed preview/code views, syntax-highlighted code with Shiki, and copy-to-clipboard for ready-to-use examples. The layout includes responsive sidebar navigation, a scroll-tracking TOC, and accessible UI components.

How this skill works

The system renders example components inside a server-side preview wrapper that calls Shiki to produce highlighted HTML for code tabs. A client-side component manages tabs (Preview | Code), renders the live example, and offers a copy button for the highlighted source. Utility functions transform internal import paths so code examples are copy-paste ready for users.

When to use it

Building docs for a component library or design system
Creating API reference pages with interactive examples
Needing tabbed preview/code views like shadcn/ui docs
Providing copy-paste ready, syntax-highlighted code examples
Using Next.js App Router with Tailwind and shadcn/ui

Best practices

Keep examples focused — one concept per example
Wrap examples in a fixed-height container (e.g. h-[400px]) for consistent previews
Run Shiki on the server; call highlight functions from server components only
Transform internal import paths for public examples (e.g. @/registry → @/components/ui)
Include API prop tables and TOC entries for scroll-tracking and discoverability

Example use cases

Component demo pages with live previews and copyable code
Interactive API reference entries showing stateful examples
Design system documentation with responsive sidebar and TOC
Tutorial or cookbook pages that show implementation and result side-by-side
Showcase pages for complex components with multiple usage examples

FAQ

Yes. shadcn/ui provides the UI primitives used across the docs components; run the shadcn init command before integrating the docs system.

Where should code highlighting run?

Shiki must run server-side. Call code-highlighting functions from server components and pass the resulting HTML to the client for display.