🎨 Markstream Nuxt
Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, renderer `mode` selection, or
About Markstream Nuxt
Built for frontend development workflows, Markstream Nuxt helps AI coding agents integrate markstream-vue into a nuxt 3 or nuxt 4 app. use when codex needs client-only boundaries, ssr-safe setup, browser-only peer gating, worker-aware initialization, renderer `mode` selection, or .
The 452-word prompt provides structured frontend development guidance — covering detailed methodology and consistent output formats. Paste it into your CLAUDE.md or .cursorrules to activate.
Key Capabilities
- Prefer `
` wrappers, `.client` plugins, or guarded setup paths. - The root JS import does not inject styles; use `markstream-vue/index.css` or `markstream-vue/index.px.css` explicitly.
- Use `mode="minimal"` for lightweight non-chat surfaces.
- `typewriter` only controls the blinking cursor and defaults to `false`.
- Streaming: `mode="chat"`, `smooth-streaming="auto"`, `:fade="false"`, `typewriter=true`.
What This Skill Covers
- Workflow
- Default Decisions
- Useful Doc Targets
How It Works
- Confirm the repo is Nuxt 3 or 4.
- Install `markstream-vue` plus only the optional peers required by the requested features.
- Keep browser-only peers behind client-only boundaries.
- Import `markstream-vue/index.css` from a client-safe app shell or plugin.
- Start with `content`, choose the renderer mode by surface, and move to `nodes` plus `final` only when the UI needs custom AST control.
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 (452 words)
Markstream Nuxt
Use this skill when the host app is Nuxt and SSR boundaries matter.
Workflow
- Confirm the repo is Nuxt 3 or 4.
- Install
markstream-vueplus only the optional peers required by the requested features. - Keep browser-only peers behind client-only boundaries.
<client-only> wrappers, .client plugins, or guarded setup paths.
- Import
markstream-vue/index.cssfrom a client-safe app shell or plugin.
markstream-vue/index.css or markstream-vue/index.px.css explicitly.
- Start with
content, choose the renderer mode by surface, and move tonodesplusfinalonly when the UI needs custom AST control.
mode="chat" for AI chat or SSE output. It uses lightweight batches, <pre> code rendering by default, fade=false, and max-live-nodes=0; smooth-streaming="auto" paces visible output.
- Use mode="docs" for rich document surfaces. It is the default, enables larger batches, tooltips, fade, and Monaco-backed code blocks when the peer is installed.
- Use mode="minimal" for lightweight non-chat surfaces.
- typewriter only controls the blinking cursor and defaults to false.
- When overriding mode defaults on a high-frequency stream, pair smooth streaming with :fade="false" to avoid delta fade stacking with high-commit pacing.
- Streaming vs recovering history: in chat UIs the same MarkdownRender starts streaming and later switches to history when final=true.
- Streaming: mode="chat", smooth-streaming="auto", :fade="false", typewriter=true.
- Recovering/completed chat history: keep mode="chat" on the same chat row; use :smooth-streaming="false", typewriter=false, and only set :fade="true" when the host explicitly wants a history-entry animation.
- Use mode="minimal" for lightweight non-chat recovered content, and use mode="docs" only for rich document surfaces.
- In SSR, avoid smooth-streaming="true" on first-screen content; the mounted gate inside auto prevents hydration mismatch.
- Remember that html-policy now defaults to safe, and Mermaid strict mode is on by default through mermaid-props.
- Validate with the smallest relevant Nuxt dev, build, or typecheck command.
Default Decisions
- SSR safety comes before feature completeness.
- Omit
modeonly when the surface should use rich docs defaults. - Smooth streaming is SSR-safe in
automode (the default) because it gates on mount. Do not usesmooth-streaming="true"for first-screen SSR content — it bypasses the mounted gate and can cause hydration mismatch or blank flash. - Avoid import-time access to browser globals from server code paths.
- Treat Monaco, Mermaid workers, and similar heavy peers as client-only unless the repo already has a proven SSR pattern.
- Keep
html-policy="safe"and Mermaid strict mode unless the task is preserving trusted legacy rendering. - If a trusted client-only surface needs older behavior, opt out locally with
html-policy="trusted"and:mermaid-props="{ isStrict: false }", and document why that surface is trusted.
Useful Doc Targets
docs/nuxt-ssr.mddocs/guide/installation.mddocs/guide/usage.mddocs/guide/troubleshooting.md
Frequently Asked Questions
What is Markstream Nuxt?
Markstream Nuxt is a free frontend development skill for AI coding agents. Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, renderer `mode` selection, or . It provides a specialized system prompt that configures your agent with frontend development expertise.
How do I use Markstream Nuxt 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 Nuxt.
Which AI coding agents work with Markstream Nuxt?
Markstream Nuxt 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 Nuxt free to use?
Yes, Markstream Nuxt 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-nuxt/SKILL.md. You only need a subscription to the AI agent you use it with.
