Markstream vue2 vite

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/markstream-vue2-vite

AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 1,987+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.

Install

npx -y skills add sickn33/agentic-awesome-skills --skill markstream-vue2-vite

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.2 KB, 393 tokens by cl100k_base, as published. Nobody here has run it

Markstream Vue 2 Vite

Overview

Use Vite-native worker bundling while preserving Vue 2 compatibility and rendering safety.

When to Use

Use when the host is Vue 2 with Vite and needs bundled Mermaid or KaTeX workers. Use the generic Vue 2 skill when worker/bundler behavior is irrelevant.

Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

Confirm Vue 2 with Vite and install only requested peers.
Import markstream-vue2/index.css after reset, Tailwind, or UnoCSS layers.
Use package worker entrypoints with Vite ?worker or ?worker&inline imports only when needed.
Add @vue/composition-api only for Vue 2.6 code requiring it.
Keep content with smooth streaming for chat; set final and disable pacing/cursor for history.
Use nodes only for externally owned parsing. Keep HTML safe and Mermaid strict.
Validate the Vite build and worker loading path.

Example

<script>
import MarkdownRender from 'markstream-vue2'
import 'markstream-vue2/index.css'

export default {
  components: { MarkdownRender },
  props: { content: String, done: Boolean },
}
</script>

<template>
  <MarkdownRender
    :content="content"
    :final="done"
    :fade="done"
  />
</template>

Limitations

Vite worker syntax is not portable to Vue CLI/Webpack 4.
Inline workers can increase bundle size.
Optional peers may impose additional browser requirements.

Security & Safety Notes

Review worker source, CSP, dependency changes, and bundle impact. Do not relax safe rendering defaults.