Markstream angular

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/markstream-angular

AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 1,987+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.

Install

npx -y skills add sickn33/agentic-awesome-skills --skill markstream-angular

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Integrate the alpha markstream-angular renderer into Angular 20+ applications with standalone components, signals, safe HTML defaults, and optional peer features.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.1 KB, 543 tokens by cl100k_base, as published. Nobody here has run it

Markstream Angular

Overview

Add Markstream to Angular 20+ while preserving standalone-component patterns, signal-friendly bindings, safe rendering defaults, and explicit optional dependencies. Use markstream-install for framework selection; use this skill once Angular is confirmed.

When to Use

Use for Angular-specific standalone imports, CSS, signals, custom tags or components, streaming state, and optional peers. Do not use below Angular 20 or when the application cannot accept an alpha renderer API.

Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

Confirm Angular 20+ and record that markstream-angular is alpha.
Install the package plus only requested peers. Import markstream-angular/index.css; add KaTeX CSS only for math.
Import MarkstreamAngularComponent into the standalone component's imports.
Start with [content] and [smoothStreaming]="'auto'". Use nodes plus final only when another layer owns the AST.
For live chat use [fade]="false" and opt into [typewriter]="true". On completion set [final]="true", disable pacing/cursor, and enable fade only if desired.
Use [customHtmlTags] and [customComponents] only for trusted tag workflows.
Keep [htmlPolicy]="'safe'" and Mermaid strict mode unless a narrowly scoped trusted legacy surface requires otherwise.
Validate with the smallest Angular build, typecheck, or dev command.

Example

import { Component, signal } from '@angular/core'
import { MarkstreamAngularComponent } from 'markstream-angular'
import 'markstream-angular/index.css'

@Component({
  selector: 'app-answer',
  standalone: true,
  imports: [MarkstreamAngularComponent],
  template: `
    <markstream-angular
      [content]="markdown()"
      [final]="done()"
      [fade]="done()"
      [typewriter]="!done()"
      [smoothStreaming]="done() ? false : 'auto'"
      [htmlPolicy]="'safe'"
    />
  `,
})
export class AnswerComponent {
  markdown = signal('# Streaming answer')
  done = signal(false)
}

Limitations

Requires Angular 20+ and an alpha package.
Browser-heavy peers may need bundler or client-boundary work.
This skill does not design the host chat architecture or visual system.

Security & Safety Notes

Review dependency changes before installation. Never broaden HTML or Mermaid trust settings for untrusted model output.