概要
公開日: 2026-07-13
翻訳生成に失敗したため、原文をそのまま保存しています。
原文
The short version: To build mobile apps with AI, you need three tools. Skills are instruction files (a single SKILL.md) that an AI coding agent reads only when a task needs them, so they cost almost nothing in context. MCP servers connect the agent to external services like your build dashboard so it can read logs and drive a simulator, at the cost of loading every tool definition up front. The AI workflow is how you manage the conversation itself: keep each one under ~50% of the context window and branch threads by task. Add skills first, connect one MCP, then watch your context. The rest of this post shows how, using a habit tracker as the running example. In this post, I'll share everything you need to know to build powerful mobile apps with AI. There are tons of tools out there, but most of them aren't really useful - except for three, which we'll be diving deep into today: skills, MCP servers, and the AI workflow that ties them together. I'll show you how to set up each one and when to reach for it, while we lay the foundations for the habit tracker we'll be building together. Start by scaffolding a project with create-expo-app. You can use bunx or npx, it doesn't matter which - and if you want a different starting point, there are hundreds of other starter templates to pick from: bunx create-expo-app@latest habit-tracker cd habit-tracker bun install bun start That gives us a running app with the default tabs. They work, but they're the old style. We want the native liquid glass effect on the bottom tabs, and that's where the first tool comes in. Read on to learn more about each tool, or watch my video where I cover all this same content: Skills: instruction manuals for your AI A skill is a folder of instructions an AI coding agent reads when a task calls for it. The only thing it needs is a single SKILL.md file - you can also add references for more documentation and scripts for running code, but the markdown file alone is enough. Skills work across agents that support them, including Claude Code, Cursor, and Codex. The Expo team maintains a set of skills for building and shipping React Native apps, and the community has built plenty more. Browse them at expo.dev/skills, or grab the whole set from the expo/skills repo. To install, copy the command from the skills page and run it in your terminal. When it asks which skills you want, you can pick them one by one, or add all of them with a wildcard: npx skills add -s "*" Next it asks which coding agent should use them. Most agents read from an agents/ directory, but Claude Code has its own convention, so add that explicitly if that's what you're running. Then it asks about scope: should these skills live only in this project, or be available in any directory? Keep them scoped to the project unless you build mobile apps every single day, in which case, respect, and use symlinks. After that you'll see an agents/ directory and a .claude/ directory populated with your new skills. If you want to understand what makes a skill good, Anthropic published a guide to authoring skills that covers everything. The one idea worth internalizing now is progressive disclosure: don't load information until there's a reason to load it. A skill exposes a short description up front, and the full instructions only get pulled in when the task calls for them. That principle is the reason skills stay cheap on context, and it comes back later in this post. Two ways to invoke a skill The first way is explicit. You call it by name as a slash command: /expo-ui That tells the AI to read the SKILL.md inside that skill before it does anything. (In Codex the prefix is a $ instead of a /.) Let's use it on our tabs: /expo-ui Please implement the liquid glass effect inside the bottom tabs. The second way is autonomous. Every skill carries a description, and the AI uses it to decide on its own whether the skill is relevant to what you asked. In other words, every description gets loaded into every single conver