markstream-vue2-cli – Coding skill for AI agents
Integrate markstream-vue2 into Vue CLI or Webpack 4 with export-map-safe CSS, CDN worker fallbacks, and conservative code-block defaults.
Install the markstream-vue2-cli skill with one command
Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/markstream-vue2-cli-902db.tgz | tar xz -C ~/.claude/skills
Call it in Claude Code: /markstream-vue2-cli – then describe the task you want done.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/markstream-vue2-cli-902db.tgz | tar xz -C ~/.codex/skills
Call it in Codex: $markstream-vue2-cli – then describe the task you want done.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/markstream-vue2-cli-902db.tgz | tar xz -C ~/.hermes/skills
Call it in Hermes Agent: /markstream-vue2-cli – then describe the task you want done.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/markstream-vue2-cli-902db.tgz | tar xz -C ~/.deepcode/skills
Call it in DeepSeek: /markstream-vue2-cli – then describe the task you want done.
SKILL.md content
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
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 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"
/>
</template>Limitations
- CDN workers require network access and compatible content-security policy.
- Monaco-style worker setups are intentionally not covered.
- Vue 2.6 may also require
@vue/composition-api.
Security & Safety Notes
Do not introduce CDN workers without reviewing CSP, network policy, and dependency trust. Preserve safe rendering defaults.
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.
Related skills
- mason – Produces clean, functional code that matches the architecture and checklists.
- matematico-tao – Analyze code complexity, dependency graphs, concurrency and invariants using explicit…
- matplotlib – Matplotlib is Python's foundational visualization library for creating static, animated…
- mcp-tool-developer – Build Model Context Protocol (MCP) servers and tools from scratch. Full-stack MCP…
- mmx-cli – Use mmx to generate text, images, video, speech, and music via the MiniMax AI platform…
- mobile-developer – Develop React Native, Flutter, or native mobile apps with modern architecture patterns…
- mobile-friendly-test – Mobile-Friendly Test. Use when working with accessible page or supplied screenshots and…
- modellix – Integrate the Modellix API/CLI for async AI image, video, and speech generation or…