Agent skill

Chatbot Mvp Distillation Zh

by pdsuwwz in pdsuwwz/chatgpt-vue3-light-mvp

将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品,包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示,以及从本 Vue 3 MVP 迁移到其他项目的方案规划。

MITAuto-check passedDevelopment

Install Chatbot Mvp Distillation Zh

skills CLI
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation-zh -a claude-code

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

GitHub CLI
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp chatbot-mvp-distillation-zh --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/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/chatbot-mvp-distillation-zh .claude/skills/chatbot-mvp-distillation-zh && 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
chatbot-mvp-distillation-zh
GitHub stars
579
Token cost
~414 tokens
SKILL.md length
90 words
Files
7 (incl. references)
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品,包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示,以及从本 Vue 3 MVP 迁移到其他项目的方案规划。

  • Works in 6 steps: 先识别目标项目的前端框架、状态管理方式和 API 边界。 → 设计整体模块边界时,阅读 references/architecture.md。 → 实现 fetch/SSE/ReadableStream 流式处理时,阅读… → …
  • Tasks that involve Diagrams
  • SKILL.md covers 使用流程, 输出要求 and 源码锚点
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Chatbot Mvp Distillation Zh is an agent skill from pdsuwwz/chatgpt-vue3-light-mvp. 将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品,包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示,以及从本 Vue 3 MVP 迁移到其他项目的方案规划。

Its SKILL.md is about 410 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

  • Tasks that involve Diagrams
  • Tasks that involve Markdown

Example prompts

  • “/chatbot-mvp-distillation-zh”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. 先识别目标项目的前端框架、状态管理方式和 API 边界。
  2. 设计整体模块边界时,阅读 references/architecture.md。
  3. 实现 fetch/SSE/ReadableStream 流式处理时,阅读 references/streaming-sse.md。
  4. 增加模型供应商或统一响应格式时,阅读 references/model-adapters.md。
  5. 实现富文本回答渲染时,阅读 references/markdown-rendering.md。
  6. 在其他项目落地前,阅读 references/migration-checklist.md 做迁移检查。

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 Zh loads about 414 tokens when it runs, and up to ~3k if it reads all its reference files. Until then it costs about 50 tokens; SKILL.md has 90 words of instructions outside code blocks.

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

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). 90 words, ~414 tokens.

Download SKILL.mdSave it as .claude/skills/chatbot-mvp-distillation-zh/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-zh
description
将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品,包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示,以及从本 Vue 3 MVP 迁移到其他项目的方案规划。

Chatbot MVP 蒸馏 zh

使用这个 Skill,把 chatgpt-vue3-light-mvp 的工程经验迁移到其他项目,而不是机械复制当前仓库代码。

源项目是一个基于 Vue 3 + Vite + TypeScript 的单轮大模型对话 MVP。它最值得复用的经验是:

  • 将模型特有的流式协议和 UI 渲染解耦
  • 先把不同模型的增量响应归一化为文本块,再交给界面展示
  • 使用打字机缓冲区,让网络读取速度和视觉输出速度分离
  • 将 Markdown、代码高亮、数学公式、Mermaid 图表和推理块组织成独立渲染管线
  • 保留 Mock Stream,让其他项目在没有真实 API Key 时也能开发和验证界面

使用流程

  1. 先识别目标项目的前端框架、状态管理方式和 API 边界。
  2. 设计整体模块边界时,阅读 references/architecture.md。
  3. 实现 fetch/SSE/ReadableStream 流式处理时,阅读 references/streaming-sse.md。
  4. 增加模型供应商或统一响应格式时,阅读 references/model-adapters.md。
  5. 实现富文本回答渲染时,阅读 references/markdown-rendering.md。
  6. 在其他项目落地前,阅读 references/migration-checklist.md 做迁移检查。

输出要求

在其他项目使用这个 Skill 时:

  • 先描述适配后的架构,再动代码
  • 保持模型适配器和 UI 组件相互独立
  • 在实现供应商之前,先定义小而稳定的流式增量契约
  • 保留一条本地 Mock Stream 路径,方便开发和演示
  • 明确指出目标项目和当前 Vue MVP 的差异
  • 在可行时验证流式读取、停止生成、完成态、Markdown、代码块、数学公式和 Mermaid 图表

源码锚点

可以把这些文件作为源项目案例阅读:

  • src/views/chat.vue:输入、模型选择、reader 生命周期和停止生成行为
  • src/store/business/index.ts:创建 reader 的 service/store 边界
  • src/components/MarkdownPreview/transform/index.ts:SSE 与 JSON chunk 拆包
  • src/components/MarkdownPreview/models/index.ts:模型适配器和增量响应转换
  • src/components/MarkdownPreview/index.vue:打字机渲染和完成状态
  • src/components/MarkdownPreview/plugins/markdown.ts:Markdown、KaTeX、Mermaid 和推理块渲染

© 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-zh 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 Zh 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.

Chatbot Mvp Distillation Zh compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chatbot Mvp Distillation Zh this skillpdsuwwz/chatgpt-vue3-light-mvp579—~414Automated safety check: PassMIT
Markdown Mermaid WritingK-Dense-AI/scientific-agent-skills48k1 repos~4.2kAutomated safety check: NotesApache-2.0
Axiom Explainerdigoal/blog8.6k—~626Automated safety check: PassGPL-2.0
Bug Hunterdigoal/blog8.6k—~1kAutomated safety check: PassGPL-2.0
Industry Deep Explainerdigoal/blog8.6k—~1.4kAutomated safety check: PassGPL-2.0
Wiki Ado Convertmicrosoft/skills3.1k—~2.3kAutomated safety check: PassMIT

Similar skills

  • Markdown Mermaid Writing

    K-Dense-AI/scientific-agent-skills

    Writes scientific Markdown documentation and Mermaid diagrams for workflows, relationships, timelines, and schemas.

    48k GitHub starsUsed in 1 repo~4.2k tokens
    DevelopmentAuto-check: notes
  • Axiom Explainer

    digoal/blog

    生成面向学生的公理/定理深度讲解文案,输出图文并茂的 Markdown 文章。触发条件:用户输入一个观点、公理、定理或数学/科学/哲学命题,并希望获得系统性讲解文章。关键词包括:"讲解"、"解释"、"公理"、"定理"、"原理"、"推导"、"怎么来的"、"有什么用"、"证明"等。即使用户只说"帮我讲讲XX定理"或"解释一下XX原理",也应使用本 skill。输出保存到项目 markdown/…

    8.6k GitHub stars~626 tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Bug Hunter

    digoal/blog

    根据用户给出的行业名称(或默认使用热点社会新闻),抓取最新新闻热点,用"找世界bug"的视角——找出那些打眼一看就不合理的地方——深度分析根因、利益链条、监管盲区,并给出多维度解决思路,输出图文并茂(含SVG/Mermaid/ASCII图形)的Markdown文件,保存到项目markdown/目录。

    8.6k GitHub stars~1k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • 快速且通俗易懂地讲透一个行业,输出图文并茂的深度分析 Markdown 报告,保存到当前项目的 markdown/ 目录。触发条件:用户输入一个行业名称,并希望获得全面、通俗易懂的行业深度分析,关键词包括"讲透"、"深度分析行业"、"行业分析"、"帮我搞懂XX行业"、"XX行业是怎么赚钱的"、"XX行业有什么机会"、"XX行业怎么进入"、"产业链分析"、"行业机会"等。即使用户只说"帮我了解一下…

    8.6k GitHub stars~1.4k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Wiki Ado Convert

    microsoft/skills

    Official

    Converts VitePress/GFM wiki markdown to Azure DevOps Wiki-compatible format.

    3.1k GitHub stars~2.3k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Markstream Custom Components

    Simon-He95/markstream-vue

    Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Svelte, and Angular.

    3k GitHub stars~955 tokensUpdated yesterday
    DevelopmentAuto-check passed

More from pdsuwwz/chatgpt-vue3-light-mvp

  • Uncodixfy

    pdsuwwz/chatgpt-vue3-light-mvp

    Prevents generic AI/Codex UI patterns when generating frontend code.

    579 GitHub starsUsed in 2 repos~3k tokens
    Auto-check passed
  • Conventional Commits

    pdsuwwz/chatgpt-vue3-light-mvp

    Conventional Commits specification for consistent, machine-readable git commit messages.

    579 GitHub stars~522 tokensUpdated 2 mo ago
    Auto-check passed
  • 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…

    579 GitHub starsUsed in 1 repo~431 tokens
    Auto-check passed
  • Chatbot Mvp Distillation

    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.

    579 GitHub stars~722 tokensUpdated 2 mo ago
    Auto-check passed

Questions about Chatbot Mvp Distillation Zh

What does Chatbot Mvp Distillation Zh do?

将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品,包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示,以及从本 Vue 3 MVP 迁移到其他项目的方案规划。. Chatbot Mvp Distillation Zh is an agent skill from pdsuwwz/chatgpt-vue3-light-mvp.

When should I use Chatbot Mvp Distillation Zh?

Chatbot Mvp Distillation Zh fits situations like: tasks that involve Diagrams; tasks that involve Markdown.

How do I install Chatbot Mvp Distillation Zh in Claude Code?

Run `npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation-zh -a claude-code`. Or copy the skill folder (.agents/skills/chatbot-mvp-distillation-zh in pdsuwwz/chatgpt-vue3-light-mvp) into .claude/skills/chatbot-mvp-distillation-zh in your project. Claude Code loads it when a task matches its description.

How do I install Chatbot Mvp Distillation Zh in Codex?

Run `npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill chatbot-mvp-distillation-zh -a codex`. Or copy the skill folder (.agents/skills/chatbot-mvp-distillation-zh in pdsuwwz/chatgpt-vue3-light-mvp) into .agents/skills/chatbot-mvp-distillation-zh in your project. Codex loads it when a task matches its description.

Can I use Chatbot Mvp Distillation Zh 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-zh -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-zh, .gemini/skills/chatbot-mvp-distillation-zh, .github/skills/chatbot-mvp-distillation-zh and .opencode/skills/chatbot-mvp-distillation-zh in your project.

What does Chatbot Mvp Distillation Zh need to run?

SKILL.md names no scripts, command-line tools or credentials: Chatbot Mvp Distillation Zh is instructions for the agent only.

Does Chatbot Mvp Distillation Zh 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 Zh 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 Zh use?

Chatbot Mvp Distillation Zh 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 Zh use?

About 414 tokens (SKILL.md is roughly 1.7k 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.6k tokens, read only when the agent opens those files.

What are the alternatives to Chatbot Mvp Distillation Zh?

Skills that share tags, products or a category with Chatbot Mvp Distillation Zh: 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 Zh?

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.