@agentskillkit/agent-skills 3.2.1 → 3.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/.agent/skills/mobile-design/scripts/mobile_audit.js +333 -0
  2. package/.agent/skills/typescript-expert/scripts/ts_diagnostic.js +227 -0
  3. package/README.md +197 -720
  4. package/package.json +4 -4
  5. package/packages/cli/lib/audit.js +2 -2
  6. package/packages/cli/lib/auto-learn.js +8 -8
  7. package/packages/cli/lib/eslint-fix.js +1 -1
  8. package/packages/cli/lib/fix.js +5 -5
  9. package/packages/cli/lib/hooks/install-hooks.js +4 -4
  10. package/packages/cli/lib/hooks/lint-learn.js +4 -4
  11. package/packages/cli/lib/knowledge-index.js +4 -4
  12. package/packages/cli/lib/knowledge-metrics.js +2 -2
  13. package/packages/cli/lib/knowledge-retention.js +3 -3
  14. package/packages/cli/lib/knowledge-validator.js +3 -3
  15. package/packages/cli/lib/learn.js +10 -10
  16. package/packages/cli/lib/recall.js +1 -1
  17. package/packages/cli/lib/skill-learn.js +2 -2
  18. package/packages/cli/lib/stats.js +3 -3
  19. package/packages/cli/lib/ui/dashboard-ui.js +222 -0
  20. package/packages/cli/lib/ui/help-ui.js +41 -18
  21. package/packages/cli/lib/ui/index.js +57 -5
  22. package/packages/cli/lib/ui/settings-ui.js +292 -14
  23. package/packages/cli/lib/ui/stats-ui.js +93 -43
  24. package/packages/cli/lib/watcher.js +2 -2
  25. package/packages/kit/kit.js +89 -0
  26. package/packages/kit/lib/agents.js +208 -0
  27. package/packages/kit/lib/commands/analyze.js +70 -0
  28. package/packages/kit/lib/commands/cache.js +65 -0
  29. package/packages/kit/lib/commands/doctor.js +75 -0
  30. package/packages/kit/lib/commands/help.js +155 -0
  31. package/packages/kit/lib/commands/info.js +38 -0
  32. package/packages/kit/lib/commands/init.js +39 -0
  33. package/packages/kit/lib/commands/install.js +803 -0
  34. package/packages/kit/lib/commands/list.js +43 -0
  35. package/packages/kit/lib/commands/lock.js +57 -0
  36. package/packages/kit/lib/commands/uninstall.js +307 -0
  37. package/packages/kit/lib/commands/update.js +55 -0
  38. package/packages/kit/lib/commands/validate.js +69 -0
  39. package/packages/kit/lib/commands/verify.js +56 -0
  40. package/packages/kit/lib/config.js +81 -0
  41. package/packages/kit/lib/helpers.js +196 -0
  42. package/packages/kit/lib/helpers.test.js +60 -0
  43. package/packages/kit/lib/installer.js +164 -0
  44. package/packages/kit/lib/skills.js +119 -0
  45. package/packages/kit/lib/skills.test.js +109 -0
  46. package/packages/kit/lib/types.js +82 -0
  47. package/packages/kit/lib/ui.js +329 -0
  48. package/.agent/skills/mobile-design/scripts/mobile_audit.py +0 -670
  49. package/.agent/skills/requirements-python.txt +0 -25
  50. package/.agent/skills/requirements.txt +0 -96
  51. package/.agent/skills/typescript-expert/scripts/ts_diagnostic.py +0 -203
package/README.md CHANGED
@@ -2,12 +2,11 @@
2
2
 
3
3
  > **Transform your AI Agent into a FAANG-level engineering team with one command**
4
4
 
5
- [![npm](https://img.shields.io/badge/version-3.2.0-7c3aed?style=flat&colorA=18181b)](https://www.npmjs.com/package/agentskillskit-cli)
6
- [![Tests](https://github.com/agentskillkit/agent-skills/workflows/Tests/badge.svg)](https://github.com/agentskillkit/agent-skills/actions/workflows/test.yml)
7
- [![Lint](https://github.com/agentskillkit/agent-skills/workflows/Lint/badge.svg)](https://github.com/agentskillkit/agent-skills/actions/workflows/lint.yml)
8
- [![skills](https://img.shields.io/badge/skills-45-7c3aed?style=flat&colorA=18181b)](https://github.com/agentskillkit/agent-skills)
5
+ [![npm](https://img.shields.io/badge/version-3.2.5-7c3aed?style=flat&colorA=18181b)](https://www.npmjs.com/package/add-skill-kit)
6
+ [![skills](https://img.shields.io/badge/skills-49-7c3aed?style=flat&colorA=18181b)](https://github.com/agentskillkit/agent-skills)
9
7
  [![agents](https://img.shields.io/badge/agents-25-7c3aed?style=flat&colorA=18181b)](https://github.com/agentskillkit/agent-skills)
10
- [![workflows](https://img.shields.io/badge/workflows-24-7c3aed?style=flat&colorA=18181b)](https://github.com/agentskillkit/agent-skills)
8
+ [![workflows](https://img.shields.io/badge/workflows-26-7c3aed?style=flat&colorA=18181b)](https://github.com/agentskillkit/agent-skills)
9
+ [![JavaScript](https://img.shields.io/badge/100%25-JavaScript-F7DF1E?style=flat&colorA=18181b&logo=javascript)](https://github.com/agentskillkit/agent-skills)
11
10
  [![license](https://img.shields.io/badge/license-MIT-7c3aed?style=flat&colorA=18181b)](LICENSE)
12
11
 
13
12
  ---
@@ -18,12 +17,17 @@
18
17
  npx -y add-skill-kit agentskillkit/agent-skills
19
18
  ```
20
19
 
21
- **Choose your scope:**
20
+ **What gets installed:**
22
21
 
23
- | Scope | Location | Usage |
24
- |-------|----------|-------|
25
- | **Project** | `.agent/` folder | `npm run agent` |
26
- | **Global** | `~/.gemini/` | `agent` command anywhere |
22
+ | Component | Count | Description |
23
+ |-----------|-------|-------------|
24
+ | **Skills** | 49 | FAANG-grade coding skills |
25
+ | **Workflows** | 26 | `/think`, `/build`, `/autopilot`, etc. |
26
+ | **Agents** | 25 | Specialist AI agents |
27
+ | **Rules** | GEMINI.md | AI behavior configuration |
28
+ | **Scripts** | 25 | JavaScript automation scripts |
29
+ | **Commands** | `kit` | CLI management tool |
30
+ | **Commands** | `agent` (optional) | Interactive learning dashboard |
27
31
 
28
32
  ---
29
33
 
@@ -34,7 +38,7 @@ npx -y add-skill-kit agentskillkit/agent-skills
34
38
  | **Auto-Accept Workflow** | ✅ 1 approval → Full execution | ❌ | ❌ |
35
39
  | **Multi-Agent Coordination** | ✅ 25 specialists in parallel | 1 generic | 1-3 |
36
40
  | **Self-Learning** | ✅ Learns from mistakes | ❌ | ❌ |
37
- | **Measurable Metrics** | ✅ SLOs, benchmarks | | |
41
+ | **100% JavaScript** | ✅ No Python required | Mixed | Python |
38
42
  | **Project-Specific Skills** | ✅ Create your own | ❌ | Partial |
39
43
  | **Safety Protocol** | ✅ TIER -1 (no data loss) | ❌ | ❌ |
40
44
  | **Token Efficiency** | ✅ 80% reduction | Baseline | 30% |
@@ -55,14 +59,20 @@ npx -y add-skill-kit agentskillkit/agent-skills
55
59
  npx -y add-skill-kit agentskillkit/agent-skills
56
60
  ```
57
61
 
58
- ### Step 2: Launch Dashboard
62
+ **During installation:**
63
+ - Choose **Project** (local `.agent/`) or **Global** (`~/.gemini/`)
64
+ - Choose **Yes/No** for AutoLearn CLI (optional - does not affect core functionality)
65
+
66
+ ### Step 2: Use Commands
59
67
 
60
68
  ```bash
61
- # Local install
62
- npm run agent
69
+ # Manage skills
70
+ kit list # List all skills
71
+ kit validate # Validate skill structure
72
+ kit info <skill-name> # Show skill details
63
73
 
64
- # Global install
65
- agent
74
+ # Interactive dashboard (if AutoLearn installed)
75
+ agent # Launch Smart CLI
66
76
  ```
67
77
 
68
78
  ### Step 3: Use Workflows
@@ -71,11 +81,58 @@ agent
71
81
  /think authentication system # Brainstorm 3+ approaches
72
82
  /architect # Generate detailed plan
73
83
  /build # Implement with multi-agent
84
+ /autopilot # Full autonomous execution
74
85
  /validate # Run tests automatically
75
86
  ```
76
87
 
77
88
  ---
78
89
 
90
+ ## 📦 Complete Installation Contents
91
+
92
+ When you run `npx -y add-skill-kit agentskillkit/agent-skills`, you get:
93
+
94
+ ```
95
+ your-project/
96
+ ├── .agent/
97
+ │ ├── GEMINI.md # AI Rules (Supreme Law)
98
+ │ ├── ARCHITECTURE.md # System Architecture
99
+ │ ├── CONTINUOUS_EXECUTION_POLICY.md # Autopilot Rules
100
+ │ ├── WORKFLOW_CHAINS.md # Workflow Patterns
101
+ │ │
102
+ │ ├── skills/ # 49 Skills
103
+ │ │ ├── auto-learner/ # Learn from mistakes
104
+ │ │ ├── react-architect/ # React best practices
105
+ │ │ ├── typescript-expert/ # TypeScript mastery
106
+ │ │ ├── debug-pro/ # Advanced debugging
107
+ │ │ ├── studio/ # 50+ design styles
108
+ │ │ └── ...
109
+ │ │
110
+ │ ├── workflows/ # 26 Workflows
111
+ │ │ ├── think.md # /think
112
+ │ │ ├── build.md # /build
113
+ │ │ ├── autopilot.md # /autopilot
114
+ │ │ └── ...
115
+ │ │
116
+ │ ├── agents/ # 25 Specialist Agents
117
+ │ │ ├── frontend-specialist.md
118
+ │ │ ├── backend-specialist.md
119
+ │ │ ├── security-auditor.md
120
+ │ │ └── ...
121
+ │ │
122
+ │ ├── knowledge/ # Self-Learning Memory
123
+ │ │ └── lessons-learned.yaml
124
+ │ │
125
+ │ ├── config/ # Configuration
126
+ │ ├── scripts-js/ # 25 JS Scripts
127
+ │ └── metrics/ # Performance Tracking
128
+
129
+ ├── kit.cmd / kit # CLI wrapper
130
+ ├── agent.cmd / agent # AutoLearn wrapper (optional)
131
+ └── package.json # npm scripts added
132
+ ```
133
+
134
+ ---
135
+
79
136
  ## 🤖 Auto-Accept Workflow (Zero Interruption)
80
137
 
81
138
  > **User approves PLAN.md once → Agent executes everything automatically**
@@ -92,7 +149,7 @@ Agent Skill Kit with Auto-Accept:
92
149
  User → /autopilot → PLAN.md → ⛔ ONE APPROVAL → Agent runs ALL → ✅ DONE
93
150
  ```
94
151
 
95
- ### Real Example: Building TodoList App
152
+ ### Real Example
96
153
 
97
154
  **User Request:**
98
155
  ```
@@ -101,642 +158,44 @@ User → /autopilot → PLAN.md → ⛔ ONE APPROVAL → Agent runs ALL → ✅
101
158
  AUTO-APPROVE: After PLAN.md, proceed automatically.
102
159
  ```
103
160
 
104
- **Execution Timeline:**
105
-
106
- ```
107
- ┌───────────────────────────────────────────────────────────────────────────┐
108
- │ TIME │ PHASE │ ACTION │
109
- ├─────────┼──────────────────────────┼─────────────────────────────────────┤
110
- │ 0:00 │ Request │ User sends /autopilot command │
111
- │ 0:30 │ Planning │ PLAN.md generated with all details │
112
- │ 0:45 │ ⛔ CHECKPOINT │ User approves PLAN.md (ONLY ONCE) │
113
- ├─────────┼──────────────────────────┼─────────────────────────────────────┤
114
- │ 1:00 │ AUTO: Scaffold │ Next.js + deps + folder structure │
115
- │ 2:00 │ AUTO: Types │ TypeScript interfaces │
116
- │ 2:30 │ AUTO: Store │ Zustand store implementation │
117
- │ 3:30 │ AUTO: Components (5) │ TodoItem, TodoList, AddTodo, etc. │
118
- │ 5:00 │ AUTO: Pages │ Main page + layout │
119
- │ 6:00 │ AUTO: Tests (12) │ Unit + integration tests │
120
- │ 7:00 │ AUTO: Verification │ Lint + Security scan + Type check │
121
- │ 8:00 │ ✅ COMPLETE │ Preview at http://localhost:3000 │
122
- └─────────┴──────────────────────────┴─────────────────────────────────────┘
123
- ```
124
-
125
161
  **Result:**
126
162
  - **1 user approval** → **15+ auto-executed operations** → **Complete app in 8 minutes**
127
163
 
128
- ### How to Enable Auto-Accept
129
-
130
- **Method 1: Use `// turbo-all` annotation in workflow**
131
-
132
- ```markdown
133
- // turbo-all
134
-
135
- # My Workflow
136
-
137
- 1. Create project structure
138
- 2. Install dependencies
139
- 3. Run tests
140
- ```
141
-
142
- **Method 2: Add AUTO-APPROVE to your request**
143
-
144
- ```
145
- /build my-feature
146
-
147
- AUTO-APPROVE: After PLAN.md, proceed automatically.
148
- ```
149
-
150
- ### Auto-Accept Rules
151
-
152
- | Command Type | Auto-Accept? | Example |
153
- |--------------|--------------|---------|
154
- | `npm run *` | ✅ Yes | `npm run test`, `npm run build` |
155
- | `npm test` | ✅ Yes | Test execution |
156
- | `git status/diff/log` | ✅ Yes | Read-only git commands |
157
- | `node .agent/*` | ✅ Yes | Agent scripts |
158
- | File creation | ✅ Yes | Creating new files |
159
- | **`rm -rf`** | ❌ **NEVER** | Destructive operations |
160
- | **`git push`** | ❌ No | Requires explicit approval |
161
- | **Config modification** | ❌ No | Critical changes |
162
-
163
- ---
164
-
165
- ## 📊 Measurable Results
166
-
167
- ### Performance Benchmarks (Real Data)
168
-
169
- | App Type | Agents Used | Execution Time | Files Created | Success Rate |
170
- |----------|-------------|----------------|---------------|--------------|
171
- | **Simple** (Landing page) | 2-3 | < 3 min | < 10 | 98% |
172
- | **Standard** (TodoList, Blog) | 3-4 | 3-5 min | 10-20 | 95% |
173
- | **Complex** (E-commerce, Dashboard) | 5+ | 5-10 min | 20-50 | 90% |
174
- | **Enterprise** (Full SaaS) | 7+ | 10-20 min | 50+ | 85% |
175
-
176
- ### TodoList Benchmark (Verified)
177
-
178
- ```
179
- ┌─────────────────────────────────────────────────────────────┐
180
- │ TodoList App Execution Metrics (Actual Run) │
181
- ├─────────────────────────────────────────────────────────────┤
182
- │ Total Time: 8 minutes 12 seconds │
183
- │ Files Created: 11 files │
184
- │ Test Cases: 12 passing │
185
- │ IDE Problems: 0 (after auto-fix) │
186
- │ Security Scan: ✅ Clean │
187
- │ Lint Errors: 0 │
188
- │ Agents Used: 4 (planner, frontend, backend, tester) │
189
- │ User Approvals: 1 (PLAN.md only) │
190
- └─────────────────────────────────────────────────────────────┘
191
- ```
192
-
193
- ### SLO Targets (Service Level Objectives)
194
-
195
- | Metric | Target | Status |
196
- |--------|--------|--------|
197
- | IDE Problems at Completion | 0 | ✅ Enforced |
198
- | Security Scan Pass Rate | 100% | ✅ Enforced |
199
- | Lint Errors | 0 | ✅ Enforced |
200
- | Test Coverage | > 80% | ✅ Recommended |
201
- | Type Errors | 0 | ✅ Enforced |
202
-
203
- > **Enforcement:** Agent CANNOT mark task complete if any SLO fails.
204
-
205
- ### Token Efficiency
206
-
207
- | Operation | Without ASK | With ASK | Reduction |
208
- |-----------|-------------|----------|-----------|
209
- | Simple feature | 50,000 tokens | 10,000 | **80%** |
210
- | Full application | 200,000 tokens | 45,000 | **77%** |
211
- | Complex refactor | 300,000 tokens | 70,000 | **76%** |
212
-
213
- **Why more efficient?**
214
- - Skills loaded on-demand, not all at once
215
- - Context optimized per agent
216
- - Reusable patterns reduce repetition
217
-
218
- ### Cost Estimation Formula
219
-
220
- ```javascript
221
- function estimateTime(complexity, agents) {
222
- const baseTime = {
223
- simple: 3, // minutes
224
- standard: 5,
225
- complex: 10,
226
- enterprise: 20
227
- };
228
-
229
- const agentMultiplier = Math.max(1, agents / 3);
230
-
231
- return {
232
- optimistic: Math.round(baseTime[complexity] * 0.8),
233
- likely: Math.round(baseTime[complexity] * agentMultiplier),
234
- pessimistic: Math.round(baseTime[complexity] * 1.5 * agentMultiplier)
235
- };
236
- }
237
-
238
- // Example: Standard app with 4 agents
239
- estimateTime('standard', 4);
240
- // → { optimistic: 4, likely: 7, pessimistic: 10 } minutes
241
- ```
242
-
243
- ---
244
-
245
- ## 🧠 Self-Learning System
246
-
247
- > **AI learns from every mistake and NEVER repeats it**
248
-
249
- ### How It Works
250
-
251
- ```
252
- ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
253
- │ Error Detected │ ──► │ auto-learner │ ──► │ Root Cause │
254
- │ (or user says │ │ skill invoked │ │ Analysis │
255
- │ "that's wrong")│ │ │ │ │
256
- └─────────────────┘ └─────────────────┘ └────────┬────────┘
257
-
258
- ┌─────────────────┐ ┌─────────────────┐ ┌────────▼────────┐
259
- │ Future │ ◄── │ Stored in │ ◄── │ Lesson │
260
- │ Prevention │ │ lessons- │ │ Extracted │
261
- │ │ │ learned.yaml │ │ │
262
- └─────────────────┘ └─────────────────┘ └─────────────────┘
263
- ```
264
-
265
- ### Lesson Categories
266
-
267
- | Category | ID Pattern | Trigger | Example |
268
- |----------|------------|---------|---------|
269
- | **Safety** | `SAFE-XXX` | Destructive actions | "Deleted file without confirmation" |
270
- | **Code** | `CODE-XXX` | Type/syntax errors | "JSX.Element → ReactNode in React 18+" |
271
- | **Workflow** | `FLOW-XXX` | Process violations | "Skipped problem check before completion" |
272
- | **Integration** | `INT-XXX` | Config/dependency issues | "@import order in Tailwind CSS" |
273
- | **Performance** | `PERF-XXX` | Slow code patterns | "N+1 query detected in API" |
274
-
275
- ### Real Lesson Examples
276
-
277
- **Lesson 1: React 18+ Type Pattern**
278
-
279
- ```yaml
280
- # .agent/knowledge/lessons-learned.yaml
281
-
282
- - id: CODE-002
283
- pattern: "Using JSX.Element in React 18+"
284
- severity: HIGH
285
- message: |
286
- Use ReactNode instead of JSX.Element.
287
- React 18+ doesn't expose JSX namespace globally.
288
- date: "2026-01-15"
289
- trigger: "TypeScript error: Cannot find namespace 'JSX'"
290
- fix_applied: true
291
- example_fix: |
292
- // ❌ Before (causes error)
293
- const Header = (): JSX.Element => <header>...</header>;
294
-
295
- // ✅ After (correct)
296
- import { ReactNode } from 'react';
297
- const Header = (): ReactNode => <header>...</header>;
298
- ```
299
-
300
- **Lesson 2: Completing Task Without Problem Check**
301
-
302
- ```yaml
303
- - id: FLOW-001
304
- pattern: "Completing task without checking @[current_problems]"
305
- severity: CRITICAL
306
- message: |
307
- MUST check @[current_problems] before ANY notify_user call.
308
- Never mark task complete if IDE shows errors.
309
- date: "2026-01-10"
310
- trigger: "User complaint: 'Task marked complete but has errors'"
311
- fix_applied: true
312
- ```
313
-
314
- ### Using the Learning System
315
-
316
- **Teach AI from your feedback:**
317
-
318
- ```
319
- User: "Đây là lỗi nghiêm trọng, bạn đã tạo file mới thay vì rename"
320
-
321
- AI: 📚 Đã học: [LEARN-003] - When rebranding: copy original first,
322
- don't create new simplified file
323
- ```
324
-
325
- **View all learned lessons:**
326
-
327
- ```bash
328
- npm run agent → Lessons → View All
329
- ```
330
-
331
- **Recall lessons during work:**
332
-
333
- ```bash
334
- npm run agent → Recall → Scan codebase for violations
335
- ```
336
-
337
- ### Integration with Problem Checker
338
-
339
- ```
340
- After EVERY code modification:
341
-
342
-
343
- ┌─────────────────────┐
344
- │ problem-checker │ ◄── Reads IDE problems
345
- │ skill runs │
346
- └──────────┬──────────┘
347
-
348
-
349
- Problems found?
350
- ┌──────┴──────┐
351
- │ │
352
- YES NO
353
- │ │
354
- ▼ ▼
355
- ┌───────────┐ ┌───────────┐
356
- │ Auto-fix │ │ Continue │
357
- │ attempt │ │ │
358
- └─────┬─────┘ └───────────┘
359
-
360
-
361
- Fixed?
362
- ┌──┴──┐
363
- │ │
364
- YES NO
365
- │ │
366
- ▼ ▼
367
- Continue auto-learner
368
- extracts lesson
369
- ```
370
-
371
- ---
372
-
373
- ## 🛠️ Create Project-Specific Skills
374
-
375
- > **Teach AI YOUR project's patterns, conventions, and best practices**
376
-
377
- ### Why Create Custom Skills?
378
-
379
- | Without Custom Skills | With Custom Skills |
380
- |----------------------|-------------------|
381
- | AI uses generic patterns | AI follows YOUR conventions |
382
- | Inconsistent code style | Uniform codebase |
383
- | Repeated explanations | AI remembers once, applies forever |
384
- | Manual code review fixes | Auto-correct violations |
385
-
386
- ### Quick Start: /forge Workflow
387
-
388
- ```bash
389
- /forge create my-project-conventions
390
- ```
391
-
392
- This creates:
393
-
394
- ```
395
- .agent/skills/my-project-conventions/
396
- ├── SKILL.md # Main instruction file
397
- ├── references/ # Templates & examples
398
- │ ├── component.tsx # Your component template
399
- │ └── api-pattern.ts # Your API pattern
400
- └── scripts/ # Optional automation
401
- └── check_conventions.py
402
- ```
403
-
404
- ### Example: Creating "react-conventions" Skill
405
-
406
- **Step 1: Create SKILL.md**
407
-
408
- ```yaml
409
- ---
410
- name: react-conventions
411
- description: >-
412
- Project-specific React patterns for MyApp.
413
- Enforces component structure, naming, and state management.
414
- metadata:
415
- category: "project-specific"
416
- version: "1.0.0"
417
- triggers: "component, hook, page, react"
418
- coordinates_with: "code-craft, react-architect"
419
- ---
420
-
421
- # React Conventions for MyApp
422
-
423
- ## Component Structure (MANDATORY)
424
-
425
- Every React component MUST follow this structure:
426
-
427
- ```tsx
428
- // 1. Imports - external first, then internal
429
- import { forwardRef } from 'react';
430
- import { cn } from '@/lib/utils';
431
-
432
- // 2. Props interface - always named {ComponentName}Props
433
- interface ButtonProps {
434
- variant?: 'primary' | 'secondary';
435
- children: React.ReactNode;
436
- }
437
-
438
- // 3. Component - always use forwardRef
439
- const Button = forwardRef<HTMLButtonElement, ButtonProps>(
440
- ({ variant = 'primary', children, ...props }, ref) => {
441
- return (
442
- <button ref={ref} className={cn('btn', `btn-${variant}`)} {...props}>
443
- {children}
444
- </button>
445
- );
446
- }
447
- );
448
-
449
- // 4. Display name - for debugging
450
- Button.displayName = 'Button';
451
-
452
- // 5. Named export - never default export
453
- export { Button };
454
- export type { ButtonProps };
455
- ```
456
-
457
- ## State Management Rules
458
-
459
- | State Type | Solution | When to Use |
460
- |------------|----------|-------------|
461
- | Local UI | useState | Component-specific state |
462
- | Shared | Zustand | Cross-component state |
463
- | Server | TanStack Query | API data fetching |
464
- | Form | React Hook Form | Form handling |
465
-
466
- **NEVER use Redux in this project.**
467
-
468
- ## File Naming
469
-
470
- | Type | Pattern | Example |
471
- |------|---------|---------|
472
- | Component | PascalCase | `Button.tsx` |
473
- | Hook | camelCase with `use` | `useAuth.ts` |
474
- | Utility | camelCase | `formatDate.ts` |
475
- | Type | PascalCase with suffix | `UserTypes.ts` |
476
- ```
477
-
478
- **Step 2: Add Component Template**
479
-
480
- Create `references/component.tsx`:
481
-
482
- ```tsx
483
- import { forwardRef } from 'react';
484
- import { cn } from '@/lib/utils';
485
-
486
- interface __COMPONENT_NAME__Props {
487
- className?: string;
488
- children?: React.ReactNode;
489
- }
490
-
491
- const __COMPONENT_NAME__ = forwardRef<HTMLDivElement, __COMPONENT_NAME__Props>(
492
- ({ className, children, ...props }, ref) => {
493
- return (
494
- <div ref={ref} className={cn('', className)} {...props}>
495
- {children}
496
- </div>
497
- );
498
- }
499
- );
500
-
501
- __COMPONENT_NAME__.displayName = '__COMPONENT_NAME__';
502
-
503
- export { __COMPONENT_NAME__ };
504
- export type { __COMPONENT_NAME__Props };
505
- ```
506
-
507
- **Step 3: Register in registry.json**
508
-
509
- ```json
510
- {
511
- "skills": {
512
- "react-conventions": {
513
- "path": ".agent/skills/react-conventions",
514
- "description": "Project-specific React patterns",
515
- "triggers": ["component", "react", "hook", "page"],
516
- "priority": "high"
517
- }
518
- }
519
- }
520
- ```
521
-
522
- **Step 4: AI Now Follows YOUR Patterns!**
523
-
524
- ```
525
- User: "Create a Card component"
526
-
527
- AI: [Reads react-conventions skill]
528
-
529
- ✅ Uses forwardRef (per your conventions)
530
- ✅ Named export (per your conventions)
531
- ✅ Props interface with correct naming
532
- ✅ Display name set
533
- ✅ Uses cn() utility
534
- ```
535
-
536
- ### Skill Structure Reference
537
-
538
- ```
539
- skill-name/
540
- ├── SKILL.md # (Required) Instructions for AI
541
- │ ├── YAML frontmatter # name, description, triggers
542
- │ └── Markdown content # Rules, examples, patterns
543
-
544
- ├── references/ # (Optional) Templates & examples
545
- │ ├── template.tsx # Code templates
546
- │ ├── example.ts # Reference implementations
547
- │ └── patterns.md # Pattern documentation
548
-
549
- ├── scripts/ # (Optional) Automation scripts
550
- │ ├── check.py # Validation script
551
- │ └── generate.js # Code generation
552
-
553
- └── assets/ # (Optional) Images, diagrams
554
- └── architecture.png # Visual references
555
- ```
556
-
557
- ### Best Practices for Custom Skills
558
-
559
- 1. **Be Specific** - Vague rules lead to inconsistent results
560
- 2. **Include Examples** - Show, don't just tell
561
- 3. **Set Priorities** - Mark what's MANDATORY vs recommended
562
- 4. **Use Templates** - Reduce variation with starter code
563
- 5. **Add Triggers** - Define when skill should activate
564
-
565
164
  ---
566
165
 
567
- ## 🤝 Multi-Agent Coordination
568
-
569
- > **25 specialist agents working together like a FAANG engineering team**
570
-
571
- ### Agent Categories
572
-
573
- **Meta-Agents (Runtime Control):**
574
-
575
- | Agent | Role | When Invoked |
576
- |-------|------|--------------|
577
- | `orchestrator` | Strategic coordination | Complex multi-domain tasks |
578
- | `assessor` | Risk evaluation | Before risky operations |
579
- | `recovery` | State management | Save/restore checkpoints |
580
- | `critic` | Conflict resolution | Agent disagreements |
581
- | `learner` | Continuous improvement | After successes/failures |
582
-
583
- **Domain Agents (20):**
584
-
585
- | Domain | Agent | Skills Used |
586
- |--------|-------|-------------|
587
- | Web UI | `frontend-specialist` | react-architect, tailwind-kit |
588
- | API | `backend-specialist` | api-architect, nodejs-pro |
589
- | Database | `database-architect` | data-modeler, prisma-expert |
590
- | Security | `security-auditor` | security-scanner, offensive-sec |
591
- | Testing | `test-engineer` | test-architect, e2e-automation |
592
- | DevOps | `devops-engineer` | cicd-pipeline, server-ops |
593
- | Mobile | `mobile-developer` | mobile-first |
594
- | Performance | `performance-optimizer` | perf-optimizer |
595
- | Planning | `project-planner` | idea-storm, project-planner |
596
- | Debug | `debugger` | debug-pro |
597
-
598
- ### Agent Selection Matrix
599
-
600
- | Task Type | Required Agents | Verification |
601
- |-----------|-----------------|--------------|
602
- | **Web App** | frontend, backend, test | lint + security |
603
- | **API** | backend, security, test | security scan |
604
- | **UI/Design** | frontend, seo, performance | lighthouse |
605
- | **Database** | database, backend, security | schema check |
606
- | **Full Stack** | planner, frontend, backend, devops | all |
607
- | **Debug** | debugger, explorer, test | reproduction test |
608
- | **Security Audit** | security, penetration-tester, devops | all scans |
609
-
610
- ### Parallel Execution Flow
611
-
612
- ```
613
- ┌─────────────────┐
614
- │ Approved Plan │
615
- └────────┬────────┘
616
-
617
- ┌──────────────┴──────────────┐
618
- │ │
619
- ▼ ▼
620
- ┌─────────────────┐ ┌─────────────────┐
621
- │ database- │ │ security- │
622
- │ architect │ │ auditor │
623
- │ (Foundation) │ │ (Foundation) │
624
- └────────┬────────┘ └────────┬────────┘
625
- │ │
626
- └──────────────┬──────────────┘
627
-
628
- ┌─────────────┴─────────────┐
629
- │ │
630
- ▼ ▼
631
- ┌─────────────────┐ ┌─────────────────┐
632
- │ backend- │ │ frontend- │
633
- │ specialist │ │ specialist │
634
- │ (Core) │ │ (Core) │
635
- └────────┬────────┘ └────────┬────────┘
636
- │ │
637
- └─────────────┬─────────────┘
638
-
639
- ┌────────────┴────────────┐
640
- │ │
641
- ▼ ▼
642
- ┌─────────────────┐ ┌─────────────────┐
643
- │ test-engineer │ │ devops-engineer │
644
- │ (Polish) │ │ (Polish) │
645
- └────────┬────────┘ └────────┬────────┘
646
- │ │
647
- └───────────┬─────────────┘
648
-
649
-
650
- ┌─────────────────┐
651
- │ Verification │
652
- │ & Completion │
653
- └─────────────────┘
654
- ```
655
-
656
- ### Conflict Resolution (Critic Agent)
657
-
658
- When agents disagree:
659
-
660
- ```
661
- test-engineer: "Need 100% coverage before deploy"
662
- devops-engineer: "Deploy now, coverage can improve later"
663
-
664
-
665
-
666
- critic agent applies hierarchy:
667
- Safety > Recoverability > Correctness > Cleanliness > Convenience
668
-
669
-
670
-
671
- Verdict: "Deploy with current coverage (85%),
672
- create ticket for coverage improvement"
673
- ```
166
+ ## 📜 Workflows Reference (26)
167
+
168
+ | Command | Description | Agents Used |
169
+ |---------|-------------|-------------|
170
+ | `/think` | Brainstorm 3+ approaches | project-planner |
171
+ | `/architect` | Generate detailed plan.md | project-planner, explorer |
172
+ | `/build` | Full-stack implementation | 3-7 agents |
173
+ | `/autopilot` | Multi-agent auto-execution | 3+ agents |
174
+ | `/validate` | Run test suite | test-engineer |
175
+ | `/diagnose` | Root cause debugging | debugger, explorer |
176
+ | `/launch` | Production deployment | devops, security |
177
+ | `/inspect` | Security code review | security-auditor |
178
+ | `/chronicle` | Auto-documentation | documentation-writer |
179
+ | `/studio` | UI design (50+ styles) | frontend-specialist |
180
+ | `/stage` | Preview server control | devops-engineer |
181
+ | `/forge` | Create custom skills | - |
182
+ | `/pulse` | Project health check | - |
183
+ | `/api` | API development | backend, security |
184
+ | `/mobile` | Mobile app development | mobile-developer |
185
+ | `/game` | Game development | game-engine |
186
+ | `/monitor` | Observability setup | observability |
187
+ | `/optimize` | Performance optimization | performance-optimizer |
188
+ | `/benchmark` | Load testing | - |
189
+ | `/diagram` | Auto-generate diagrams | - |
190
+ | `/flags` | Feature flag management | - |
191
+ | `/alert` | Alert configuration | - |
192
+ | `/boost` | Enhance existing code | varies |
193
+ | `/auto-accept-process` | Autonomous workflow | all |
194
+ | `/agent` | Smart CLI dashboard | - |
674
195
 
675
196
  ---
676
197
 
677
- ## 📜 Workflows Reference (24)
678
-
679
- | Command | Description | Agents Used | Est. Time |
680
- |---------|-------------|-------------|-----------|
681
- | `/think` | Brainstorm 3+ approaches | project-planner | 2-3 min |
682
- | `/architect` | Generate detailed plan.md | project-planner, explorer | 3-5 min |
683
- | `/build` | Full-stack implementation | 3-7 agents | 5-20 min |
684
- | `/autopilot` | Multi-agent auto-execution | 3+ agents | 5-20 min |
685
- | `/validate` | Run test suite | test-engineer | 2-5 min |
686
- | `/diagnose` | Root cause debugging | debugger, explorer | 5-10 min |
687
- | `/launch` | Production deployment | devops, security | 5-10 min |
688
- | `/inspect` | Security code review | security-auditor | 5-10 min |
689
- | `/chronicle` | Auto-documentation | documentation-writer | 3-5 min |
690
- | `/studio` | UI design (50+ styles) | frontend-specialist | 2-5 min |
691
- | `/stage` | Preview server control | devops-engineer | 1-2 min |
692
- | `/forge` | Create custom skills | - | 5-10 min |
693
- | `/pulse` | Project health check | - | 1 min |
694
- | `/boost` | Enhance existing code | varies | 5-15 min |
695
- | `/flags` | Feature flag management | - | 2-5 min |
696
- | `/api` | API development | backend, security | 10-20 min |
697
- | `/agent` | Smart CLI dashboard | - | - |
698
- | `/auto-accept-process` | Autonomous workflow | all | varies |
699
-
700
- ### Workflow Examples
701
-
702
- **`/think` - Brainstorming**
703
-
704
- ```bash
705
- /think payment integration
706
-
707
- # AI provides:
708
- # - Option 1: Stripe (pros/cons)
709
- # - Option 2: PayPal (pros/cons)
710
- # - Option 3: Custom solution (pros/cons)
711
- # - Recommendation with reasoning
712
- ```
713
-
714
- **`/build` - Implementation**
715
-
716
- ```bash
717
- /build user authentication with JWT
718
-
719
- # Agent coordination:
720
- # 1. project-planner → PLAN.md
721
- # 2. security-auditor → Auth requirements
722
- # 3. backend-specialist → API + middleware
723
- # 4. frontend-specialist → Login/register UI
724
- # 5. test-engineer → Auth tests
725
- ```
726
-
727
- **`/studio` - UI Design**
728
-
729
- ```bash
730
- /studio design dashboard for fintech app
731
-
732
- # Uses 50+ design styles, 95+ color palettes
733
- # Generates: design tokens, color system, typography
734
- # Outputs: CSS variables, Tailwind config
735
- ```
736
-
737
- ---
738
-
739
- ## 🧩 Skills Catalog (45)
198
+ ## 🧩 Skills Catalog (49)
740
199
 
741
200
  ### 🏗️ Architecture & Planning
742
201
 
@@ -745,7 +204,6 @@ Verdict: "Deploy with current coverage (85%),
745
204
  | `app-scaffold` | Full-stack app scaffolding |
746
205
  | `project-planner` | Task planning, breakdown |
747
206
  | `idea-storm` | Socratic questioning, brainstorming |
748
- | `system-design` | System design patterns |
749
207
  | `lifecycle-orchestrator` | End-to-end task management |
750
208
 
751
209
  ### 🎨 Frontend & UI
@@ -754,10 +212,8 @@ Verdict: "Deploy with current coverage (85%),
754
212
  |-------|-------------|
755
213
  | `react-architect` | React hooks, state, performance |
756
214
  | `nextjs-pro` | App Router, Server Components |
757
- | `tailwind-kit` | Tailwind CSS v4 utilities |
758
- | `design-system` | UI/UX patterns |
759
- | `studio` | 50 styles, 95+ palettes, 60+ fonts |
760
- | `web-core` | Core web fundamentals |
215
+ | `tailwind-kit` | Tailwind CSS utilities |
216
+ | `studio` | 50+ styles, 97 palettes, 57 fonts |
761
217
 
762
218
  ### ⚙️ Backend & API
763
219
 
@@ -765,9 +221,7 @@ Verdict: "Deploy with current coverage (85%),
765
221
  |-------|-------------|
766
222
  | `api-architect` | REST, GraphQL, tRPC |
767
223
  | `nodejs-pro` | Node.js async patterns |
768
- | `python-pro` | Python standards, FastAPI |
769
224
  | `data-modeler` | Schema design, Prisma |
770
- | `mcp-server` | Model Context Protocol |
771
225
 
772
226
  ### 🔐 Security
773
227
 
@@ -782,10 +236,8 @@ Verdict: "Deploy with current coverage (85%),
782
236
  | Skill | Description |
783
237
  |-------|-------------|
784
238
  | `test-architect` | Jest, Vitest, strategies |
785
- | `test-driven-dev` | TDD methodology |
786
239
  | `e2e-automation` | Playwright automation |
787
240
  | `code-quality` | Linting, validation |
788
- | `code-review` | Code review standards |
789
241
  | `problem-checker` | IDE problem detection |
790
242
 
791
243
  ### 🐛 Debugging & Recovery
@@ -794,7 +246,6 @@ Verdict: "Deploy with current coverage (85%),
794
246
  |-------|-------------|
795
247
  | `debug-pro` | 4-phase debugging + frameworks |
796
248
  | `state-rollback` | Save/restore checkpoints |
797
- | `perf-optimizer` | Web Vitals, optimization |
798
249
 
799
250
  ### 🤖 AI & Agents
800
251
 
@@ -804,34 +255,60 @@ Verdict: "Deploy with current coverage (85%),
804
255
  | `auto-learner` | Learning from failures |
805
256
  | `self-evolution` | Knowledge evolution |
806
257
  | `execution-reporter` | Agent routing transparency |
807
- | `skill-forge` | Create new skills |
808
258
 
809
259
  ### ☁️ DevOps & Infra
810
260
 
811
261
  | Skill | Description |
812
262
  |-------|-------------|
813
263
  | `cicd-pipeline` | CI/CD, Docker, K8s |
814
- | `server-ops` | Infrastructure management |
815
- | `gitops` | ArgoCD/Flux GitOps |
264
+ | `gitops-workflow` | ArgoCD/Flux GitOps |
816
265
  | `observability` | OpenTelemetry, monitoring |
817
266
 
818
267
  ### 📱 Specialized
819
268
 
820
269
  | Skill | Description |
821
270
  |-------|-------------|
822
- | `mobile-first` | Mobile UI/UX patterns |
823
- | `game-engine` | Game logic, mechanics |
824
- | `seo-optimizer` | SEO, E-E-A-T |
825
- | `geo-spatial` | GenAI/GEO optimization |
826
- | `shell-script` | Linux commands, scripting |
271
+ | `mobile-design` | Mobile UI/UX patterns |
272
+ | `mobile-developer` | React Native, Flutter |
273
+ | `mobile-security-coder` | Mobile security |
274
+ | `game-development` | Game logic, mechanics |
827
275
  | `typescript-expert` | Type-level programming |
828
- | `doc-templates` | Documentation formats |
829
- | `code-craft` | Coding standards (Global) |
830
276
 
831
277
  [See full catalog →](https://github.com/agentskillkit/agent-skills/tree/main/.agent/skills)
832
278
 
833
279
  ---
834
280
 
281
+ ## 🤝 Multi-Agent Coordination
282
+
283
+ > **25 specialist agents working together like a FAANG engineering team**
284
+
285
+ ### Agent Categories
286
+
287
+ **Meta-Agents (Runtime Control):**
288
+
289
+ | Agent | Role |
290
+ |-------|------|
291
+ | `orchestrator` | Strategic coordination |
292
+ | `assessor` | Risk evaluation |
293
+ | `recovery` | State management |
294
+ | `critic` | Conflict resolution |
295
+ | `learner` | Continuous improvement |
296
+
297
+ **Domain Agents (20):**
298
+
299
+ | Domain | Agent | Skills Used |
300
+ |--------|-------|-------------|
301
+ | Web UI | `frontend-specialist` | react-architect, tailwind-kit |
302
+ | API | `backend-specialist` | api-architect, nodejs-pro |
303
+ | Database | `database-architect` | data-modeler, prisma-expert |
304
+ | Security | `security-auditor` | security-scanner, offensive-sec |
305
+ | Testing | `test-engineer` | test-architect, e2e-automation |
306
+ | DevOps | `devops-engineer` | cicd-pipeline, server-ops |
307
+ | Mobile | `mobile-developer` | mobile-design |
308
+ | Debug | `debugger` | debug-pro |
309
+
310
+ ---
311
+
835
312
  ## 🛡️ Safety Protocol (TIER -1)
836
313
 
837
314
  > **Safety > Recoverability > Correctness > Cleanliness > Convenience**
@@ -858,85 +335,81 @@ Remove-Item -Recurse
858
335
 
859
336
  ---
860
337
 
861
- ## 📊 Master Scripts
338
+ ## 🧠 Self-Learning System
862
339
 
863
- | Script | Purpose | Command |
864
- |--------|---------|---------|
865
- | `checklist.js` | Core validation (lint, security, tests) | `npm run checklist` |
866
- | `verify_all.js` | Full verification suite | `npm run verify <URL>` |
867
- | `auto_preview.js` | Dev server management | `npm run preview:start` |
868
- | `session_manager.js` | Project status & analytics | `npm run session:status` |
869
- | `autopilot-runner.js` | Autopilot integration | Internal use |
870
- | `autopilot-metrics.js` | Metrics collection (11 metrics) | Internal use |
871
- | `skill-validator.js` | Skill compliance checker | `node .agent/scripts-js/skill-validator.js` |
340
+ > **AI learns from every mistake and NEVER repeats it**
872
341
 
873
- ### Quick Commands
342
+ ### How It Works
874
343
 
875
- ```bash
876
- # Development validation
877
- npm run checklist
344
+ ```
345
+ Error Detected → auto-learner skill → Root Cause Analysis → Lesson Extracted
346
+
347
+ Future Prevention ← Stored in lessons-learned.yaml ← Pattern Documented
348
+ ```
878
349
 
879
- # Pre-deploy full verification
880
- npm run verify http://localhost:3000
350
+ ### Using the Learning System
881
351
 
882
- # Project health
883
- npm run session:info
352
+ **Teach AI from your feedback:**
884
353
 
885
- # Dev server
886
- npm run preview:start
887
- npm run preview:stop
354
+ ```
355
+ User: "Đây là lỗi nghiêm trọng, bạn đã tạo file mới thay vì rename"
356
+
357
+ AI: 📚 Đã học: [LEARN-003] - When rebranding: copy original first,
358
+ don't create new simplified file
359
+ ```
360
+
361
+ **View all learned lessons (if AutoLearn CLI installed):**
362
+
363
+ ```bash
364
+ agent → Learn → View All
888
365
  ```
889
366
 
890
367
  ---
891
368
 
892
- ## 🗂️ Project Structure
369
+ ## 🗂️ CLI Commands
893
370
 
894
- **Local Install:**
371
+ ### `kit` Command (Always Installed)
895
372
 
896
- ```
897
- your-project/
898
- ├── .agent/
899
- │ ├── GEMINI.md # AI behavior config
900
- │ ├── ARCHITECTURE.md # System overview
901
- │ ├── skills/ # 51 skills + registry.json
902
- │ ├── agents/ # 25 specialist agents
903
- │ ├── workflows/ # 18 slash commands
904
- │ ├── knowledge/ # Self-learning memory
905
- │ │ └── lessons-learned.yaml
906
- │ ├── scripts-js/ # Master validation scripts
907
- │ └── config/ # Configuration files
908
- ├── node_modules/
909
- │ └── agentskillskit-cli/
910
- └── package.json
911
- └── "agent": "agent" # Auto-added script
373
+ ```bash
374
+ kit list # List all installed skills
375
+ kit info <skill-name> # Show skill details
376
+ kit validate # Validate skill structure
377
+ kit doctor # Check system health
378
+ kit cache status # View cache usage
912
379
  ```
913
380
 
914
- **Global Install:**
381
+ ### `agent` Command (Optional - AutoLearn)
915
382
 
916
- ```
917
- ~/.gemini/
918
- └── antigravity/
919
- ├── skills/ # 51 skills
920
- ├── agents/ # 25 agents
921
- ├── workflows/ # 18 workflows
922
- └── knowledge/ # Self-learning memory
383
+ ```bash
384
+ agent # Launch interactive dashboard
385
+ agent learn # Teach new patterns
386
+ agent recall # Scan for violations
387
+ agent stats # View statistics
388
+ agent watch # Real-time monitoring
923
389
  ```
924
390
 
391
+ > **Note:** Not installing AutoLearn does NOT affect workflows, skills, or agents. The `agent` command is purely a convenience tool for interactive learning.
392
+
925
393
  ---
926
394
 
927
395
  ## 📈 Version History
928
396
 
929
- **v3.2.0 (Current)**
930
- - ✅ All master scripts migrated to JavaScript
931
- - ✅ Zero Python dependency for core features
932
- - ✅ 143 tests passing across Studio & CLI
933
- - ✅ TypeScript definitions for IDE support
934
- - ✅ ~10% faster execution
397
+ **v3.2.5 (Current)**
398
+ - ✅ 100% JavaScript - Zero Python dependencies
399
+ - ✅ 49 skills, 26 workflows, 25 agents
400
+ - ✅ AutoLearn made optional (does not affect core)
401
+ - ✅ Complete installation includes all components
402
+ - ✅ config/, scripts-js/, metrics/ now auto-installed
403
+ - ✅ Policy docs (CONTINUOUS_EXECUTION_POLICY.md, WORKFLOW_CHAINS.md) auto-installed
404
+
405
+ **v3.2.0**
406
+ - All master scripts migrated to JavaScript
407
+ - TypeScript definitions for IDE support
408
+ - ~10% faster execution
935
409
 
936
410
  **v3.1.0**
937
411
  - Added SelfEvolution v4.0 (auto-learning system)
938
412
  - Enhanced agent routing (SmartRouter skill)
939
- - 49 skills total
940
413
 
941
414
  See [CHANGELOG.md](CHANGELOG.md) for full history.
942
415
 
@@ -946,7 +419,6 @@ See [CHANGELOG.md](CHANGELOG.md) for full history.
946
419
 
947
420
  - [GitHub - agent-skills](https://github.com/agentskillkit/agent-skills)
948
421
  - [GitHub - add-skill-kit](https://github.com/agentskillkit/add-skill-kit)
949
- - [npm - agentskillskit-cli](https://www.npmjs.com/package/agentskillskit-cli)
950
422
  - [npm - add-skill-kit](https://www.npmjs.com/package/add-skill-kit)
951
423
  - [Issues & Feature Requests](https://github.com/agentskillkit/agent-skills/issues)
952
424
 
@@ -958,4 +430,9 @@ MIT - Free for all projects.
958
430
 
959
431
  ---
960
432
 
433
+ **⚡ Agent Skill Kit v3.2.5**
434
+ *Composable Skills. Coordinated Agents. Intelligent Execution.*
435
+
436
+ ---
437
+
961
438
  **⭐ Star the repo • Install now • Build something great**