From vibe-coding
Build working prototypes from PRDs with mock data and stubbed integrations. Use when user has a PRD, spec, or feature description and wants a clickable demo to validate flows before full implementation. Triggers: build a prototype, functional prototype, make a demo, implement this PRD, prototype this spec, make it clickable.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vibe-coding:functional-prototypeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build working prototypes from PRDs with realistic mock data and stubbed dependencies.
Build working prototypes from PRDs with realistic mock data and stubbed dependencies.
Extract:
Create a dedicated mocks directory with:
Stub patterns by dependency type:
| Dependency | Stub Pattern |
|---|---|
| Database | Return filtered/sorted mock data |
| Auth | Return mock user, always succeed |
| File upload | Store in memory/localStorage |
| Payment | Return success with fake transaction ID |
| External API | Return realistic mock response |
| Email/SMS | Console.log the message |
| Search | Filter mock data client-side |
For each screen:
After prototype is complete, ask user: "Would you like me to generate an integration guide documenting how to replace stubs with real implementations?"
If yes, create docs/integration-guide.md following references/integration-guide-template.md.
npx claudepluginhub porkbutts/porkbutts-n-taters --plugin effective-designUse this skill when the user asks to "generate a prototype prompt", "write a prompt for v0", "create a Bolt prompt", "write a Lovable prompt", "generate a prompt for Cursor", or needs just the prompt text to paste into an AI coding tool — without the full vibe-coding coaching. This is the prompt generation skill; for guidance on using AI coding tools, use prototyping/vibe-coding.
Generates interactive UI prototypes in frontend repositories from PRD and User Journey to validate interaction flows, states, and navigation before HLD/API contracts.
Builds disposable prototypes to flush out design before committing. Routes between a terminal app for state/business logic questions or multiple radically different UI variations on a single route.