plan
This skill guides an AI agent to design detailed feature architectures for React Native and Expo applications, leveraging an `architect` agent for core design tasks.
About this skill
The `/plan` skill enables an AI agent to systematically create a comprehensive architecture plan for new features within React Native and Expo projects. It orchestrates a multi-step process: first, it clarifies user requirements, then analyzes the existing codebase to understand current patterns, and finally, delegates the actual architectural design to a specialized `architect` agent. The `architect` agent then designs components, plans Expo Router file structures, selects state management approaches, outlines data flow, and considers platform-specific requirements. The skill ensures the output adheres to a structured format, providing a clear roadmap for implementation. It also advises referencing active platform rules (Expo or bare RN) to ensure design consistency.
Best use case
The primary use case for the `/plan` skill is to establish a robust, systematic architectural foundation before commencing development on new features in React Native or Expo applications. Development teams and individual developers can leverage this skill to ensure new functionality integrates seamlessly with existing code, adheres to established best practices, and follows a clear, structured implementation path, thereby minimizing rework and enhancing code quality.
This skill guides an AI agent to design detailed feature architectures for React Native and Expo applications, leveraging an `architect` agent for core design tasks.
A comprehensive, structured architecture plan detailing file structure, component design, data flow, navigation strategy, and an ordered list of implementation tasks for a specified feature.
Practical example
Example input
Design the architecture for a new 'Product Catalog' feature in our Expo app. It should allow users to browse products by category, view product details, and add items to a cart. Ensure it integrates with our existing backend API for product data.
Example output
``` ## Overview This feature will implement a 'Product Catalog' allowing users to browse, view details, and add products to a shopping cart, integrating with the existing backend API. ## File Structure - `app/catalog/index.tsx` - `app/catalog/[productId].tsx` - `components/ProductCard.tsx` - `components/CategoryFilter.tsx` - `hooks/useProducts.ts` - `services/productService.ts` ## Component Design - `CatalogScreen`: Main entry, orchestrates `CategoryFilter` and product list. - `ProductCard`: Displays individual product details in a list/grid. - `ProductDetailScreen`: Shows comprehensive product information, 'Add to Cart' button. - `CategoryFilter`: Allows filtering products by category. ## Data Flow - State management with TanStack Query for product fetching and caching. - `useProducts` hook handles API calls via `productService.ts`. - Local state for category filtering. ## Navigation - New route: `/catalog` for the main product list. - Dynamic route: `/catalog/[productId]` for product details. ## Implementation Tasks 1. Set up `productService.ts` for API interactions. 2. Create `useProducts` hook for data fetching. 3. Design and implement `ProductCard` component. 4. Build `CatalogScreen` with category filtering. 5. Implement `ProductDetailScreen`. 6. Integrate 'Add to Cart' functionality. 7. Add unit and integration tests. ```
When to use this skill
- When starting development on a new, significant feature in a React Native or Expo project.
- Before making substantial changes or additions to the application's core architecture.
- To ensure new features are designed with clear component hierarchies, data flow, and navigation.
- When you need a structured, machine-generated plan to guide implementation tasks.
When not to use this skill
- For minor bug fixes, small UI adjustments, or tasks that do not impact application architecture.
- If the project is not a React Native or Expo application.
- When a detailed architectural plan is already complete and approved for the task.
- If the required feature is simple enough not to warrant a formal architectural design phase.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/plan/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How plan Compares
| Feature / Agent | plan | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
This skill guides an AI agent to design detailed feature architectures for React Native and Expo applications, leveraging an `architect` agent for core design tasks.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# /plan — Feature Architecture Design You are executing the `/plan` command. Use the **architect** agent to design a feature architecture. ## Process 1. **Understand the requirement** — Ask clarifying questions if the feature description is vague 2. **Analyze existing codebase** — Read relevant files, understand current navigation structure, state management, and API patterns 3. **Design the architecture** — Using the architect agent's process: - Decompose into components and screens - Plan Expo Router file structure - Select state management approach (Zustand / TanStack Query / local) - Design data flow and API layer - Consider platform-specific requirements 4. **Output the plan** — Use the architect agent's output format: ### Architecture Output ``` ## Overview [1-2 sentence description of the feature] ## File Structure [New files to create with paths] ## Component Design [Component hierarchy and responsibilities] ## Data Flow [State management approach, API calls, caching strategy] ## Navigation [New routes, layout changes, deep link support] ## Implementation Tasks [Ordered list of implementation steps] ``` 5. **Review with user** — Present the plan and ask for approval before implementation ## Notes - Reference the active platform rules layer (`rules/expo/patterns.md` or `rules/bare-rn/patterns.md`) for conventions - Consider whether this is Expo managed, bare RN, or has native modules - Include test strategy in the plan
Related Skills
erne-perf
ERNE — Performance profiling and optimization using the performance-profiler agent
erne-code
ERNE — Implement features using the senior-developer agent
code
Implement features using the senior-developer agent
laravel-expert
Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).
webmcp
This skill guides AI agents in implementing WebMCP within web projects, enabling browser-native structured tools for AI interaction using JavaScript or HTML APIs.
Prompt Coach
Analyze your Claude Code session logs to improve prompt quality, optimize tool usage, and enhance your skills as an AI-native engineer.
react
This AI agent skill guides the generation of modern React components, incorporating best practices such as destructured props, leveraging compiler optimizations, and proper use of React Effects. It also ensures compatibility and utilizes Tailwind CSS v4 syntax.
nextjs
Provides comprehensive Next.js routing capabilities, including typed routes, helpers for `PageProps` and `LayoutProps`, and `nuqs` for managing URL state.
just
Use `just` to save and run project-specific commands. Use when the user mentions `justfile`, `recipe`, or needs a simple alternative to `make` for task automation.
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
worktree-manager
Create, manage, and cleanup git worktrees with Claude Code agents across all projects. USE THIS SKILL when user says "create worktree", "spin up worktrees", "new worktree for X", "worktree status", "cleanup worktrees", "sync worktrees", or wants parallel development branches. Also use when creating PRs from a worktree branch (to update registry with PR number). Handles worktree creation, dependency installation, validation, agent launching in Ghostty, and global registry management.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.