// Use when adding MarkBind components like boxes, panels, tabs, modals, tooltips, popovers, dropdowns, navbars, search bars, cards, badges, questions, quizzes, trees, thumbnails, annotations, scroll-to-top buttons, dark mode toggles, breadcrumbs, site-nav, or page-nav to MarkBind pages
Refer to this skill for MarkBind-specific authoring features and formatting when writing MarkBind pages.
Use when deploying MarkBind sites to GitHub Pages, Netlify, or CI platforms, configuring deploy settings in site.json, setting up GitHub Actions workflows, PR previews, or when users ask about publishing, hosting, or deploying their MarkBind site
Use when initializing a new MarkBind site, choosing templates, installing MarkBind, serving locally, or when a user asks how to get started with MarkBind, create a new documentation site, or scaffold a project
Use when creating Nunjucks macros, advanced templating patterns, dynamic content generation, loops, conditionals, custom macros for repeated component patterns, or when users ask about automating content, creating reusable component templates, or advanced Nunjucks features in MarkBind
Use when reusing content across pages with includes, defining variables, creating boilerplate templates, sharing content between sites, creating content variations, or when users ask about content reuse, DRY patterns, includes, variables, or templates in MarkBind
Use when configuring site.json, setting up layouts, frontmatter, site properties, themes, dark mode, plugins, page navigation, headers, footers, custom CSS/JS, or when users ask about site structure, site-wide settings, or page configuration
| name | markbind-components |
| description | Use when adding MarkBind components like boxes, panels, tabs, modals, tooltips, popovers, dropdowns, navbars, search bars, cards, badges, questions, quizzes, trees, thumbnails, annotations, scroll-to-top buttons, dark mode toggles, breadcrumbs, site-nav, or page-nav to MarkBind pages |
| paths | *.md,*.html |
MarkBind provides Vue.js components built on Bootstrap for creating rich, interactive pages. Use components via HTML-like tags in .md files.
navbar, site-nav, page-nav) aligned with site layout and frontmatter/site config.box for callouts, panel for collapsible sections, tabs for alternatives).| Component | Key Attribute | Purpose |
|---|---|---|
<box> | type="info|warning|tip|success" | Styled info containers |
<panel> | header, expanded, minimized | Collapsible content |
<tabs> | :active, tab header | Tabbed interface |
<tooltip> | content, trigger, placement | Hover explanations |
<popover> | header, content | Rich popups |
<modal> | header, id, large | Dialog boxes |
<navbar> | type, highlight-on | Top navigation |
<searchbar> | :data, :on-hit | Search functionality |
<site-nav> | Markdown list format | Sidebar navigation |
<page-nav /> | Config via frontmatter | Page TOC |
site-nav, page-nav patterns for page/site navigation.pic, thumbnails, tree, annotate, badges) for visual explanation.