name: matt-prd-to-plan
description: Turn a PRD into a multi-phase implementation plan using tracer-bullet vertical slices, saved as a local Markdown file in ./plans/. Use when user wants to break down a PRD, create an implementation plan, plan phases from a PRD, or mentions "tracer bullets".
agent: matt
user-invocable: false
metadata:
pattern: pipeline
PRD to Plan
Break a PRD into a phased implementation plan using vertical slices (tracer bullets). Output is a Markdown file in ./plans/.
Process
1. Confirm the PRD is in context
The PRD should already be in the conversation. If it isn't, ask the user to paste it or point you to the file.
2. Explore the codebase
If you have not already explored the codebase, do so to understand the current architecture, existing patterns, and integration layers.
3. Identify durable architectural decisions
Before slicing, identify high-level decisions that are unlikely to change throughout implementation:
- Route structures / URL patterns
- Database schema shape
- Key data models
- Authentication / authorization approach
- Third-party service boundaries
These go in the plan header so every phase can reference them.
4. Draft vertical slices
Break the PRD into tracer bullet phases. Each phase is a thin vertical slice that cuts through ALL integration layers end-to-end, NOT a horizontal slice of one layer.
When a phase has significant unknowns, include an explicit prototyping milestone to de-risk before full implementation. Prototypes are additive, testable, and clearly labeled. State criteria for promoting or discarding the prototype.
- Each slice delivers a narrow but COMPLETE path through every layer (schema, API, UI, tests)
- A completed slice is demoable or verifiable on its own
- Prefer many thin slices over few thick ones
- Do NOT include specific file names, function names, or implementation details that are likely to change as later phases are built
- DO include durable decisions: route paths, schema shapes, data model names
- Each phase MUST have observable validation — exact commands and expected output, not just "code changes"
- Prefer additive changes followed by subtractions that keep tests passing
5. Quiz the user
Present the proposed breakdown as a numbered list. For each phase show:
- Title: short descriptive name
- User stories covered: which user stories from the PRD this addresses
Ask the user:
- Does the granularity feel right? (too coarse / too fine)
- Should any phases be merged or split further?
Iterate until the user approves the breakdown.
6. Write the plan file
Create ./plans/ if it doesn't exist. Write the plan as a Markdown file named after the feature (e.g. ./plans/user-onboarding.md). Use the template below.
# Plan:
Source PRD:
This plan is a living document. The Progress, Surprises & Discoveries, Decision Log, and Outcomes sections MUST be kept up to date as work proceeds. This plan must be fully self-contained — a novice with only this file should be able to implement the feature end-to-end.
Purpose / Big Picture
Explain in a few sentences what someone gains after this change and how they can see it working. State the user-visible behavior you will enable.
Architectural decisions
Durable decisions that apply across all phases:
- Routes: ...
- Schema: ...
- Key models: ...
- Interfaces & Dependencies: Name libraries, modules, types, traits/interfaces, function signatures that must exist. Be prescriptive.
- (add/remove sections as appropriate)
Context and Orientation
Describe the current state relevant to this task as if the reader knows nothing. Name key files and modules by full path. Define any non-obvious terms.
Phase 1: </h2>
<p><strong>User stories</strong>: <list from PRD></p>
<h3>What to build</h3>
<p>A concise description of this vertical slice. Describe the end-to-end behavior, not layer-by-layer implementation.</p>
<h3>Validation and Acceptance</h3>
<p>Phrase acceptance as <strong>observable behavior</strong> a human can verify — exact commands to run, expected output, what to observe. Not just "code compiles" but "running <code>X</code> produces <code>Y</code>". If tests are involved: "run <code><test command></code> — the new test <code><name></code> fails before the change and passes after."</p>
<h3>Idempotence and Recovery</h3>
<p>Can these steps be run multiple times safely? If a step is risky, provide retry/rollback path.</p>
<hr>
<h2>Phase 2: <Title></h2>
<p><strong>User stories</strong>: <list from PRD></p>
<h3>What to build</h3>
<p>...</p>
<h3>Validation and Acceptance</h3>
<p>...</p>
<!-- Repeat for each phase -->
<hr>
<h2>Progress</h2>
<p>Use checkboxes with timestamps. Every stopping point must be documented, even if it requires splitting partial work into "done" vs "remaining."</p>
<ul>
<li><input disabled="" type="checkbox"> Phase 1: ...</li>
<li><input disabled="" type="checkbox"> Phase 2: ...</li>
</ul>
<h2>Surprises & Discoveries</h2>
<p>Document unexpected behaviors, bugs, performance tradeoffs, or insights discovered during implementation. Include concise evidence (test output is ideal).</p>
<ul>
<li>(none yet)</li>
</ul>
<h2>Decision Log</h2>
<p>Record every decision made while working on the plan:</p>
<ul>
<li>(none yet)</li>
</ul>
<h2>Outcomes & Retrospective</h2>
<p>Summarize outcomes, gaps, and lessons learned at major milestones or at completion. Compare result against original purpose.</p>
<ul>
<li>(to be filled at completion)</plan-template></li>
</ul>
</article> </div> <!-- Right: Metadata & Command Sidebar --> <div class="w-full lg:w-80 shrink-0 flex flex-col gap-6" data-astro-cid-7zzsworf> <!-- Install Card --> <div class="p-6 rounded-xl bg-surface-container border border-border/80 flex flex-col gap-4 shadow-sm" data-astro-cid-7zzsworf> <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant/60 font-mono" data-astro-cid-7zzsworf>Install via CLI</span> <div class="flex flex-col gap-2" data-astro-cid-7zzsworf> <div id="detail-install-cmd" class="font-mono text-[11px] p-3 rounded-lg bg-black/40 border border-border select-all break-all text-primary font-bold leading-relaxed" data-astro-cid-7zzsworf>
npx skills add https://github.com/douglance/matt --skill matt-prd-to-plan </div> <button id="detail-copy-btn" class="w-full py-2.5 rounded-lg bg-primary hover:bg-primary-hover text-on-primary font-sans font-bold text-sm shadow transition-all active:scale-95 flex items-center justify-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px]" data-astro-cid-7zzsworf>content_copy</span> <span data-astro-cid-7zzsworf>Copy Command</span> </button> </div> </div> <!-- Details & Stats Card --> <div class="p-6 rounded-xl bg-surface-container border border-border/80 flex flex-col gap-4 shadow-sm text-on-surface" data-astro-cid-7zzsworf> <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant/60 font-sans" data-astro-cid-7zzsworf>Repository Details</span> <div class="flex flex-col gap-3.5" data-astro-cid-7zzsworf> <div class="flex justify-between items-center text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>star</span> Stars
</span> <span class="font-mono font-bold text-on-surface" data-astro-cid-7zzsworf>0</span> </div> <div class="flex justify-between items-center text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>call_split</span> Forks
</span> <span class="font-mono font-bold text-on-surface" data-astro-cid-7zzsworf>0</span> </div> <div class="flex justify-between items-center text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>navigation</span> Branch
</span> <span class="font-mono bg-surface border border-border px-2 py-0.5 rounded text-[11px] text-on-surface-variant" data-astro-cid-7zzsworf>main</span> </div> <div class="flex justify-between items-start text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5 mt-0.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>article</span> Path
</span> <span class="font-mono bg-surface border border-border px-2 py-0.5 rounded text-[11px] text-on-surface-variant truncate max-w-[150px]" title="SKILL.md" data-astro-cid-7zzsworf>SKILL.md</span> </div> </div> </div> <!-- Occupations Tag Card --> <!-- Related Creators Card --> <div class="p-6 rounded-xl bg-surface-container border border-border/80 flex flex-col gap-3 shadow-sm" data-astro-cid-7zzsworf> <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant/60 font-sans" data-astro-cid-7zzsworf>More from Creator</span> <div class="flex items-center gap-2" data-astro-cid-7zzsworf> <img class="w-8 h-8 rounded-full border border-border" src="https://avatars.githubusercontent.com/u/4741454?u=d516ff504d2d39b1894f6dfd175ce0663f1da44d&v=4" alt="douglance" onerror="this.src='https://avatars.githubusercontent.com/u/9919?v=4'" data-astro-cid-7zzsworf> <div class="flex flex-col min-w-0" data-astro-cid-7zzsworf> <span class="font-bold text-sm truncate text-on-surface" data-astro-cid-7zzsworf>douglance</span> <a href="/?creator=douglance" class="text-xs text-primary hover:underline font-semibold transition-all" data-astro-cid-7zzsworf>Explore all skills →</a> </div> </div> </div> </div> </div> </div> </div> <script>
const copyBtn = document.getElementById("detail-copy-btn");
const installCmd = document.getElementById("detail-install-cmd");
if (copyBtn && installCmd) {
copyBtn.addEventListener("click", () => {
const cmd = installCmd.textContent.trim();
navigator.clipboard.writeText(cmd).then(() => {
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = `
<span class="material-symbols-outlined text-[16px]">check</span>
<span>Copied!</span>
`;
copyBtn.style.background = "#10b981";
copyBtn.style.borderColor = "#10b981";
setTimeout(() => {
copyBtn.innerHTML = originalText;
copyBtn.style.background = "";
copyBtn.style.borderColor = "";
}, 1500);
});
});
}
</script> </div> <!-- Footer --> <footer class="border-t border-border bg-surface-container-low text-on-surface-variant py-8 px-gutter mt-16 rounded-xl"> <div class="max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center gap-6"> <div class="flex items-center gap-2"> <div class="w-6 h-6 rounded bg-primary bg-opacity-20 flex items-center justify-center"> <span class="material-symbols-outlined text-primary text-sm">code_blocks</span> </div> <span class="font-bold text-on-surface text-sm">SkillMD</span> </div> <div class="flex flex-wrap justify-center gap-6 text-sm"> <a href="/about" class="hover:text-primary transition-colors">About Us</a> <a href="/contact" class="hover:text-primary transition-colors">Contact Us</a> <a href="/privacy" class="hover:text-primary transition-colors">Privacy Policy</a> <a href="/terms" class="hover:text-primary transition-colors">Terms of Service</a> <a href="/support" class="hover:text-primary transition-colors">Support</a> </div> <div class="text-xs text-on-surface-variant/80">
© 2026 SkillMD. All rights reserved.
</div> </div> </footer> </main> <!-- Script for Theme Toggle, Mobile Menu, and Sidebar Filter Redirection --> <script>
// Theme setup
const savedTheme = localStorage.getItem("theme") || "dark";
function applyTheme(theme) {
document.documentElement.classList.remove("dark", "green", "dracula", "nord");
if (theme === "dark") {
document.documentElement.classList.add("dark");
} else if (theme === "green") {
document.documentElement.classList.add("dark", "green");
} else if (theme === "dracula") {
document.documentElement.classList.add("dark", "dracula");
} else if (theme === "nord") {
document.documentElement.classList.add("dark", "nord");
}
document.documentElement.setAttribute("data-theme", theme);
const themeMoon = document.getElementById("theme-moon");
const themeSun = document.getElementById("theme-sun");
const themeLeaf = document.getElementById("theme-leaf");
const themeDracula = document.getElementById("theme-dracula");
const themeNord = document.getElementById("theme-nord");
if (themeMoon && themeSun && themeLeaf && themeDracula && themeNord) {
themeMoon.style.display = theme === "dark" ? "inline" : "none";
themeSun.style.display = theme === "light" ? "inline" : "none";
themeLeaf.style.display = theme === "green" ? "inline" : "none";
themeDracula.style.display = theme === "dracula" ? "inline" : "none";
themeNord.style.display = theme === "nord" ? "inline" : "none";
}
}
applyTheme(savedTheme);
const themeToggleBtn = document.getElementById("theme-toggle-btn");
if (themeToggleBtn) {
themeToggleBtn.addEventListener("click", () => {
const currentTheme = document.documentElement.getAttribute("data-theme") || "dark";
let newTheme = "dark";
if (currentTheme === "dark") {
newTheme = "light";
} else if (currentTheme === "light") {
newTheme = "green";
} else if (currentTheme === "green") {
newTheme = "dracula";
} else if (currentTheme === "dracula") {
newTheme = "nord";
} else {
newTheme = "dark";
}
applyTheme(newTheme);
localStorage.setItem("theme", newTheme);
});
}
// Mobile menu toggle and sidebar logic
const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
const sidebarMenu = document.getElementById("sidebar-menu");
const sidebarOverlay = document.getElementById("sidebar-overlay");
function isMobile() {
return window.innerWidth < 768; // 768px is the 'md' breakpoint in Tailwind
}
function openSidebar() {
if (sidebarMenu) {
sidebarMenu.classList.remove("-translate-x-full");
}
if (sidebarOverlay) {
sidebarOverlay.classList.remove("hidden");
}
}
function closeSidebar() {
if (sidebarMenu && isMobile()) {
sidebarMenu.classList.add("-translate-x-full");
}
if (sidebarOverlay) {
sidebarOverlay.classList.add("hidden");
}
}
if (mobileMenuToggle && sidebarMenu) {
mobileMenuToggle.addEventListener("click", (e) => {
e.stopPropagation();
if (isMobile()) {
const isClosed = sidebarMenu.classList.contains("-translate-x-full");
if (isClosed) {
openSidebar();
} else {
closeSidebar();
}
}
});
document.addEventListener("click", (e) => {
if (isMobile()) {
if (!sidebarMenu.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
closeSidebar();
}
}
});
if (sidebarOverlay) {
sidebarOverlay.addEventListener("click", () => {
if (isMobile()) {
closeSidebar();
}
});
}
// Collapse sidebar when clicking a filter button, creator button, or nav item inside it
sidebarMenu.addEventListener("click", (e) => {
if (isMobile()) {
const clickTarget = e.target.closest("button, a");
if (clickTarget) {
closeSidebar();
}
}
});
// Sync sidebar state on window resize
window.addEventListener("resize", () => {
if (!isMobile()) {
// Desktop: sidebar should be visible, no overlay
if (sidebarMenu) {
sidebarMenu.classList.remove("-translate-x-full");
}
if (sidebarOverlay) {
sidebarOverlay.classList.add("hidden");
}
} else {
// Mobile: start collapsed
if (sidebarMenu) {
sidebarMenu.classList.add("-translate-x-full");
}
if (sidebarOverlay) {
sidebarOverlay.classList.add("hidden");
}
}
});
}
// If not on homepage, redirect on sidebar filter click
const isHomepage = window.location.pathname === "/";
document.querySelectorAll("#occupation-filters .filter-btn").forEach(btn => {
btn.addEventListener("click", (e) => {
const occ = e.currentTarget.getAttribute("data-occupation");
if (!isHomepage) {
window.location.href = occ ? `/?occupation=${encodeURIComponent(occ)}` : "/";
}
});
});
document.querySelectorAll("#creator-filters .creator-btn").forEach(btn => {
btn.addEventListener("click", (e) => {
const creator = e.currentTarget.getAttribute("data-creator");
if (!isHomepage) {
window.location.href = `/?creator=${encodeURIComponent(creator)}`;
}
});
});
</script> </body> </html>
By