New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Markstream Install

by github in github/awesome-copilot

Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications.

OfficialMITAuto-check passedFrontend & Design

Install Markstream Install

skills CLI
$ npx skills add github/awesome-copilot --skill markstream-install -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install github/awesome-copilot markstream-install --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/markstream-install .claude/skills/markstream-install && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
markstream-install
GitHub stars
40k
Token cost
~1.5k tokens
SKILL.md length
586 words
Files
2 (incl. references)
Skills in repo
417
Repo updated
First seen
Licence
MIT

At a glance

Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications.

  • Works in 7 steps: Inspect the host application → Install the smallest dependency set → Wire styles in the correct order → …
  • Package selection
  • SKILL.md covers When to Use, Workflow and Official References
  • Calls npm

What it does

Markstream Install is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package selection, minimal peer dependencies, CSS order, SSR boundaries, streaming mode, and renderer setup.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/scenarios.md`). Compatibility notes: JavaScript or TypeScript frontend project using Vue 3, Nuxt 3/4, Vue 2.6/2.7, React 18+, Next.js, Angular 20+, or Svelte 5.

It sits in Frontend & Design. It works with Vue.js, Angular, React and Svelte. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.

When your agent uses it

  • Package selection
  • Minimal peer dependencies

Example prompts

  • “/markstream-install”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): JavaScript or TypeScript frontend project using Vue 3, Nuxt 3/4, Vue 2.6/2.7, React 18+, Next.js, Angular 20+, or Svelte 5.

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Inspect the host application
  2. Install the smallest dependency set
  3. Wire styles in the correct order
  4. Add the smallest working renderer
  5. Handle framework-specific boundaries
  6. Preserve safe defaults
  7. Validate

What it can do on your machine

Read from SKILL.md and the folder at commit 727ff2e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • markstream.simonhe.me
    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    JavaScript or TypeScript frontend project using Vue 3, Nuxt 3/4, Vue 2.6/2.7, React 18+, Next.js, Angular 20+, or Svelte 5.

    From compatibility in the SKILL.md frontmatter.

Context cost

Markstream Install loads about 1.5k tokens when it runs, and up to ~2.1k if it reads all its reference files. Until then it costs about 65 tokens; SKILL.md has 586 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~65
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from github/awesome-copilot at commit 727ff2e, republished under its MIT licence (© github). 586 words, ~1,457 tokens.

Download SKILL.mdSave it as .claude/skills/markstream-install/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
markstream-install
description
Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package selection, minimal peer dependencies, CSS order, SSR boundaries, streaming mode, and renderer setup.
compatibility
JavaScript or TypeScript frontend project using Vue 3, Nuxt 3/4, Vue 2.6/2.7, React 18+, Next.js, Angular 20+, or Svelte 5.
license
MIT
metadata.source
https://github.com/Simon-He95/markstream-vue
metadata.documentation
https://markstream.simonhe.me/

Markstream Install

Integrate the appropriate Markstream package into an existing application without installing unnecessary optional dependencies or weakening its security defaults.

Read references/scenarios.md before choosing packages or peers.

When to Use

Use this skill when the user asks to:

  • add streaming Markdown rendering to an AI chat or document interface;
  • install Markstream in Vue, Nuxt, React, Next.js, Svelte, Angular, or Vue 2;
  • repair a broken Markstream installation, missing styles, or SSR failure;
  • replace another Markdown renderer with Markstream;
  • choose between static, smooth-streaming, and externally parsed AST input.

Workflow

1. Inspect the host application

Before changing dependencies, inspect:

  • the framework and version in package.json;
  • the package manager lockfile;
  • whether the application uses SSR;
  • reset, Tailwind, UnoCSS, or design-system styles;
  • required optional features: code highlighting, enhanced File/Diff surfaces, Monaco, Mermaid, D2, infographic blocks, or KaTeX.

Do not assume the Vue package is correct merely because the source repository is named markstream-vue. Select the framework-specific package from the scenario table.

2. Install the smallest dependency set

Install exactly one framework package. Add optional peers only when the requested UI uses their feature.

Examples:

bash
npm install markstream-vue
npm install markstream-react
npm install markstream-svelte
npm install markstream-angular
npm install markstream-vue2

Preserve the repository's existing package manager. Do not install every optional peer preemptively.

3. Wire styles in the correct order

Import application resets before Markstream styles. Import package CSS explicitly; do not rely on component imports to inject it.

For Tailwind or UnoCSS, use the relevant package subpath in a component layer:

css
@import 'markstream-vue/index.css' layer(components);

Use the matching package name for React, Svelte, Angular, or Vue 2. If math rendering is enabled, also import:

css
@import 'katex/dist/katex.min.css';

Vue CLI 4 and other Webpack 4-based Vue 2 applications cannot resolve package export maps. In those projects, import the published file directly:

ts
import 'markstream-vue2/dist/index.css'
4. Add the smallest working renderer

Prefer content for static documents and most streaming chat interfaces. Markstream's built-in smooth streaming can pace irregular token delivery without requiring the host to maintain an AST.

For Vue 3 chat surfaces, start with:

vue
<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="false"
  smooth-streaming="auto"
  :fade="false"
  typewriter
/>

For completed chat history, keep the same renderer mode and switch pacing off:

vue
<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="true"
  :smooth-streaming="false"
  :fade="true"
  :typewriter="false"
/>

In React, Svelte, and Angular, use the equivalent camelCase or framework binding syntax. Keep smoothStreaming="auto", fade=false, and typewriter=true while streaming; use smoothStreaming=false and typewriter=false for completed history.

Use nodes plus final only when a worker, shared AST store, custom transform, or another application layer already owns parsing.

Show full SKILL.md (212 more words)Show less
5. Handle framework-specific boundaries
  • In Nuxt, keep browser-only optional peers behind client boundaries.
  • In Next.js, use the root markstream-react entry inside a 'use client' component for live SSE or WebSocket streams. Use markstream-react/next for SSR-first HTML with hydration, or markstream-react/server for server-only rendering.
  • Use markstream-svelte only with Svelte 5.
  • Confirm the Angular application meets the current markstream-angular version requirement.
  • In Vue 3, use mode="chat" for AI chat, mode="docs" for rich documents, and mode="minimal" for lightweight non-chat surfaces.
  • For long Vue 3 conversations or an existing message virtualizer, consult the Markstream performance guide before adding a second virtualizer.
6. Preserve safe defaults

HTML policy defaults to safe, and Mermaid uses strict mode. Do not broaden either setting unless the user explicitly identifies a trusted legacy surface that requires it. Scope any exception to that surface.

7. Validate

Run the smallest relevant build, typecheck, or test command. Confirm:

  1. the selected package matches the framework;
  2. only requested optional peers were added;
  3. styles load after resets;
  4. SSR pages do not evaluate browser-only peers on the server;
  5. static content and at least one incremental update render correctly.

Report the selected package, added peers, CSS location, streaming input choice, and validation command.

Official References

© github, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in skills/markstream-install of github/awesome-copilot.

  • SKILL.md
  • references/scenarios.md

Open the folder on GitHubat commit 727ff2e

Compare with similar skills

Markstream Install next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Markstream Install compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Markstream Install this skillgithub/awesome-copilot40k—~1.5kAutomated safety check: PassMIT
Solar Iconssaoudi-h/solar-icons182—~2.1kAutomated safety check: PassMIT
Markstream Installsickn33/agentic-awesome-skills47k1 repos~2kAutomated safety check: PassMIT
Boneyard0xGF/boneyard7.5k—~2.2kAutomated safety check: NotesMIT
Markstream InstallSimon-He95/markstream-vue3k—~2.2kAutomated safety check: PassMIT
Frontend UI Foundryjiushiwon/wg-skills110—~1.4kAutomated safety check: PassApache-2.0

Similar skills

  • Solar Icons

    saoudi-h/solar-icons

    Add Solar Icons via @solar-icons/cli to any React, Vue, Svelte, Solid, Angular, React Native, Nuxt, Static, vanilla JS, or Laravel Blade project.

    182 GitHub stars~2.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Markstream Install

    sickn33/agentic-awesome-skills

    Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, Next.js, and Vue 2 applications.

    47k GitHub starsUsed in 1 repo~2k tokens
    Frontend & DesignAuto-check passed

  • Boneyard

    0xGF/boneyard

    Use boneyard-js to add, configure, debug, or rebuild skeleton screens.

    7.5k GitHub stars~2.2k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: notes

  • Markstream Install

    Simon-He95/markstream-vue

    Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, or markstream-svelte into an existing repository.

    3k GitHub stars~2.2k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Frontend UI Foundry

    jiushiwon/wg-skills

    A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…

    110 GitHub stars~1.4k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Kb Web Scanning

    Community-Access/accessibility-agents

    Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

    421 GitHub stars~1.2k tokensUpdated 14 days ago
    Frontend & DesignAuto-check passed

More from github/awesome-copilot

All 417 skills in this repo

  • Acquire Codebase Knowledge

    github/awesome-copilot

    Official

    Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.

    40k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed

  • Azure Architecture Autopilot

    github/awesome-copilot

    Official

    Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.

    40k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Draw.io Diagram Generator

    github/awesome-copilot

    Official

    Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.

    40k GitHub starsUsed in 1 repo~4.9k tokens
    Auto-check passed

  • Credit Risk Data Cleaning

    github/awesome-copilot

    Official

    Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.

    40k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • Daily Focus Board

    github/awesome-copilot

    Official

    Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Python Pypi Package Builder

    github/awesome-copilot

    Official

    End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.

    40k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Categories

Questions about Markstream Install

What does Markstream Install do?

Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Markstream Install is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications.

When should I use Markstream Install?

Markstream Install fits situations like: package selection; minimal peer dependencies.

How do I install Markstream Install in Claude Code?

Run `npx skills add github/awesome-copilot --skill markstream-install -a claude-code`. Or copy the skill folder (skills/markstream-install in github/awesome-copilot) into .claude/skills/markstream-install in your project. Claude Code loads it when a task matches its description.

How do I install Markstream Install in Codex?

Run `npx skills add github/awesome-copilot --skill markstream-install -a codex`. Or copy the skill folder (skills/markstream-install in github/awesome-copilot) into .agents/skills/markstream-install in your project. Codex loads it when a task matches its description.

Can I use Markstream Install in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add github/awesome-copilot --skill markstream-install -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/markstream-install, .gemini/skills/markstream-install, .github/skills/markstream-install and .opencode/skills/markstream-install in your project.

What does Markstream Install need to run?

Going by SKILL.md and its folder, Markstream Install needs the command-line tools its instructions call (npm). Our summary lists: Node.js. Compatibility (from SKILL.md): JavaScript or TypeScript frontend project using Vue 3, Nuxt 3/4, Vue 2.6/2.7, React 18+, Next.js, Angular 20+, or Svelte 5..

Does Markstream Install access the network?

SKILL.md names 2 domains. As links in the text: markstream.simonhe.me and github.com. This is read from the text; nothing was executed.

Is Markstream Install safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Markstream Install use?

Markstream Install is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Markstream Install use?

About 1.5k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 649 tokens, read only when the agent opens those files.

What are the alternatives to Markstream Install?

Skills that share tags, products or a category with Markstream Install: Solar Icons (saoudi-h/solar-icons, 182 stars), Markstream Install (sickn33/agentic-awesome-skills, 47k stars), Boneyard (0xGF/boneyard, 7.5k stars) and Markstream Install (Simon-He95/markstream-vue, 3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Markstream Install?

github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,748 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 7, 2026.

Source: github/awesome-copilot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.