Complete AI TrainingYourJobSkills for your job

Skills / frontend

markstream-vue2-cli

Integrate markstream-vue2 into Vue CLI or Webpack 4 with export-map-safe CSS, CDN worker fallbacks, and conservative code-block defaults.

IT & Software Developmentmarkdownvue-clivue2webpack4workers

Markstream Vue 2 CLI

Overview

Handle Vue CLI and Webpack 4 constraints that differ materially from modern Vue 2/Vite setup.

When to Use

Use when Vue 2 runs on Vue CLI or Webpack 4 and package export maps or Vite worker imports are unavailable.

Workflow

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

  1. Confirm Vue 2 plus Vue CLI/Webpack 4.
  2. Install markstream-vue2 and only requested peers.
  3. Import markstream-vue2/dist/index.css, because legacy tooling may not understand the CSS export map.
  4. Avoid ?worker imports. Use Markstream CDN worker helpers for KaTeX or Mermaid only when needed.
  5. Prefer stream-markdown code blocks over fragile Monaco worker wiring.
  6. Keep content with smooth streaming for chat; set final and disable pacing/cursor for completed history.
  7. Keep HTML safe and Mermaid strict; validate the actual legacy build.

Example

<script>
import MarkdownRender from 'markstream-vue2'
// Legacy Webpack may not resolve the package CSS export map.
import 'markstream-vue2/dist/index.css'

export default {
  components: { MarkdownRender },
  data: () => ({ content: '# Answer', done: false }),
}
</script>

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

Subscribers only

The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.

Details

SourceSimon-He95/markstream-vue
LicenseMIT
Risk labelcritical ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md
Added2026-07-21

Related skills

anti-ui-slop

Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.

astro

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

chat-widget

Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.

chrome-extension-developer

Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.

design-it

Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.

design-taste-frontend

Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.