About

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

Markstream Nuxt

Name: markstream-nuxt
Author: sickn33

Overview

Integrate markstream-vue into Nuxt while keeping hydration, browser-only peers, workers, and streaming behavior on the correct side of SSR boundaries.

When to Use

Use for Nuxt 3 or 4 pages, components, or plugins. Use markstream-vue for non-Nuxt Vue applications and markstream-install when the framework is not yet known.

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 Nuxt 3 or 4 and install only requested peers.
Put browser-only peers behind <ClientOnly>, .client plugins, dynamic imports, or guarded initialization.
Import markstream-vue/index.css explicitly from a client-safe shell or plugin.
Start with content: mode="chat" for AI streams, docs for rich documents, and minimal for lightweight non-chat surfaces.
Keep smooth streaming in auto mode for SSR; do not force true on first-screen server content.
When a chat row completes, keep its mode stable, set final, disable pacing/cursor, and enable fade only if desired.
Keep HTML safe and Mermaid strict. Put optional code, diagram, and worker runtimes behind client boundaries.
Validate build/typecheck, hydration, and one incremental client update.

Example

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

defineProps<{ markdown: string; done: boolean }>()
</script>

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

Limitations

Browser-only peers cannot run during SSR.
Hydration depends on correct host plugin/component boundaries.
This skill does not configure deployment adapters.

Security & Safety Notes

Do not expose trusted HTML or loose Mermaid settings to untrusted model output. Review dependency and runtime-boundary changes.

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-nuxt/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-nuxt.ocm.jsonjson

{
  "ocm": "1",
  "id": "sickn33-agentic-awesome-skills-markstream-nuxt",
  "kind": "skill",
  "name": "markstream-nuxt",
  "description": "Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and browser-only optional peers.",
  "publisher": "sickn33",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "nuxt",
      "vue",
      "ssr",
      "markdown",
      "streaming",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and browser-only optional peers."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/sickn33/agentic-awesome-skills",
      "path": "skills/markstream-nuxt/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/markstream-nuxt/SKILL.md",
      "key": "sickn33/agentic-awesome-skills/skills/markstream-nuxt/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Markstream Nuxt\n\n## Overview\n\nIntegrate `markstream-vue` into Nuxt while keeping hydration, browser-only peers, workers, and streaming behavior on the correct side of SSR boundaries.\n\n## When to Use\n\nUse for Nuxt 3 or 4 pages, components, or plugins. Use `markstream-vue` for non-Nuxt Vue applications and `markstream-install` when the framework is not yet known.\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 Nuxt 3 or 4 and install only requeste",
  "cost": {
    "context_tokens": 521
  }
}

Fetch it by URL: GET /api/v1/registry/sickn33-agentic-awesome-skills-markstream-nuxt/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.