mcpField
M
markstream-vue2-cli

markstream-vue2-cli

github.com/simon-he95開発3.0k47 回インストール2 日前に更新
リポジトリ

markstream-vue2-cli について

Vue CLI または Webpack 4 系ツールを使う Vue 2 プロジェクト向けの Markstream 導入スキルです。レンダラー設定、ストリーミング、Worker、安全な既定値を扱います。

主な機能

  1. 01Vue 2 CLI・Webpack の設定
  2. 02ストリーミングと履歴表示の指針
  3. 03CDN Worker の推奨
  4. 04HTML と Mermaid の安全な既定値

活用シーン

  1. 01Vue 2 Webpack アプリへの Markstream 導入
  2. 02ストリーミングチャット出力の設定
  3. 03CDN 経由での Mermaid・KaTeX Worker 利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/simon-he95/markstream-vue --skill markstream-vue2-cli

インストール後、Claude Code で/markstream-vue2-cliを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

Markstream Vue 2 CLI

ホストアプリが Vue 2 で、Vue CLI またはその他の Webpack 4 形式のスタックを使用している場合に、このスキルを使います。

ワークフロー

  1. リポジトリが Vue 2 と Vue CLI、または Webpack 4 世代のツールを使用していることを確認します。
  2. markstream-vue2 と、必要な機能に必要な peer 依存関係のみをインストールします。
  3. アプリのシェルで markstream-vue2/dist/index.css をインポートします。
  4. Vite 形式の ?worker インポートは避けます。
    • ワーカーが必要な場合は、createKaTeXWorkerFromCDN(...) と createMermaidWorkerFromCDN(...) を使用します。
  5. 壊れやすい配線より、安定したコードブロックのデフォルト設定を優先します。
    • Webpack 4 世代のリポジトリで使えるコードブロックのランタイムは stream-diffs（または通常の <pre>）のみです。Monaco／stream-monaco による代替手段や MarkdownCodeBlockNode はありません。
    • 共通のレンダラー非依存オプション契約には、トップレベルの code-block-options または CodeBlockNode.code-block-options を使用します。ヘッダー／ツールバーの props は code-block-props に保持します。
    • AI チャットやストリーミング UI では、content を維持し、まず組み込みのスムーズストリーミングを使用します。
      • smooth-streaming="auto" がデフォルトで、typewriter=true または max-live-nodes <= 0 の場合に有効になります。
      • typewriter は点滅するカーソルのみを制御し、デフォルトは false です。
      • fade はノードの表示時とストリーミング中のテキストのフェードアニメーションを制御し、デフォルトは true です。
    • ストリーミングと履歴の再表示：チャット UI では、同じ MarkdownRender がストリーミングを開始し、その後 final=true になると履歴表示に切り替わります。
      • ストリーミング：smooth-streaming="auto"、:fade="false"、typewriter=true。これは保守的な視覚・パフォーマンス上の選択であり、API の非互換性によるものではありません。このアダプターでは Vue 3 の上限付き append フェードは採用されていないため、両方を有効にする前にアニメーションの挙動を確認してください。
      • 履歴の再表示：:smooth-streaming="false"、:fade="true"、typewriter=false。コンテンツはすでに完成しているため、表示のペース調整は再生を遅くしますが、フェードによって洗練された表示アニメーションになります。
      • 動的な切り替え：:smooth-streaming="isStreaming ? 'auto' : false"、:fade="!isStreaming"。
    • ワーカーで事前解析したコンテンツ、共有 AST ストア、またはカスタム AST 制御が必要な場合に限り、nodes + final に移行します。
    • html-policy のデフォルトが safe になり、mermaid-props による Mermaid の厳格モードもデフォルトで有効になっている点に注意してください。
  6. 最小限の有用なローカル開発またはビルドコマンドで検証します。

デフォルトの判断

  • コードブロックの拡張は Monaco に依存しなくなりました。ワーカーを多用する設定が必要なのは、Mermaid／KaTeX の CDN ワーカーのみです。
  • Mermaid と KaTeX では、バンドラーのワーカーより CDN ワーカーを優先します。
  • Vue 2.6 のリポジトリでは、Vue 2 composition-api shim を明示的に維持します。
  • 信頼できる従来のレンダリング動作を維持するタスクでない限り、html-policy="safe" と Mermaid の厳格モードを維持します。
  • 信頼できる表示領域で従来の動作が必要な場合は、その表示領域に限って html-policy="trusted" と :mermaid-props="{ isStrict: false }" を使用し、その理由を説明します。

参考になるドキュメント

  • docs/guide/vue2-quick-start.md
  • docs/guide/vue2-installation.md
  • docs/guide/troubleshooting.md

コメント

Markdown 対応