---

name: zalo-miniapp-discovery description: Explores and maps Zalo Mini App codebases. Use when asked to understand project structure, find features, audit zmp-sdk/zmp-ui usage, or analyze a ZMP codebase.

Zalo Mini App Discovery

Specialized discovery skill for Zalo Mini App (ZMP) projects built with React + TypeScript + Vite.

When to Use

• "Project này có gì?", "Cấu trúc project thế nào?"
• "Feature X nằm ở đâu?", "Component Y hoạt động thế nào?"
• "Đang dùng zmp-sdk/zmp-ui ở đâu?", "Audit codebase"
• Exploring any Zalo Mini App project for the first time

Discovery Pipeline

Step 1: Detect Stack & Dependencies

Check package.json for ZMP dependencies:

Copy{
  "zmp-sdk": "^x.x.x",      // Zalo Mini App SDK
  "zmp-ui": "^1.x.x",       // ZaUI Components (v1.11.0 latest)
  "zmp-cli": "^x.x.x"       // CLI tools
}

Also check for common companions:

• State: recoil, zustand, redux
• Styling: tailwindcss, sass
• Router: react-router-dom

Step 2: Identify Project Structure

Common ZMP project structures:

Copysrc/
├── pages/              # Page components (routes)
├── components/         # Shared components
├── hooks/              # Custom React hooks
├── utils/              # Helper functions
├── types/              # TypeScript interfaces
├── recoil/ or state/   # State management
├── assets/             # Static assets
└── app.tsx             # App entry point

Check for:

• app-config.json - ZMP configuration
• zmp-cli.json - CLI configuration
• Entry point structure (App, Page, Header from zmp-ui)

Step 3: Map zmp-ui Usage

Search for ZaUI component imports:

Copyimport { App, Page, Header, BottomNavigation } from 'zmp-ui';
import { Button, Input, Modal, Sheet } from 'zmp-ui';
import { List, Avatar, Swiper, Spinner } from 'zmp-ui';

Layout Components (critical - check these first):

• App - Root container (required)
• Page - Page wrapper (required per route)
• Header - Navigation header
• BottomNavigation - Tab bar

Form Components:

• Button, Input, Password, Search, TextArea, OTP
• Select, Picker, DatePicker
• Switch, Checkbox, Radio, Slider

Display Components:

• Avatar, List, Swiper, Progress, Spinner, Text
• Calendar, Icon, ImageViewer

Overlay Components:

• Modal, Sheet, ActionSheet, SnackbarProvider

Step 4: Map zmp-sdk Usage

Search for SDK imports and usage patterns:

Copyimport { ... } from 'zmp-sdk';

Group by functionality:

Step 5: Identify Integration Patterns

Check for SDK wrapper patterns:

Pattern A: Direct calls in components (not recommended)

Copy// Inside component
const user = await getUserInfo();

Pattern B: Custom hooks (recommended)

Copy// hooks/useZmpUser.ts
export const useZmpUser = () => { ... }

Pattern C: Service layer (recommended for large apps)

Copy// services/zmp/user.ts
export const zmpUserService = { ... }

Step 6: Check Event Listener Hygiene

Search for event subscriptions and verify cleanup:

Copy// Good: cleanup in useEffect
useEffect(() => {
  const handler = () => { ... };
  on('AppResumed', handler);
  return () => off('AppResumed', handler);
}, []);

// Bad: no cleanup, memory leak
on('AppResumed', () => { ... });

Output Report Template

After discovery, provide structured report:

Copy## ZMP Project Analysis

### Stack
- zmp-sdk: v{version}
- zmp-ui: v{version}
- State: {recoil/zustand/none}
- Styling: {tailwind/scss/css}

### Structure
- Pages: {count} pages in {path}
- Components: {count} in {path}
- Hooks: {count} custom hooks

### zmp-ui Usage
- Layout: App ✓, Page ✓, Header ✓, BottomNavigation ✓/✗
- Forms: {list of used}
- Overlays: {list of used}

### zmp-sdk Usage
- User/Auth: {apis used}
- Events: {apis used}
- ...

### Integration Pattern
- {Pattern A/B/C}
- Event cleanup: {good/needs attention}

### Recommendations
- {actionable items}

Anti-Patterns to Flag

1. No App/Page wrapper - Missing required ZaUI layout containers
2. Direct SDK calls in UI - Should use hooks/services
3. Event listeners without cleanup - Memory leaks
4. Anonymous event handlers - Can't be removed with off()
5. Missing permission checks - Before sensitive APIs (phone, camera)
6. Hardcoded OA IDs - Should be in config

Official Documentation

When you need more details, refer to:

• zmp-sdk API: https://miniapp.zaloplatforms.com/documents/api/
• zmp-ui Components: https://miniapp.zaloplatforms.com/documents/zaui
• Getting Started: https://miniapp.zaloplatforms.com/documents/intro/getting-started/