@musashishao/agent-kit 1.6.2 → 1.8.0

package/.agent/skills/web-interface-guidelines/touch-interaction.md

@@ -0,0 +1,150 @@
+# Touch & Interaction Guidelines
+
+> Mobile-first patterns for touch interfaces.
+
+---
+
+## Touch Action
+
+**Prevent double-tap zoom delay.**
+
+```css
+/* ✅ On interactive elements */
+button, a, [role="button"] {
+  touch-action: manipulation;
+}
+```
+
+| Value | Effect |
+|-------|--------|
+| `manipulation` | Disables double-tap zoom |
+| `pan-x` | Only horizontal scroll |
+| `pan-y` | Only vertical scroll |
+| `none` | Disable all gestures |
+
+---
+
+## Tap Highlight
+
+**Set intentionally, not accidentally.**
+
+```css
+/* ✅ Remove or customize */
+button {
+  -webkit-tap-highlight-color: transparent;
+  /* Or: -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); */
+}
+```
+
+---
+
+## Overscroll Behavior
+
+**Contain scroll in modals and drawers.**
+
+```css
+/* ✅ Modal content */
+.modal-content {
+  overscroll-behavior: contain;
+}
+
+/* ✅ Drawer/sheet */
+.drawer {
+  overscroll-behavior-y: contain;
+}
+```
+
+This prevents:
+- Pull-to-refresh triggering inside modal
+- Scroll chaining to body
+- Rubber-band bounce on iOS
+
+---
+
+## Safe Areas
+
+**Full-bleed layouts need notch handling.**
+
+```css
+/* ✅ Account for notch/home indicator */
+.full-bleed {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* ✅ Fixed bottom bar */
+.bottom-bar {
+  padding-bottom: max(1rem, env(safe-area-inset-bottom));
+}
+```
+
+| Device | Safe Area Needed |
+|--------|------------------|
+| iPhone X+ | Notch, home indicator |
+| Android | Navigation bar |
+| iPad | Corners on newer models |
+
+---
+
+## Drag Interactions
+
+**Disable selection during drag.**
+
+```tsx
+// ✅ During drag operations
+const handleDragStart = () => {
+  document.body.style.userSelect = 'none';
+};
+
+const handleDragEnd = () => {
+  document.body.style.userSelect = '';
+};
+```
+
+Also use `inert` on dragged elements:
+```tsx
+<div inert={isDragging}>
+  {/* Content that shouldn't be interactive while dragging */}
+</div>
+```
+
+---
+
+## AutoFocus
+
+**Use sparingly, desktop only.**
+
+```tsx
+// ✅ Single primary input, desktop
+<input autoFocus={!isMobile} />
+
+// ❌ Avoid on mobile (keyboard popup)
+<input autoFocus /> // Opens keyboard unexpectedly
+```
+
+| Use autoFocus | Avoid autoFocus |
+|---------------|-----------------|
+| Search modal | Mobile forms |
+| Command palette | Multi-step forms |
+| Login (desktop) | Login (mobile) |
+
+---
+
+## Touch Target Size
+
+**Minimum 44x44px for touch targets.**
+
+```css
+/* ✅ Comfortable touch target */
+button {
+  min-height: 44px;
+  min-width: 44px;
+  padding: 12px 16px;
+}
+
+/* ✅ Icon button with adequate padding */
+.icon-button {
+  padding: 12px;
+}
+```

package/.agent/workflows/autofix.md

@@ -1,9 +1,12 @@
 ---
-description: Autonomous Self-Healing Loop to fix failing commands
+description: Vòng lặp tự sửa lỗi autonomous cho các lệnh thất bại
 ---
 
 # /autofix - Autonomous Self-Healing Loop
 
+$ARGUMENTS
+
+
 ## Purpose
 Attempts to automatically fix a failing command (test, build, or script) by entering a "Run -> Analyze -> Fix -> Verify" loop. This workflow leverages the Agent's ability to read error logs and edit code autonomously.
 

package/.agent/workflows/brainstorm.md

@@ -1,5 +1,5 @@
 ---
-description: Structured brainstorming for projects and features. Explores multiple options before implementation.
+description: Brainstorming có cấu trúc cho dự án và tính năng. Khám phá nhiều phương án trước khi triển khai.
 ---
 
 # /brainstorm - Structured Idea Exploration

package/.agent/workflows/context.md

@@ -1,9 +1,11 @@
 ---
-description: Auto-generate optimized context for complex tasks using Context Engineering strategies.
+description: Tự động tạo context tối ưu cho các tác vụ phức tạp sử dụng chiến lược Context Engineering.
 ---
 
 # Context Optimization Workflow
 
+$ARGUMENTS
+
 This workflow automates the "Context Engineering" process. It analyzes your request, maps the project structure, summarizes relevant files, and wraps everything in a high-performance XML prompt structure for the AI.
 
 **Trigger:** `/context [your task description]`

package/.agent/workflows/create.md

@@ -1,5 +1,5 @@
 ---
-description: Create new application command. Triggers App Builder skill and starts interactive dialogue with user.
+description: Lệnh tạo ứng dụng mới. Kích hoạt skill App Builder và bắt đầu đối thoại với người dùng.
 ---
 
 # /create - Create Application

package/.agent/workflows/dashboard.md

@@ -1,9 +1,12 @@
 ---
-description: Generate and view the visual project dashboard
+description: Tạo và xem dashboard trực quan của dự án
 ---
 
 # /dashboard - Visual Project Overview
 
+$ARGUMENTS
+
+
 ## Purpose
 Generates a rich, interactive HTML dashboard that visualizes the project's status, agents, active plans, and dependency graphs. Provides a high-level view for "Vibe Coders" and stakeholders.
 

package/.agent/workflows/debug.md

@@ -1,5 +1,5 @@
 ---
-description: Debugging command. Activates DEBUG mode for systematic problem investigation.
+description: Lệnh debug. Kích hoạt chế độ DEBUG để điều tra vấn đề có hệ thống.
 ---
 
 # /debug - Systematic Problem Investigation

package/.agent/workflows/deploy.md

@@ -1,5 +1,5 @@
 ---
-description: Deployment command for production releases. Pre-flight checks and deployment execution.
+description: Lệnh deploy cho production. Kiểm tra pre-flight và thực thi deployment.
 ---
 
 # /deploy - Production Deployment

package/.agent/workflows/enhance.md

@@ -1,5 +1,5 @@
 ---
-description: Add or update features in existing application. Used for iterative development.
+description: Thêm hoặc cập nhật tính năng trong ứng dụng hiện có. Dùng cho phát triển lặp.
 ---
 
 # /enhance - Update Application

package/.agent/workflows/next.md

@@ -1,9 +1,12 @@
 ---
-description: Suggest the immediate next step for the developer
+description: Đề xuất bước tiếp theo cho developer
 ---
 
 # /next - What Should I Do Next?
 
+$ARGUMENTS
+
+
 ## Purpose
 This command analyzes the current project state, active plans, and recent context to determine the most impactful immediate next step. Use this when you are stuck, returning to a project after a break, or unsure of the priority.
 

package/.agent/workflows/orchestrate.md

@@ -1,5 +1,5 @@
 ---
-description: Coordinate multiple agents for complex tasks. Use for multi-perspective analysis, comprehensive reviews, or tasks requiring different domain expertise.
+description: Điều phối nhiều agents cho các tác vụ phức tạp. Dùng cho phân tích đa góc nhìn, review toàn diện, hoặc các tác vụ cần nhiều chuyên môn khác nhau.
 ---
 
 # Multi-Agent Orchestration

package/.agent/workflows/plan.md

@@ -1,5 +1,5 @@
 ---
-description: Create project plan using project-planner agent. No code writing - only plan file generation.
+description: Tạo project plan sử dụng project-planner agent. Chỉ tạo file plan - không viết code.
 ---
 
 # /plan - Project Planning Mode

package/.agent/workflows/preview.md

@@ -1,5 +1,5 @@
 ---
-description: Preview server start, stop, and status check. Local development server management.
+description: Quản lý preview server: start, stop, và kiểm tra trạng thái. Quản lý local development server.
 ---
 
 # /preview - Preview Management

package/.agent/workflows/quality.md

@@ -1,5 +1,5 @@
 ---
-description: Optimize context and output quality for Codex CLI. Use for complex tasks requiring high-quality results.
+description: Tối ưu hóa context và chất lượng output cho Codex CLI. Dùng cho các tác vụ phức tạp cần kết quả chất lượng cao.
 ---
 
 # /quality - Quality Optimization Workflow

package/.agent/workflows/spec.md

@@ -1,5 +1,5 @@
 ---
-description: Generate specification document before planning. Use for complex features requiring clear requirements before implementation.
+description: Tạo tài liệu đặc tả (specification) trước khi lập kế hoạch. Dùng cho các tính năng phức tạp cần yêu cầu rõ ràng trước khi triển khai.
 ---
 
 # /spec - Specification Writing Mode

package/.agent/workflows/status.md

@@ -1,5 +1,5 @@
 ---
-description: Display agent and project status. Progress tracking and status board.
+description: Hiển thị trạng thái project và agent. Theo dõi tiến độ và bảng trạng thái.
 ---
 
 # /status - Show Status

package/.agent/workflows/test.md

@@ -1,5 +1,5 @@
 ---
-description: Test generation and test running command. Creates and executes tests for code.
+description: Tạo test và chạy test. Tạo và thực thi các test cho code.
 ---
 
 # /test - Test Generation and Execution

package/.agent/workflows/ui-ux-pro-max.md

@@ -1,5 +1,5 @@
 ---
-description: Plan and implement UI
+description: Lập kế hoạch và triển khai UI/UX chuyên nghiệp
 ---
 
 # UI/UX Pro Max - Design Intelligence

package/README.md

@@ -2,7 +2,7 @@
 
 > 🚀 The Ultimate AI Agent System for Modern Development
 > 
-> **16 Agents** • **42 Skills** • **13 Workflows** • **Multi-Platform Support**
+> **16 Agents** • **58 Skills** • **13 Workflows** • **Multi-Platform Support**
 
 [![npm version](https://badge.fury.io/js/@musashishao%2Fagent-kit.svg)](https://www.npmjs.com/package/@musashishao/agent-kit)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -27,8 +27,8 @@ This installs the `.agent` folder containing all templates into your project.
 | Component | Count | Description |
 |-----------|-------|-------------|
 | **Agents** | 16 | Specialist AI personas (frontend, backend, security, etc.) |
-| **Skills** | 42 | Domain-specific knowledge modules |
-| **Intelligence** | 3 | RAG, Knowledge Graph, and **Memory System** |
+| **Skills** | 58 | Domain-specific knowledge modules |
+| **Intelligence** | 4 | RAG, Knowledge Graph, Memory, and **Verification Gate** |
 | **Workflows** | 13 | Slash command procedures |
 | **Templates** | 4 | Project templates (web, mobile, backend) |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@musashishao/agent-kit",
-  "version": "1.6.2",
+  "version": "1.8.0",
   "description": "AI Agent templates - Skills, Agents, Workflows, and AI-Ready Data Infrastructure Gateway",
   "main": "index.js",
   "bin": {