You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Vibe Coding: The Glorious Trainwreck of Modern Programming
What is Vibe Coding
Vibe coding is a programming approach where developers use natural language prompts to instruct AI models, like large language models (LLMs), to generate code. Instead of manually writing code, developers describe what they want in plain English (or other languages), and the AI translates these descriptions into functional code. This method shifts the developer's role from writing code to guiding, testing, and refining AI-generated code.
The term "vibe coding" was popularized by Andrej Karpathy, co-founder of OpenAI and former head of AI at Tesla. He described it as a process where one can "just see stuff, say stuff, run stuff, and copy-paste stuff, and it mostly works." Karpathy emphasized that this approach allows developers to focus on the creative aspects of software development, letting AI handle the technical details.
Characteristics
Natural Language Prompts: Developers can use everyday language to describe desired functionalities, which AI models interpret to generate code, and then, using a chat interface, iterative development can take place. (Can, but rarely -does-)
AI-Generated Code: The bulk of the coding is handled by AI, reducing the need for manual coding.
Shift in Developer Role: Developers focus more on guiding the AI, testing outputs, and refining the generated code rather than writing it from scratch.
Rapid Prototyping: This approach enables quick development of software prototypes, making it especially useful for hobby projects or initial versions of applications.
Pros and Cons (Spoiler: They are all Cons)
Pros: Because Who Needs Structure?
Speedrun to MVP
Why spend weeks crafting code when you can vomit out an app in an afternoon?
Democratization of Development
Now, anyone with a keyboard can be a "developer." Grandma's knitting app? Coming right up.
Creativity Unleashed
Unshackled from syntax, your wildest ideas can manifest—whether they should or not.
AI: The Overworked Intern
Let the AI handle the grunt work while you sip your third latte and take all the credit.
Prototyping Paradise
Need a quick mock-up to impress investors? Vibe coding's got your back. Just don't look under the hood.
Cons: The Hidden Landmines
Code Comprehension? Never Heard of It
Your AI-generated masterpiece is a black box. Good luck debugging that monstrosity.
Security? Optional
Who needs input validation or authentication? Let's live dangerously.
Maintenance Nightmare
Your codebase is a Jenga tower built on quicksand. One wrong move, and it all collapses.
False Sense of Expertise
You're not a developer; you're a prompt engineer. But hey, fake it till you break it.
AI's Hallucinations
Sometimes, the AI just makes stuff up. But it's confident about it, so that's reassuring
How to use Agentic AI Tools For Development
Proper Tool: Use an agentic coding tool like cursor, aider or claude-code instead of a standard chat (chatgpt, claude).
Context Hydration: For code generation, whenever a new session is started, instruct your agent to hydrate its understanding of the repo. `read README.md and ai_docs/*. Run tree --git-ignore and git ls-files
Use tools like repomix to provide understanding of the newest versions of dependent libraries.
Tell the agent to think or think hard about a concept, and to provide a report about the needed changes and wait for approval before writing any code.
Use mermaid syntax to show relations between parts of code.
How to use Non-Agentic Tools for Development
Use a Well-Structured Prompt format
Provide context in-line
Provide "signature" descriptions for used but not "editable" code. This helps direct the llm to focus on the directed solution, and not wander off trying to suggest changes to current working implementation
Paste any context or code needed into the chat. Do not use the Upload File feature.
Always provide a project structure
Occassionally, ask the llm to summarize the conversation thust far in a detailed bullet list as a "checkpoint" that you can use in a new chat.
Edit previous messages as opposed to trying to correct the LLM.
Ada's Recommended Workflow
chat-gpt o3: Open-ended "promptless" discussion regarding a feature or app. Ask for detailed summary when satisfied.
chat-gpt o3: Use structured prompt with the summary to produce a PRD
sonnet-3.7: Use Structured prompt to create a markdown checklist of "one-point" stories, with code samples, test-assertions, and subtasks
The following is a meta prompt that you can use to generate other well-structured prompts for tasks
Prompts
Replace {{user-input}} with your prompt block (examples below)
<purpose>
You are an expert prompt engineer, capable of creating detailed and effective prompts for language models.
Your task is to generate a comprehensive prompt based on the user's input structure.
Follow the instructions closely to generate a new prompt template.
</purpose>
<instructions>
<instruction>Analyze the user-input carefully, paying attention to the purpose, required sections, and variables.</instruction>
<instruction>Create a detailed prompt that includes all specified sections and incorporates the provided variables.</instruction>
<instruction>Use clear and concise language in the generated prompt.</instruction>
<instruction>Ensure that the generated prompt maintains a logical flow and structure.</instruction>
<instruction>Include placeholders for variables values in the format [[variable-name]].</instruction>
<instruction>If a section is plural, create a nested section with three items in the singular form.</instruction>
<instruction>The key xml blocks are purpose, instructions, sections, examples, user-prompt.
<instruction>Purpose defines the high level goal of the prompt.</instruction>
<instruction>Instructions are the detailed instructions for the prompt.</instruction>
<instruction>Sections are arbitrary blocks to include in the prompt.</instruction>
<instruction>Examples are showcases of what the output should be for the prompt. Use this to steer the structure of the output based on the user-input. This will typically be a list of examples with the expected output.</instruction>
<instruction>Variables are placeholders for values to be substituted in the prompt.</instruction>
<instruction>Not every section is required, but purpose and instructions are typically essential. Create the xml blocks based on the user-input.</instruction>
<instruction>Use the examples to understand the structure of the output.</instruction>
<instruction>Your output should be in XML format, mirroring the structure of the examples output.</instruction>
<instruction>Exclude CDATA sections in your output.</instruction>
<instruction>Response exclusively with the desired output, no other text.</instruction>
<instruction>If the user-input is structured like the input-format, use it as is. If it's not, infer the purpose, sections, and variables from the user-input.</instruction>
<instruction>The goal is to fill in the blanks and best infer the purpose, instructions, sections, and variables from the user-input. If instructions are given, use them to guide the other xml blocks.</instruction>
<instruction>Emphasize exact XML structure and nesting. Clearly define which blocks must contain which elements to ensure a well-formed output.</instruction>
<instruction>Ensure that each section builds logically upon the previous ones, creating a coherent narrative from purpose to instructions, sections, and examples.</instruction>
<instruction>Use direct, simple language and avoid unnecessary complexity to make the final prompt easy to understand.</instruction>
<instruction>After creating the full prompt, perform a final validation to confirm that all placeholders, instructions, and examples are included, properly formatted, and consistent.</instruction>
<instruction>Response should be a single code-block marked as xml language, even though the output will be pseudo-xml</instruction>
</instructions>
<input-format>
Purpose: [main purpose of the prompt], Instructions: [list of details of how to generate the output comma sep], Sections: [list of additional sections to include, e.g., examples, user-prompt], Examples: [list of examples of the output for the prompt], Variables: [list of variables to be used in the prompt]
</input-format>
<examples>
<example>
<input>
Purpose: generate mermaid diagrams. Instructions: generate a mermaid valid chart, use diagram type specified or default flow, use examples to understand the structure of the output. Sections: examples, user-prompt. Variables: user-prompt
</input>
<output>
<![CDATA[You are a world-class expert at creating mermaid charts.You follow the instructions perfectly to generate mermaid charts.<instructions> <instruction>Generate valid a mermaid chart based on the user-prompt.</instruction> <instruction>Use the diagram type specified in the user-prompt if non-specified use a flowchart.</instruction> <instruction>Use the examples to understand the structure of the output.</instruction></instructions><examples> <example> <user-chart-request> Create a flowchart that shows A flowing to E. At C, branch out to H and I. </user-chart-request> <chart-response> graph LR; A B C D E H I A --> B A --> C A --> D C --> H C --> I D --> E </chart-response> </example> <example> <user-chart-request> Build a pie chart that shows the distribution of Apples: 40, Bananas: 35, Oranges: 25. </user-chart-request> <chart-response> pie title Distribution of Fruits "Apples" : 40 "Bananas" : 35 "Oranges" : 25 </chart-response> </example> <example> <user-chart-request> State diagram for a traffic light. Still, Moving, Crash. </user-chart-request> <chart-response> stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] </chart-response> </example> <example> <user-chart-request> Create a timeline of major social media platforms from 2002 to 2006. </user-chart-request> <chart-response> timeline title History of Social Media Platforms 2002 : LinkedIn 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter </chart-response> </example> </examples><user-prompt> [[user-prompt]]</user-prompt>Your mermaid chart:]]>
</output>
</example>
<example>
<input>
Purpose: review git diff to improve code quality. Instructions: Review git diff, give suggestions for improvements to the code organized in a list sorted by priority. Sections: git-diff. Variables: git-diff
</input>
<output>
<![CDATA[<purpose> You are an expert at reviewing git diffs to improve code quality. You follow the instructions perfectly to review git diffs.</purpose><instructions> <instruction>Review the git diff and provide a detailed analysis of the changes made.</instruction> <instruction>Give suggestions for improvements to the code organized in a list sorted by priority.</instruction> <instruction>Think through the changes in a wholistic manner and offer suggestions for improvements.</instruction></instructions><git-diff> [[git-diff]]</git-diff>Your review of the git diff:]]>
</output>
</example>
<example>
<input>
Purpose: convert user mathematical expressions into LaTeX. Instructions: Take the user-input, which is a mathematical expression in plain text, and output a properly formatted LaTeX equation. Sections: user-input. Variables: user-input
</input>
<output>
<![CDATA[<purpose> You are a highly skilled mathematician who can transform plain text math expressions into LaTeX formatted equations.</purpose><instructions> <instruction>Read the user-input plain text mathematical expression carefully.</instruction> <instruction>Convert it into a well-formatted LaTeX equation environment.</instruction> <instruction>Ensure the final output is wrapped in a LaTeX display math environment like \[ ... \].</instruction></instructions><user-input> [[user-input]]</user-input>Your LaTeX equation:]]>
</output>
</example>
<example>
<input>
Purpose: Summarize and extract key action points from a user-provided legal contract
Instructions: Thoroughly analyze the legal text, identify and summarize key clauses, highlight main obligations and deadlines, and provide recommended action points in list form for the user. Keep the final output simple and easy to understand, no legalese. Follow the examples.
Sections: contract-text, summary, action-points, user-prompt
Examples: show how to summarize major clauses from a rental agreement, a service contract, and an employment contract
Variables: contract-text, user-prompt
</input>
<output>
<purpose>
You are an expert legal advisor who specializes in summarizing complex contracts into clear, actionable insights.
Your goal is to help the user quickly understand their contract, identify key clauses, and see recommended actions.
</purpose>
<instructions>
<instruction>Read the user-provided contract text carefully.</instruction>
<instruction>Identify the main clauses, obligations, timelines, and responsibilities mentioned.</instruction>
<instruction>Summarize these points in simple, accessible language, avoiding jargon and unnecessary complexity.</instruction>
<instruction>Highlight any deadlines or financial obligations that appear in the text.</instruction>
<instruction>Create a list of recommended action points that the user should consider taking, based on the contract’s provisions.</instruction>
<instruction>Keep the final output organized, starting with a structured summary of key clauses, then listing action points clearly.</instruction>
<instruction>Use the examples to understand how to structure the summary and action points.</instruction>
</instructions>
<examples>
<example>
<user-contract-request>
The following is a rental agreement for an apartment. It includes information about monthly rent, security deposit, responsibilities for maintenance, and conditions for early termination.
</user-contract-request>
<sample-contract-text>
The tenant agrees to pay a monthly rent of $1,500 due on the 1st of each month. The tenant will provide a security deposit of $1,500, refundable at the end of the lease term, provided there is no damage. The tenant is responsible for routine maintenance of the property, while the landlord will handle structural repairs. Early termination requires a 30-day notice and forfeiture of half the security deposit.
</sample-contract-text>
<summary>
- Monthly Rent: $1,500 due on the 1st
- Security Deposit: $1,500, refundable if no damage
- Maintenance: Tenant handles routine upkeep; Landlord handles major repairs
- Early Termination: 30-day notice required, tenant forfeits half of the deposit
</summary>
<action-points>
1. Mark your calendar to pay rent by the 1st each month.
2. Keep the property clean and address routine maintenance promptly.
3. Consider the cost of forfeiting half the deposit if ending the lease early.
</action-points>
</example>
<example>
<user-contract-request>
The user provides a service contract for IT support. It details response times, monthly service fees, confidentiality clauses, and conditions for termination due to non-payment.
</user-contract-request>
<sample-contract-text>
The service provider will respond to support requests within 24 hours. A monthly fee of $300 is payable on the 15th of each month. All proprietary information disclosed will remain confidential. The provider may suspend services if payment is not received within 7 days of the due date.
</sample-contract-text>
<summary>
- Response Time: Within 24 hours of each request
- Monthly Fee: $300, due on the 15th of each month
- Confidentiality: All shared information must be kept secret
- Non-Payment: Services suspended if not paid within 7 days after due date
</summary>
<action-points>
1. Ensure timely payment by the 15th each month to avoid service suspension.
2. Log requests clearly so provider can respond within 24 hours.
3. Protect and do not disclose any proprietary information.
</action-points>
</example>
<example>
<user-contract-request>
An employment contract is provided. It details annual salary, health benefits, employee responsibilities, and grounds for termination (e.g., misconduct or underperformance).
</user-contract-request>
<sample-contract-text>
The employee will receive an annual salary of $60,000 paid in bi-weekly installments. The employer provides health insurance benefits effective from the 30th day of employment. The employee is expected to meet performance targets set quarterly. The employer may terminate the contract for repeated underperformance or serious misconduct.
</sample-contract-text>
<summary>
- Compensation: $60,000/year, paid bi-weekly
- Benefits: Health insurance after 30 days
- Performance: Quarterly targets must be met
- Termination: Possible if underperformance is repeated or misconduct occurs
</summary>
<action-points>
1. Track and meet performance goals each quarter.
2. Review the insurance coverage details after 30 days of employment.
3. Maintain professional conduct and address performance feedback promptly.
</action-points>
</example>
</examples>
<contract-text>
[[contract-text]]
</contract-text>
<user-prompt>
[[user-prompt]]
</user-prompt>
Your contract summary and action points:
</output>
</example>
</examples>
<user-input>
{{user-input}}
</user-input>
Examples
Code Review
Purpose: Analyze the code and report bugs in the code.
Instructions:
Sort the bugs by severity ranked from 1 to 5, 5 being the most severe.
Look for critical bugs that would crash the program. Then non critical.
Use the examples to understand how to format the output.
Always offer a recommended fix.
Be concise with your bug descriptions.
Sections: examples, user-prompt
Examples: create 3 <example> outputs each with a list of bugs: '- (severity: 1-5) [file name(s), comma sep] [bug description] [ctrl-f '<search to find offending code>', '<another search to find offending code>'] [recommended fix]\n- then another one...'
Variables: user-prompt
Blog Post from JS Script File
Purpose: Create a html + css only blog post based on the script
Instructions:
Based on the script and topic, create an engaging blog post.
Organize the script into a blog post.
Create a click worth title.
Lead into an interesting hook.
Then breakdown table of contents that will cover 3 main points 'h2s'.
Use an informational, optimistic and informal tone.
Use a good mix of lists, paragraphs and images.
For images, place the images using <img> tags and use available images.
Available images are: img/o1.png, img/prompt-chains, img/qwq.png, img/prompt-engineering.png
Avoid over hype and keep it real.
Be careful not to sound like an ai or robot. Lean into a human like tone.
Theme is white background, light grey cards with black text. Be creative with box shadows and gradients, but make sure the text is readable.
Sections: script, topic
Variables: script, topic
Project Summary to PRD
Purpose: Create a professional project requirements document (PRD) for a given project-summary
Instructions:
Based on the project-summary, create a detailed PRD
Make sure to include a list of acceptance criteria
Include the tech stack, starting with programming language and including any frameworks or external libraries that are required to be used.
Format the response as a markdown document, using appropriate section headers, codeblocks, checklists, tables, and other markdown formatting.
Create mermaid charts in markdown codeblocks to show user-flow, infrastructure, data-flow, and dependencies as needed.
Sections: project-summary
Variables: project-summary
PRD to Stories Checklist
Purpose: Create a detailed and exhaustive markdown checklist from a detailed project-requirements-document with a focus on "one-point" tasks that include code-samples, test-assertions, and acceptance criteria
Instructions:
Response should be a markdown file with Overview, TDD Guidelines and Phases sections
Overview should be a detailed project summary that provides context for the tasks
TDD Guidelines should be a bullet point list of best practices, starting with "Always write tests before writing implementation." and including "Always run tests after making a code change", as well as other best practices
Each Phase should be an H2 header and contain a Task checklist
Each Task's title should be an checkbox
Each Task should have the following sections, in the following order: description (a summary of the work to be accomplished), subtasks (a checklist of subtasks), test-assertions (a list of statements that should have tests written to prove), code-example (a codeblock or series of codeblocks that provides guidance for the task),
Each Task's subtasks should start with a `write tests that validate the test-assertions`
`Phase 1` should be "Project Setup".
Sections: project-requirements-document
Variables: project-requirements-document
Build a graph-based task manager that feels like Miro: an infinite, pannable canvas on which every task is a node. “ Has sub-task ” edges form arbitrarily deep hierarchies, letting users zoom smoothly between a 10 000-foot roadmap and the nitty-gritty of daily work.
⸻
Core use-cases
Flow User experience Behind the scenes
Create or drag a task node Click a blank spot or press N → new card appears, editable in place. Server call inserts (:Task) node; optimistic UI shows it immediately.
Nest a sub-task Drop one node onto another or press ⌘ ⇧ ] → it indents visually and a chevron shows collapse state. Create [:HAS_SUBTASK] relationship and persist new x/y if the user dragged.
Locate anything via Command Palette (⌘ K) Type to fuzzy-search titles; hit ↵ and canvas animates to that node. REST/GraphQL endpoint returns up-to-20 best matches; react-flow fitBounds() centers the node and updates URL ?focus=.
Progress glance Completed subtasks tint green; a ring around the parent shows % done. Cypher reduces descendant statuses to a percentage; UI renders radial progress.
Real-time collaboration Two users see each other’s cursors and live edits. WebSocket subscriptions from Neo4j GraphQL stream node/edge diffs; client patches local Zustand store.
⸻
Tech stack (mandated)
Layer Technology
Frontend Next.js 14 (App Router) • TypeScript • Tailwind CSS • shadcn/ui (built-in CommandPalette, dialogs, sheets, badges) • React Flow (infinite canvas) • Zustand (local state)
Backend / API Neo4j 5 + neo4j-driver or @neo4j/graphql for auto-generated GraphQL schema & real-time subscriptions
Auth NextAuth.js with JWT strategy (Google, GitHub, email magic-link by default)
CI / Dev-ops GitHub Actions (Node 20 matrix + Neo4j TestHarness) • Vercel (app) • Neo4j AuraDB or self-hosted Docker
Testing Vitest + React Testing Library for components; Cypress for end-to-end canvas interactions
⸻
Architectural highlights
• Infinite canvas is a single React Flow instance wrapped by CanvasProvider. Nodes beyond the viewport are virtualised for performance.
• Lazy fetching: only root nodes load on entry; expanding a parent triggers a batched Cypher query for its children.
• Layout strategy: Dagre auto-positions new nodes unless the user has manually placed them (manual x/y persisted).
• URL state: every navigation action updates the query string so deep-links restore zoom, pan and selection.
• Row-level security: each :Task stores ownerId and optional teamId; Cypher or GraphQL auth rules filter by JWT sub or membership edge.
• Edge re-hydration: relationships stream over the WebSocket channel as discrete events, allowing fine-grained React Flow updates instead of full re-renders.
⸻
Functional requirements
CRUD tasks and arbitrarily deep subtasks with drag-to-re-parent.
Searchable Command Palette (shadcn) with fuzzy ranking and keyboard navigation.
Zoom-to-task animation and breadcrumb highlight when selected.
Status workflow: todo → doing → done; parent auto-calculates completion %.
Multi-user collaboration with presence indicators and optimistic conflict handling.
Responsive design for ≥ 1280 px canvas and compact tablet view (pan/zoom gestures).
Accessible keyboard shortcuts for all primary actions (create, delete, connect, search).
⸻
Non-functional requirements
Quality Target
Performance < 100 ms input-to-DOM latency for node drags on a 2000-node graph (desktop).
Scalability Neo4j Aura Free → Professional switch should require only config changes.
Reliability At-least-once event delivery; idempotent handlers to avoid dupes.
Security OWASP Top-10 mitigations; CSRF on mutations; rate-limit public APIs.
Maintainability ESLint + Prettier enforced; monorepo with Turborepo tasks.
⸻
Auth & access model
• Login: OAuth and passwordless email; configured in NextAuth auth.ts.
• Session: stateless JWT with 30-day sliding window; stored in httpOnly cookie.
• Authorisation:
• Default rule: MATCH (t:Task {id:$id}) WHERE t.owner = $jwt.sub OR $jwt.sub IN t.collaborators.
• Sharing: create (:User)-[:CAN_EDIT|CAN_VIEW]->(:Task) edges; palette shows share dialog to set roles.
• Public boards: toggle that flips a public:boolean flag; unauthenticated users get read-only WebSocket channel.
⸻
Expected results / deliverables
Running Vercel deployment with custom domain.
Neo4j Aura workspace seeded with demo data.
Comprehensive README covering local dev, env vars, CI, and migration scripts.
Automated test suite passing in CI.
Design doc (Markdown) capturing graph schema, auth rules, event flow, and UI state diagrams.
Demo walkthrough video or scripted Cypress run that: sign-in → create hierarchy → search & zoom → complete tasks → invite collaborator.
⸻
Future extensions (nice-to-have)
• Dependency edges (blockers) and critical-path highlighting.
• AI assist to break a large task into subtasks via OpenAI function-calling.
• Calendar sync to push tasks with due dates into Google Calendar.
• Mobile-first surface with pinch-to-zoom and haptic feedback.
⸻
Bottom line: deliver a fast, keyboard-centred, infinite-canvas task manager leveraging Next.js, TypeScript, Tailwind, shadcn/ui components, and Neo4j’s native graph power—ready for collaborative, deep-hierarchy project planning.
