Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线
Install Vibe To Agentic Framework
$ npx skills add clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn vibe-to-agentic-framework --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/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/presentation/vibe-to-agentic-framework .claude/skills/vibe-to-agentic-framework && 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 "vibe-to-agentic-framework" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/vibe-to-agentic-framework into .claude/skills/vibe-to-agentic-framework/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-to-agentic-framework", 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/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/vibe-to-agentic-frameworkType 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 clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn vibe-to-agentic-framework --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/presentation/vibe-to-agentic-framework .agents/skills/vibe-to-agentic-framework && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vibe-to-agentic-framework" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/vibe-to-agentic-framework into .agents/skills/vibe-to-agentic-framework/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-to-agentic-framework", 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 clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn vibe-to-agentic-framework --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/presentation/vibe-to-agentic-framework .cursor/skills/vibe-to-agentic-framework && 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 "vibe-to-agentic-framework" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/vibe-to-agentic-framework into .cursor/skills/vibe-to-agentic-framework/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-to-agentic-framework", 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/clxzl/claude-code-best-practice-cn.git --path .claude/skills/presentation/vibe-to-agentic-framework--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 clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn vibe-to-agentic-framework --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/presentation/vibe-to-agentic-framework .gemini/skills/vibe-to-agentic-framework && 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 "vibe-to-agentic-framework" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/vibe-to-agentic-framework into .gemini/skills/vibe-to-agentic-framework/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-to-agentic-framework", 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 clxzl/claude-code-best-practice-cn vibe-to-agentic-frameworkInstalls 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 clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/presentation/vibe-to-agentic-framework .github/skills/vibe-to-agentic-framework && 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 "vibe-to-agentic-framework" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/vibe-to-agentic-framework into .github/skills/vibe-to-agentic-framework/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-to-agentic-framework", 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 clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn vibe-to-agentic-framework --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/presentation/vibe-to-agentic-framework .opencode/skills/vibe-to-agentic-framework && 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 "vibe-to-agentic-framework" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/vibe-to-agentic-framework into .opencode/skills/vibe-to-agentic-framework/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibe-to-agentic-framework", 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
vibe-to-agentic-framework- GitHub stars
- 132
- Token cost
- ~1.7k tokens
- SKILL.md length
- 477 words
- Files
- 1
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- MIT
At a glance
演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线
- Works in 5 steps: 这个概念在旅程中的位置？ 关于"提示中更好的错误消息"的幻灯片属于第 2… → 前后对比是什么？ 每张重要幻灯片都应该隐式或显式地展示对比：在 Low… → 级别分配是否合理？ 级别转换发生在 Part… → …
- Development work in your project
- SKILL.md covers 核心概念, 4 级旅程系统, 贯穿示例：TodoApp Monorepo and 旅程弧线：为什么是这个顺序, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Vibe To Agentic Framework is an agent skill from clxzl/claude-code-best-practice-cn. 演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development. The licence is MIT.
When your agent uses it
- Development work in your project
Example prompts
- “从 Vibe Coding 到 Agentic Engineering”
- “/vibe-to-agentic-framework”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 这个概念在旅程中的位置？ 关于"提示中更好的错误消息"的幻灯片属于第 2 部分（提示，Low 级别）。关于"Agent 记忆作用域"的幻灯片属于第 6 部分（agentic，High 级别）。
- 前后对比是什么？ 每张重要幻灯片都应该隐式或显式地展示对比：在 Low 级别（vibe coding）时会发生什么 vs 使用此技术后会发生什么。使用 TodoApp 使其具体化。
- 级别分配是否合理？ 级别转换发生在 Part 章节边界。章节内的单张幻灯片继承该章节的级别。
- 是否建立在之前的基础上？ Skills 假设开发者已经了解 CLAUDE.md 和 Rules。Agents 假设他们了解 Skills。Commands 假设他们了解 Agents。不要在概念所属章节之前引用它。
- 使用 TodoApp。 抽象的解释会让观众失去兴趣。展示实际的 routes/todos.py 代码、实际的 Sidebar.tsx 组件、实际的 CLAUDE.md 内容。贯穿示例是使框架具体化的关键。
What it can do on your machine
Read from SKILL.md and the folder at commit d084a34. 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
Vibe To Agentic Framework loads about 1.7k tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 477 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 clxzl/claude-code-best-practice-cn at commit d084a34, republished under its MIT licence (© clxzl). 477 words, ~1,655 tokens.
Download SKILL.mdSave it as
.claude/skills/vibe-to-agentic-framework/SKILL.md (or your agent's skills folder).- name
- vibe-to-agentic-framework
- description
- 演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线
"从 Vibe Coding 到 Agentic Engineering"框架
本技能教授演示文稿背后的概念模型。每张幻灯片和每个章节都在讲述一个故事：开发者如何从无结构的"vibe coding"（低级）逐步进阶到高级的 agentic engineering（高级）。
核心概念
Vibe Coding（低级） 是指开发者在没有任何结构的情况下使用 Claude Code —— 没有项目上下文、没有约定、没有可复用的知识。每次提示都像抛硬币一样。Claude 可能会创建随机的端点、忽略现有模式、跳过测试，并生成不一致的代码。代码库在每次交互中都趋向混乱。
Agentic Engineering（高级） 是指 Claude Code 作为一个完全配置的工程系统运行。它了解项目架构（CLAUDE.md）、遵循作用域约定（Rules）、按需加载领域专业知识（Skills）、委派给专业工作者（Agents）、编排多步骤工作流（Commands）、自动化生命周期事件（Hooks），并连接外部工具（MCP Servers）。每次提示都能产生一致的、经过测试的、生产就绪的代码。
这两个极端之间的旅程是渐进且累积的。每个最佳实践都建立在前一个之上，演示文稿按照开发者应采用的顺序来教授它们。
4 级旅程系统
演示文稿使用 4 级评分系统，而非百分比进度条：
| 级别 | 顺序 | 颜色 | 旅程条高度 | 描述 |
|---|---|---|---|---|
| Low | 1 | 红/橙色 (hsl(0, 70%, 45%)) | 25% | Vibe coding 地带 —— 无结构 |
| Medium | 2 | 黄色 (hsl(40, 70%, 45%)) | 50% | 结构化工作流，部分自动化 |
| High | 3 | 浅绿色 (hsl(80, 70%, 45%)) | 75% | 领域知识、Skills、自定义 Agents |
| Pro | 4 | 深绿色 (hsl(120, 70%, 45%)) | 100% | 完全的 agentic engineering，多代理团队 |
旅程条在第 1 张幻灯片（标题幻灯片）上隐藏，从第 2 张幻灯片开始显示。级别通过关键过渡幻灯片上的 data-level 属性设置，并被后续幻灯片继承，直到下一次级别变更。当级别变更时，.level-badge 通过 JS 注入到幻灯片的 h1 上（不要在 HTML 中硬编码这些）。
贯穿示例：TodoApp Monorepo
每项技术都在一个真实的全栈项目上进行演示。演示文稿展示了从普通项目（vibe coding）到具有完整 Claude Code 配置（agentic engineering）的项目的转变：
改造前（Vibe Coding）：
todoapp/
├── backend/ # FastAPI (Python)
│ ├── main.py
│ ├── routes/
│ ├── models/
│ └── tests/
└── frontend/ # Next.js (TypeScript)
├── components/
├── pages/
└── lib/改造后（Agentic Engineering）：
todoapp/
├── .claude/ # Claude Code 配置
│ ├── agents/ # 自定义 Subagents
│ ├── skills/ # 领域知识
│ ├── commands/ # Slash Commands
│ ├── hooks/ # 生命周期脚本
│ ├── rules/ # 模块化指令
│ ├── settings.json # 团队设置
│ └── settings.local.json # 个人设置
├── backend/
│ └── CLAUDE.md # 后端指令
├── frontend/
│ └── CLAUDE.md # 前端指令
├── .mcp.json # 托管的 MCP 服务器
└── CLAUDE.md # 项目指令为什么选择 TodoApp？ 它足够小，可以在幻灯片上展示，但又足够复杂，能演示真实问题：一个具有路由模式和测试约定的后端，一个具有组件层次结构和设计令牌的前端，以及一个 monorepo 结构，其中跨领域关注点（如添加新功能）需要两侧协调。
TodoApp 使 vibe coding 问题变得具体：没有结构时，要求 Claude "添加笔记功能"会产生一个随机的 /api/notes 端点，不遵循 routes/todos.py 的模式，一个没有侧边栏导航的独立页面，以及零测试。有了完整的 agentic 设置，相同的请求会产生遵循现有模式的路由、集成到侧边栏的页面，以及匹配 test_todos.py 风格的测试。
旅程弧线：为什么是这个顺序
演示文稿遵循一个刻意设计的教学序列。每个章节解锁一个新的能力层：
第 0 部分：介绍（幻灯片 1-4，无权重）
目的： 铺垫。介绍 TodoApp，定义 vibe coding，并展示目标。
- 标题幻灯片建立旅程隐喻
- 示例项目展示转变：TodoApp 的前后对比 —— 普通项目结构 vs 具有完整 Claude Code 配置（.claude/、CLAUDE.md、.mcp.json 等）的项目
- "什么是 Vibe Coding？"建立 0% 基线 —— 痛点
- 旅程地图提供一个可点击的目录，展示前方的完整路径
第 1 部分：前置准备（幻灯片 5-9，无权重）
目的： 安装并运行 Claude Code。这纯粹是后勤工作 —— 还没有工程实践。
- 安装、认证、第一次会话、界面概述
- 无权重，因为知道如何安装工具并不能提高代码质量
- "第一次会话"本身就是 vibe coding —— 这是有意为之的，让开发者亲身体验 0% 的状态
第 2 部分：更好的提示（幻灯片 10-17，级别：Low）
目的： 第一个真正的改进。即使没有任何项目配置，更好的输入也能产生更好的输出。
- 好提示 vs 坏提示： 具体、有范围的提示 vs 模糊的请求。最简单的改进。
- 提供上下文： 使用
@files给 Claude 它需要的代码。立即减少幻觉。 - 上下文窗口与 /compact： 理解有限的上下文窗口可以防止长会话中响应质量下降。
- Plan Mode：
/plan强制在编码前思考。防止在错误方案上浪费精力。
为什么是 Low 级别： 提示是基础但有限的。它改善单次交互但不会创建持久的项目知识。每次会话都从零开始。
第 3 部分：项目记忆（幻灯片 18-24，级别：Medium）
目的： 从会话级知识到项目级知识的飞跃。Claude 现在可以跨会话记忆。
- CLAUDE.md 与 /init： 项目的"面向 Claude 的 README"。建立架构、技术栈和约定。这是最具影响力的单个文件。
- 应包含什么： 编写有效 CLAUDE.md 内容的实用指南（保持在 150 行以内，聚焦 Claude 需要知道的内容）。
- Rules：
.claude/rules/中的路径作用域约定。Rules 是乘数 —— 它们自动应用于每个匹配的文件，无需开发者额外努力就能强制一致性。一个backend-testing.md规则就能确保每个测试永远遵循相同的模式。
为什么是 Medium 级别： 项目记忆将 Claude 从无状态工具转变为上下文感知的协作者。但仅有知识并不能创建工作流。
第 4 部分：结构化工作流（幻灯片 25-28，级别：Medium）
目的： 防止浪费精力并提高执行质量的系统方法。
- 任务列表： 将复杂工作分解为可追踪的步骤。防止范围蔓延并确保完整性。
- 模型选择： 选择合适的模型（Opus 用于架构，Sonnet 用于实现，Haiku 用于快速任务）优化成本和质量。
为什么仍然是 Medium 级别： 工作流很重要但概念相对简单。它们建立在第 3 部分的项目记忆之上，并更系统地使用它。跃升到 High 需要领域知识。
第 5 部分：领域知识（幻灯片 29-33，级别：High）
目的： 可复用的、按需的专业知识。Skills 是静态记忆（CLAUDE.md/Rules）和动态 Agents 之间的桥梁。
- 什么是 Skills： Skills 作为打包的领域知识，Claude 在相关时加载。渐进式披露的概念。
- 创建 Skills： 实操：为 TodoApp 构建一个
frontend-conventions技能，教授 Tailwind 令牌、组件模式和侧边栏集成。 - Skills Frontmatter 与调用： 技术细节：YAML frontmatter、手动 vs 自动发现调用、
context: fork选项。
为什么是 High 级别： Skills 是第一个"乘数"概念 —— 一个技能定义改善其领域内的每次未来交互。但 Skills 是被动知识；它们需要 Agents 才能变得主动。
Show full SKILL.md (185 more words)Show less
第 6 部分：Agentic Engineering（幻灯片 34-46，级别：High）
目的： 本演示文稿涵盖的目标。自主的、专业的 Agents 协调构建端到端功能。
- 什么是 Agents： 具有受限工具和预加载 Skills 的专业 Subagents 的概念。
- 前端工程师 Agent： 一个具体的 Agent，使用 TodoApp 的前端约定、将路由添加到侧边栏、遵循设计令牌。前后对比展示转变。
- 后端工程师 Agent： 后端的并行 Agent —— 遵循 FastAPI 路由模式、SQLAlchemy 模型、编写匹配现有风格的测试。
- Commands 与编排： 压轴模式：Command → Agent → Skills。一个
/add-feature命令协调前端 + 后端 Agents，每个都有自己的 Skills，交付完整的功能。这是架构的巅峰。 - Hooks 与 MCP： 生命周期自动化（预提交检查、声音通知）和外部工具集成。最后的自动化层。
- Command → Agent → Skills： 完整的架构图。展示所有组件如何连接：Commands 调用 Agents，Agents 加载 Skills，Skills 提供知识。这是"High level"的理解幻灯片。
为什么是 High 级别： 本节涵盖本演示文稿中教授的最高价值实践。之前的一切都是为此做准备。编排和 agentic 工作流代表了本课程涵盖的天花板 —— 完整的 Pro（多代理团队、高级编排模式）超出了本演示文稿的范围。
High Level 幻灯片（幻灯片 44）
庆祝时刻。展示完整的 TodoApp 配置：
- CLAUDE.md 用于项目上下文
- Rules 用于路径作用域约定
- Skills 用于领域知识
- Agents 用于一致执行
- Commands 用于编排工作流
- Hooks 用于生命周期自动化
- MCP 服务器用于外部工具
附录（幻灯片 47+，无权重）
目的： 参考材料。每个命令、设置和配置选项。无权重，因为这些是参考查询，不是旅程里程碑。包括：工具使用、所有 Slash Commands、提交/PR 工作流、自定义选项、调试技巧和黄金法则。
编辑幻灯片时如何使用此框架
创建或修改幻灯片时，考虑：
这个概念在旅程中的位置？ 关于"提示中更好的错误消息"的幻灯片属于第 2 部分（提示，Low 级别）。关于"Agent 记忆作用域"的幻灯片属于第 6 部分（agentic，High 级别）。
前后对比是什么？ 每张重要幻灯片都应该隐式或显式地展示对比：在 Low 级别（vibe coding）时会发生什么 vs 使用此技术后会发生什么。使用 TodoApp 使其具体化。
级别分配是否合理？ 级别转换发生在 Part 章节边界。章节内的单张幻灯片继承该章节的级别。
是否建立在之前的基础上？ Skills 假设开发者已经了解 CLAUDE.md 和 Rules。Agents 假设他们了解 Skills。Commands 假设他们了解 Agents。不要在概念所属章节之前引用它。
使用 TodoApp。 抽象的解释会让观众失去兴趣。展示实际的
routes/todos.py代码、实际的Sidebar.tsx组件、实际的CLAUDE.md内容。贯穿示例是使框架具体化的关键。
级别转换参考表
| 幻灯片 | 幻灯片名称 | data-level | 级别标签 |
|---|---|---|---|
| 10 | Better Prompting（章节分隔符） | data-level="low" | Low |
| 18 | Project Memory（章节分隔符） | data-level="medium" | Medium |
| 29 | Domain Knowledge（章节分隔符） | data-level="high" | High |
| 34 | Agentic Engineering（章节分隔符） | data-level="high" | High |
所有其他幻灯片继承在其之前设置的最后一个 data-level 属性的级别。幻灯片 1-9（介绍 + 前置准备）没有级别，旅程条保持隐藏，直到第 2 张幻灯片显示"Low"（幻灯片 2-9 位于第 10 张幻灯片的第一次级别转换之前，因此旅程条在第 10 张幻灯片之前显示为空/零）。
注意： 主演示文稿（presentation/index.html）最高到 High 级别 —— 不使用 data-level="pro"。Pro 标记在旅程条上作为理论天花板保持可见，但填充永远不会到达它。视频演示文稿（1-video-workflow.html）最高到 Medium 级别。
© clxzl, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/presentation/vibe-to-agentic-framework of clxzl/claude-code-best-practice-cn.
Open the folder on GitHubat commit d084a34
Compare with similar skills
Vibe To Agentic Framework 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 |
|---|---|---|---|---|---|---|
| Vibe To Agentic Framework this skillclxzl/claude-code-best-practice-cn | 132 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Vercel Composition Patternssupabase/supabase | 111k | 58 repos | ~726 | Automated safety check: Pass | MIT | |
| Finishing a Development Branchobra/superpowers | 297k | 5 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Typescript Advanced Typesrolling-scopes/rsschool-app | 10k | 25 repos | ~4.2k | Automated safety check: Pass | MPL-2.0 | |
| PR Babysitteropeninterpreter/openinterpreter | 69k | 3 repos | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| Code Review ChecklistshareAI-lab/learn-claude-code | 78k | 4 repos | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
- Official
Finishing a Development Branch
obra/superpowers
Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.
Typescript Advanced Types
rolling-scopes/rsschool-app
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.
PR Babysitter
openinterpreter/openinterpreter
Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.
Code Review Checklist
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
Greploop
onyx-dot-app/onyx
Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.
More from clxzl/claude-code-best-practice-cn
All 8 skills in this repoAgent Browser
clxzl/claude-code-best-practice-cn
AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用，包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。
Time Skill
clxzl/claude-code-best-practice-cn
显示巴基斯坦标准时间（PKT，UTC+5）的当前时间。当用户询问当前时间、巴基斯坦时间或 PKT 时使用. An agent skill from clxzl/claude-code-best-practice-cn.
Presentation Structure
clxzl/claude-code-best-practice-cn
关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识
Presentation Styling
clxzl/claude-code-best-practice-cn
关于演示文稿中 CSS 类、组件模式和语法高亮的知识
Time SVG Creator
clxzl/claude-code-best-practice-cn
创建一个 SVG 时间卡片，显示迪拜的当前时间。将 SVG 写入 agent-teams/output/dubai-time.svg 并更新 agent-teams/output/output.md。
Weather SVG Creator
clxzl/claude-code-best-practice-cn
创建一个 SVG 天气卡片，显示迪拜的当前温度。将 SVG 写入 orchestration-workflow/weather.svg 并更新 orchestration-workflow/output.md。
Related
Categories
Questions about Vibe To Agentic Framework
What does Vibe To Agentic Framework do?
演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线. Vibe To Agentic Framework is an agent skill from clxzl/claude-code-best-practice-cn.
When should I use Vibe To Agentic Framework?
Vibe To Agentic Framework fits situations like: development work in your project.
How do I install Vibe To Agentic Framework in Claude Code?
Run `npx skills add clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a claude-code`. Or copy the skill folder (.claude/skills/presentation/vibe-to-agentic-framework in clxzl/claude-code-best-practice-cn) into .claude/skills/vibe-to-agentic-framework in your project. Claude Code loads it when a task matches its description.
How do I install Vibe To Agentic Framework in Codex?
Run `npx skills add clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a codex`. Or copy the skill folder (.claude/skills/presentation/vibe-to-agentic-framework in clxzl/claude-code-best-practice-cn) into .agents/skills/vibe-to-agentic-framework in your project. Codex loads it when a task matches its description.
Can I use Vibe To Agentic Framework 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 clxzl/claude-code-best-practice-cn --skill vibe-to-agentic-framework -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vibe-to-agentic-framework, .gemini/skills/vibe-to-agentic-framework, .github/skills/vibe-to-agentic-framework and .opencode/skills/vibe-to-agentic-framework in your project.
What does Vibe To Agentic Framework need to run?
SKILL.md names no scripts, command-line tools or credentials: Vibe To Agentic Framework is instructions for the agent only.
Does Vibe To Agentic Framework 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 Vibe To Agentic Framework 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 Vibe To Agentic Framework use?
Vibe To Agentic Framework 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 Vibe To Agentic Framework use?
About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Vibe To Agentic Framework?
Skills that share tags, products or a category with Vibe To Agentic Framework: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 297k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and PR Babysitter (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vibe To Agentic Framework?
clxzl (a GitHub user) maintains it in clxzl/claude-code-best-practice-cn, which has 132 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on May 11, 2026.
Source: clxzl/claude-code-best-practice-cn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.