Markstream Vue2 CLI

Integrate markstream-vue2 into a Vue 2 Vue CLI or Webpack 4 app. Use when Codex needs Webpack 4-friendly setup, CDN worker fallbacks for Mermaid or KaTeX, `dist/index.css` imports, Vue 2 composition-api shims, or code block choices limited to `stream-diffs` or plain `<pre>`.

3,046 stars 188 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Simon-He95/markstream-vue --skill markstream-vue2-cli

Manual install

git clone --depth 1 https://github.com/Simon-He95/markstream-vue.git /tmp/markstream-vue
mkdir -p ~/.claude/skills
cp -r /tmp/markstream-vue/.agents/skills/markstream-vue2-cli ~/.claude/skills/markstream-vue2-cli

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Markstream Vue 2 CLI

Use this skill when the host app is Vue 2 on Vue CLI or another Webpack 4-style stack.

## Workflow

1. Confirm the repo uses Vue 2 plus Vue CLI or Webpack 4-era tooling.
2. Install `markstream-vue2` and only the peers required for the requested features.
3. Import `markstream-vue2/dist/index.css` in the app shell.
4. Avoid Vite-style `?worker` imports.
   - Use `createKaTeXWorkerFromCDN(...)` and `createMermaidWorkerFromCDN(...)` when workers are needed.
5. Prefer stable code block defaults over brittle wiring.
   - In Webpack 4-era repos, `stream-diffs` (or plain `<pre>`) is the only code block runtime — there is no Monaco/`stream-monaco` fallback and no `MarkdownCodeBlockNode`.
   - Use top-level `code-block-options` or direct `CodeBlockNode.code-block-options` for the shared renderer-neutral option contract. Keep header/toolbar props in `code-block-props`.
   - For AI chat or streaming UIs, keep `content` and use built-in smooth streaming first.
     - `smooth-streaming="auto"` is the default and activates when `typewriter=true` or `max-live-nodes <= 0`.
     - `typewriter` only controls the blinking cursor and defaults to `false`.
     - `fade` controls node enter and streamed-text fade animations and defaults to `true`.
   - **Streaming vs recovering history**: in chat UIs the same `MarkdownRender` starts streaming and later switches to history when `final=true`.

Read the full skill on GitHub

Details

Skill name: markstream-vue2-cli
Repository: Simon-He95/markstream-vue
Path: .agents/skills/markstream-vue2-cli/SKILL.md
License: MIT
Repo updated: 31 October 2026
Listed in: heilcheng/awesome-agent-skills, VoltAgent/awesome-agent-skills

FAQ

What does the Markstream Vue2 CLI skill do?

How do I install the Markstream Vue2 CLI skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Simon-He95/markstream-vue --skill markstream-vue2-cli. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Markstream Vue2 CLI popular?

It lives in Simon-He95/markstream-vue, which has 3,046 GitHub stars and 188 forks, and is included in 2 curated skill lists.

Related skills

Markstream Angular

Simon-He95/markstream-vue

Integrate the alpha markstream-angular package into an Angular 20+ app. Use when Codex needs standalone component imports, signal-based examples, CSS wiring, custom HTML tags or customComponents setup, or optional peer integration in an Angular repository.

Frontend & DesignIn 2 lists188

Markstream Custom Components

Simon-He95/markstream-vue

Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Solid, Svelte, and Angular. Use when Codex needs scoped `setCustomComponents`, renderer-local React `streamingComponents` or `htmlComponents`, Angular/Svelte `customComponents`, Vue app-scoped components, node override keys such as `image`, `code_block`, `mermaid`, or `link`, or nested renderers for tags such as `thinking`.

Frontend & DesignIn 2 lists188

Markstream Install

Simon-He95/markstream-vue

Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, markstream-svelte, or markstream-solid into an existing repository. Use when Codex needs to choose the right package, install the smallest framework-specific peer-dependency set, fix CSS/reset order, choose Vue 3 renderer mode and built-in, plain, or custom code-block paths, decide between `content`, `nodes`, and Vue 3 virtual-scroll coordination, or add a minimal working renderer example.

Frontend & DesignIn 2 lists188

Markstream Vue2 Vite

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compatibility in a Vite-based repository.

Frontend & DesignIn 2 lists188

Markstream Vue2

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2.6 or 2.7 app. Use when Codex needs Vue 2-compatible setup, `@vue/composition-api` decisions, CSS wiring, optional peer setup, or scoped Markstream overrides in a Vue 2 repository that is not specifically Vue CLI / Webpack 4 constrained.

Frontend & DesignIn 2 lists188

Oil Motion

2.7k

oil-oil/oil-motion

把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。

Frontend & Design201

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.