Markstream vue

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/markstream-vue

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-vue

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-vue into plain Vue 3 with renderer modes, code and DOM choices, streaming state, virtualization, optional peers, and scoped components.

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.8 KB, 494 tokens by cl100k_base, as published. Nobody here has run it

Markstream Vue 3

Overview

Configure the Vue 3 renderer beyond generic installation: surface modes, streaming lifecycle, code rendering, long-message virtualization, and scoped overrides.

When to Use

Use for a plain Vue 3 application after the package has been selected. Use markstream-nuxt when SSR-specific Nuxt boundaries matter.

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 3 and not Nuxt. Install only requested peers and import markstream-vue/index.css after resets.
Start with content. Use mode="chat" for AI streams, docs for rich documents, and minimal for lightweight non-chat surfaces.
Choose fenced-code rendering explicitly: pre without a peer, shiki with stream-markdown, or compatibility-named monaco backed by stream-diffs.
For live chat use smooth streaming auto, no fade, and an optional cursor. On completion keep the same mode, set final, and disable pacing/cursor.
Use nodes only for worker parsing or structural AST ownership.
For long transcripts, keep an existing outer message virtualizer in charge. Use Markstream logical height rather than mounted DOM height.
Use scoped component registration and preserve safe HTML and Mermaid strict mode.
Validate the smallest build/typecheck plus one incremental stream and one long-message case.

Example

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'

defineProps<{ content: string; isDone: boolean }>()
</script>

<template>
  <MarkdownRender
    mode="chat"
    :content="content"
    :final="isDone"
    :fade="isDone"
    :typewriter="!isDone"
    :smooth-streaming="isDone ? false : 'auto'"
    html-policy="safe"
  />
</template>

Limitations

Optional peers add bundle and browser-runtime cost.
DOM-minimal mode disables wrapper-dependent features.
Virtualization integration requires stable content and measurement keys.

Security & Safety Notes

Review dependency changes. Never enable trusted HTML or loose Mermaid rendering for untrusted model output.