hooks — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited hooks (Hook) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<p align="center"> <img src="https://img.shields.io/badge/Vibe--Coding-Workflow-blueviolet?style=for-the-badge&logo=rocket&logoColor=white" alt="Vibe-Coding Workflow" height="40"/> </p>
<h3 align="center">A practical AI workflow for shipping MVPs</h3>
<p align="center"> <strong>Turn an idea into an MVP with structured prompts, agent docs, and AI-assisted coding workflows.</strong> </p>
<p align="center"> Used on projects like <a href="https://vibeworkflow.app">vibeworkflow.app</a>, <a href="https://moneyvisualiser.com">moneyvisualiser.com</a>, <a href="https://caglacabaoglu.com">caglacabaoglu.com</a>, and <a href="https://alpyalay.org/realdex">RealDex App</a>. </p>
<p align="center"> <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-green.svg?style=flat-square" alt="MIT License"/></a> <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"/></a> <a href="https://github.com/KhazP/vibe-coding-prompt-template/stargazers"><img src="https://img.shields.io/github/stars/KhazP/vibe-coding-prompt-template?style=flat-square&color=yellow" alt="Stars"/></a> <a href="https://github.com/KhazP/vibe-coding-prompt-template/issues"><img src="https://img.shields.io/github/issues/KhazP/vibe-coding-prompt-template?style=flat-square" alt="Issues"/></a> </p>
<p align="center"> <img src="https://img.shields.io/badge/Claude-Anthropic-orange?style=flat-square&logo=anthropic" alt="Claude"/> <img src="https://img.shields.io/badge/Gemini-Google-4285F4?style=flat-square&logo=google" alt="Gemini"/> <img src="https://img.shields.io/badge/ChatGPT-OpenAI-412991?style=flat-square&logo=openai" alt="ChatGPT"/> <img src="https://img.shields.io/badge/Cursor-Editor-000000?style=flat-square&logo=cursor" alt="Cursor"/> <img src="https://img.shields.io/badge/VS_Code-Microsoft-007ACC?style=flat-square&logo=visualstudiocode" alt="VS Code"/> </p>
This repo documents the workflow behind a handful of shipped projects. The goal is simple: do the thinking upfront, hand clean context to your tools, and keep the build phase moving.
| Project | What it is |
|---|---|
| vibeworkflow.app | An interactive web app built around the same structured vibe-coding workflow documented here. |
| moneyvisualiser.com | A money visualization website that visualized money in a 3D environment. |
| caglacabaoglu.com | A production portfolio and gallery site built with the same PRD-to-agent execution approach. |
| alpyalay.org/realdex | A mobile app built on React Native that lets you catch animals, and put them in a Pokemon-like collection. |
<p align="center"> <sub>Maintained by <a href="https://x.com/alpyalay">Alp Yalay</a>.</sub> </p>
The process moves through five stages, from idea validation to working code:
flowchart LR
subgraph Phase1[" "]
A[💡 Idea]
end
subgraph Phase2["Research"]
B[📊 Market Analysis]
end
subgraph Phase3["Define"]
C[📋 PRD]
end
subgraph Phase4["Design"]
D[🏗️ Tech Design]
end
subgraph Phase5["Generate"]
E[🤖 AGENTS.md]
end
subgraph Phase6["Build"]
F[🚀 MVP]
end
A --> B --> C --> D --> E --> F
style A fill:#667eea,stroke:#667eea,color:#fff
style B fill:#764ba2,stroke:#764ba2,color:#fff
style C fill:#f093fb,stroke:#f093fb,color:#fff
style D fill:#4facfe,stroke:#4facfe,color:#fff
style E fill:#00f2fe,stroke:#00f2fe,color:#000
style F fill:#43e97b,stroke:#43e97b,color:#000<p align="center"> <a href=".claude/README.md"> <img src="https://img.shields.io/badge/Using_Claude_Code%3F-Click_here_for_built--in_skills-667eea?style=for-the-badge&logo=anthropic&logoColor=white" alt="Claude Code Skills"/> </a> <a href="https://vibeworkflow.app/#/vibe-coding"> <img src="https://img.shields.io/badge/Try_the_Website-Open_Vibe--Coding_Webapp-43e97b?style=for-the-badge&logo=googlechrome&logoColor=white" alt="Vibe-Coding Website"/> </a> </p>
TL;DR: run research, turn it into a PRD, choose the stack, generate your agent files, then build in small passes.
Do the first three steps in ChatGPT, Claude.ai, Gemini, or any other chat tool. You do not need a repo yet.
<details open> <summary><b>Check whether the idea is worth building</b> - 20-30 min</summary>
This step gives you a quick read on demand, competitors, and whether the scope looks realistic.
part1-deepresearch.md and copy all of its contents.research-[YourAppName].md (or .txt) or simply keep this chat open for Step 2.Tip: if your chat tool supports web search, turn it on so the stats and competitor references are current. </details>
<details open> <summary><b>Write down what the MVP actually needs to do</b> - 15-20 min</summary>
This turns the rough idea into a scope you can build against.
part2-prd-mvp.md.research-[YourAppName].md content, and then paste the Part 2 prompt below it.PRD-[YourAppName]-MVP.md.</details>
<details open> <summary><b>Pick a stack you can actually ship with</b> - 15-20 min</summary>
This step helps you choose the stack and decide where to keep things simple.
part3-tech-design-mvp.md.PRD-[YourAppName]-MVP.md from Step 2 as context).TechDesign-[YourAppName]-MVP.md.</details>
Move into Cursor, VS Code with Copilot, Claude Code, or your preferred coding setup. This is where the project becomes code.
<details open> <summary><b>Create the docs and instructions your coding agent will rely on</b> - 1-2 min</summary>
This step fills out AGENTS.md and the supporting docs from your PRD and tech design.
docs/ folder in your project root if it does not already exist.docs/ using these names:docs/PRD-[YourAppName]-MVP.mddocs/TechDesign-[YourAppName]-MVP.mddocs/research-[YourAppName].md (or .txt for backward compatibility)/templates/ into your project root and fill in the placeholders using the files in docs/.</details>
<details open> <summary><b>Build the MVP in small, reviewable chunks</b> - 1-3 hrs</summary>
Choose your development environment and start iterating:
AGENTS.md and configuration files are physically in the project folder."Read AGENTS.md, propose a Phase 1 plan, wait for my approval, and then build it step by step."
Recommended Loop:
╭──────────────╮ ╭──────────────╮ ╭──────────────╮
│ 📝 Plan │ ───>│ ⚡ Execute │ ───>│ 🔍 Verify │
│ (Approve) │ │ (One Feat) │ │ (Test) │
╰──────────────╯ ╰──────────────╯ ╰──────────────╯
▲ │
└───────────────────────────────────────────┘</details>
You need a modern browser, a few hours, and enough comfort with files and copy-paste to move between tools. You do not need to be an experienced developer.
| Focus Area | Recommended Tools |
|---|---|
| Fast Prototype (Full-stack) | |
| Production-Ready Frontend | |
| Learning / Sandbox Coding | |
| Complex Logic / Multi-Agent | |
| Budget-Limited |
Note: I would not use this workflow as-is for native hardware work, heavily regulated products, or safety-critical systems.
<details open> <summary><b>1. Artifact-first memory and compaction</b></summary>
To avoid context overload, let the agent write things down instead of trying to keep everything in one giant chat:
/compact in Copilot CLI, Claude Code logic) instead of hard resets. When you switch sessions, have the agent write a 001-spec.md or recap.md and load only that file into the new chat.AGENTS.md, docs/PRD-[YourAppName]-MVP.md, and your latest handoff artifact.</details>
<details open> <summary><b>2. Multi-agent orchestration and plugins</b></summary>
AGENTS.md as the source of truth, then add tool-specific plugins or .cursor/rules/ to seamlessly extend capabilities.</details>
<details> <summary><b>3. Model strategy matrix</b></summary>
Use model families instead of pinned version names. It ages better as models get swapped underneath you.
| Strategy | Primary Families | Best For | Speed |
|---|---|---|---|
| Speed-first | Gemini Flash, Claude Sonnet | Fast prototyping, broad iteration | High |
| Balanced | Claude Sonnet, Gemini Pro | Daily coding, debugging, planning | Med-High |
| Depth-first | Claude Opus, Gemini Pro | Deep reasoning, complex refactors | Medium |
</details>
<details> <summary><b>4. Agent observability</b></summary>
When an agent ignores instructions or behaves inconsistently:
</details>
your-app/
├── 📁 docs/
│ ├── research-YourApp.md
│ ├── PRD-YourApp-MVP.md
│ └── TechDesign-YourApp-MVP.md
├── 📁 agent_docs/
│ ├── tech_stack.md
│ ├── code_patterns.md
│ ├── project_brief.md
│ ├── product_requirements.md
│ └── testing.md
├── 📄 AGENTS.md # Universal AI instructions (The Master Contract)
├── 📄 MEMORY.md # Artifact-first memory for session continuity
├── 📁 specs/ # Agent handoff artifacts (e.g. 001-feature-spec.md)
├── 📁 .cursor/rules/ # Cursor rules (preferred)
└── 📁 src/ # Your application codeOnce the MVP works, do a final pass on secrets, auth, and basic abuse protections before you deploy:
<details> <summary><b>Avoid these mistakes</b></summary>
| Pitfall | Solution |
|---|---|
| Skipping discovery work | Run the Part 1 research prompt first |
| Letting agents ship code alone | Review the diff and run tests before merging |
| Publishing auto-generated UIs | Test accessibility and security before launch |
| Forcing one tool to do everything | Mix tools, IDE + terminal + builder usually works better |
</details>
<details> <summary><b>Agent troubleshooting</b></summary>
| Problem | Solution |
|---|---|
| "AI ignores my docs" | Say: "First read AGENTS.md, PRD, and TechDesign. Summarize key requirements before coding." |
| "Code doesn't match PRD" | Say: "Re-read the PRD section on [feature], list acceptance criteria, then refactor." |
| "AI is overcomplicating" | Add to config: "Prioritize MVP scope. Offer the simplest working implementation." |
| "Deployment failing" | Request: "Walk through deployment checklist, verify env vars, then run health check." |
</details>
This project is free and open source under MIT. Contributions are welcome in all forms (docs, examples, fixes, and suggestions).
This template is maintained monthly. Review tool deprecations, refresh model-family references, and update agent capability notes when the ecosystem shifts.
<p align="center"> <a href="https://github.com/KhazP/vibe-coding-prompt-template/graphs/contributors"> <img src="https://img.shields.io/github/contributors/KhazP/vibe-coding-prompt-template?style=for-the-badge&color=blue" alt="Contributors"/> </a> <a href="https://github.com/KhazP/vibe-coding-prompt-template/network/members"> <img src="https://img.shields.io/github/forks/KhazP/vibe-coding-prompt-template?style=for-the-badge&color=blue" alt="Forks"/> </a> </p>
PRs and issues are welcome. If you adapt this workflow, add a new tool setup, or ship something interesting with it, that is useful context for everyone else too. For community Q&A and roadmap ideas, use Discussions. See .github/CONTRIBUTING.md for contribution guidelines.
Released under the MIT License.
<p align="center"> <strong>If this workflow helps you ship something real, open an issue or PR and show what changed.</strong> </p>
<p align="center"> <sub>Created by <a href="https://x.com/alpyalay">@alpyalay</a> and improved through community contributions.</sub> </p>
<p align="center"> <a href="#workflow-overview"> <img src="https://img.shields.io/badge/↑_Back_to_Top-blueviolet?style=for-the-badge" alt="Back to Top"/> </a> </p>
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.