{"@context":"https://ihatereading.in/roadmap/schema/v1","type":"roadmap-chapter","roadmap":{"slug":"vibe-coding-mobile-app-development","title":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents)","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development.json"},"slug":"vibe-coding-foundations","title":"Vibe Coding Foundations & the Agentic Workflow","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/vibe-coding-foundations","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/vibe-coding-foundations.json","summary":{"breadcrumb":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents) → Vibe Coding Foundations & the Agentic Workflow","purpose":"What vibe coding really is, the plan–prompt–review–test loop, and how Cursor, Claude Code and Codex fit into building a mobile app from scratch.","prerequisites":["A laptop, a phone, and an AI coding tool (Cursor, Claude Code, or Codex)"],"afterThisChapter":["Mobile App Fundamentals for Vibe Coders"]},"agentLens":null,"topics":[{"id":"the-vibe-coding-loop","slug":"the-vibe-coding-loop","title":"The vibe coding loop","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Plan the screen or feature in plain words, prompt the agent for a small change, run the app on a device, review the diff, test, then commit."],"why":["A solo builder can now ship a working mobile app in weeks instead of months, but only if the loop stays disciplined."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Plan the screen or feature in plain words, prompt the agent for a small change, run the app on a device, review the diff, test, then commit. Repeat with the next small slice. Big one-shot prompts produce big one-shot mistakes.","example":null,"mentalModel":"You are the director and the agent is a fast, literal crew: it will build exactly the set you describe, so unclear directions produce a confident, wrong set.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is The vibe coding loop and when do you use it in a mobile app?"],"practice":["Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it."],"interview":["How do you keep AI-generated code safe and maintainable?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://cursor.com/docs"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/cursor-codex-claude-code-prompts-collection","/blogs/agent-harnessing-what-is-an-agent-harness","/blogs/making-ai-applications-without-any-ai-slop","/blogs/smallest-ai-agent"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"specs-before-prompts","slug":"specs-before-prompts","title":"Specs before prompts","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Write a one-page spec first: who the user is, the three core screens, the data you store, and what is out of scope."],"why":["A solo builder can now ship a working mobile app in weeks instead of months, but only if the loop stays disciplined."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Write a one-page spec first: who the user is, the three core screens, the data you store, and what is out of scope. Paste it into the agent as context. A clear spec is the single biggest quality lever.","example":null,"mentalModel":"You are the director and the agent is a fast, literal crew: it will build exactly the set you describe, so unclear directions produce a confident, wrong set.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Specs before prompts and when do you use it in a mobile app?"],"practice":["Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it."],"interview":["How do you keep AI-generated code safe and maintainable?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://code.claude.com/docs"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/cursor-codex-claude-code-prompts-collection","/blogs/agent-harnessing-what-is-an-agent-harness","/blogs/making-ai-applications-without-any-ai-slop","/blogs/smallest-ai-agent"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"project-context-files","slug":"project-context-files","title":"Project context files","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Give the agent standing instructions: `.cursor/rules/*.mdc` for Cursor, `CLAUDE.md` for Claude Code, and `AGENTS.md` for Codex and many other agents."],"why":["A solo builder can now ship a working mobile app in weeks instead of months, but only if the loop stays disciplined."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Give the agent standing instructions: `.cursor/rules/*.mdc` for Cursor, `CLAUDE.md` for Claude Code, and `AGENTS.md` for Codex and many other agents. These files hold your stack, folder layout and do-not-touch list.","example":null,"mentalModel":"You are the director and the agent is a fast, literal crew: it will build exactly the set you describe, so unclear directions produce a confident, wrong set.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Project context files and when do you use it in a mobile app?"],"practice":["Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it."],"interview":["How do you keep AI-generated code safe and maintainable?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://agents.md/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/cursor-codex-claude-code-prompts-collection","/blogs/agent-harnessing-what-is-an-agent-harness","/blogs/making-ai-applications-without-any-ai-slop","/blogs/smallest-ai-agent"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"plan-mode-and-small-diffs","slug":"plan-mode-and-small-diffs","title":"Plan mode and small diffs","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Ask the agent to propose a plan and list the files it will touch before editing."],"why":["A solo builder can now ship a working mobile app in weeks instead of months, but only if the loop stays disciplined."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Ask the agent to propose a plan and list the files it will touch before editing. Keep each change small enough to review in a couple of minutes. Commit after every working step so you can roll back.","example":null,"mentalModel":"You are the director and the agent is a fast, literal crew: it will build exactly the set you describe, so unclear directions produce a confident, wrong set.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Plan mode and small diffs and when do you use it in a mobile app?"],"practice":["Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it."],"interview":["How do you keep AI-generated code safe and maintainable?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://developers.openai.com/codex"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/cursor-codex-claude-code-prompts-collection","/blogs/agent-harnessing-what-is-an-agent-harness","/blogs/making-ai-applications-without-any-ai-slop","/blogs/smallest-ai-agent"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"you-own-the-review","slug":"you-own-the-review","title":"You own the review","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["The agent writes code; you decide whether it ships."],"why":["A solo builder can now ship a working mobile app in weeks instead of months, but only if the loop stays disciplined."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"The agent writes code; you decide whether it ships. Read the diff, run type-checks, run the app on a real device, and watch for invented APIs, hard-coded secrets and silent error handling.","example":null,"mentalModel":"You are the director and the agent is a fast, literal crew: it will build exactly the set you describe, so unclear directions produce a confident, wrong set.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is You own the review and when do you use it in a mobile app?"],"practice":["Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it."],"interview":["How do you keep AI-generated code safe and maintainable?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://reactnative.dev/docs/debugging"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/cursor-codex-claude-code-prompts-collection","/blogs/agent-harnessing-what-is-an-agent-harness","/blogs/making-ai-applications-without-any-ai-slop","/blogs/smallest-ai-agent"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"choosing-your-tools","slug":"choosing-your-tools","title":"Choosing your tools","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Cursor is an AI-first editor, Claude Code and Codex are terminal and cloud agents that work across your repo."],"why":["A solo builder can now ship a working mobile app in weeks instead of months, but only if the loop stays disciplined."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Cursor is an AI-first editor, Claude Code and Codex are terminal and cloud agents that work across your repo. Many vibe coders use an editor for exploring and an agent CLI for larger tasks. Pick one primary tool and learn it well before adding more.","example":null,"mentalModel":"You are the director and the agent is a fast, literal crew: it will build exactly the set you describe, so unclear directions produce a confident, wrong set.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Choosing your tools and when do you use it in a mobile app?"],"practice":["Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it."],"interview":["How do you keep AI-generated code safe and maintainable?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create an empty git repo with a SPEC.md (users, three screens, data) and an AGENTS.md or .cursor/rules file naming your stack. Ask your agent to propose a plan only, then review it.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://cursor.com/docs"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/cursor-codex-claude-code-prompts-collection","/blogs/agent-harnessing-what-is-an-agent-harness","/blogs/making-ai-applications-without-any-ai-slop","/blogs/smallest-ai-agent"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]}],"updatedAt":"2026-10-23T06:00:09.444Z"}