🎨 Markstream Angular
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 int
About Markstream Angular
Use this skill when the host app is Angular and the task is to adopt the Angular package cleanly.
Its 351-word system prompt specializes your agent in frontend development with structured methodology and proven output formats. Copy the prompt below to use in any AI coding agent.
Key Capabilities
- Add `katex/dist/katex.min.css` when math is enabled.
- Use `MarkstreamAngularComponent` in `imports` and keep examples signal-friendly.
- 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`.
What This Skill Covers
- Workflow
- Default Decisions
- Useful Doc Targets
How It Works
- Confirm the repo is Angular.
- Install `markstream-angular` plus only the requested optional peers.
- Import `markstream-angular/index.css` from the app shell.
- Prefer standalone Angular integration.
- Start with `[content]`.
Use Cases
- Building responsive UI components and layouts
- Implementing accessible, WCAG-compliant interfaces
- Debugging CSS, animations, and cross-browser issues
- Integrating design systems and component libraries
Example Prompts
System Prompt (351 words)
Markstream Angular
Use this skill when the host app is Angular and the task is to adopt the Angular package cleanly.
Workflow
- Confirm the repo is Angular.
- Install
markstream-angularplus only the requested optional peers. - Import
markstream-angular/index.cssfrom the app shell.
katex/dist/katex.min.css when math is enabled.
- Prefer standalone Angular integration.
MarkstreamAngularComponent in imports and keep examples signal-friendly.
- Start with
[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.
- 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". Smooth pacing handles gradual appearance; fade would flicker.
- Recovering history: [smoothStreaming]="false", [fade]="true", [typewriter]="false". Content is already complete — pacing would slow it down, but fade gives a polished entry animation.
- Dynamic switch: [smoothStreaming]="isStreaming ? 'auto' : false", [fade]="!isStreaming".
- Use [final] for end-of-stream state; final parsing is gated until visible content catches up when smooth streaming is active.
- Move to nodes + final only for worker-preparsed content, shared AST stores, or custom AST control.
- Remember that [htmlPolicy] now defaults to 'safe', and Mermaid strict mode is on by default through [mermaidProps].
- Use
[customHtmlTags]and[customComponents]for trusted tag workflows. - Validate with the smallest useful Angular dev or build command.
Default Decisions
- Standalone Angular first, NgModule-era patterns only when the repo still depends on them.
- Treat the cursor as opt-in (
typewriter=falseby default), but keep fade animations enabled by default (fade=true). - Keep optional peers minimal and explicit.
- Keep
[htmlPolicy]="'safe'"and Mermaid strict mode unless the task is preserving trusted legacy rendering. - If a trusted surface needs broader old behavior, opt out locally with
[htmlPolicy]="'trusted'"and[mermaidProps]="{ isStrict: false }", and document that trust boundary.
Useful Doc Targets
docs/guide/angular-quick-start.mddocs/guide/angular-installation.mddocs/guide/playground.mddocs/guide/troubleshooting.md
Frequently Asked Questions
What is Markstream Angular?
Markstream Angular is a free frontend development skill for AI coding agents. 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 int. It provides a specialized system prompt that configures your agent with frontend development expertise.
How do I use Markstream Angular with Claude Code?
Copy the system prompt below and paste it into your CLAUDE.md file or Claude Code's custom instructions to activate Markstream Angular.
Which AI coding agents work with Markstream Angular?
Markstream Angular is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Markstream Angular free to use?
Yes, Markstream Angular is completely free and open source. The full source is available on GitHub at https://github.com/Simon-He95/markstream-vue/blob/main/.agents/skills/markstream-angular/SKILL.md. You only need a subscription to the AI agent you use it with.
