@musashishao/agent-kit 1.0.0

package/.agent/FEATURE_ROADMAP.md

@@ -0,0 +1,435 @@
+# 🚀 Feature Roadmap - Antigravity Kit
+
+> Nghiên cứu từ: ClaudeKit, Claude Code, Task Master, Cursor Rules, và các AI Agent frameworks 2025
+> Ngày tạo: 2026-01-21
+
+---
+
+## 📊 So Sánh Với Đối Thủ
+
+| Feature | ClaudeKit | Task Master | Claude Code | **Antigravity Kit** |
+|---------|-----------|-------------|-------------|---------------------|
+| Skills/Agents | 50+ skills, 45 agents | Task-focused | Plugins | 40 skills, 16 agents |
+| Marketplace | ✅ Plugin marketplace | ✅ npm package | ✅ Plugins dir | ❌ Manual install |
+| MCP Support | ✅ mcp-builder, mcp-management | ✅ MCP integration | ✅ Built-in | ❌ Missing |
+| CLI Tool | ❌ | ✅ task-master CLI | ✅ claude CLI | ⚠️ Basic (ag-kit) |
+| Task Management | ❌ | ✅ (Core feature) | ⚠️ Basic | ❌ Missing |
+| Web UI/Dashboard | ❌ | ❌ | ❌ | ⚠️ Docs only |
+| Multi-AI Support | ✅ Claude-focused | ✅ Any AI chat | ✅ Claude only | ✅ Gemini + others |
+| Problem-Solving Skills | ✅ 6 frameworks | ❌ | ❌ | ❌ Missing |
+| Marketing Skills | ✅ 28 agents | ❌ | ❌ | ❌ Missing |
+
+---
+
+## 🎯 PRIORITY 1: Critical Missing Features
+
+### 1.1 🔌 MCP (Model Context Protocol) Support
+**Thấy ở:** ClaudeKit, Task Master, Claude Code
+
+```
+Thêm:
+├── skills/mcp-builder/          # Hướng dẫn build MCP servers
+├── skills/mcp-management/       # Quản lý MCP tools
+└── agents/mcp-developer/        # Specialized MCP agent
+```
+
+**Tại sao quan trọng:**
+- MCP là chuẩn protocol mới cho AI tools
+- Cho phép AI access external services (GitHub, Slack, databases...)
+- ClaudeKit có "mcp-manager subagent" rất phổ biến
+
+**Implementation:**
+```markdown
+# mcp-builder skill
+- FastMCP (Python) patterns
+- TypeScript MCP patterns  
+- Tool design best practices
+- Server deployment guides
+```
+
+---
+
+### 1.2 📦 Plugin Marketplace System
+**Thấy ở:** ClaudeKit, Claude Code plugins
+
+**Hiện tại:** `npx @vudovn/ag-kit init` chỉ install tất cả
+
+**Đề xuất:**
+```bash
+# Selective install
+ag-kit install skill:react-patterns
+ag-kit install agent:frontend-specialist
+ag-kit install workflow:debug
+
+# Marketplace commands
+ag-kit search "database"
+ag-kit list --installed
+ag-kit update
+
+# Plugin bundles
+ag-kit install bundle:web-dev        # React + Next.js + Tailwind
+ag-kit install bundle:backend        # API + Database + DevOps
+ag-kit install bundle:mobile         # React Native + Flutter
+```
+
+**Lợi ích:**
+- Giảm context bloat (chỉ install những gì cần)
+- User có thể customize
+- Dễ contribute community skills
+
+---
+
+### 1.3 📋 Task Management System
+**Thấy ở:** Task Master (core feature)
+
+**Đề xuất thêm skill:**
+```
+skills/task-management/
+├── SKILL.md              # Task creation, tracking, dependencies
+├── task-structure.md     # Task JSON/YAML format
+├── scripts/
+│   ├── create-task.py
+│   ├── list-tasks.py
+│   └── update-task.py
+└── templates/
+    └── task-template.md
+```
+
+**Task Format:**
+```json
+{
+  "id": "TASK-001",
+  "title": "Implement login page",
+  "status": "in-progress",
+  "priority": "high",
+  "subtasks": [...],
+  "dependencies": ["TASK-000"],
+  "complexity": 5,
+  "estimatedTime": "2h"
+}
+```
+
+**Slash commands:**
+```
+/task create "Feature name"
+/task list
+/task next
+/task done TASK-001
+```
+
+---
+
+## 🎯 PRIORITY 2: High-Value Additions
+
+### 2.1 🧠 Problem-Solving Frameworks
+**Thấy ở:** ClaudeKit (6 frameworks)
+
+**Đề xuất thêm:**
+```
+skills/problem-solving/
+├── when-stuck/                 # Dispatch to right technique
+├── collision-zone-thinking/    # Force unrelated concepts together
+├── inversion-exercise/         # Flip assumptions
+├── meta-pattern-recognition/   # Spot patterns across domains
+├── scale-game/                 # Test at extremes (1000x/0.001x)
+├── simplification-cascades/    # Find insights that eliminate complexity
+└── sequential-thinking/        # Step-by-step with revision
+```
+
+**Tại sao cần:**
+- Giúp AI reasoning tốt hơn
+- Đặc biệt hữu ích cho complex problems
+- Differentiator so với competitors
+
+---
+
+### 2.2 🎨 Enhanced UI/Design Skills
+**Thấy ở:** ClaudeKit `aesthetic` skill
+
+**Hiện tại:** `ui-ux-pro-max` skill
+
+**Đề xuất bổ sung:**
+```
+skills/aesthetic/
+├── SKILL.md
+├── inspiration-workflow.md    # Capture + analyze design inspiration
+├── design-principles.md       # BEAUTIFUL → RIGHT → SATISFYING → PEAK
+└── scripts/
+    └── design-audit.py
+```
+
+**Workflow:**
+1. Capture inspiration từ websites
+2. Analyze với AI (Gemini Vision)
+3. Generate design iteratively
+4. Audit against aesthetic standards
+
+---
+
+### 2.3 🤖 AI/ML Skills
+**Thấy ở:** ClaudeKit (ai-multimodal, context-engineering)
+
+**Đề xuất:**
+```
+skills/ai-multimodal/
+├── SKILL.md
+├── image-analysis.md      # Vision AI patterns
+├── audio-processing.md    # Transcription, summarization
+├── video-analysis.md      # Scene detection, temporal analysis
+└── document-extraction.md # PDF, tables, charts
+
+skills/context-engineering/
+├── SKILL.md
+├── context-optimization.md    # Compaction, masking, caching
+├── memory-architectures.md    # Short-term, long-term memory
+├── multi-agent-patterns.md    # Agent coordination
+└── token-management.md        # Reduce token usage
+```
+
+---
+
+### 2.4 📊 Visualization & Diagramming
+**Thấy ở:** ClaudeKit `mermaidjs-v11`
+
+**Đề xuất:**
+```
+skills/diagramming/
+├── SKILL.md
+├── mermaid-v11.md         # Flowcharts, sequence, class diagrams
+├── architecture-diagrams.md
+├── user-journey.md
+└── templates/
+    ├── flowchart.mmd
+    ├── sequence.mmd
+    └── erd.mmd
+```
+
+---
+
+## 🎯 PRIORITY 3: Nice-to-Have Features
+
+### 3.1 🌐 Browser Automation Skills
+**Thấy ở:** ClaudeKit (chrome-devtools, web-testing)
+
+```
+skills/browser-automation/
+├── puppeteer.md          # Automation, screenshots
+├── playwright.md         # E2E testing
+└── web-scraping.md       # Data extraction
+```
+
+---
+
+### 3.2 📄 Document Processing
+**Thấy ở:** ClaudeKit
+
+```
+skills/document-processing/
+├── pdf-extraction.md
+├── excel-processing.md
+├── word-automation.md
+└── powerpoint-generation.md
+```
+
+---
+
+### 3.3 🔍 Research & Documentation Discovery
+**Thấy ở:** ClaudeKit `docs-seeker`
+
+```
+skills/docs-seeker/
+├── SKILL.md
+├── llms-txt-standard.md   # Use llms.txt for doc discovery
+├── github-analysis.md     # Analyze repos via Repomix
+└── parallel-exploration.md # Multi-agent doc exploration
+```
+
+---
+
+### 3.4 📈 Marketing Skills (Optional)
+**Thấy ở:** ClaudeKit (28 Marketing agents)
+
+```
+agents/
+├── seo-specialist/      # Already exists ✅
+├── content-writer/      # Blog, social posts
+├── copywriter/          # Ad copy, landing pages
+├── analytics-expert/    # GA4, metrics
+└── growth-hacker/       # A/B testing, funnels
+```
+
+---
+
+## 🛠️ CLI Improvements
+
+### Hiện tại:
+```bash
+ag-kit init
+ag-kit update
+ag-kit status
+```
+
+### Đề xuất thêm:
+```bash
+# Skill management
+ag-kit skills list              # List all available skills
+ag-kit skills search "api"      # Search skills
+ag-kit skills install <name>    # Install specific skill
+ag-kit skills remove <name>     # Remove skill
+ag-kit skills update            # Update installed skills
+
+# Agent management
+ag-kit agents list
+ag-kit agents info <name>       # Show agent details
+
+# Workflow management  
+ag-kit workflows list
+ag-kit workflows run <name>     # Run workflow programmatically
+
+# Project analysis
+ag-kit analyze                  # Analyze project, suggest skills
+ag-kit doctor                   # Check configuration issues
+ag-kit stats                    # Show usage statistics
+
+# Export/Share
+ag-kit export skill <name>      # Export skill as standalone
+ag-kit share                    # Share config to team
+```
+
+---
+
+## 📱 Web Dashboard (New!)
+
+### Đề xuất thêm Interactive Dashboard:
+
+```
+web/src/app/dashboard/
+├── page.tsx               # Main dashboard
+├── playground/            # Test agents interactively
+├── skills-browser/        # Browse & preview skills
+├── agent-visualizer/      # Visualize agent workflows
+└── analytics/             # Usage analytics
+```
+
+**Features:**
+- **Playground:** Test prompts with different agents
+- **Skill Browser:** Interactive skill catalog with filters
+- **Agent Visualizer:** See how agents coordinate
+- **Config Generator:** Generate GEMINI.md interactively
+
+---
+
+## 📋 Documentation Improvements
+
+### Thêm sections mới:
+
+```
+web/src/app/docs/
+├── tutorials/
+│   ├── getting-started/
+│   ├── first-agent/
+│   ├── custom-skill/
+│   └── workflow-creation/
+├── examples/
+│   ├── web-app/           # ✅ Already exists
+│   ├── mobile-app/
+│   ├── api-backend/
+│   └── full-stack/
+├── api-reference/
+│   ├── cli/
+│   ├── skills-format/
+│   └── agents-format/
+└── contributing/
+    ├── skill-guidelines/
+    └── agent-guidelines/
+```
+
+---
+
+## 🔧 Technical Improvements
+
+### 3.1 Token/Context Optimization
+**Thấy ở:** Task Master (selective tool loading)
+
+```markdown
+# Trong GEMINI.md hoặc config
+context_mode: "lean"       # core | standard | lean | custom
+enabled_skills:           # Only load these skills
+  - react-patterns
+  - api-patterns
+  - testing-patterns
+```
+
+**Lợi ích:** Giảm 70% token usage
+
+---
+
+### 3.2 Skill Dependencies
+```yaml
+# skills/nextjs-best-practices/SKILL.md frontmatter
+---
+name: nextjs-best-practices
+requires:
+  - react-patterns
+  - typescript-expert
+optional:
+  - tailwind-patterns
+---
+```
+
+---
+
+### 3.3 Skill Versioning
+```yaml
+---
+name: react-patterns
+version: 2.1.0
+compatible_with:
+  - react: ">=18.0.0"
+  - next: ">=14.0.0"
+---
+```
+
+---
+
+## 📊 Implementation Priority Matrix
+
+| Feature | Impact | Effort | Priority |
+|---------|--------|--------|----------|
+| MCP Support | 🔥 High | Medium | P0 |
+| Plugin Marketplace | 🔥 High | High | P1 |
+| Task Management | 🔥 High | Medium | P1 |
+| Problem-Solving Skills | Medium | Low | P2 |
+| Enhanced Aesthetic Skill | Medium | Low | P2 |
+| Context Optimization | High | Medium | P2 |
+| CLI Improvements | Medium | Medium | P2 |
+| Web Dashboard | Medium | High | P3 |
+| Marketing Skills | Low | Low | P3 |
+
+---
+
+## 🎯 Quick Wins (< 1 day each)
+
+1. **Add `mcp-builder` skill** - Port từ ClaudeKit
+2. **Add problem-solving skills** (6 frameworks)
+3. **Add `mermaidjs` skill** for diagrams
+4. **Add `context-engineering` skill**
+5. **Improve CLI với `ag-kit skills list`**
+6. **Add `/task` workflow** cho task management
+
+---
+
+## 📝 Next Steps
+
+1. **Phase 1 (Week 1-2):** MCP Support + Problem-Solving Skills
+2. **Phase 2 (Week 3-4):** CLI Improvements + Task Management
+3. **Phase 3 (Month 2):** Plugin Marketplace
+4. **Phase 4 (Month 3):** Web Dashboard + Analytics
+
+---
+
+> **Kết luận:** Antigravity Kit có foundation tốt với 40 skills và 16 agents. Để cạnh tranh với ClaudeKit và Task Master, cần tập trung vào:
+> 1. **MCP Support** (must have 2025)
+> 2. **Plugin Marketplace** (selective install)
+> 3. **Task Management** (workflow productivity)
+> 4. **Problem-Solving Frameworks** (AI reasoning)

package/.agent/PROMPT_TEMPLATES.md

@@ -0,0 +1,261 @@
+# 🎯 Prompt Templates cho Antigravity Kit
+
+> Copy-paste các prompt mẫu bên dưới để sử dụng với AI Agent
+
+---
+
+## 📌 PROMPT 1: Context Khởi Đầu (Dùng mỗi session mới)
+
+```
+Tôi đang phát triển dự án Antigravity Kit - một bộ AI Agent templates.
+
+## Project Info
+- **Repo:** antigravity-kit
+- **Tech:** Next.js 16.1.3, React 19, TypeScript, Tailwind CSS 4
+- **Structure:** 
+  - `.agent/` = AI Agent templates (16 agents, 40 skills, 11 workflows)
+  - `web/` = Documentation website (Next.js App Router)
+
+## Key Files
+- Homepage: `web/src/app/page.tsx`
+- Docs: `web/src/app/docs/`
+- UI Components: `web/src/components/ui/` (51 components)
+- Styles: `web/src/app/globals.css` (CSS variables theming)
+- Agent Rules: `.agent/rules/GEMINI.md`
+
+## Guidelines
+- Use TypeScript strict mode
+- Use Tailwind CSS classes
+- Support dark/light mode via CSS variables
+- All external links need `rel="noopener noreferrer"`
+
+Hãy đọc file `.agent/CONTEXT.md` để hiểu đầy đủ context của dự án.
+```
+
+---
+
+## 📌 PROMPT 2: Thêm Feature Mới
+
+```
+Tôi muốn thêm feature mới vào Antigravity Kit.
+
+## Feature: [TÊN FEATURE]
+
+### Mô tả
+[Mô tả chi tiết feature]
+
+### Yêu cầu
+1. [Yêu cầu 1]
+2. [Yêu cầu 2]
+3. [Yêu cầu 3]
+
+### Files liên quan
+- `web/src/app/...`
+- `web/src/components/...`
+
+### UI/UX
+- Phải responsive
+- Hỗ trợ dark/light mode
+- Sử dụng existing UI components từ `@/components/ui/`
+
+Hãy implement theo đúng code style của project (xem `.agent/CONTEXT.md`).
+```
+
+---
+
+## 📌 PROMPT 3: Fix Bug / Debug
+
+```
+Tôi gặp bug trong Antigravity Kit.
+
+## Bug Description
+[Mô tả bug]
+
+## Steps to Reproduce
+1. [Bước 1]
+2. [Bước 2]
+3. [Bước 3]
+
+## Expected Behavior
+[Behavior mong muốn]
+
+## Actual Behavior
+[Behavior thực tế]
+
+## Relevant Files
+- `web/src/...`
+
+## Environment
+- OS: macOS
+- Node: v20+
+- Browser: Chrome
+
+Hãy debug theo skill `.agent/skills/systematic-debugging/SKILL.md`.
+```
+
+---
+
+## 📌 PROMPT 4: Thêm Docs Page
+
+```
+Tôi muốn thêm trang documentation mới.
+
+## Page Info
+- **Title:** [Tên trang]
+- **Path:** `/docs/[path]`
+- **Category:** [agents/skills/workflows/guide]
+
+## Content Outline
+1. [Section 1]
+2. [Section 2]
+3. [Section 3]
+
+## Related
+- Link đến: [pages liên quan]
+
+Hãy tạo page trong `web/src/app/docs/[path]/page.tsx` và update `web/src/lib/docs-config.ts`.
+```
+
+---
+
+## 📌 PROMPT 5: Thêm UI Component
+
+```
+Tôi muốn tạo component mới.
+
+## Component Info
+- **Name:** [ComponentName]
+- **Location:** `web/src/components/[path]/`
+- **Type:** [UI/Layout/Feature]
+
+## Props Interface
+```typescript
+interface ComponentNameProps {
+  // Define props here
+}
+```
+
+## Usage Example
+```tsx
+<ComponentName prop1="value" />
+```
+
+## Requirements
+- TypeScript strict
+- Tailwind CSS styling
+- Dark mode support
+- Accessible (keyboard, screen reader)
+
+Pattern mẫu xem: `web/src/components/ui/button.tsx`
+```
+
+---
+
+## 📌 PROMPT 6: Thêm Agent/Skill
+
+```
+Tôi muốn thêm [Agent/Skill] mới vào hệ thống.
+
+## Info
+- **Name:** [name]
+- **Type:** [Agent/Skill]
+- **Focus:** [Domain/Focus area]
+
+## For Agent
+- Skills used: [skill1, skill2]
+- Use cases: [use case list]
+
+## For Skill
+- Sections needed: [list sections]
+- Scripts needed: [yes/no]
+- References needed: [yes/no]
+
+Template xem: `.agent/agents/` hoặc `.agent/skills/`
+Format xem: `.agent/ARCHITECTURE.md`
+```
+
+---
+
+## 📌 PROMPT 7: Code Review
+
+```
+Hãy review code của tôi cho Antigravity Kit.
+
+## Files to Review
+- `[file1]`
+- `[file2]`
+
+## Focus Areas
+- [ ] Security
+- [ ] Performance
+- [ ] Code style
+- [ ] TypeScript types
+- [ ] Accessibility
+- [ ] Dark mode
+
+Checklist xem: `.agent/skills/code-review-checklist/SKILL.md`
+```
+
+---
+
+## 📌 PROMPT 8: Deploy/Release
+
+```
+Tôi muốn deploy/release Antigravity Kit.
+
+## Release Type
+- [ ] Patch (bug fixes)
+- [ ] Minor (new features)
+- [ ] Major (breaking changes)
+
+## Checklist
+- [ ] All tests pass
+- [ ] No security vulnerabilities
+- [ ] Documentation updated
+- [ ] CHANGELOG updated
+- [ ] Version bumped
+
+## Deploy Target
+- [ ] Vercel
+- [ ] npm publish
+- [ ] GitHub Release
+
+Guidelines xem: `.agent/skills/deployment-procedures/SKILL.md`
+```
+
+---
+
+## 🔥 QUICK PROMPTS (One-liners)
+
+```
+# Homepage
+Cải thiện homepage của Antigravity Kit, làm nó impressive hơn với animations.
+
+# Performance
+Tối ưu performance của documentation site, target Lighthouse 90+.
+
+# SEO
+Thêm SEO metadata cho tất cả pages trong `/docs`.
+
+# Mobile
+Review và fix responsive issues trên mobile.
+
+# Accessibility
+Audit accessibility (a11y) cho toàn bộ components.
+
+# Security
+Add security headers vào next.config.ts (CSP, X-Frame-Options).
+
+# Testing
+Tạo test suite cho UI components với React Testing Library.
+```
+
+---
+
+## 💡 Tips Sử Dụng
+
+1. **Luôn bắt đầu với PROMPT 1** trong session mới
+2. **Refer đến CONTEXT.md** khi cần chi tiết
+3. **Kết hợp prompts** khi cần (ví dụ: PROMPT 2 + PROMPT 4)
+4. **Cung cấp file paths cụ thể** để AI hiểu context tốt hơn
+5. **Đề cập skill files** `.agent/skills/...` khi cần expertise cụ thể