Markstream Angular

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.

3,046 stars 188 forksFrontend & Design

Install

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

npx skills add Simon-He95/markstream-vue --skill markstream-angular

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-angular ~/.claude/skills/markstream-angular

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 Angular

Use this skill when the host app is Angular and the task is to adopt the Angular package cleanly.

## Workflow

1. Confirm the repo is Angular 20 or newer and accepts an alpha renderer API.
2. Install `markstream-angular` plus only the requested optional peers.
3. Import `markstream-angular/index.css` from the app shell.
   - Add `katex/dist/katex.min.css` when math is enabled.
4. Prefer standalone Angular integration.
   - Use `MarkstreamAngularComponent` in `imports` and keep examples signal-friendly.
5. Start with `[content]`.
   - For streaming AI chat, keep `[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`.
   - **Streaming vs recovering history**: in chat UIs the same component starts streaming and later switches to history when `[final]="true"`.
     - Streaming: `[smoothStreaming]="'auto'"`, `[fade]="false"`, `[typewriter]="true"`. This is a conservative visual/performance choice, not an API incompatibility. This adapter has not adopted Vue 3's bounded append fades, so verify its animation behavior before enabling both.

Read the full skill on GitHub

Details

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

FAQ

What does the Markstream Angular skill do?

How do I install the Markstream Angular skill?

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

Is Markstream Angular 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 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 Migration

Simon-He95/markstream-vue

Audit and migrate existing Markdown rendering to Markstream, or upgrade a markstream-vue 1.x integration to 2.x. Use when Codex needs to replace another renderer, classify direct vs custom vs plugin-heavy adoption, preserve behavior during adoption, migrate custom renderers into scoped Markstream overrides, decide when `nodes` streaming is worth adopting, or replace removed 1.x code-block dependencies, APIs, preview payloads, and parser types.

Software DevelopmentIn 2 lists188

React Native Best Practices

1.7k

callstackincubator/agent-skills

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

Frontend & DesignIn 1 list117

Oil UI

2.5k

oil-oil/oil-ui

设计、改进和评审网站、App、后台与组件的界面：探索设计方向、生成多风格同屏对比页，并基于真实截图打磨视觉层级；按请求交付对比页、设计说明、设计稿或可运行界面。只负责设计判断，不用于纯业务逻辑、接口构建、无界面变化的代码整理，或改法已完全明确的日常修改（如改文案、调数量、删指定元素、复用现有样式，哪怕带有“优化”字样）。已安装 oil-ui-pro 时交给 oil-ui-pro。

Frontend & DesignIn 1 list142

Markstream Nuxt

Simon-He95/markstream-vue

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, renderer `mode` selection, or a safe `MarkdownRender` integration inside pages, components, or Nuxt plugins.

Frontend & DesignIn 2 lists188

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