From vibe-coding
Design technical architecture from a PRD. Use when user wants to create an architecture document, define system design, plan technical implementation, or needs to translate product requirements into buildable technical specs. Reads from docs/PRD.md and outputs docs/ARCHITECTURE.md.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vibe-coding:architectureThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Transform a PRD into an implementation-ready architecture document. Read `docs/PRD.md`, analyze requirements, and produce `docs/ARCHITECTURE.md` with enough technical clarity to start coding.
Transform a PRD into an implementation-ready architecture document. Read docs/PRD.md, analyze requirements, and produce docs/ARCHITECTURE.md with enough technical clarity to start coding.
START
│
▼
┌─────────────────────────┐
│ Read docs/PRD.md │ ◄── Load the PRD into context
└──────────┬──────────────┘
│
▼
┌─────────────────────────┐
│ Analyze & Clarify │ ◄── Ask questions if PRD has gaps
└──────────┬──────────────┘
│
▼
┌─────────────────────────┐
│ Confirm with user │ ◄── Summarize approach, get approval
└──────────┬──────────────┘
│
▼
┌─────────────────────────┐
│ Generate Architecture │ ◄── Write to docs/ARCHITECTURE.md
└─────────────────────────┘
Read docs/PRD.md to understand:
If docs/PRD.md doesn't exist, ask the user to provide requirements or suggest using the product-design skill first.
Identify gaps that would block architecture decisions:
Ask targeted questions. Don't over-ask—only what's needed to make architecture decisions.
Before generating, summarize:
Ask if they're ready to proceed or want to adjust the approach.
Write to docs/ARCHITECTURE.md (create directory if needed) using the template below.
# [Product Name] - Architecture
## Overview
[2-3 sentences: architectural style, key patterns, deployment model]
## High-Level Architecture
[ASCII diagram showing major components and relationships]
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Client │────▶│ Server │────▶│ Database │ └─────────────┘ └─────────────┘ └─────────────┘
### Components
| Component | Responsibility | Technology |
|-----------|---------------|------------|
| [Name] | [What it does] | [Stack] |
## Tech Stack Decisions
| Decision | Choice | Rationale |
|----------|--------|-----------|
| Frontend | [e.g., Next.js] | [Why this fits the requirements] |
| Backend | [e.g., Node + Express] | [Why] |
| Database | [e.g., PostgreSQL] | [Why] |
| Auth | [e.g., Supabase Auth] | [Why] |
| Hosting | [e.g., Vercel + Railway] | [Why] |
## Directory Structure
project/ ├── src/ │ ├── app/ # [Purpose] │ ├── components/ # [Purpose] │ ├── lib/ # [Purpose] │ └── ... ├── public/ ├── tests/ └── ...
### Key Directories Explained
- `src/app/` - [What goes here and why]
- `src/lib/` - [What goes here and why]
## Key Abstractions
### [Abstraction 1 Name]
**Purpose:** [What problem it solves]
**Interface:** [Key methods/properties]
**Used by:** [Which parts of the system]
## Data Flow
[Describe data flow for key scenarios]
1. **[Scenario]**: [Step-by-step flow]
## What NOT to Over-Engineer
Keep these simple for MVP:
| Area | Keep Simple | Avoid |
|------|-------------|-------|
| Auth | Use built-in auth provider | Custom JWT infrastructure |
| State | React state/context | Redux unless proven necessary |
| API | Simple REST endpoints | GraphQL unless you need it |
| Database | Single database | Read replicas, sharding |
| Caching | None initially | Redis until you measure need |
| Validation | Validate at boundaries | Defensive checks everywhere |
## Future Considerations
[Things deliberately deferred that may influence future architecture]
- [Future need] → [How current architecture accommodates it]
Keep it buildable: Every section should reduce ambiguity. A developer reading this should know where to start.
Match complexity to scope: MVP architecture should be simple. Don't design for scale you don't have.
Be specific: "Use React" is less useful than "Next.js App Router with server components for data fetching."
Justify decisions: Every tech choice needs a reason tied to requirements, not preference.
Name anti-patterns: Explicitly calling out what NOT to build prevents scope creep.
npx claudepluginhub porkbutts/porkbutts-n-taters --plugin effective-designTranslates PRDs into system architecture via interactive workflow: loads product specs.md, iterates decisions with options/discussion, outputs documented architecture.md. Handles Groundwork monorepos.
Produces an implementation architecture from a PRD or user spec: file tree, component breakdown, data model, and phased build plan with end conditions.
Creates ADRs in MADR format, arc42 documentation, and plan-context.md for architecture proposals. Handles branch verification, GitHub issue/PR creation, artifact triage, and backlog updates.