Agent skill
zalo-mini-app
Build Zalo Mini Apps - lightweight web apps running inside Zalo super-app. This skill provides ZaUI components (Button, Input, Modal, Tabs, Avatar, etc.), JavaScript APIs (authorize, getUserInfo, getPhoneNumber, getLocation, Storage, Camera), Checkout SDK for payments, design guidelines, and development tools. Use when building Mini Apps, using ZaUI components, calling Zalo APIs, integrating payments, converting web apps to Mini Apps, or following Zalo design standards.
Install this agent skill to your Project
npx add-skill https://github.com/suminhthanh/zalo-mini-app-skills/tree/main/skills/zalo-mini-app
SKILL.md
Zalo Mini App Development
Build Mini Apps for the Zalo platform using React, ZaUI components, and Zalo SDK APIs.
Quick Start
npm install -g zmp-cli
zmp create my-app && cd my-app && zmp start
See getting-started.md for full setup, deployment, and app-config.json.
Core Packages
npm install zmp-ui zmp-sdk
import { Button, Input, Modal } from "zmp-ui";
import "zmp-ui/zaui.css";
import { getUserInfo, authorize } from "zmp-sdk/apis";
References
APIs
- api-overview.md - API categories & patterns
- api-user.md - authorize, getUserInfo, getPhoneNumber
- api-storage.md - setItem, getItem, storage APIs
- api-ui.md - showToast, navigation, routing
- api-device.md - location, camera, QR, NFC
- api-zalo.md - followOA, openChat, share
ZaUI Components
- zaui-overview.md - Component list & design tokens
- zaui-layout.md - App, Page, Header, Tabs, Router
- zaui-display.md - Avatar, Icon, List, Swiper
- zaui-form.md - Button, Input, Select, DatePicker
- zaui-overlay.md - Modal, Sheet, ActionSheet
Design & Setup
- design-guidelines.md - Colors, typography, UX
- getting-started.md - Setup, deploy, publish
- web-design-guidelines.md - Accessibility, forms, animations, touch, i18n
Performance & React
- react-best-practices.md - Waterfalls, bundle size, re-renders, JS performance
Common Patterns
Get User Info
const { userInfo } = await getUserInfo({ autoRequestPermission: true });
// { id, name, avatar, followedOA }
Basic Page Layout
<App>
<Page>
<Header title="Home" />
<List>
<List.Item title="Item" suffix={<Icon icon="zi-chevron-right" />} />
</List>
</Page>
<BottomNavigation fixed>
<BottomNavigation.Item key="home" label="Home" icon={<Icon icon="zi-home" />} />
</BottomNavigation>
</App>
Resources
- Docs: https://miniapp.zaloplatforms.com/documents/
- Mini App Center: https://miniapp.zaloplatforms.com/
- React Best Practices: https://react.dev
- SWR: https://swr.vercel.app
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
mattpocock/skills
git-guardrails-claude-code
Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git push/reset in Claude Code.
mattpocock/skills
migrate-to-shoehorn
Migrate test files from `as` type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace `as` in tests, or needs partial test data.
mattpocock/skills
setup-pre-commit
Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
mattpocock/skills
obsidian-vault
Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.
mattpocock/skills
scaffold-exercises
Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.
mattpocock/skills
handoff
Compact the current conversation into a handoff document for another agent to pick up.
Didn't find tool you were looking for?