Add Snap docs site

[rishavmukherji]

Summary

Adds a docs site to the emulator Next.js app at /docs. The emulator itself now lives at farcaster.xyz/~/developers/snaps and is linked externally from the sidebar.

Routes:

• /docs/* — documentation pages
• /llms.txt — all docs as plain text for LLM consumption
• /skill — serves the create-farcaster-snap Claude Code skill for download
• / redirects to /docs

10 docs pages:

• Introduction — overview, how snaps work, content negotiation
• Elements — all 13 element types with properties and examples
• Buttons — post, link, mini_app, sdk actions
• Colors — 8-color named palette with visual swatches and light/dark hex values
• Theme — accent surfaces, what snaps can/can't specify
• Effects — confetti
• Constraints — all limits and validation rules
• Authentication — full JFS spec (format, key types, verification, compact serialization)
• Examples — example SnapResponse JSON
• Building a Snap — Claude Code skill install, Hono template, testing, deploying

Features:

• Farcaster logo (new icon) in sidebar header
• Collapsible sidebar (Lucide panel icons)
• Light/dark mode toggle (Moon/Sun icons, persisted to localStorage)
• Full dark mode support (CSS variables across all pages)
• Anchor links on all headings (# appears on hover, clickable)
• Code copy button on code blocks (with fallback + cleanup)
• llms.txt link in top-right of every docs page
• Emulator link opens externally in new tab (with ExternalLink icon)

Tech:

• @next/mdx + remark-gfm (uses --webpack since Turbopack doesn't support remark plugins)
• lucide-react for icons (MIT)
• CSS custom properties for full light/dark theme system
• Custom MDX components for heading anchors and code block copy

Test plan

• Docs render at /docs/* with proper typography and tables
• Color palette page shows visual swatches
• Code copy button works on code blocks
• Sidebar collapse/expand works
• Dark mode toggle works and persists across navigation
• /llms.txt returns aggregated docs as plain text
• /skill downloads the SKILL.md file
• / redirects to /docs
• Emulator link opens farcaster.xyz in new tab
• CI passes (Build, Test, Typecheck)

🤖 Generated with Claude Code

-claude

[Copilot]

Pull request overview

This PR integrates a full MDX-based documentation site into the existing @farcaster/snap-emulator Next.js app, shipping docs and emulator together with a shared navigation sidebar, theme system, and a couple of utility routes (/llms.txt, /skill).

Changes:

• Add MDX docs section under /docs/* (10 pages) plus /llms.txt aggregation and /skill download route.
• Introduce shared app shell (sidebar + theme toggling) and redirect / → /docs; move emulator UI to /emulator.
• Refactor emulator renderer styling to use CSS variables for light/dark theming.

Reviewed changes

Copilot reviewed 28 out of 30 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Adds MDX + remark-gfm + lucide dependencies and transitive packages.
apps/emulator/tsconfig.json	Includes **/*.mdx for typechecking MDX pages.
apps/emulator/src/components/ThemeProvider.tsx	New client theme context + localStorage persistence (docs-theme).
apps/emulator/src/components/SnapRenderer.tsx	Swap hardcoded colors for CSS vars for theming consistency.
apps/emulator/src/components/snapCatalogRenderer.tsx	Replace hardcoded colors/borders with CSS vars.
apps/emulator/src/components/Sidebar.tsx	New shared left sidebar + collapse + theme toggle button.
apps/emulator/src/components/FarcasterLogo.tsx	Adds inline SVG Farcaster logo for sidebar branding.
apps/emulator/src/components/CodeBlock.tsx	Adds code-block copy-to-clipboard UI for docs pages.
apps/emulator/src/app/skill/route.ts	New route to serve SKILL.md as a downloadable file.
apps/emulator/src/app/page.tsx	Root now redirects to /docs.
apps/emulator/src/app/llms.txt/route.ts	New route aggregating docs MDX content into plain text.
apps/emulator/src/app/layout.tsx	Wraps app in ThemeProvider + shared sidebar shell; updates metadata.
apps/emulator/src/app/globals.css	Adds CSS-variable theme system + docs/sidebar styling.
apps/emulator/src/app/emulator/page.tsx	Moves emulator UI to /emulator and updates colors to CSS vars.
apps/emulator/src/app/emulator/layout.tsx	Emulator layout wrapper to constrain overflow appropriately.
apps/emulator/src/app/docs/layout.tsx	Docs layout wrapper + llms.txt link.
apps/emulator/src/app/docs/page.mdx	Adds docs landing page (Introduction).
apps/emulator/src/app/docs/examples/page.mdx	Adds Examples docs page.
apps/emulator/src/app/docs/elements/page.mdx	Adds Elements spec docs page.
apps/emulator/src/app/docs/buttons/page.mdx	Adds Buttons spec docs page.
apps/emulator/src/app/docs/colors/page.mdx	Adds Color Palette docs page with JSX swatches.
apps/emulator/src/app/docs/theme/page.mdx	Adds Theme & Styling docs page.
apps/emulator/src/app/docs/effects/page.mdx	Adds Effects docs page.
apps/emulator/src/app/docs/constraints/page.mdx	Adds Constraints docs page.
apps/emulator/src/app/docs/building/page.mdx	Adds Building a Snap guide.
apps/emulator/src/app/docs/auth/page.mdx	Adds Authentication (JFS) docs page.
apps/emulator/package.json	Adds MDX + remark + lucide deps; uses --webpack for builds.
apps/emulator/next.config.ts	Enables MDX via @next/mdx and remark-gfm; adds page extensions.
apps/emulator/next-env.d.ts	Adjusts Next route types import path.
apps/emulator/mdx-components.tsx	Custom MDX components: heading anchors + CodeBlock wrapper.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.