Markdown Mermaid Writing
K-Dense-AI/scientific-agent-skills
Writes scientific Markdown documentation and Mermaid diagrams for workflows, relationships, timelines, and schemas.
Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories.
Install Chatbot Mvp Distillation
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp chatbot-mvp-distillation --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/chatbot-mvp-distillation .claude/skills/chatbot-mvp-distillation && rm -rf skills-srcUse ~/.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/
Install the "chatbot-mvp-distillation" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/chatbot-mvp-distillation into .claude/skills/chatbot-mvp-distillation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chatbot-mvp-distillation", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/chatbot-mvp-distillationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp chatbot-mvp-distillation --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/chatbot-mvp-distillation .agents/skills/chatbot-mvp-distillation && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "chatbot-mvp-distillation" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/chatbot-mvp-distillation into .agents/skills/chatbot-mvp-distillation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chatbot-mvp-distillation", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp chatbot-mvp-distillation --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/chatbot-mvp-distillation .cursor/skills/chatbot-mvp-distillation && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "chatbot-mvp-distillation" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/chatbot-mvp-distillation into .cursor/skills/chatbot-mvp-distillation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chatbot-mvp-distillation", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git --path .agents/skills/chatbot-mvp-distillation--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp chatbot-mvp-distillation --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/chatbot-mvp-distillation .gemini/skills/chatbot-mvp-distillation && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "chatbot-mvp-distillation" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/chatbot-mvp-distillation into .gemini/skills/chatbot-mvp-distillation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chatbot-mvp-distillation", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp chatbot-mvp-distillationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/chatbot-mvp-distillation .github/skills/chatbot-mvp-distillation && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "chatbot-mvp-distillation" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/chatbot-mvp-distillation into .github/skills/chatbot-mvp-distillation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chatbot-mvp-distillation", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp chatbot-mvp-distillation --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/chatbot-mvp-distillation .opencode/skills/chatbot-mvp-distillation && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "chatbot-mvp-distillation" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/chatbot-mvp-distillation into .opencode/skills/chatbot-mvp-distillation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chatbot-mvp-distillation", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
chatbot-mvp-distillation- GitHub stars
- 579
- Token cost
- ~722 tokens
- SKILL.md length
- 270 words
- Files
- 7 (incl. references)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories.
- Works in 6 steps: Identify the target project's framework,… → Read references/architecture.md for the… → Read references/streaming-sse.md when… → …
- Implementing streaming chatbot UIs
- SKILL.md covers Workflow, Output Expectations and Source Anchors
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Chatbot Mvp Distillation is an agent skill from pdsuwwz/chatgpt-vue3-light-mvp. Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories. Use when designing or implementing streaming chatbot UIs, SSE/fetch response pipelines, model adapter contracts, typewriter rendering, Markdown/code/KaTeX/Mermaid rendering, reasoning-block display, or migration plans inspired by this Vue 3 MVP.
Its SKILL.md is about 720 tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files (for example `agents/openai.yaml`, `references/architecture.md` and `references/markdown-rendering.md`).
It sits in Development, covering Diagrams and Markdown. It works with Vue.js, OpenAI and Mermaid. The repository describes itself as: 💭 一个可二次开发 Chat Bot 单轮对话 Web 端 MVP 原型模板, 基于 Vue 3, Vite8, TypeScript, Naive UI, Pinia(v3), UnoCSS 等主流技术构建, 🧤简单集成大模型 API, 采用单轮 AI 问答对话模式, 每次提问独立响应, 无需上下文, 支持 SSE 打字机效果流式输出, 集成…. The licence is MIT.
When your agent uses it
- Implementing streaming chatbot UIs
- SSE/fetch response pipelines
- Model adapter contracts
- Typewriter rendering
Example prompts
- “/chatbot-mvp-distillation”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Identify the target project's framework, state management, and API boundary.
- Read references/architecture.md for the reusable component boundaries.
- Read references/streaming-sse.md when implementing fetch/SSE/ReadableStream handling.
- Read references/model-adapters.md when adding providers or normalizing response formats.
- Read references/markdown-rendering.md when implementing rich answer rendering.
- Read references/migration-checklist.md before proposing or editing code in another project.
What it can do on your machine
Read from SKILL.md and the folder at commit e0f4678. 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
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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.
Context cost
Chatbot Mvp Distillation loads about 722 tokens when it runs, and up to ~3.4k if it reads all its reference files. Until then it costs about 103 tokens; SKILL.md has 270 words of instructions outside code blocks.
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 pdsuwwz/chatgpt-vue3-light-mvp at commit e0f4678, republished under its MIT licence (© pdsuwwz). 270 words, ~722 tokens.
Download SKILL.mdSave it as
.claude/skills/chatbot-mvp-distillation/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.- name
- chatbot-mvp-distillation
- description
- Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories. Use when designing or implementing streaming chatbot UIs, SSE/fetch response pipelines, model adapter contracts, typewriter rendering, Markdown/code/KaTeX/Mermaid rendering, reasoning-block display, or migration plans inspired by this Vue 3 MVP.
Chatbot MVP Distillation
Use this skill to borrow the architectural lessons from chatgpt-vue3-light-mvp without copying the project blindly.
The source project is a Vue 3 + Vite + TypeScript MVP for single-turn LLM chat. Its reusable ideas are:
- split model-specific streaming formats from UI rendering
- normalize model deltas into plain text chunks before display
- render text with a typewriter buffer so network speed and UI speed are decoupled
- process Markdown, code highlighting, math, Mermaid diagrams, and reasoning blocks as a rendering pipeline
- keep mock streams available so downstream projects can develop without real API keys
Workflow
- Identify the target project's framework, state management, and API boundary.
- Read references/architecture.md for the reusable component boundaries.
- Read references/streaming-sse.md when implementing fetch/SSE/ReadableStream handling.
- Read references/model-adapters.md when adding providers or normalizing response formats.
- Read references/markdown-rendering.md when implementing rich answer rendering.
- Read references/migration-checklist.md before proposing or editing code in another project.
Output Expectations
When using this skill in another project:
- describe the adapted architecture before editing code
- keep provider adapters independent from UI components
- define a small stream delta contract before implementing providers
- include a mock stream path for local development
- call out target-project changes that differ from the Vue MVP
- verify streaming, abort, completion, Markdown, code blocks, math, and Mermaid behavior when feasible
Source Anchors
Use these files as source examples from this repository:
src/views/chat.vuefor input, model selection, reader lifecycle, and stop behaviorsrc/store/business/index.tsfor the service/store boundary that creates readerssrc/components/MarkdownPreview/transform/index.tsfor SSE and JSON chunk splittingsrc/components/MarkdownPreview/models/index.tsfor provider adapters and delta transformssrc/components/MarkdownPreview/index.vuefor typewriter rendering and completion statesrc/components/MarkdownPreview/plugins/markdown.tsfor Markdown, KaTeX, Mermaid, and reasoning-block rendering
© pdsuwwz, 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 6 other files (references) in .agents/skills/chatbot-mvp-distillation of pdsuwwz/chatgpt-vue3-light-mvp.
- SKILL.md
- agents/openai.yaml
- references/architecture.md
- references/markdown-rendering.md
- references/migration-checklist.md
- references/model-adapters.md
- references/streaming-sse.md
Open the folder on GitHubat commit e0f4678
Compare with similar skills
Chatbot Mvp Distillation 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Chatbot Mvp Distillation this skillpdsuwwz/chatgpt-vue3-light-mvp | 579 | — | ~722 | Automated safety check: Pass | MIT | |
| Markdown Mermaid WritingK-Dense-AI/scientific-agent-skills | 48k | 1 repos | ~4.2k | Automated safety check: Notes | Apache-2.0 | |
| Axiom Explainerdigoal/blog | 8.6k | — | ~626 | Automated safety check: Pass | GPL-2.0 | |
| Bug Hunterdigoal/blog | 8.6k | — | ~1k | Automated safety check: Pass | GPL-2.0 | |
| Industry Deep Explainerdigoal/blog | 8.6k | — | ~1.4k | Automated safety check: Pass | GPL-2.0 | |
| Wiki Ado Convertmicrosoft/skills | 3.1k | — | ~2.3k | Automated safety check: Pass | MIT |
Similar skills
Axiom Explainer
digoal/blog
生成面向学生的公理/定理深度讲解文案，输出图文并茂的 Markdown 文章。触发条件：用户输入一个观点、公理、定理或数学/科学/哲学命题，并希望获得系统性讲解文章。关键词包括："讲解"、"解释"、"公理"、"定理"、"原理"、"推导"、"怎么来的"、"有什么用"、"证明"等。即使用户只说"帮我讲讲XX定理"或"解释一下XX原理"，也应使用本 skill。输出保存到项目 markdown/…
Bug Hunter
digoal/blog
根据用户给出的行业名称（或默认使用热点社会新闻），抓取最新新闻热点，用"找世界bug"的视角——找出那些打眼一看就不合理的地方——深度分析根因、利益链条、监管盲区，并给出多维度解决思路，输出图文并茂（含SVG/Mermaid/ASCII图形）的Markdown文件，保存到项目markdown/目录。
Industry Deep Explainer
digoal/blog
快速且通俗易懂地讲透一个行业，输出图文并茂的深度分析 Markdown 报告，保存到当前项目的 markdown/ 目录。触发条件：用户输入一个行业名称，并希望获得全面、通俗易懂的行业深度分析，关键词包括"讲透"、"深度分析行业"、"行业分析"、"帮我搞懂XX行业"、"XX行业是怎么赚钱的"、"XX行业有什么机会"、"XX行业怎么进入"、"产业链分析"、"行业机会"等。即使用户只说"帮我了解一下…
- Official
Wiki Ado Convert
microsoft/skills
Converts VitePress/GFM wiki markdown to Azure DevOps Wiki-compatible format.
Markstream Custom Components
Simon-He95/markstream-vue
Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Svelte, and Angular.
More from pdsuwwz/chatgpt-vue3-light-mvp
Uncodixfy
pdsuwwz/chatgpt-vue3-light-mvp
Prevents generic AI/Codex UI patterns when generating frontend code.
Conventional Commits
pdsuwwz/chatgpt-vue3-light-mvp
Conventional Commits specification for consistent, machine-readable git commit messages.
UI Aesthetics
pdsuwwz/chatgpt-vue3-light-mvp
Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and…
Chatbot Mvp Distillation Zh
pdsuwwz/chatgpt-vue3-light-mvp
将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品，包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示，以及从本 Vue 3 MVP 迁移到其他项目的方案规划。
Related
Categories
Questions about Chatbot Mvp Distillation
What does Chatbot Mvp Distillation do?
Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories. Chatbot Mvp Distillation is an agent skill from pdsuwwz/chatgpt-vue3-light-mvp. Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories.
When should I use Chatbot Mvp Distillation?
Chatbot Mvp Distillation fits situations like: implementing streaming chatbot UIs; SSE/fetch response pipelines; model adapter contracts; typewriter rendering.
How do I install Chatbot Mvp Distillation in Claude Code?
Run `npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a claude-code`. Or copy the skill folder (.agents/skills/chatbot-mvp-distillation in pdsuwwz/chatgpt-vue3-light-mvp) into .claude/skills/chatbot-mvp-distillation in your project. Claude Code loads it when a task matches its description.
How do I install Chatbot Mvp Distillation in Codex?
Run `npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a codex`. Or copy the skill folder (.agents/skills/chatbot-mvp-distillation in pdsuwwz/chatgpt-vue3-light-mvp) into .agents/skills/chatbot-mvp-distillation in your project. Codex loads it when a task matches its description.
Can I use Chatbot Mvp Distillation 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 pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chatbot-mvp-distillation, .gemini/skills/chatbot-mvp-distillation, .github/skills/chatbot-mvp-distillation and .opencode/skills/chatbot-mvp-distillation in your project.
What does Chatbot Mvp Distillation need to run?
SKILL.md names no scripts, command-line tools or credentials: Chatbot Mvp Distillation is instructions for the agent only.
Does Chatbot Mvp Distillation access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Chatbot Mvp Distillation 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 Chatbot Mvp Distillation use?
Chatbot Mvp Distillation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Chatbot Mvp Distillation use?
About 722 tokens (SKILL.md is roughly 2.9k 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 2.7k tokens, read only when the agent opens those files.
What are the alternatives to Chatbot Mvp Distillation?
Skills that share tags, products or a category with Chatbot Mvp Distillation: Markdown Mermaid Writing (K-Dense-AI/scientific-agent-skills, 48k stars), Axiom Explainer (digoal/blog, 8.6k stars), Bug Hunter (digoal/blog, 8.6k stars) and Industry Deep Explainer (digoal/blog, 8.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Chatbot Mvp Distillation?
pdsuwwz (a GitHub user) maintains it in pdsuwwz/chatgpt-vue3-light-mvp, which has 579 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on July 31, 2026.
Source: pdsuwwz/chatgpt-vue3-light-mvp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.