// Integrate markstream-angular into an Angular 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.
| name | markstream-angular |
| description | Integrate markstream-angular into an Angular 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. |
Use this skill when the host app is Angular and the task is to adopt the Angular package cleanly.
markstream-angular plus only the requested optional peers.markstream-angular/index.css from the app shell.
katex/dist/katex.min.css when math is enabled.MarkstreamAngularComponent in imports and keep examples signal-friendly.[content].
[content] and use built-in smooth streaming first.
[smoothStreaming]="'auto'" is the default and activates when [typewriter]="true" or [maxLiveNodes]="0".[typewriter] only controls the blinking cursor and defaults to false.[fade] controls node enter and streamed-text fade animations and defaults to true.[final]="true".
[smoothStreaming]="'auto'", [fade]="false", [typewriter]="true". Smooth pacing handles gradual appearance; fade would flicker.[smoothStreaming]="false", [fade]="true", [typewriter]="false". Content is already complete — pacing would slow it down, but fade gives a polished entry animation.[smoothStreaming]="isStreaming ? 'auto' : false", [fade]="!isStreaming".[final] for end-of-stream state; final parsing is gated until visible content catches up when smooth streaming is active.nodes + final only for worker-preparsed content, shared AST stores, or custom AST control.[htmlPolicy] now defaults to 'safe', and Mermaid strict mode is on by default through [mermaidProps].[customHtmlTags] and [customComponents] for trusted tag workflows.typewriter=false by default), but keep fade animations enabled by default (fade=true).[htmlPolicy]="'safe'" and Mermaid strict mode unless the task is preserving trusted legacy rendering.[htmlPolicy]="'trusted'" and [mermaidProps]="{ isStrict: false }", and document that trust boundary.docs/guide/angular-quick-start.mddocs/guide/angular-installation.mddocs/guide/playground.mddocs/guide/troubleshooting.mdInstall and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, or markstream-svelte into an existing repository. Use when Codex needs to choose the right package, install the smallest peer-dependency set, fix CSS/reset order, decide between `content` and `nodes`, or add a minimal working renderer example.
Audit and migrate existing Markdown rendering to Markstream. Use when Codex needs to replace another renderer, classify direct vs custom vs plugin-heavy usage, preserve behavior during adoption, migrate custom renderers into scoped Markstream overrides, or decide when `nodes` streaming is worth adopting.
Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, or a safe `MarkdownRender` integration inside pages, components, or Nuxt plugins.
Integrate markstream-react into a React 18+ or Next app. Use when Codex needs to add the React renderer, import CSS correctly, choose between `content` and `nodes`, keep Next client boundaries safe, convert renderer overrides, or prepare a repo for `react-markdown` migration.
Integrate markstream-svelte in Svelte 5 apps. Svelte 4 unsupported.
Integrate markstream-vue into a Vue 3 app. Use when Codex needs to add the Vue 3 renderer, import CSS in the right order, choose between `content` and `nodes`, enable optional peers like Mermaid, KaTeX, D2, Monaco, or stream-markdown, or wire scoped custom components in a non-Nuxt Vue repository.