FrancoStino/markstream-vue
bundled-skills/markstream-vue/SKILL.md
Integrate markstream-vue into plain Vue 3 with renderer modes, code and DOM choices, streaming state, virtualization, optional peers, and scoped components.
$ install --global
skillsauthnpx skillsauth add FrancoStino/opencode-skills-antigravity markstream-vueInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 22, 2026, 3:11 AM131.3s1 file scanned
SKILL.md
- name:
- markstream-vue
- description:
- Integrate markstream-vue into plain Vue 3 with renderer modes, code and DOM choices, streaming state, virtualization, optional peers, and scoped components.
- category:
- frontend
- risk:
- critical
- source:
- https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-vue
- source_repo:
- Simon-He95/markstream-vue
- source_type:
- official
- date_added:
- 2026-07-21
- author:
- Simon-He95
- tags:
- [vue, markdown, streaming, virtualization, ai-chat]
- tools:
- [claude, cursor, gemini, codex]
- license:
- MIT
- license_source:
- https://github.com/Simon-He95/markstream-vue/blob/main/license
Markstream Vue 3
Overview
Configure the Vue 3 renderer beyond generic installation: surface modes, streaming lifecycle, code rendering, long-message virtualization, and scoped overrides.
When to Use
Use for a plain Vue 3 application after the package has been selected. Use markstream-nuxt when SSR-specific Nuxt boundaries matter.
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 Vue 3 and not Nuxt. Install only requested peers and import
markstream-vue/index.cssafter resets. - Start with
content. Usemode="chat"for AI streams,docsfor rich documents, andminimalfor lightweight non-chat surfaces. - Choose fenced-code rendering explicitly:
prewithout a peer,shikiwithstream-markdown, or compatibility-namedmonacobacked bystream-diffs. - For live chat use smooth streaming
auto, no fade, and an optional cursor. On completion keep the same mode, setfinal, and disable pacing/cursor. - Use
nodesonly for worker parsing or structural AST ownership. - For long transcripts, keep an existing outer message virtualizer in charge. Use Markstream logical height rather than mounted DOM height.
- Use scoped component registration and preserve safe HTML and Mermaid strict mode.
- Validate the smallest build/typecheck plus one incremental stream and one long-message case.
Example
<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'
defineProps<{ content: string; isDone: boolean }>()
</script>
<template>
<MarkdownRender
mode="chat"
:content="content"
:final="isDone"
:fade="isDone"
:typewriter="!isDone"
:smooth-streaming="isDone ? false : 'auto'"
html-policy="safe"
/>
</template>
Limitations
- Optional peers add bundle and browser-runtime cost.
- DOM-minimal mode disables wrapper-dependent features.
- Virtualization integration requires stable content and measurement keys.
Security & Safety Notes
Review dependency changes. Never enable trusted HTML or loose Mermaid rendering for untrusted model output.
Related Skills
FrancoStino/llm-security
tools
VerifiedTrustedCommunity
Authorized security assessment of LLM applications and AI agents: prompt injection, tool abuse, RAG exposure, memory poisoning, system-prompt extraction, and agent-compliance engineering per OWASP LLM/ASI Top 10.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/liuguang-banlan-ui
development
VerifiedTrustedCommunity
Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports. Use when a UI request names either mode or needs measured color parameters.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/kimi-delegate
tools
VerifiedTrustedCommunity
Delegate coding tasks to the Kimi Code CLI (`kimi`) only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/js-reverse
development
VerifiedTrustedCommunity
Front-end JavaScript reverse engineering: locate signature chains, analyze encrypted request parameters, sample runtime behavior, and reproduce logic locally in Node for evidence-based output.
68SKILL.mdUpdated Aug 30, 2026