AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

Vibe-to-Agentic Framework

Teaches Claude the conceptual model and 4-level journey system behind the "Vibe Coding to Agentic Engineering" deck so slide edits stay on-narrative.

EducationIntermediate★ 68,873⑂ 6,858AI score 6/10Last updated: Nov 9, 2026

What it does

  • Loads the Low → Medium → High → Pro journey model, including colors, bar heights and which slides trigger each level.
  • Explains the pedagogical ordering of every section: prompting → project memory (CLAUDE.md/Rules) → workflows → Skills → Agents/Commands/Hooks/MCP.
  • Supplies a running example (TodoApp: FastAPI + Next.js monorepo) with before/after directory trees to keep explanations concrete.
  • States implementation rules: data-level attributes are inherited by following slides, and .level-badge is JS-injected rather than hardcoded.

Who it's for

  • Anyone editing or extending this repo's Claude Code best-practice presentation.
  • Instructors designing a maturity-ladder curriculum for AI-assisted engineering.
  • Presenters looking for a template on how to structure a staged-progress talk.

Examples

  1. "Add a slide about agent memory scopes" → Claude places it in Part 6 (High level) and avoids forward references.
  2. "The level badge is missing on slide 12" → Claude consults the transition table and traces inheritance from slide 10's data-level="low".
  3. "I need a before/after for an 'add notes feature' request" → Claude generates the contrast using routes/todos.py and Sidebar.tsx from TodoApp.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/shanraisshan/claude-code-best-practice/HEAD/.claude/skills/presentation/vibe-to-agentic-framework/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the .claude/skills/presentation/vibe-to-agentic-framework folder from the GitHub repo shanraisshan/claude-code-best-practice into my ~/.claude/skills/vibe-to-agentic-framework/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/shanraisshan/claude-code-best-practice.git && mkdir -p ~/.claude/skills && cp -r claude-code-best-practice/.claude/skills/presentation/vibe-to-agentic-framework ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository: git clone https://github.com/shanraisshan/claude-code-best-practice.git
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r claude-code-best-practice/.claude/skills/presentation/vibe-to-agentic-framework ~/.claude/skills/
  5. To actually edit the deck, open the cloned repo as your working directory (it contains presentation/index.html).
  6. Restart Claude Code and ask: "Use the vibe-to-agentic-framework skill to help me edit these slides."
View source on GitHub ↗License: MIT