markstream-vue2 – skill Thiết kế & UI cho agent AI

Markstream Vue 2

Overview

Handle Vue 2.6/2.7 compatibility decisions that the generic installer cannot resolve safely.

When to Use

Use for Vue 2 integration when no bundler-specific edge case dominates. Use markstream-vue2-cli for Vue CLI/Webpack 4 and markstream-vue2-vite for Vite worker imports.

Workflow

Inspect the existing package manager, installed package version and project conventions. A requested scoped integration already authorizes routine source/dependency edits; seek approval only for a material scope expansion or unresolved beta/alpha adoption decision.

1. Confirm Vue 2.6 or 2.7 and install markstream-vue2.

2. Add @vue/composition-api only for Vue 2.6 code that uses Composition API patterns; Vue 2.7 has built-in support.

3. Import markstream-vue2/index.css after resets.

4. Start with <MarkdownRender :content="markdown" /> and smooth streaming auto.

5. For live chat disable fade and opt into the cursor; on completion set final, disable pacing/cursor, and enable fade only if desired.

6. Use nodes only when another layer owns parsing. Use scoped mappings for overrides.

7. Keep HTML safe and Mermaid strict; validate with the smallest build or dev command.

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"
    :typewriter="!done"
  />
</template>

Limitations

• Vue 2.6 and 2.7 have different Composition API requirements.
• Legacy bundlers require the dedicated specializations.
• Optional modern peers may not support every Vue 2 toolchain.

Security & Safety Notes

Review dependency and compatibility changes. Do not relax rendering safety for untrusted content.

Verify props, export paths and peer ranges against the installed package, not a mutable upstream main. Test partial and completed streams, malformed/untrusted Markdown, links and image URLs, cancellation and reduced motion. Safe HTML and strict diagrams reduce exposure but do not alone enforce URL/network privacy or application component permissions.

Vue 2 is end-of-life; preserve a requested legacy integration and document its maintenance/support decision rather than silently upgrading the whole application. Prefer reviewed locally bundled workers over mutable CDN code where feasible.