User facing AI Skills

.github/skills/markbind-authoring/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: markbind-authoring
+description: Refer to this skill for MarkBind-specific authoring features and formatting when writing MarkBind pages.
+paths: "*.md,*.html"
+---
+
+# MarkBind Content Authoring
+
+## Overview
+
+Use this skill for MarkBind-specific authoring behavior and syntax extensions.
+
+## Essential Rules
+
+MarkBind pages are not plain Markdown. The processing order matters:
+
+1. **Nunjucks** (`{% ... %}`, `{{ ... }}`)
+2. **MarkBind syntax** (components, include/variable tags, extensions)
+3. **Markdown rendering**
+
+- Escape literal template syntax with `{% raw %}...{% endraw %}` when needed.
+- Use MarkBind text extensions only where they improve readability; avoid stacking too many styles.
+- Use search/indexing annotations (`.always-index`, `.no-index`, `.keyword`) intentionally.
+
+## Authoring References
+
+- [reference/textStyles.md](reference/textStyles.md) - MarkBind inline style extensions (`==`, `!!`, `%%`, `++`, `--`, color syntax) and when to use them.
+- [reference/codeBlocks.md](reference/codeBlocks.md) - MarkBind code block attributes (`.line-numbers`, `start-from`, `highlight-lines`, `heading`) and inline code language classes.
+- [reference/headings.md](reference/headings.md) - heading anchors and search-indexing controls (`.always-index`, `.no-index`).
+- [reference/paragraphs.md](reference/paragraphs.md) - MarkBind-safe line break and paragraph patterns.
+
+## User Guide Entries
+
+- <https://markbind.org/userGuide/authoringContents.html>
+- <https://markbind.org/userGuide/markBindSyntaxOverview.html>

.github/skills/markbind-authoring/reference/codeBlocks.md

@@ -0,0 +1,70 @@
+# Code Blocks
+
+## Basic Syntax Highlighting
+
+````markdown
+```js
+const x = 42;
+```
+
+```python
+print("Hello")
+```
+
+```html
+<div>HTML</div>
+```
+````
+
+## Line Numbers
+
+````markdown
+```js {.line-numbers}
+const x = 42;
+const y = 100;
+```
+````
+
+## Custom Start Line
+
+````markdown
+```js {.line-numbers start-from=10}
+const x = 42;
+```
+````
+
+## Highlight Lines
+
+````markdown
+```js {highlight-lines="1,3-5"}
+const a = 1;  // highlighted
+const b = 2;
+const c = 3;  // highlighted
+const d = 4;  // highlighted
+const e = 5;  // highlighted
+```
+````
+
+## Heading on Code Block
+
+````markdown
+```js {heading="example.js"}
+console.log("Hello");
+```
+````
+
+## Inline Code with Syntax
+
+```markdown
+`const x = 42;`{.js}
+```
+
+## Code Block Options Reference
+
+| Option | Syntax | Example |
+|--------|--------|---------|
+| Language | First line | ```js |
+| Line numbers | `{.line-numbers}` | ```js {.line-numbers} |
+| Start from | `start-from=N` | ```js {.line-numbers start-from=10} |
+| Highlight lines | `highlight-lines="1,3-5"` | |
+| Heading | `heading="title"` | |

.github/skills/markbind-authoring/reference/headings.md

@@ -0,0 +1,45 @@
+# Headings
+
+## Syntax
+
+```markdown
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+## Auto-generated Anchors
+
+Headings automatically generate anchors:
+- Lowercase
+- Special characters removed
+- Spaces replaced with hyphens
+
+Example:
+- `## My Heading` → `#my-heading`
+- `## API (v2)` → `#api-v2`
+
+## Manual Anchors
+
+```markdown
+<span id="custom-anchor"></span>
+## My Heading
+```
+
+Or use Pandoc-style:
+```markdown
+## My Heading {#custom-anchor}
+```
+
+## Always Index / No Index
+
+```markdown
+## Important Heading {.always-index}
+## Skip This Heading {.no-index}
+```
+
+Use `.always-index` to include headings below `headingIndexLevel` in search.
+Use `.no-index` to exclude headings from search.

.github/skills/markbind-authoring/reference/paragraphs.md

@@ -0,0 +1,31 @@
+# Paragraphs and Line Breaks
+
+## Paragraphs
+
+Separate paragraphs with one or more empty lines:
+
+```markdown
+First paragraph text.
+
+Second paragraph text.
+```
+
+## Line Breaks
+
+Use `<br>` tag (preferred):
+
+```markdown
+Line one<br>
+Line two
+```
+
+Or end line with two or more spaces:
+
+```markdown
+Line one  
+Line two
+```
+
+<box type="info">
+Using `<br>` is recommended as trailing spaces can be invisible and easy to miss.
+</box>

.github/skills/markbind-authoring/reference/textStyles.md

@@ -0,0 +1,64 @@
+# Text Styles
+
+## Standard Markdown
+
+```markdown
+**Bold** or __Bold__
+*Italic* or _Italic_
+***Bold and Italic***
+~~Strikethrough~~
+`Inline code`
+```
+
+## MarkBind Extensions
+
+```markdown
+****Super Bold****
+!!Underline!!
+==Highlight==
+%%Dim%%
+++Large++
+--Small--
+Super^script^
+Sub~script~
+->Center-align<-
+```
+
+## Colored Text
+
+```markdown
+#r#Red Text##     (colors: r/g/b/c/m/y/k/w)
+#g#Green Text##
+#b#Blue Text##
+#c#Cyan Text##
+#m#Magenta Text##
+#y#Yellow Text##
+#k#Black Text##
+#w#White Text##
+```
+
+### Color Reference
+| Code | Color |
+|------|-------|
+| `#r#...##` | Red |
+| `#g#...##` | Green |
+| `#b#...##` | Blue |
+| `#c#...##` | Cyan |
+| `#m#...##` | Magenta |
+| `#y#...##` | Yellow |
+| `#k#...##` | Black |
+| `#w#...##` | White |
+
+## Text Effects Reference
+
+| Syntax | Output | Description |
+|--------|--------|--------------|
+| `****text****` | ****text**** | Super bold |
+| `!!text!!` | !!text!! | Underline |
+| `==text==` | ==text== | Highlight |
+| `%%text%%` | %%text%% | Dim text |
+| `++text++` | ++text++ | Large text |
+| `--text--` | --text-- | Small text |
+| `text^script^` | text^script^ | Superscript |
+| `text~script~` | text~script~ | Subscript |
+| `->text<-` | ->text<- | Center align |

.github/skills/markbind-components/SKILL.md

@@ -0,0 +1,96 @@
+---
+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 Components
+
+## Overview
+
+MarkBind provides Vue.js components built on Bootstrap for creating rich, interactive pages. Use components via HTML-like tags in `.md` files.
+
+## Essential Rules
+
+- Prefer MarkBind components over custom HTML/JS when a component already provides the behavior.
+- Keep navigation components (`navbar`, `site-nav`, `page-nav`) aligned with site layout and frontmatter/site config.
+- Use semantic component choices (`box` for callouts, `panel` for collapsible sections, `tabs` for alternatives).
+- Verify component content still reads well in print and search contexts.
+
+## Component Categories
+
+### Presentation Components
+- **Box**: Highlight information with styled containers
+- **Panel**: Flexible collapsible/expandable containers
+- **Tabs**: Organize content into tabbed interfaces
+- **CardStack**: Filterable card grid layouts
+
+### Popup Components
+- **Tooltip**: Brief explanations on hover/focus/click
+- **Popover**: Rich content pop-ups with headers
+- **Modal**: Full-screen overlay dialogs
+- **Trigger**: Activate popups
+
+### Navigation Components
+- **Navbar**: Top navigation bar
+- **Dropdown**: Dropdown menus
+- **Breadcrumb**: Hierarchical navigation path
+- **Site-nav**: Sidebar navigation menu
+- **Page-nav**: Table of contents for current page
+
+### Media Components
+- **Picture**: Images with captions
+- **Thumbnail**: Small visual elements
+- **Tree**: Tree-like visualizations
+- **Annotate**: Interactive annotation points
+- **Badges**: Small status labels
+
+### Interactive Components
+- **Question/Quiz**: Assessment components
+- **Searchbar**: Site search functionality
+
+### Utility Components
+- **Scroll-to-top**: Back to top button
+- **Dark-mode-toggle**: Theme switcher
+
+## Quick Reference
+
+| 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 |
+
+## Component References
+
+### Presentation
+- [reference/boxes.md](reference/boxes.md) - callout boxes, visual emphasis patterns, and attributes for informational/warning/tip content.
+- [reference/panels.md](reference/panels.md) - collapsible/expandable sections for progressive disclosure.
+- [reference/tabs.md](reference/tabs.md) - parallel content variants in tabbed UI.
+- [reference/cardstacks.md](reference/cardstacks.md) - filterable card layouts for grouped content.
+
+### Popups
+- [reference/popups.md](reference/popups.md) - tooltip/popover/modal/trigger behavior and when to use each interaction type.
+
+### Navigation
+- [reference/navigation.md](reference/navigation.md) - navbar, dropdown, breadcrumb, `site-nav`, `page-nav` patterns for page/site navigation.
+
+### Media
+- [reference/media.md](reference/media.md) - media-oriented components (`pic`, thumbnails, tree, annotate, badges) for visual explanation.
+
+### Interactive
+- [reference/interactive.md](reference/interactive.md) - question/quiz/searchbar components for reader interaction and discovery.
+
+### Utility
+- [reference/utility.md](reference/utility.md) - utility components such as scroll-to-top and dark mode toggle.
+
+## User Guide Entry
+
+- <https://markbind.org/userGuide/usingComponents.html>