@musashishao/agent-kit 1.7.0 → 1.8.1

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,5 +1,5 @@
 ---
-description: Vòng lặp tự sửa lỗi autonomous cho các lệnh thất bại
+description: Autonomous self-healing loop for failed commands.
 ---
 
 # /autofix - Autonomous Self-Healing Loop

package/.agent/workflows/brainstorm.md

@@ -1,5 +1,5 @@
 ---
-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.
+description: Structured brainstorming for projects and features. Explore multiple options before implementation.
 ---
 
 # /brainstorm - Structured Idea Exploration

package/.agent/workflows/context.md

@@ -1,5 +1,5 @@
 ---
-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.
+description: Automatically generate optimal context for complex tasks using Context Engineering strategies.
 ---
 
 # Context Optimization Workflow

package/.agent/workflows/create.md

@@ -1,5 +1,5 @@
 ---
-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.
+description: Command to create a new application. Activates the App Builder skill and initiates user dialogue.
 ---
 
 # /create - Create Application

package/.agent/workflows/dashboard.md

@@ -1,5 +1,5 @@
 ---
-description: Tạo và xem dashboard trực quan của dự án
+description: Create and view visual project dashboards.
 ---
 
 # /dashboard - Visual Project Overview

package/.agent/workflows/debug.md

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

package/.agent/workflows/deploy.md

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

package/.agent/workflows/enhance.md

@@ -1,5 +1,5 @@
 ---
-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.
+description: Add or update features in an existing application. Used for iterative development.
 ---
 
 # /enhance - Update Application

package/.agent/workflows/next.md

@@ -1,5 +1,5 @@
 ---
-description: Đề xuất bước tiếp theo cho developer
+description: Suggest the next steps for the developer.
 ---
 
 # /next - What Should I Do Next?

package/.agent/workflows/orchestrate.md

@@ -1,5 +1,5 @@
 ---
-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.
+description: Coordinate multiple agents for complex tasks. Used for multi-perspective analysis, comprehensive reviews, or tasks requiring different expertise.
 ---
 
 # Multi-Agent Orchestration

package/.agent/workflows/plan.md

@@ -1,5 +1,5 @@
 ---
-description: Tạo project plan sử dụng project-planner agent. Chỉ tạo file plan - không viết code.
+description: Create a project plan using the project-planner agent. Only creates plan files - does not write code.
 ---
 
 # /plan - Project Planning Mode

package/.agent/workflows/preview.md

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

package/.agent/workflows/quality.md

@@ -1,5 +1,5 @@
 ---
-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.
+description: Optimize context and output quality for Codex CLI. Used for complex tasks requiring high-quality results.
 ---
 
 # /quality - Quality Optimization Workflow

package/.agent/workflows/spec.md

@@ -1,5 +1,5 @@
 ---
-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.
+description: Create specification documents before planning. Used for complex features requiring clear requirements before implementation.
 ---
 
 # /spec - Specification Writing Mode

package/.agent/workflows/status.md

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

package/.agent/workflows/test.md

@@ -1,5 +1,5 @@
 ---
-description: Tạo test và chạy test. Tạo và thực thi các test cho code.
+description: Create and run tests. Create and execute tests for the code.
 ---
 
 # /test - Test Generation and Execution

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

@@ -1,5 +1,5 @@
 ---
-description: Lập kế hoạch và triển khai UI/UX chuyên nghiệp
+description: Professional UI/UX planning and implementation.
 ---
 
 # 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.7.0",
+  "version": "1.8.1",
   "description": "AI Agent templates - Skills, Agents, Workflows, and AI-Ready Data Infrastructure Gateway",
   "main": "index.js",
   "bin": {