How do I install the App Architecture skill?

Run npx skillmds@latest add uitbreidenos/app-architecture in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is App Architecture safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with App Architecture?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is App Architecture free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published App Architecture?

UitbreidenOS (@uitbreidenos) published this skill. Their other Agent Skills are listed on their SkillMD profile.

App Architecture by uitbreidenos — Agent Skill

Name: App Architecture
Rating: 4.666666666666667 (3 reviews)
Author: UitbreidenOS

File contents

When to activate

Designing navigation structure for a new mobile app
Choosing state management approach (Redux, Zustand, Riverpod, etc.)
Defining data layer architecture (API clients, caching, persistence)
Setting up module boundaries and feature-based folder structure
Migrating from monolithic to modular architecture

When NOT to use

For backend API architecture (use API Developer Stack)
For web app architecture
For UI component design (framework-specific skills)

Instructions

Define app complexity tier. Simple (1-5 screens), Medium (5-20 screens, 2-3 features), Complex (20+ screens, deep linking, offline).
Choose navigation pattern. Stack (simple), Tab + Stack (medium), Drawer + Tab + Stack (complex). Map user flows.
Select state management. Local state for UI, global store for shared data, server state for API. Match to framework (Zustand/Redux for RN, Riverpod/Bloc for Flutter, @Observable for SwiftUI).
Design data layer. Repository pattern: API client → cache (in-memory + persistent) → repository → view model → UI.
Define module boundaries. Feature-based folders: features/auth/, features/feed/, features/profile/. Shared: core/, shared/ui/, shared/utils/.
Plan deep linking. Map URL schemes to screens: app://profile/123 → ProfileScreen(userId: "123").
Document architecture decisions. ADRs for each major choice with alternatives considered.

Example

Architecture Decision: Medium-complexity e-commerce app

Navigation: Bottom tabs (Home, Search, Cart, Profile) + Stack per tab
State: Zustand (global: cart, auth) + React Query (server: products, orders)
Data: API client (axios) → React Query cache → MMKV persistence
Modules:
  features/auth/     — Login, register, forgot password
  features/catalog/  — Product list, detail, search
  features/cart/     — Cart, checkout, payment
  features/profile/  — Account, orders, settings
  core/              — Navigation, theme, i18n, analytics
  shared/            — UI components, utils, types

---name: app-architecturedescription: Design mobile app architecture — navigation patterns, state management, data layer, and module boundaries---## When to activate- Designing navigation structure for a new mobile app- Choosing state management approach (Redux, Zustand, Riverpod, etc.)- Defining data layer architecture (API clients, caching, persistence)- Setting up module boundaries and feature-based folder structure- Migrating from monolithic to modular architecture## When NOT to use- For backend API architecture (use API Developer Stack)- For web app architecture- For UI component design (framework-specific skills)## Instructions1. **Define app complexity tier.** Simple (1-5 screens), Medium (5-20 screens, 2-3 features), Complex (20+ screens, deep linking, offline).2. **Choose navigation pattern.** Stack (simple), Tab + Stack (medium), Drawer + Tab + Stack (complex). Map user flows.3. **Select state management.** Local state for UI, global store for shared data, server state for API. Match to framework (Zustand/Redux for RN, Riverpod/Bloc for Flutter, @Observable for SwiftUI).4. **Design data layer.** Repository pattern: API client → cache (in-memory + persistent) → repository → view model → UI.5. **Define module boundaries.** Feature-based folders: `features/auth/`, `features/feed/`, `features/profile/`. Shared: `core/`, `shared/ui/`, `shared/utils/`.6. **Plan deep linking.** Map URL schemes to screens: `app://profile/123` → ProfileScreen(userId: "123").7. **Document architecture decisions.** ADRs for each major choice with alternatives considered.## Example```Architecture Decision: Medium-complexity e-commerce appNavigation: Bottom tabs (Home, Search, Cart, Profile) + Stack per tabState: Zustand (global: cart, auth) + React Query (server: products, orders)Data: API client (axios) → React Query cache → MMKV persistenceModules: features/auth/ — Login, register, forgot password features/catalog/ — Product list, detail, search features/cart/ — Cart, checkout, payment features/profile/ — Account, orders, settings core/ — Navigation, theme, i18n, analytics shared/ — UI components, utils, types```

Frequently asked questions

App Architecture