About

Imported from sickn33/agentic-awesome-skills (skills/markstream-vue/SKILL.md). Install upstream with npx skills add sickn33/agentic-awesome-skills --skill markstream-vue. Copyright stays with the author (MIT).

Markstream Vue 3

Name: markstream-vue
Author: sickn33

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/sickn33-agentic-awesome-skills-markstream-vue/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

sickn33-agentic-awesome-skills-markstream-vue.ocm.jsonjson

{
  "ocm": "1",
  "id": "sickn33-agentic-awesome-skills-markstream-vue",
  "kind": "skill",
  "name": "markstream-vue",
  "description": "Integrate markstream-vue into plain Vue 3 with renderer modes, code and DOM choices, streaming state, virtualization, optional peers, and scoped components.",
  "publisher": "sickn33",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "vue",
      "markdown",
      "streaming",
      "virtualization",
      "ai-chat",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Integrate markstream-vue into plain Vue 3 with renderer modes, code and DOM choices, streaming state, virtualization, optional peers, and scoped components."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/sickn33/agentic-awesome-skills",
      "path": "skills/markstream-vue/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/markstream-vue/SKILL.md",
      "key": "sickn33/agentic-awesome-skills/skills/markstream-vue/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Markstream Vue 3\n\n## Overview\n\nConfigure the Vue 3 renderer beyond generic installation: surface modes, streaming lifecycle, code rendering, long-message virtualization, and scoped overrides.\n\n## When to Use\n\nUse for a plain Vue 3 application after the package has been selected. Use `markstream-nuxt` when SSR-specific Nuxt boundaries matter.\n\n## Workflow\n\nBefore changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.\n\n1. Confirm Vue 3 and not Nuxt. Install only requested peers and impo",
  "cost": {
    "context_tokens": 557
  }
}

Fetch it by URL: GET /api/v1/registry/sickn33-agentic-awesome-skills-markstream-vue/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.