claude-skills/docs/commands/cs-md-document.md
Claude 0a330f3759
feat(docs): redesign documentation site — clay design system, accurate counters, markdown-html domain pages
- Rewrite docs/stylesheets/extra.css with a warm clay/coral design system:
  aurora hero with eyebrow badge and stats strip, gradient card hairlines,
  pill tool badges, numbered steps component, reduced-motion support
- Rewrite homepage copy: plain-language 'What is an Agent Skill?' section,
  3-step how-it-works, all 17 domain cards, guides section, accurate stats
  (337 skills / 17 domains / 66 plugins)
- Add missing markdown-html domain to generate-docs.py (17th domain) and
  regenerate catalog: +12 new pages (md-document/md-review/md-slides skills,
  cs-markdown-html-orchestrator + cs-scraping-architect agents, 7 commands)
- Fix skill-internal link rewriting in the generator (./SIBLING.md and
  ALL-CAPS companion files now resolve to GitHub URLs) — mkdocs --strict
  now passes with zero warnings
- Refresh stale counters site-wide (177/192/204/311/338 → 337) in skills
  index, plugins index, getting-started, integrations, custom-gpts, guides
- Rebuild plugins page from live marketplace.json: 13 domain bundles + 53
  standalone plugins, accurate bundle table and full 66-plugin listing
- Add Guides section to nav (5 existing SEO guide pages, URLs unchanged),
  point homepage tool badges at tool-specific guides and real anchors
- Tighten site_description and JSON-LD keywords for 'agent skills' /
  'agent plugins' queries; update announce bar to the markdown-html launch
- No existing slugs or URLs changed — all edits are additive or in-place

https://claude.ai/code/session_015bYZ97nV4oRb3LbxCRFVcP
2026-06-11 15:45:00 +00:00

3.2 KiB

title description
/cs-md-document — Slash Command for AI Coding Agents Convert long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file interactive HTML document. Runs the md-document pipeline. Slash command for Claude Code, Codex CLI, Gemini CLI.

/cs-md-document

:material-console: Slash Command :material-github: Source

Convert the markdown at $ARGUMENTS into a single-file interactive HTML document.

Pre-flight gates (refuse, never override)

  1. Input < 100 lines → refuse (markdown wins below the threshold per Shihipar). wc -l <path> to confirm.
  2. Design-system not onboarded → refuse, surface /cs:design-system.
  3. Output directory unwritable → refuse, ask user for an alternate via --out.

Pipeline

# 1. Classify (if not already routed by orchestrator)
python3 markdown-html/skills/markdown-html-orchestrator/scripts/doctype_classifier.py \
    --input "<path>.md" --output json \
  | python3 markdown-html/skills/markdown-html-orchestrator/scripts/route_explainer.py

# 2. Resolve the output path
python3 markdown-html/skills/markdown-html-orchestrator/scripts/output_path_resolver.py \
    --input "<path>.md" --doctype document

# 3. Parse → render → inject
python3 markdown-html/skills/md-document/scripts/markdown_parser.py \
    --input "<path>.md" --output /tmp/sections.json
python3 markdown-html/skills/md-document/scripts/html_renderer.py \
    --sections /tmp/sections.json --output <resolved-out>.html
python3 markdown-html/skills/md-document/scripts/interactivity_injector.py \
    --file <resolved-out>.html \
    --features search,copycode,smoothscroll,scrollspy

What ships in the HTML

  • Sticky-sidebar TOC (default; configurable via toc.behavior in design-system)
  • Scrollspy: aria-current="location" on the TOC entry for the section in view
  • Search bar (Esc clears): filters which H2 sections are visible
  • Code-copy buttons on every <pre> (vanilla navigator.clipboard with execCommand fallback)
  • Smooth-scroll on TOC link clicks
  • Prism.js syntax highlighting (autoloader fetches only the languages this doc uses)
  • 12 brand CSS custom properties from the design-system's derived_palette
  • @media (prefers-reduced-motion: reduce) honored
  • Print-friendly via the browser's native print stylesheet (no @page overrides needed for documents)

Hard rules

  • Output is one .html file. No multi-file output, no extracted CSS/JS, no asset folders.
  • External CDN: fonts.googleapis.com + cdn.jsdelivr.net (Prism). Nothing else.
  • No JS framework runtime. Vanilla JS + IntersectionObserver only.
  • Re-running on the same input writes doc-{slug}-2.html etc. (collision suffix).

Output

Returns: input lines, output path, design style applied, top 3 features used, one forcing question.

References

See markdown-html/skills/md-document/references/:

  • information_density_patterns.md — Shihipar + Tufte + Wattenberger
  • toc_and_nav_ux.md — NN/g + WCAG + ARIA
  • single_file_html_discipline.md — Single-file artifact rationale