Complete AI Training
Sign inBecome a member

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Skill · 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.

Agentic Awesome SkillsLicense: MITAdded Sep 5, 2026
Use it in my AI

How to use it

  1. Start your plan and connect your AI once
  2. Add the skill to your AI, one time only: press Copy skill and paste it into your AI's instructions: a project in ChatGPT, Claude or Grok, a Gem in Gemini, an agent in Microsoft 365 Copilot, or a rule in Cursor. It stays there for every new chat. In Kimi, paste it at the start of a new chat.
  3. Ask for the task in your own words, or say it directly:
Use the Markstream vue2 cli skill to help me with this.
SKILL.md

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"
  />
</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.