markstream nuxt
Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and browser-only optional peers.
Каталог из GitHub · что мы проверяем
Собираем навыки из Agentic Awesome Skills на GitHub. Это работы авторов сообщества, а не собственные разработки КОМЭКСПО. В карточках сохраняем источник и фиксированную версию.
Автоматические проверки
- При импорте: проверяем адреса источников и убираем повторяющиеся идентификаторы. Некоторые категории риска исключаем.
- При загрузке инструкции: проверяем формат SKILL.md, кодировку и объём. Ищем упоминания дополнительных файлов и инструментов.
- Сверяем обозначение лицензии с разрешённым списком и учитываем известные исключения источника. Непонятные условия требуют отдельной проверки.
«Требует проверки» означает, что инструкция ещё не загружена и не проверена. Статусы совместимости не подтверждают безопасность, качество ответа или работу во всех моделях. Полный аудит кода, прав и тестирование каждого навыка не проводились. Скрипты не запускаем.
Авторы и условия использования
Оригинальные тексты коллекции заявлены под CC BY 4.0; у сторонних материалов могут быть другие условия. Открытый GitHub не означает отсутствие авторских прав. Сохраняйте авторство, ссылку на лицензию и отметки об изменениях.
Русские пояснения и промпт-обёртки подготовлены КОМЭКСПО. Оригинальные инструкции не переведены. Мы не связаны с GitHub или авторами навыков и не заявляем об их одобрении сервиса. Правообладателям: контакты — укажите карточку, оригинал и суть обращения.
Использовать навык
Без регистрацииВставьте в свой ИИ-чат и замените последнюю строку своей задачей. Это инструкция, а не подключение новых инструментов.
Промпт попросит код-агента изучить фиксированную версию и предложить подключение к вашему проекту. Изменения требуют вашего согласования.
Команда для Skills CLI от Vercel ↗. Нужны Node.js и npm; запускайте в тестовой копии проекта. Установщик предложит выбрать агента.
Скачивается только SKILL.md указанной версии. Дополнительные файлы и MCP не входят. Команду здесь не запускали; формат сверён с документацией CLI. Перед установкой проверьте источник и запросы разрешений.
Источник: sickn33/agentic-awesome-skills · MIT · Оригинал ↗
Атрибуция для копирования и распространения
Если распространяете скачанный файл, приложите атрибуцию и требуемые лицензией уведомления автора. При изменении инструкции укажите свои изменения. Условия лицензии
Как это работает
Навык задаёт подход к задаче: например, как редактировать текст или проверять код. Вы выбираете его в чате — ИИ получает эту инструкцию вместе с вашим запросом.
Поддерживаются текст, код и создание сайтов. Навык не подключает новые модели, терминал, MCP или аккаунты. Для изображений и видео используются отдельные инструменты.
- Совместимость
- Инструкции для чата
- Источник
- sickn33/agentic-awesome-skills ↗
- Версия
465ad05638fb· фиксируется при добавлении- Лицензия
- MIT
- Звёзды репозитория
- 47 140
Оригинальная инструкция SKILL.md · 2 677 символов
---
name: markstream-nuxt
description: "Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and browser-only optional peers."
category: frontend
risk: critical
source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-nuxt
source_repo: Simon-He95/markstream-vue
source_type: official
date_added: "2026-07-21"
author: Simon-He95
tags: [nuxt, vue, ssr, markdown, streaming]
tools: [claude, cursor, gemini, codex]
license: MIT
license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
---
# Markstream Nuxt
## Overview
Integrate `markstream-vue` into Nuxt while keeping hydration, browser-only peers, workers, and streaming behavior on the correct side of SSR boundaries.
## When to Use
Use for Nuxt 3 or 4 pages, components, or plugins. Use `markstream-vue` for non-Nuxt Vue applications and `markstream-install` when the framework is not yet known.
## Workflow
Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
1. Confirm Nuxt 3 or 4 and install only requested peers.
2. Put browser-only peers behind `<ClientOnly>`, `.client` plugins, dynamic imports, or guarded initialization.
3. Import `markstream-vue/index.css` explicitly from a client-safe shell or plugin.
4. Start with `content`: `mode="chat"` for AI streams, `docs` for rich documents, and `minimal` for lightweight non-chat surfaces.
5. Keep smooth streaming in `auto` mode for SSR; do not force `true` on first-screen server content.
6. When a chat row completes, keep its mode stable, set `final`, disable pacing/cursor, and enable fade only if desired.
7. Keep HTML safe and Mermaid strict. Put optional code, diagram, and worker runtimes behind client boundaries.
8. Validate build/typecheck, hydration, and one incremental client update.
## Example
```vue
<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'
defineProps<{ markdown: string; done: boolean }>()
</script>
<template>
<MarkdownRender
mode="chat"
:content="markdown"
:final="done"
:fade="done"
:typewriter="!done"
:smooth-streaming="done ? false : 'auto'"
html-policy="safe"
/>
</template>
```
## Limitations
- Browser-only peers cannot run during SSR.
- Hydration depends on correct host plugin/component boundaries.
- This skill does not configure deployment adapters.
## Security & Safety Notes
Do not expose trusted HTML or loose Mermaid settings to untrusted model output. Review dependency and runtime-boundary changes.