supercli: Skill for Claude Code

Supercli Docs Development

Work on supercli documentation including docs/index.html, docs/plugins.html, and associated scripts.

Docs Structure

docs/
├── index.html           # Main documentation page (single-page app)
├── plugins.html         # Plugin directory page
├── server.md            # Server documentation (loaded dynamically)
├── adapters.md          # Adapters documentation (loaded dynamically)
├── meta-plugins.json    # Generated plugin metadata (don't edit manually)
├── features/            # Feature-specific docs
└── ...other .md files
scripts/
└── generate-meta-plugins.js  # Generates meta-plugins.json

Terminology Convention

IMPORTANT: Use "capability" not "skill"

The codebase uses "capability" as the primary term:

• Section titles → "Capability Layer Basics", "Capability Sources", "Capability Mesh Vision"
• Content references → "every capability becomes...", "capability discovery layer"
• Sidebar links → update both href AND display text
• Section IDs → change from id="skill-*" to id="capability-*"

Search keyword attributes can keep "skill" for backwards searchability.

docs/index.html

Single-page documentation with:

• Sidebar navigation (links to #sections and other doc pages)
• Quick filter input (searches section content + data-keywords)
• Sections with class="doc-section" and data-keywords="..." attributes
• Consistent dark theme: bg-slate-950, text-slate-300, brand-400 accents
• Tailwind + DaisyUI + Space Grotesk/Inter fonts (CDN)

Common Edits

Update sidebar: Edit the <nav> inside <aside id="sidebar"> Update mobile nav: Clone happens automatically via JS from sidebar Add section: Create <article class="doc-section" id="..." data-keywords="..."> Link to another doc page: <a href="plugins.html">Plugin Directory</a> Add dynamic .md section:

1. Create docs/<section>.md file
2. Add empty div in HTML: <div id="<section>-content" class="prose prose-lg max-w-none text-[#2F3437]"></div>
3. Add JS loader at bottom of page:

async function loadSectionDocs() {
  const res = await fetch('<section>.md');
  const markdown = await res.text();
  const html = marked.parse(markdown);
  document.getElementById('<section>-content').innerHTML = html;
}
loadSectionDocs();