@xaviele/ag-kit 1.0.0

package/template/.agent/skills/zalo-mini-app/references/api-user.md

@@ -0,0 +1,113 @@
+# User & Authorization APIs
+
+## authorize
+Request permission for sensitive data.
+```js
+import { authorize } from "zmp-sdk/apis";
+
+await authorize({ scopes: ["scope.userInfo", "scope.userPhonenumber"] });
+```
+
+Scopes:
+- `scope.userInfo` - Name & avatar
+- `scope.userPhonenumber` - Phone number
+- `scope.userLocation` - GPS location
+
+## getUserID
+Get unique user identifier (no permission required).
+```js
+import { getUserID } from "zmp-sdk/apis";
+
+const userID = await getUserID({});
+```
+
+## getUserInfo
+Get user profile with name and avatar.
+```js
+import { getUserInfo } from "zmp-sdk/apis";
+
+const { userInfo } = await getUserInfo({
+  autoRequestPermission: true,  // Auto-show permission dialog
+  avatarType: "normal"          // "small" | "normal" | "large"
+});
+
+// userInfo: { id, name, avatar, followedOA, idByOA, isSensitive }
+```
+
+Handle permission denied:
+```js
+try {
+  const { userInfo } = await getUserInfo();
+} catch (error) {
+  if (error.code === -1401) {
+    // User denied permission
+  }
+}
+```
+
+## getPhoneNumber
+Get user phone number (requires permission).
+```js
+import { getPhoneNumber } from "zmp-sdk/apis";
+
+const { number } = await getPhoneNumber({});
+```
+
+## getAccessToken
+Get token for backend verification.
+```js
+import { getAccessToken } from "zmp-sdk/apis";
+
+const { accessToken } = await getAccessToken({});
+// Send to backend for verification via Open API
+```
+
+## getSetting
+Check current permission status.
+```js
+import { getSetting } from "zmp-sdk/apis";
+
+const settings = await getSetting({});
+// { "scope.userInfo": true, "scope.userPhonenumber": false }
+```
+
+## getAppInfo
+Get Mini App information.
+```js
+import { getAppInfo } from "zmp-sdk/apis";
+
+const { appId, appName, version } = await getAppInfo({});
+```
+
+## getSystemInfo
+Get device and Zalo app info.
+```js
+import { getSystemInfo } from "zmp-sdk/apis";
+
+const {
+  platform,        // "android" | "ios"
+  zaloVersion,
+  language,
+  screenWidth,
+  screenHeight,
+  statusBarHeight,
+  safeAreaInsets
+} = await getSystemInfo({});
+```
+
+## getDeviceIdAsync
+Get unique device identifier.
+```js
+import { getDeviceIdAsync } from "zmp-sdk/apis";
+
+const deviceId = await getDeviceIdAsync({});
+```
+
+## getContextAsync
+Get context when Mini App was opened.
+```js
+import { getContextAsync } from "zmp-sdk/apis";
+
+const context = await getContextAsync({});
+// { entryPoint, referrer, ... }
+```

package/template/.agent/skills/zalo-mini-app/references/api-zalo.md

@@ -0,0 +1,127 @@
+# Zalo Platform APIs
+
+## Official Account (OA)
+
+### followOA / unfollowOA
+Prompt user to follow/unfollow OA.
+```js
+import { followOA, unfollowOA } from "zmp-sdk/apis";
+
+await followOA({ oaId: "your-oa-id" });
+await unfollowOA({ oaId: "your-oa-id" });
+```
+
+### interactOA
+Open OA interaction options.
+```js
+import { interactOA } from "zmp-sdk/apis";
+
+await interactOA({ oaId: "your-oa-id" });
+```
+
+### viewOAQr
+Display OA QR code.
+```js
+import { viewOAQr } from "zmp-sdk/apis";
+
+viewOAQr({ oaId: "your-oa-id" });
+```
+
+## Chat & Social
+
+### openChat
+Open chat with user or OA.
+```js
+import { openChat } from "zmp-sdk/apis";
+
+openChat({
+  type: "oa",  // "user" | "oa"
+  id: "oa-or-user-id",
+  message: "Hello!"
+});
+```
+
+### openProfile
+Open user/OA profile.
+```js
+import { openProfile } from "zmp-sdk/apis";
+
+openProfile({
+  type: "user",
+  id: "user-id"
+});
+```
+
+### openProfilePicker
+Open friend selector.
+```js
+import { openProfilePicker } from "zmp-sdk/apis";
+
+const { users } = await openProfilePicker({
+  maxSelection: 5
+});
+```
+
+### openShareSheet
+Share content.
+```js
+import { openShareSheet } from "zmp-sdk/apis";
+
+openShareSheet({
+  type: "link",
+  data: {
+    link: "https://zalo.me/s/app-id",
+    title: "Check this out!",
+    description: "Amazing mini app",
+    thumbnail: "https://example.com/thumb.jpg"
+  }
+});
+```
+
+### openPostFeed
+Post to Zalo feed.
+```js
+import { openPostFeed } from "zmp-sdk/apis";
+
+openPostFeed({
+  type: "link",
+  data: {
+    link: "https://example.com",
+    title: "My Post"
+  }
+});
+```
+
+## App Features
+
+### createShortcut
+Add shortcut to home screen.
+```js
+import { createShortcut } from "zmp-sdk/apis";
+
+await createShortcut({});
+```
+
+### addRating
+Prompt user to rate mini app.
+```js
+import { addRating } from "zmp-sdk/apis";
+
+addRating({});
+```
+
+### minimizeApp
+Minimize to background.
+```js
+import { minimizeApp } from "zmp-sdk/apis";
+
+minimizeApp({});
+```
+
+### favoriteApp
+Add to favorites.
+```js
+import { favoriteApp } from "zmp-sdk/apis";
+
+favoriteApp({});
+```

package/template/.agent/skills/zalo-mini-app/references/design-guidelines.md

@@ -0,0 +1,70 @@
+# Design Guidelines
+
+## Core Principles
+1. **Fast & Friendly** - Quick, intuitive experience
+2. **Clear & Consistent** - Easy navigation, unified UI
+3. **User Control** - Undo actions, feedback, status display
+4. **Reduce Cognitive Load** - Minimize required actions
+
+## Navigation
+
+### Header Bar
+- Fixed header with back/home button on left
+- Menu button (fixed by Zalo) on top right
+- Don't place elements under menu button
+
+### Bottom Navigation
+- Max 4 tabs recommended
+- Use for main sections only
+
+## Loading States
+1. **Splash Loading** - Initial app load (auto by Zalo)
+2. **Progress Bar** - Below action bar for page loads
+3. **Modal Loading** - Full overlay for operations
+
+## Feedback
+- Show toast for success/error states
+- Provide empty states for no content
+- Show error states with retry options
+
+## Colors
+| Type | Color |
+|------|-------|
+| Primary | #006AF5 |
+| Success | #00C853 |
+| Warning | #FFA000 |
+| Error | #FF3B30 |
+| Text Primary | #141415 |
+| Text Secondary | #767A7F |
+| Background | #F4F5F6 |
+
+## Typography
+- Title: 20px, Bold
+- Subtitle: 16px, Medium
+- Body: 14px, Regular
+- Caption: 12px, Regular
+
+## Spacing
+Base unit: 4px (U1)
+- Component padding: 12-16px
+- Section spacing: 24px
+- Screen margin: 16px
+
+## Corner Radius
+- Buttons: 8px
+- Cards: 12px
+- Modals: 16px
+- Avatar: 20% of width
+
+## Performance
+- Bundle size: <10MB
+- First load: <3 seconds
+- Optimize images, lazy load
+
+## Review Checklist
+- [ ] Logo, name, description accurate
+- [ ] No 3rd party links without approval
+- [ ] No crashes, smooth performance
+- [ ] Good UI/UX following guidelines
+- [ ] Proper authentication
+- [ ] No malicious code

package/template/.agent/skills/zalo-mini-app/references/getting-started.md

@@ -0,0 +1,95 @@
+# Getting Started with Zalo Mini App
+
+## Prerequisites
+- Node.js installed
+- Zalo Developer account at [Zalo for Developers](https://developers.zalo.me/)
+
+## Create Zalo App & Mini App
+1. Login to [Zalo for Developers](https://developers.zalo.me/), create a Zalo App
+2. In Settings, activate the app
+3. Go to [Mini App Center](https://miniapp.zaloplatforms.com/), select Zalo App, create Mini App
+4. Note the Mini App ID for development
+
+## Install Dev Tools
+```bash
+npm install -g zmp-cli
+```
+
+## Create New Project
+```bash
+zmp create my-app
+cd my-app
+zmp start
+```
+
+## Project Structure
+```
+my-app/
+├── src/
+│   ├── pages/          # Page components
+│   ├── components/     # Reusable components
+│   └── app.js          # Entry point
+├── app-config.json     # Mini App configuration
+├── .env               # Environment variables
+└── package.json
+```
+
+## app-config.json
+```json
+{
+  "app": {
+    "title": "My App",
+    "headerColor": "#1843EF",
+    "headerTitle": "App Title",
+    "textColor": "white",
+    "leftButton": "back",
+    "statusBar": "normal",
+    "actionBarHidden": false
+  },
+  "listCSS": [],
+  "listSyncJS": [],
+  "listAsyncJS": []
+}
+```
+
+| Field | Description |
+|-------|-------------|
+| headerColor | Navigation bar background color |
+| headerTitle | Title displayed on navigation bar |
+| textColor | Text color ("white" or "black") |
+| leftButton | "back" or "home" |
+| statusBar | "normal" or "fullscreen" |
+| actionBarHidden | Hide navigation bar |
+
+## Deploy & Test
+```bash
+zmp deploy           # Deploy to testing
+zmp login            # Login to Zalo
+```
+
+## Test on Device
+1. Open Zalo app
+2. Scan QR code from Mini App Center
+3. Or use link: `https://zalo.me/s/{mini-appId}`
+
+## Convert Web App to Mini App
+```bash
+cd your-web-app
+zmp init
+# Select "Using ZMP to deploy only"
+```
+
+Update root element selector to `#app`:
+```js
+const root = createRoot(document.getElementById("app"));
+```
+
+For Vite, set `base: "./"` in vite.config.js.
+For Webpack, use `window.APP_VERSION` for public path.
+
+## Publishing
+1. Go to Mini App Center > Version Management
+2. Submit version for review
+3. After approval, click Publish
+
+See [design-guidelines.md](./design-guidelines.md) for UI requirements.