markstream-install

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Use this skill when the task is "add markstream to an app" or "fix a broken markstream install".

Read references/scenarios.md before making dependency choices.

当任务为“为应用添加markstream”或“修复损坏的markstream安装”时，使用本技能。

在选择依赖前，请阅读references/scenarios.md。

Detect the target framework and CSS stack.
- Check
```
package.json
```
  , app entry files, Tailwind or UnoCSS config, and whether the repo is SSR or streaming-focused.
- Choose the package that matches the host app:
```
markstream-vue
```
  ,
```
markstream-vue2
```
  ,
```
markstream-react
```
  , or
```
markstream-angular
```
  .
Install the smallest peer set that matches the requested features.
- Add peers only for features the user actually needs: Monaco, Mermaid, D2, KaTeX, or Shiki.
- Do not install every optional peer by default.
Fix CSS order.
- Put reset styles before Markstream styles.
- In Tailwind or UnoCSS projects, place
```
markstream-*/index.css
```
  inside
```
@layer components
```
  .
- Import
```
katex/dist/katex.min.css
```
  when math is enabled.
Add the smallest working render example.
- Use
```
content
```
  for static or low-frequency rendering.
- Use
```
nodes
```
  plus
```
final
```
  when the app receives streaming updates.
Keep customization scoped.
- If the task requires overrides, prefer
```
customId
```
  /
```
custom-id
```
  plus scoped
```
setCustomComponents(...)
```
  .
Validate.
- Run the smallest relevant build, typecheck, test, or docs build command.
- Report which peers were installed, where CSS lives, and whether the repo should later adopt
```
nodes
```
  .

检测目标框架与CSS栈。
- 检查
```
package.json
```
  、应用入口文件、Tailwind或UnoCSS配置，以及仓库是否以SSR或流式渲染为重点。
- 选择与宿主应用匹配的包：
```
markstream-vue
```
  、
```
markstream-vue2
```
  、
```
markstream-react
```
  或
```
markstream-angular
```
  。
安装与所需功能匹配的最小化peer依赖集。
- 仅添加用户实际需要的功能对应的peer依赖：Monaco、Mermaid、D2、KaTeX或Shiki。
- 默认不要安装所有可选peer依赖。
修复CSS顺序。
- 将重置样式放在Markstream样式之前。
- 在Tailwind或UnoCSS项目中，将
```
markstream-*/index.css
```
  放在
```
@layer components
```
  内。
- 当启用数学公式功能时，导入
```
katex/dist/katex.min.css
```
  。
添加最简可用的渲染示例。
- 对于静态或低频率渲染场景，使用
```
content
```
  。
- 当应用接收流式更新时，使用
```
nodes
```
  搭配
```
final
```
  。
保持定制化范围可控。
- 如果任务需要覆盖默认配置，优先使用
```
customId
```
  /
```
custom-id
```
  搭配作用域化的
```
setCustomComponents(...)
```
  。
验证。
- 运行最相关的最小化构建、类型检查、测试或文档构建命令。
- 报告已安装的peer依赖、CSS文件位置，以及仓库后续是否应采用
```
nodes
```
  方案。

Prefer the minimal peer set over "install everything".
Prefer
```
content
```
unless the app is clearly SSE, chat, token-streaming, or worker-preparsed.
Treat CSS order as a first-class part of installation, not a later cleanup.
When the request includes SSR, explicitly gate browser-only peers behind client-only boundaries.