lucking7/mapcn-skills

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