@xaviele/ag-kit 1.0.0

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

@@ -0,0 +1,108 @@
+# ZaUI Form Components
+
+## Button
+```jsx
+import { Button } from "zmp-ui";
+
+<Button>Default</Button>
+<Button type="primary">Primary</Button>
+<Button type="danger">Danger</Button>
+<Button size="small">Small</Button>
+<Button size="large" fullWidth>Large Full</Button>
+<Button loading>Loading</Button>
+<Button disabled>Disabled</Button>
+```
+
+Props: `type`, `size`, `fullWidth`, `loading`, `disabled`, `onClick`
+
+## Input
+```jsx
+import { Input } from "zmp-ui";
+
+<Input label="Name" placeholder="Enter name" />
+<Input type="number" label="Amount" />
+<Input status="error" errorText="Required field" />
+<Input clearable />
+```
+
+## Password
+```jsx
+import { Password } from "zmp-ui";
+
+<Password label="Password" />
+```
+
+## Search
+```jsx
+import { Search } from "zmp-ui";
+
+<Search placeholder="Search..." onChange={(e) => {}} />
+```
+
+## TextArea
+```jsx
+import { TextArea } from "zmp-ui";
+
+<TextArea label="Description" maxLength={200} showCount />
+```
+
+## OTP
+```jsx
+import { OTP } from "zmp-ui";
+
+<OTP length={6} onChange={(value) => console.log(value)} />
+```
+
+## Select
+```jsx
+import { Select } from "zmp-ui";
+
+<Select
+  label="Country"
+  placeholder="Select country"
+  onChange={(value) => {}}
+>
+  <Option value="vn" title="Vietnam" />
+  <Option value="us" title="United States" />
+</Select>
+```
+
+## Picker / DatePicker
+```jsx
+import { Picker, DatePicker } from "zmp-ui";
+
+<Picker
+  data={[{ value: 1, displayName: "Option 1" }]}
+  onChange={(value) => {}}
+/>
+
+<DatePicker
+  label="Birthday"
+  value={date}
+  onChange={(value) => setDate(value)}
+/>
+```
+
+## Switch / Checkbox / Radio
+```jsx
+import { Switch, Checkbox, Radio } from "zmp-ui";
+
+<Switch checked={on} onChange={setOn} />
+
+<Checkbox.Group onChange={(values) => {}}>
+  <Checkbox value="a" label="Option A" />
+  <Checkbox value="b" label="Option B" />
+</Checkbox.Group>
+
+<Radio.Group value={selected} onChange={setSelected}>
+  <Radio value="1" label="Choice 1" />
+  <Radio value="2" label="Choice 2" />
+</Radio.Group>
+```
+
+## Slider
+```jsx
+import { Slider } from "zmp-ui";
+
+<Slider value={50} onChange={(v) => {}} min={0} max={100} />
+```

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

@@ -0,0 +1,94 @@
+# ZaUI Layout Components
+
+## App
+Root component wrapping entire app.
+```jsx
+import { App } from "zmp-ui";
+
+<App>
+  {/* Your app content */}
+</App>
+```
+
+## Page
+Page container with header support.
+```jsx
+import { Page, Header } from "zmp-ui";
+
+<Page>
+  <Header title="Page Title" />
+  <div className="page-content">
+    {/* Content */}
+  </div>
+</Page>
+```
+
+Props:
+- `hideScrollbar` - Hide scrollbar
+- `restoreScrollOnBack` - Restore scroll position
+
+## Header
+Custom header component.
+```jsx
+import { Header } from "zmp-ui";
+
+<Header
+  title="My Page"
+  showBackIcon={true}
+  onBackClick={() => navigate(-1)}
+/>
+```
+
+Props:
+- `title` - Header title
+- `showBackIcon` - Show back button
+- `onBackClick` - Back button handler
+
+## BottomNavigation
+Fixed bottom tab bar.
+```jsx
+import { BottomNavigation } from "zmp-ui";
+
+<BottomNavigation fixed>
+  <BottomNavigation.Item
+    key="home"
+    label="Home"
+    icon={<Icon icon="zi-home" />}
+    activeIcon={<Icon icon="zi-home-solid" />}
+  />
+  <BottomNavigation.Item
+    key="profile"
+    label="Profile"
+    icon={<Icon icon="zi-user" />}
+    activeIcon={<Icon icon="zi-user-solid" />}
+  />
+</BottomNavigation>
+```
+
+## Tabs
+Tab panels.
+```jsx
+import { Tabs } from "zmp-ui";
+
+<Tabs defaultActiveKey="tab1">
+  <Tabs.Tab key="tab1" label="Tab 1">
+    Content 1
+  </Tabs.Tab>
+  <Tabs.Tab key="tab2" label="Tab 2">
+    Content 2
+  </Tabs.Tab>
+</Tabs>
+```
+
+## ZMPRouter / AnimationRoutes
+Router with page transitions.
+```jsx
+import { ZMPRouter, AnimationRoutes, Route } from "zmp-ui";
+
+<ZMPRouter>
+  <AnimationRoutes>
+    <Route path="/" element={<HomePage />} />
+    <Route path="/profile" element={<ProfilePage />} />
+  </AnimationRoutes>
+</ZMPRouter>
+```

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

@@ -0,0 +1,98 @@
+# ZaUI Overlay Components
+
+## Modal
+Dialog modal.
+```jsx
+import { Modal, Button } from "zmp-ui";
+
+const [visible, setVisible] = useState(false);
+
+<Button onClick={() => setVisible(true)}>Open Modal</Button>
+
+<Modal
+  visible={visible}
+  title="Confirm"
+  onClose={() => setVisible(false)}
+  actions={[
+    { text: "Cancel", close: true },
+    { text: "OK", close: true, highLight: true }
+  ]}
+>
+  Are you sure you want to proceed?
+</Modal>
+```
+
+Props:
+- `visible` - Show/hide modal
+- `title` - Modal title
+- `onClose` - Close handler
+- `actions` - Footer buttons
+- `maskClosable` - Click mask to close
+
+## Sheet
+Bottom sheet.
+```jsx
+import { Sheet, Button } from "zmp-ui";
+
+const [visible, setVisible] = useState(false);
+
+<Button onClick={() => setVisible(true)}>Open Sheet</Button>
+
+<Sheet visible={visible} onClose={() => setVisible(false)} height={300}>
+  <Sheet.Header title="Select Option" />
+  <Sheet.Content>
+    {/* Sheet content */}
+  </Sheet.Content>
+</Sheet>
+```
+
+Props:
+- `visible`, `onClose`
+- `height` - Sheet height
+- `swipeToClose` - Enable swipe gesture
+
+## ActionSheet
+Action menu.
+```jsx
+import { ActionSheet } from "zmp-ui";
+
+const [visible, setVisible] = useState(false);
+
+<ActionSheet
+  visible={visible}
+  onClose={() => setVisible(false)}
+  actions={[
+    { text: "Edit", onClick: handleEdit },
+    { text: "Delete", danger: true, onClick: handleDelete },
+    { text: "Cancel", close: true }
+  ]}
+/>
+```
+
+## SnackbarProvider
+Toast notifications.
+```jsx
+import { SnackbarProvider, useSnackbar, App } from "zmp-ui";
+
+// Wrap app
+<App>
+  <SnackbarProvider>
+    <YourApp />
+  </SnackbarProvider>
+</App>
+
+// Use in component
+function MyComponent() {
+  const { openSnackbar } = useSnackbar();
+
+  const showMessage = () => {
+    openSnackbar({
+      text: "Operation successful!",
+      type: "success",  // "success" | "error" | "warning" | "info"
+      duration: 3000
+    });
+  };
+
+  return <Button onClick={showMessage}>Show Toast</Button>;
+}
+```

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

@@ -0,0 +1,82 @@
+# ZaUI Components
+
+## Installation
+```bash
+npm install zmp-ui
+```
+
+## Usage
+```js
+import { Button, Input, Modal } from "zmp-ui";
+import "zmp-ui/zaui.css";
+```
+
+## Categories
+
+### Layout
+See [zaui-layout.md](./zaui-layout.md)
+- `App` - Root wrapper
+- `Page` - Page container
+- `Header` - Custom header
+- `BottomNavigation` - Tab bar
+- `Tabs` - Tab panels
+- `ZMPRouter` - Router integration
+
+### Display
+See [zaui-display.md](./zaui-display.md)
+- `Avatar` - User avatar
+- `Calendar` - Date display
+- `Icon` - Zalo icons
+- `ImageViewer` - Image gallery
+- `List` - List items
+- `Progress` - Progress bar
+- `Spinner` - Loading indicator
+- `Swiper` - Carousel
+- `Text` - Typography
+
+### Form
+See [zaui-form.md](./zaui-form.md)
+- `Button` - Buttons
+- `Input` - Text input
+- `Password` - Password input
+- `Search` - Search input
+- `TextArea` - Multiline input
+- `OTP` - OTP input
+- `Select` - Dropdown
+- `Picker` - Scroll picker
+- `DatePicker` - Date selection
+- `Switch` - Toggle
+- `Checkbox` - Checkboxes
+- `Radio` - Radio buttons
+- `Slider` - Range slider
+
+### Overlay
+See [zaui-overlay.md](./zaui-overlay.md)
+- `Modal` - Dialog modal
+- `Sheet` - Bottom sheet
+- `ActionSheet` - Action menu
+- `SnackbarProvider` - Toast notifications
+
+## Design Tokens
+
+### Colors
+Primary: `#006AF5` (Zalo Blue)
+Background: `#FFFFFF`, `#F4F5F6`
+Text: `#141415`, `#767A7F`
+Success: `#00C853`
+Warning: `#FFA000`
+Error: `#FF3B30`
+
+### Spacing (4px base)
+- U1: 4px, U2: 8px, U3: 12px
+- U4: 16px, U6: 24px, U8: 32px
+
+### Corner Radius
+- Small: 4px
+- Medium: 8px
+- Large: 12px
+- XLarge: 16px
+
+### Typography
+Font: System default
+Sizes: 12px, 14px, 16px, 18px, 20px, 24px

package/template/.agent/workflows/brainstorm.md

@@ -0,0 +1,113 @@
+---
+description: Structured brainstorming for projects and features. Explores multiple options before implementation.
+---
+
+# /brainstorm - Structured Idea Exploration
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command activates BRAINSTORM mode for structured idea exploration. Use when you need to explore options before committing to an implementation.
+
+---
+
+## Behavior
+
+When `/brainstorm` is triggered:
+
+1. **Understand the goal**
+   - What problem are we solving?
+   - Who is the user?
+   - What constraints exist?
+
+2. **Generate options**
+   - Provide at least 3 different approaches
+   - Each with pros and cons
+   - Consider unconventional solutions
+
+3. **Compare and recommend**
+   - Summarize tradeoffs
+   - Give a recommendation with reasoning
+
+---
+
+## Output Format
+
+```markdown
+## 🧠 Brainstorm: [Topic]
+
+### Context
+[Brief problem statement]
+
+---
+
+### Option A: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+- [benefit 2]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option B: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+- [drawback 2]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option C: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+## 💡 Recommendation
+
+**Option [X]** because [reasoning].
+
+What direction would you like to explore?
+```
+
+---
+
+## Examples
+
+```
+/brainstorm authentication system
+/brainstorm state management for complex form
+/brainstorm database schema for social app
+/brainstorm caching strategy
+```
+
+---
+
+## Key Principles
+
+- **No code** - this is about ideas, not implementation
+- **Visual when helpful** - use diagrams for architecture
+- **Honest tradeoffs** - don't hide complexity
+- **Defer to user** - present options, let them decide

package/template/.agent/workflows/create.md

@@ -0,0 +1,59 @@
+---
+description: Create new application command. Triggers App Builder skill and starts interactive dialogue with user.
+---
+
+# /create - Create Application
+
+$ARGUMENTS
+
+---
+
+## Task
+
+This command starts a new application creation process.
+
+### Steps:
+
+1. **Request Analysis**
+   - Understand what the user wants
+   - If information is missing, use `conversation-manager` skill to ask
+
+2. **Project Planning**
+   - Use `project-planner` agent for task breakdown
+   - Determine tech stack
+   - Plan file structure
+   - Create plan file and proceed to building
+
+3. **Application Building (After Approval)**
+   - Orchestrate with `app-builder` skill
+   - Coordinate expert agents:
+     - `database-architect` → Schema
+     - `backend-specialist` → API
+     - `frontend-specialist` → UI
+
+4. **Preview**
+   - Start with `auto_preview.py` when complete
+   - Present URL to user
+
+---
+
+## Usage Examples
+
+```
+/create blog site
+/create e-commerce app with product listing and cart
+/create todo app
+/create Instagram clone
+/create crm system with customer management
+```
+
+---
+
+## Before Starting
+
+If request is unclear, ask these questions:
+- What type of application?
+- What are the basic features?
+- Who will use it?
+
+Use defaults, add details later.

package/template/.agent/workflows/debug.md

@@ -0,0 +1,103 @@
+---
+description: Debugging command. Activates DEBUG mode for systematic problem investigation.
+---
+
+# /debug - Systematic Problem Investigation
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command activates DEBUG mode for systematic investigation of issues, errors, or unexpected behavior.
+
+---
+
+## Behavior
+
+When `/debug` is triggered:
+
+1. **Gather information**
+   - Error message
+   - Reproduction steps
+   - Expected vs actual behavior
+   - Recent changes
+
+2. **Form hypotheses**
+   - List possible causes
+   - Order by likelihood
+
+3. **Investigate systematically**
+   - Test each hypothesis
+   - Check logs, data flow
+   - Use elimination method
+
+4. **Fix and prevent**
+   - Apply fix
+   - Explain root cause
+   - Add prevention measures
+
+---
+
+## Output Format
+
+```markdown
+## 🔍 Debug: [Issue]
+
+### 1. Symptom
+[What's happening]
+
+### 2. Information Gathered
+- Error: `[error message]`
+- File: `[filepath]`
+- Line: [line number]
+
+### 3. Hypotheses
+1. ❓ [Most likely cause]
+2. ❓ [Second possibility]
+3. ❓ [Less likely cause]
+
+### 4. Investigation
+
+**Testing hypothesis 1:**
+[What I checked] → [Result]
+
+**Testing hypothesis 2:**
+[What I checked] → [Result]
+
+### 5. Root Cause
+🎯 **[Explanation of why this happened]**
+
+### 6. Fix
+```[language]
+// Before
+[broken code]
+
+// After
+[fixed code]
+```
+
+### 7. Prevention
+🛡️ [How to prevent this in the future]
+```
+
+---
+
+## Examples
+
+```
+/debug login not working
+/debug API returns 500
+/debug form doesn't submit
+/debug data not saving
+```
+
+---
+
+## Key Principles
+
+- **Ask before assuming** - get full error context
+- **Test hypotheses** - don't guess randomly
+- **Explain why** - not just what to fix
+- **Prevent recurrence** - add tests, validation