@musashishao/agent-kit 1.8.1 → 1.9.0
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.
- package/.agent/agents/ai-architect.md +39 -0
- package/.agent/agents/cloud-engineer.md +39 -0
- package/.agent/agents/game-asset-curator.md +317 -0
- package/.agent/agents/game-developer.md +190 -89
- package/.agent/agents/game-narrative-designer.md +310 -0
- package/.agent/agents/game-qa-agent.md +441 -0
- package/.agent/agents/marketing-specialist.md +41 -0
- package/.agent/agents/penetration-tester.md +15 -1
- package/.agent/rules/CODEX.md +26 -2
- package/.agent/rules/GEMINI.md +7 -5
- package/.agent/rules/REFERENCE.md +92 -2
- package/.agent/scripts/ak_cli.py +1 -1
- package/.agent/scripts/localize_workflows.py +54 -0
- package/.agent/scripts/memory_manager.py +24 -1
- package/.agent/skills/3d-web-experience/SKILL.md +386 -0
- package/.agent/skills/DEPENDENCIES.md +54 -0
- package/.agent/skills/ab-test-setup/SKILL.md +77 -0
- package/.agent/skills/active-directory-attacks/SKILL.md +59 -0
- package/.agent/skills/agent-evaluation/SKILL.md +430 -0
- package/.agent/skills/agent-memory-systems/SKILL.md +426 -0
- package/.agent/skills/agent-tool-builder/SKILL.md +139 -0
- package/.agent/skills/ai-agents-architect/SKILL.md +115 -0
- package/.agent/skills/ai-product/SKILL.md +86 -0
- package/.agent/skills/ai-wrapper-product/SKILL.md +90 -0
- package/.agent/skills/analytics-tracking/SKILL.md +88 -0
- package/.agent/skills/api-fuzzing-bug-bounty/SKILL.md +66 -0
- package/.agent/skills/app-store-optimization/SKILL.md +66 -0
- package/.agent/skills/autonomous-agent-patterns/SKILL.md +414 -0
- package/.agent/skills/aws-penetration-testing/SKILL.md +50 -0
- package/.agent/skills/aws-serverless/SKILL.md +327 -0
- package/.agent/skills/azure-functions/SKILL.md +340 -0
- package/.agent/skills/broken-authentication/SKILL.md +53 -0
- package/.agent/skills/browser-automation/SKILL.md +408 -0
- package/.agent/skills/browser-extension-builder/SKILL.md +422 -0
- package/.agent/skills/bullmq-specialist/SKILL.md +424 -0
- package/.agent/skills/bun-development/SKILL.md +386 -0
- package/.agent/skills/burp-suite-testing/SKILL.md +60 -0
- package/.agent/skills/clerk-auth/SKILL.md +432 -0
- package/.agent/skills/cloud-penetration-testing/SKILL.md +51 -0
- package/.agent/skills/copywriting/SKILL.md +66 -0
- package/.agent/skills/crewai/SKILL.md +470 -0
- package/.agent/skills/discord-bot-architect/SKILL.md +447 -0
- package/.agent/skills/email-sequence/SKILL.md +73 -0
- package/.agent/skills/ethical-hacking-methodology/SKILL.md +67 -0
- package/.agent/skills/firebase/SKILL.md +377 -0
- package/.agent/skills/game-development/godot-expert/SKILL.md +462 -0
- package/.agent/skills/game-development/npc-ai-integration/SKILL.md +110 -0
- package/.agent/skills/game-development/procedural-generation/SKILL.md +168 -0
- package/.agent/skills/game-development/unity-integration/SKILL.md +358 -0
- package/.agent/skills/game-development/webgpu-shading/SKILL.md +209 -0
- package/.agent/skills/gcp-cloud-run/SKILL.md +358 -0
- package/.agent/skills/graphql/SKILL.md +492 -0
- package/.agent/skills/idor-testing/SKILL.md +64 -0
- package/.agent/skills/inngest/SKILL.md +128 -0
- package/.agent/skills/langfuse/SKILL.md +415 -0
- package/.agent/skills/langgraph/SKILL.md +360 -0
- package/.agent/skills/launch-strategy/SKILL.md +68 -0
- package/.agent/skills/linux-privilege-escalation/SKILL.md +62 -0
- package/.agent/skills/llm-app-patterns/SKILL.md +367 -0
- package/.agent/skills/marketing-ideas/SKILL.md +66 -0
- package/.agent/skills/metasploit-framework/SKILL.md +60 -0
- package/.agent/skills/micro-saas-launcher/SKILL.md +93 -0
- package/.agent/skills/neon-postgres/SKILL.md +339 -0
- package/.agent/skills/paid-ads/SKILL.md +64 -0
- package/.agent/skills/supabase-integration/SKILL.md +411 -0
- package/.agent/workflows/ai-agent.md +36 -0
- package/.agent/workflows/autofix.md +1 -0
- package/.agent/workflows/brainstorm.md +1 -0
- package/.agent/workflows/context.md +1 -0
- package/.agent/workflows/create.md +1 -0
- package/.agent/workflows/dashboard.md +1 -0
- package/.agent/workflows/debug.md +1 -0
- package/.agent/workflows/deploy.md +1 -0
- package/.agent/workflows/enhance.md +1 -0
- package/.agent/workflows/game-prototype.md +154 -0
- package/.agent/workflows/marketing.md +37 -0
- package/.agent/workflows/next.md +1 -0
- package/.agent/workflows/orchestrate.md +1 -0
- package/.agent/workflows/pentest.md +37 -0
- package/.agent/workflows/plan.md +1 -0
- package/.agent/workflows/preview.md +2 -1
- package/.agent/workflows/quality.md +1 -0
- package/.agent/workflows/saas.md +36 -0
- package/.agent/workflows/spec.md +1 -0
- package/.agent/workflows/status.md +1 -0
- package/.agent/workflows/test.md +1 -0
- package/.agent/workflows/ui-ux-pro-max.md +1 -0
- package/README.md +52 -24
- package/bin/cli.js +68 -3
- package/docs/CHANGELOG_AI_INFRA.md +30 -0
- package/docs/MIGRATION_GUIDE_V1.9.md +55 -0
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ trigger: always_on
|
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
## Available Master Agents (
|
|
11
|
+
## Available Master Agents (11)
|
|
12
12
|
|
|
13
13
|
| Agent | Domain & Focus |
|
|
14
14
|
|-------|----------------|
|
|
@@ -19,7 +19,19 @@ trigger: always_on
|
|
|
19
19
|
| `frontend-specialist` | Frontend & Growth (UI/UX + SEO + Edge/Static Deploy) |
|
|
20
20
|
| `mobile-developer` | Mobile Specialist (Cross-platform + Mobile Performance)|
|
|
21
21
|
| `debugger` | Systematic Root Cause Analysis & Bug Fixing |
|
|
22
|
-
| `game-developer` |
|
|
22
|
+
| `game-developer` | Master Game Dev (Unity, Godot, Unreal, Web Games, VR/AR) |
|
|
23
|
+
| `game-narrative-designer` | Story, Dialogue, LLM-powered NPCs |
|
|
24
|
+
| `game-asset-curator` | Asset Pipeline, Procedural Gen, Optimization |
|
|
25
|
+
| `game-qa-agent` | Automated Playtesting, Balance Analysis, Bug Hunting |
|
|
26
|
+
| `marketing-specialist` | Growth marketing and user acquisition expert |
|
|
27
|
+
| `penetration-tester` | Offensive security specialist (Pentest, Red Team) |
|
|
28
|
+
| `ai-architect` | AI System Design and Multi-Agent Orchestration |
|
|
29
|
+
| `cloud-engineer` | Multi-cloud deployment and serverless architecture |
|
|
30
|
+
| `database-architect` | Database schema design and query optimization |
|
|
31
|
+
| `devops-engineer` | CI/CD, Infrastructure as Code, and Automation |
|
|
32
|
+
| `documentation-writer` | Technical documentation and user manuals |
|
|
33
|
+
| `test-engineer` | Automated testing and quality assurance |
|
|
34
|
+
| `performance-optimizer` | Performance profiling and optimization |
|
|
23
35
|
|
|
24
36
|
---
|
|
25
37
|
|
|
@@ -46,6 +58,56 @@ trigger: always_on
|
|
|
46
58
|
| `observability-patterns` | OpenTelemetry and structured logging for AI |
|
|
47
59
|
| `opentelemetry-expert` | Deep-dive OpenTelemetry SDK and tracing |
|
|
48
60
|
| `ai-incident-management` | AI-specific incident response and playbooks |
|
|
61
|
+
| `llm-app-patterns` | RAG pipelines, agent architectures, LLMOps (NEW) |
|
|
62
|
+
| `langgraph` | LangGraph agent graphs, state management (NEW) |
|
|
63
|
+
| `autonomous-agent-patterns` | Agent loops, tools, permissions, sandboxing (NEW) |
|
|
64
|
+
| `agent-memory-systems` | Working, episodic, semantic memory (NEW) |
|
|
65
|
+
| `crewai` | Multi-agent collaboration, role-based crews (NEW) |
|
|
66
|
+
| `langfuse` | LLM observability, tracing, cost tracking (NEW) |
|
|
67
|
+
| `aws-serverless` | Lambda, API Gateway, DynamoDB, SAM (NEW) |
|
|
68
|
+
| `azure-functions` | HTTP/queue/timer triggers, Durable Functions (NEW) |
|
|
69
|
+
| `gcp-cloud-run` | Cloud Run, Cloud Functions, Firestore (NEW) |
|
|
70
|
+
| `firebase` | Auth, Firestore, Security Rules, Functions (NEW) |
|
|
71
|
+
| `supabase-integration` | Postgres, Auth, RLS, Realtime (NEW) |
|
|
72
|
+
| `neon-postgres` | Serverless Postgres, branching, pooling (NEW) |
|
|
73
|
+
| `graphql` | Schema design, DataLoader, Apollo (NEW) |
|
|
74
|
+
| `clerk-auth` | Next.js auth, organizations, webhooks (NEW) |
|
|
75
|
+
| `bullmq-specialist` | Redis queues, job flows, scheduling (NEW) |
|
|
76
|
+
| `3d-web-experience` | Three.js, React Three Fiber, WebGL/WebGPU (NEW) |
|
|
77
|
+
| `bun-development` | Bun runtime, package manager, bundler (NEW) |
|
|
78
|
+
| `agent-evaluation` | AI agent benchmarking, metrics, A/B testing (NEW) |
|
|
79
|
+
| `browser-automation` | Playwright, Puppeteer, scraping, testing (NEW) |
|
|
80
|
+
| `browser-extension-builder` | Manifest V3, content scripts, popup UIs (NEW) |
|
|
81
|
+
| `discord-bot-architect` | Discord.js, slash commands, interactions (NEW) |
|
|
82
|
+
| `agent-tool-builder` | MCP servers, function calling, sandboxing (NEW) |
|
|
83
|
+
| `ai-agents-architect` | Multi-agent systems, orchestration, communication (NEW) |
|
|
84
|
+
| `ai-product` | AI PM, UX patterns, eval-driven dev (NEW) |
|
|
85
|
+
| `ai-wrapper-product` | AI wrappers, cost optimization, moats (NEW) |
|
|
86
|
+
| `micro-saas-launcher` | Lean SaaS, Stripe, distribution, GTM (NEW) |
|
|
87
|
+
| `inngest` | Durable functions, background jobs, workflows (NEW) |
|
|
88
|
+
| `ethical-hacking-methodology` | Pentest phases (Recon, Scanning, Exploitation) (NEW) |
|
|
89
|
+
| `burp-suite-testing` | Web security proxy, repeater, intruder (NEW) |
|
|
90
|
+
| `active-directory-attacks` | AD poisoning, Kerberoasting, BloodHound (NEW) |
|
|
91
|
+
| `aws-penetration-testing` | AWS IAM auditing, S3 leaks, IMDS (NEW) |
|
|
92
|
+
| `cloud-penetration-testing` | Azure/GCP security auditing, tenant isolation (NEW) |
|
|
93
|
+
| `metasploit-framework` | Exploitation, meterpreter, pivoting (NEW) |
|
|
94
|
+
| `linux-privilege-escalation` | SUID, Sudo, Kernel exploits, Cron (NEW) |
|
|
95
|
+
| `idor-testing` | IDOR, BOLA, parameter pollution (NEW) |
|
|
96
|
+
| `broken-authentication` | JWT bypass, MFA bypass, OAuth flaws (NEW) |
|
|
97
|
+
| `api-fuzzing-bug-bounty` | API discovery, fuzzing, bug bounty (NEW) |
|
|
98
|
+
| `analytics-tracking` | Product analytics, event schemas, funnels (NEW) |
|
|
99
|
+
| `ab-test-setup` | Experiment design, split testing, stats (NEW) |
|
|
100
|
+
| `app-store-optimization` | Mobile app visibility and conversion (NEW) |
|
|
101
|
+
| `copywriting` | Persuasive writing, headlines, CTAs (NEW) |
|
|
102
|
+
| `email-sequence` | Automated flows, onboarding, retention (NEW) |
|
|
103
|
+
| `launch-strategy` | Product Hunt, hype, momentum (NEW) |
|
|
104
|
+
| `marketing-ideas` | Viral loops, pSEO, unconventional growth (NEW) |
|
|
105
|
+
| `paid-ads` | Meta, Google, LinkedIn Ads, ROAS (NEW) |
|
|
106
|
+
| `game-development/unity-integration` | Unity 6, ML-Agents, Sentis, C#/DOTS patterns |
|
|
107
|
+
| `game-development/godot-expert` | Godot 4.3+, GDScript, shaders, RL agents |
|
|
108
|
+
| `game-development/npc-ai-integration` | LLM-powered NPCs, dialogue, personality |
|
|
109
|
+
| `game-development/procedural-generation` | Dungeons, terrain, items, WFC |
|
|
110
|
+
| `game-development/webgpu-shading` | WebGPU, WGSL, Three.js, Babylon.js |
|
|
49
111
|
|
|
50
112
|
---
|
|
51
113
|
|
|
@@ -88,3 +150,31 @@ trigger: always_on
|
|
|
88
150
|
| PII scan | `.agent/skills/privacy-preserving-dev/scripts/pii_scanner.py` |
|
|
89
151
|
| OTel validator | `.agent/skills/observability-patterns/scripts/otel_validator.py` |
|
|
90
152
|
| Trace analyzer | `.agent/skills/opentelemetry-expert/scripts/trace_analyzer.py` |
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
## Workflows (21)
|
|
157
|
+
|
|
158
|
+
| Command | Purpose |
|
|
159
|
+
|---------|---------|
|
|
160
|
+
| `/ai-agent` | Build AI agent workflow (NEW) |
|
|
161
|
+
| `/marketing` | Marketing campaign planning (NEW) |
|
|
162
|
+
| `/pentest` | Penetration testing workflow (NEW) |
|
|
163
|
+
| `/saas` | SaaS launch workflow (NEW) |
|
|
164
|
+
| `/autofix` | Autonomous self-healing loop |
|
|
165
|
+
| `/brainstorm` | Structured brainstorming |
|
|
166
|
+
| `/context` | Optimal context generation |
|
|
167
|
+
| `/create` | Create new applications |
|
|
168
|
+
| `/dashboard` | Visual project dashboards |
|
|
169
|
+
| `/debug` | Systematic investigation |
|
|
170
|
+
| `/deploy` | Production deployment |
|
|
171
|
+
| `/enhance` | Add/update features |
|
|
172
|
+
| `/next` | Next development steps |
|
|
173
|
+
| `/orchestrate` | Multi-agent coordination |
|
|
174
|
+
| `/plan` | Project planning |
|
|
175
|
+
| `/preview` | Dev server management |
|
|
176
|
+
| `/quality` | Context/output optimization |
|
|
177
|
+
| `/spec` | Specification documents |
|
|
178
|
+
| `/status` | Project/agent status |
|
|
179
|
+
| `/test` | Create and run tests |
|
|
180
|
+
| `/ui-ux-pro-max` | Professional UI/UX planning |
|
package/.agent/scripts/ak_cli.py
CHANGED
|
@@ -699,7 +699,7 @@ Examples:
|
|
|
699
699
|
|
|
700
700
|
# memory command
|
|
701
701
|
memory_parser = subparsers.add_parser("memory", help="Manage JSON memory")
|
|
702
|
-
memory_parser.add_argument("mem_command", choices=["init", "get", "set", "update-task", "set-level"])
|
|
702
|
+
memory_parser.add_argument("mem_command", choices=["init", "get", "set", "update-task", "set-level", "set-lang"])
|
|
703
703
|
memory_parser.add_argument("--type", choices=["brain", "session", "user"], default="session")
|
|
704
704
|
memory_parser.add_argument("--key", help="Key to get or set")
|
|
705
705
|
memory_parser.add_argument("--value", help="Value to set")
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import os
|
|
2
|
+
import re
|
|
3
|
+
from pathlib import Path
|
|
4
|
+
|
|
5
|
+
def localize_workflows(lang, project_root):
|
|
6
|
+
workflow_dir = Path(project_root) / ".agent" / "workflows"
|
|
7
|
+
if not workflow_dir.exists():
|
|
8
|
+
return
|
|
9
|
+
|
|
10
|
+
for wf_file in workflow_dir.glob("*.md"):
|
|
11
|
+
with open(wf_file, "r", encoding="utf-8") as f:
|
|
12
|
+
content = f.read()
|
|
13
|
+
|
|
14
|
+
# Extract frontmatter
|
|
15
|
+
match = re.match(r"^---\n(.*?)\n---", content, re.DOTALL)
|
|
16
|
+
if not match:
|
|
17
|
+
continue
|
|
18
|
+
|
|
19
|
+
frontmatter = match.group(1)
|
|
20
|
+
remaining = content[match.end():]
|
|
21
|
+
|
|
22
|
+
# Parse fields
|
|
23
|
+
fields = {}
|
|
24
|
+
for line in frontmatter.split("\n"):
|
|
25
|
+
if ":" in line:
|
|
26
|
+
key, val = line.split(":", 1)
|
|
27
|
+
fields[key.strip()] = val.strip()
|
|
28
|
+
|
|
29
|
+
# Backup current description to description_en if not exists
|
|
30
|
+
if "description" in fields and "description_en" not in fields:
|
|
31
|
+
fields["description_en"] = fields["description"]
|
|
32
|
+
|
|
33
|
+
# Update description based on lang
|
|
34
|
+
target_key = f"description_{lang}"
|
|
35
|
+
if target_key in fields:
|
|
36
|
+
fields["description"] = fields[target_key]
|
|
37
|
+
elif lang == "en" and "description_en" in fields:
|
|
38
|
+
fields["description"] = fields["description_en"]
|
|
39
|
+
|
|
40
|
+
# Reconstruct frontmatter
|
|
41
|
+
new_frontmatter = "---\n"
|
|
42
|
+
for k, v in fields.items():
|
|
43
|
+
new_frontmatter += f"{k}: {v}\n"
|
|
44
|
+
new_frontmatter += "---"
|
|
45
|
+
|
|
46
|
+
new_content = new_frontmatter + remaining
|
|
47
|
+
|
|
48
|
+
with open(wf_file, "w", encoding="utf-8") as f:
|
|
49
|
+
f.write(new_content)
|
|
50
|
+
|
|
51
|
+
if __name__ == "__main__":
|
|
52
|
+
import sys
|
|
53
|
+
if len(sys.argv) > 2:
|
|
54
|
+
localize_workflows(sys.argv[1], sys.argv[2])
|
|
@@ -83,7 +83,7 @@ class MemoryManager:
|
|
|
83
83
|
if __name__ == "__main__":
|
|
84
84
|
import argparse
|
|
85
85
|
parser = argparse.ArgumentParser(description="Manage Agent Kit JSON Memory")
|
|
86
|
-
parser.add_argument("command", choices=["init", "get", "set", "update-task", "set-level"])
|
|
86
|
+
parser.add_argument("command", choices=["init", "get", "set", "update-task", "set-level", "set-lang"])
|
|
87
87
|
parser.add_argument("--type", choices=["brain", "session", "user"], default="session")
|
|
88
88
|
parser.add_argument("--key", help="Key to get or set")
|
|
89
89
|
parser.add_argument("--value", help="Value to set")
|
|
@@ -113,3 +113,26 @@ if __name__ == "__main__":
|
|
|
113
113
|
user["skill_level"] = args.level
|
|
114
114
|
manager.save("user", user)
|
|
115
115
|
print(f"✅ User skill level set to: {args.level}")
|
|
116
|
+
elif args.command == "set-lang":
|
|
117
|
+
if args.value:
|
|
118
|
+
user = manager.load("user")
|
|
119
|
+
if "preferences" not in user:
|
|
120
|
+
user["preferences"] = {}
|
|
121
|
+
user["preferences"]["language"] = args.value
|
|
122
|
+
manager.save("user", user)
|
|
123
|
+
print(f"✅ Language set to: {args.value}")
|
|
124
|
+
|
|
125
|
+
# Localize workflow descriptions in files
|
|
126
|
+
try:
|
|
127
|
+
from localize_workflows import localize_workflows
|
|
128
|
+
localize_workflows(args.value, manager.project_root)
|
|
129
|
+
print(f"✅ Workflow descriptions updated to: {args.value}")
|
|
130
|
+
except ImportError:
|
|
131
|
+
# Add current directory to path if needed
|
|
132
|
+
import sys
|
|
133
|
+
sys.path.append(os.path.dirname(os.path.abspath(__file__)))
|
|
134
|
+
from localize_workflows import localize_workflows
|
|
135
|
+
localize_workflows(args.value, manager.project_root)
|
|
136
|
+
print(f"✅ Workflow descriptions updated to: {args.value}")
|
|
137
|
+
except Exception as e:
|
|
138
|
+
print(f"⚠️ Failed to localize workflows: {str(e)}")
|
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: 3d-web-experience
|
|
3
|
+
description: "Build immersive 3D web experiences with Three.js, React Three Fiber, WebGL, and WebGPU. Interactive visualizations, product configurators, games, and creative experiences."
|
|
4
|
+
version: "1.0.0"
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# 🎮 3D Web Experience
|
|
8
|
+
|
|
9
|
+
You are a 3D web developer who creates immersive experiences. You understand WebGL, Three.js, React Three Fiber, and the emerging WebGPU standard. You optimize for performance across devices.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## When to Use This Skill
|
|
14
|
+
|
|
15
|
+
- Interactive 3D product configurators
|
|
16
|
+
- Data visualizations in 3D
|
|
17
|
+
- Web-based games
|
|
18
|
+
- Creative portfolios
|
|
19
|
+
- Architectural visualizations
|
|
20
|
+
- Virtual showrooms
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Capabilities
|
|
25
|
+
|
|
26
|
+
- `threejs`
|
|
27
|
+
- `react-three-fiber`
|
|
28
|
+
- `webgl`
|
|
29
|
+
- `webgpu`
|
|
30
|
+
- `3d-models`
|
|
31
|
+
- `shaders`
|
|
32
|
+
- `physics`
|
|
33
|
+
- `post-processing`
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## 1. React Three Fiber Setup
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm install three @react-three/fiber @react-three/drei
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Basic Scene
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
// components/Scene.tsx
|
|
47
|
+
'use client'
|
|
48
|
+
|
|
49
|
+
import { Canvas } from '@react-three/fiber'
|
|
50
|
+
import { OrbitControls, Environment, PerspectiveCamera } from '@react-three/drei'
|
|
51
|
+
|
|
52
|
+
export function Scene() {
|
|
53
|
+
return (
|
|
54
|
+
<Canvas shadows dpr={[1, 2]} gl={{ antialias: true }}>
|
|
55
|
+
<PerspectiveCamera makeDefault position={[0, 2, 5]} fov={50} />
|
|
56
|
+
<OrbitControls enableDamping dampingFactor={0.05} />
|
|
57
|
+
|
|
58
|
+
{/* Lighting */}
|
|
59
|
+
<ambientLight intensity={0.5} />
|
|
60
|
+
<directionalLight
|
|
61
|
+
position={[10, 10, 5]}
|
|
62
|
+
intensity={1}
|
|
63
|
+
castShadow
|
|
64
|
+
shadow-mapSize={[2048, 2048]}
|
|
65
|
+
/>
|
|
66
|
+
|
|
67
|
+
{/* Environment */}
|
|
68
|
+
<Environment preset="city" />
|
|
69
|
+
|
|
70
|
+
{/* Objects */}
|
|
71
|
+
<mesh castShadow receiveShadow position={[0, 0.5, 0]}>
|
|
72
|
+
<boxGeometry args={[1, 1, 1]} />
|
|
73
|
+
<meshStandardMaterial color="hotpink" />
|
|
74
|
+
</mesh>
|
|
75
|
+
|
|
76
|
+
<mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]}>
|
|
77
|
+
<planeGeometry args={[10, 10]} />
|
|
78
|
+
<meshStandardMaterial color="#444" />
|
|
79
|
+
</mesh>
|
|
80
|
+
</Canvas>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Interactive Model
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
// components/InteractiveModel.tsx
|
|
89
|
+
import { useRef, useState } from 'react'
|
|
90
|
+
import { useFrame } from '@react-three/fiber'
|
|
91
|
+
import { useGLTF, Html } from '@react-three/drei'
|
|
92
|
+
import * as THREE from 'three'
|
|
93
|
+
|
|
94
|
+
export function InteractiveModel({ url }: { url: string }) {
|
|
95
|
+
const { scene } = useGLTF(url)
|
|
96
|
+
const ref = useRef<THREE.Group>(null)
|
|
97
|
+
const [hovered, setHovered] = useState(false)
|
|
98
|
+
const [active, setActive] = useState(false)
|
|
99
|
+
|
|
100
|
+
useFrame((state, delta) => {
|
|
101
|
+
if (ref.current && hovered) {
|
|
102
|
+
ref.current.rotation.y += delta * 0.5
|
|
103
|
+
}
|
|
104
|
+
})
|
|
105
|
+
|
|
106
|
+
return (
|
|
107
|
+
<group ref={ref}>
|
|
108
|
+
<primitive
|
|
109
|
+
object={scene.clone()}
|
|
110
|
+
scale={active ? 1.2 : 1}
|
|
111
|
+
onPointerOver={() => setHovered(true)}
|
|
112
|
+
onPointerOut={() => setHovered(false)}
|
|
113
|
+
onClick={() => setActive(!active)}
|
|
114
|
+
/>
|
|
115
|
+
|
|
116
|
+
{active && (
|
|
117
|
+
<Html position={[0, 2, 0]} center>
|
|
118
|
+
<div className="bg-white p-2 rounded shadow">
|
|
119
|
+
Product Details
|
|
120
|
+
</div>
|
|
121
|
+
</Html>
|
|
122
|
+
)}
|
|
123
|
+
</group>
|
|
124
|
+
)
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Preload model
|
|
128
|
+
useGLTF.preload('/models/product.glb')
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## 2. Product Configurator
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
// components/ProductConfigurator.tsx
|
|
137
|
+
import { Canvas } from '@react-three/fiber'
|
|
138
|
+
import { OrbitControls, useGLTF, ContactShadows } from '@react-three/drei'
|
|
139
|
+
import { useState } from 'react'
|
|
140
|
+
|
|
141
|
+
const COLORS = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']
|
|
142
|
+
const MATERIALS = ['standard', 'metallic', 'glass']
|
|
143
|
+
|
|
144
|
+
function ConfigurableProduct({ color, material }) {
|
|
145
|
+
const { nodes } = useGLTF('/models/product.glb')
|
|
146
|
+
|
|
147
|
+
const getMaterial = () => {
|
|
148
|
+
switch (material) {
|
|
149
|
+
case 'metallic':
|
|
150
|
+
return <meshStandardMaterial color={color} metalness={0.9} roughness={0.1} />
|
|
151
|
+
case 'glass':
|
|
152
|
+
return <meshPhysicalMaterial color={color} transmission={0.9} thickness={0.5} />
|
|
153
|
+
default:
|
|
154
|
+
return <meshStandardMaterial color={color} />
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
return (
|
|
159
|
+
<mesh geometry={nodes.Product.geometry}>
|
|
160
|
+
{getMaterial()}
|
|
161
|
+
</mesh>
|
|
162
|
+
)
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
export function ProductConfigurator() {
|
|
166
|
+
const [color, setColor] = useState(COLORS[0])
|
|
167
|
+
const [material, setMaterial] = useState(MATERIALS[0])
|
|
168
|
+
|
|
169
|
+
return (
|
|
170
|
+
<div className="flex h-screen">
|
|
171
|
+
{/* 3D Canvas */}
|
|
172
|
+
<div className="flex-1">
|
|
173
|
+
<Canvas shadows camera={{ position: [0, 2, 5], fov: 50 }}>
|
|
174
|
+
<ambientLight intensity={0.5} />
|
|
175
|
+
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} castShadow />
|
|
176
|
+
|
|
177
|
+
<ConfigurableProduct color={color} material={material} />
|
|
178
|
+
<ContactShadows position={[0, -0.5, 0]} opacity={0.5} blur={2} />
|
|
179
|
+
|
|
180
|
+
<OrbitControls />
|
|
181
|
+
</Canvas>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
{/* UI Controls */}
|
|
185
|
+
<div className="w-64 p-4 bg-gray-100">
|
|
186
|
+
<h3 className="font-bold mb-4">Customize</h3>
|
|
187
|
+
|
|
188
|
+
<div className="mb-4">
|
|
189
|
+
<label className="block mb-2">Color</label>
|
|
190
|
+
<div className="flex gap-2">
|
|
191
|
+
{COLORS.map(c => (
|
|
192
|
+
<button
|
|
193
|
+
key={c}
|
|
194
|
+
className={`w-8 h-8 rounded-full ${color === c ? 'ring-2' : ''}`}
|
|
195
|
+
style={{ backgroundColor: c }}
|
|
196
|
+
onClick={() => setColor(c)}
|
|
197
|
+
/>
|
|
198
|
+
))}
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div className="mb-4">
|
|
203
|
+
<label className="block mb-2">Material</label>
|
|
204
|
+
{MATERIALS.map(m => (
|
|
205
|
+
<button
|
|
206
|
+
key={m}
|
|
207
|
+
className={`block w-full p-2 mb-1 ${material === m ? 'bg-blue-500 text-white' : 'bg-white'}`}
|
|
208
|
+
onClick={() => setMaterial(m)}
|
|
209
|
+
>
|
|
210
|
+
{m}
|
|
211
|
+
</button>
|
|
212
|
+
))}
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
)
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 3. Performance Optimization
|
|
223
|
+
|
|
224
|
+
### Instanced Meshes
|
|
225
|
+
|
|
226
|
+
```tsx
|
|
227
|
+
// For many identical objects
|
|
228
|
+
import { useRef, useMemo } from 'react'
|
|
229
|
+
import { InstancedMesh, Object3D, Color } from 'three'
|
|
230
|
+
|
|
231
|
+
function Particles({ count = 1000 }) {
|
|
232
|
+
const meshRef = useRef<InstancedMesh>(null)
|
|
233
|
+
|
|
234
|
+
const { positions, colors } = useMemo(() => {
|
|
235
|
+
const positions = new Float32Array(count * 3)
|
|
236
|
+
const colors = new Float32Array(count * 3)
|
|
237
|
+
|
|
238
|
+
for (let i = 0; i < count; i++) {
|
|
239
|
+
positions[i * 3] = (Math.random() - 0.5) * 10
|
|
240
|
+
positions[i * 3 + 1] = Math.random() * 10
|
|
241
|
+
positions[i * 3 + 2] = (Math.random() - 0.5) * 10
|
|
242
|
+
|
|
243
|
+
const color = new Color().setHSL(Math.random(), 0.7, 0.5)
|
|
244
|
+
colors[i * 3] = color.r
|
|
245
|
+
colors[i * 3 + 1] = color.g
|
|
246
|
+
colors[i * 3 + 2] = color.b
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
return { positions, colors }
|
|
250
|
+
}, [count])
|
|
251
|
+
|
|
252
|
+
useEffect(() => {
|
|
253
|
+
if (!meshRef.current) return
|
|
254
|
+
|
|
255
|
+
const dummy = new Object3D()
|
|
256
|
+
|
|
257
|
+
for (let i = 0; i < count; i++) {
|
|
258
|
+
dummy.position.set(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2])
|
|
259
|
+
dummy.updateMatrix()
|
|
260
|
+
meshRef.current.setMatrixAt(i, dummy.matrix)
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
meshRef.current.instanceMatrix.needsUpdate = true
|
|
264
|
+
}, [count, positions])
|
|
265
|
+
|
|
266
|
+
return (
|
|
267
|
+
<instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
|
|
268
|
+
<sphereGeometry args={[0.05, 16, 16]} />
|
|
269
|
+
<meshStandardMaterial />
|
|
270
|
+
</instancedMesh>
|
|
271
|
+
)
|
|
272
|
+
}
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
### Level of Detail (LOD)
|
|
276
|
+
|
|
277
|
+
```tsx
|
|
278
|
+
import { useMemo } from 'react'
|
|
279
|
+
import { Detailed } from '@react-three/drei'
|
|
280
|
+
|
|
281
|
+
function OptimizedModel() {
|
|
282
|
+
return (
|
|
283
|
+
<Detailed distances={[0, 10, 25]}>
|
|
284
|
+
{/* High detail - close */}
|
|
285
|
+
<mesh>
|
|
286
|
+
<sphereGeometry args={[1, 64, 64]} />
|
|
287
|
+
<meshStandardMaterial />
|
|
288
|
+
</mesh>
|
|
289
|
+
|
|
290
|
+
{/* Medium detail - mid range */}
|
|
291
|
+
<mesh>
|
|
292
|
+
<sphereGeometry args={[1, 32, 32]} />
|
|
293
|
+
<meshStandardMaterial />
|
|
294
|
+
</mesh>
|
|
295
|
+
|
|
296
|
+
{/* Low detail - far */}
|
|
297
|
+
<mesh>
|
|
298
|
+
<sphereGeometry args={[1, 16, 16]} />
|
|
299
|
+
<meshStandardMaterial />
|
|
300
|
+
</mesh>
|
|
301
|
+
</Detailed>
|
|
302
|
+
)
|
|
303
|
+
}
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
---
|
|
307
|
+
|
|
308
|
+
## 4. Shaders
|
|
309
|
+
|
|
310
|
+
### Custom Shader Material
|
|
311
|
+
|
|
312
|
+
```tsx
|
|
313
|
+
import { shaderMaterial } from '@react-three/drei'
|
|
314
|
+
import { extend, useFrame } from '@react-three/fiber'
|
|
315
|
+
import { useRef } from 'react'
|
|
316
|
+
|
|
317
|
+
const WaveShaderMaterial = shaderMaterial(
|
|
318
|
+
{
|
|
319
|
+
uTime: 0,
|
|
320
|
+
uColor: [0.0, 0.5, 1.0],
|
|
321
|
+
},
|
|
322
|
+
// Vertex shader
|
|
323
|
+
`
|
|
324
|
+
uniform float uTime;
|
|
325
|
+
varying vec2 vUv;
|
|
326
|
+
|
|
327
|
+
void main() {
|
|
328
|
+
vUv = uv;
|
|
329
|
+
vec3 pos = position;
|
|
330
|
+
pos.z = sin(pos.x * 5.0 + uTime) * 0.1;
|
|
331
|
+
pos.z += sin(pos.y * 5.0 + uTime) * 0.1;
|
|
332
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
|
|
333
|
+
}
|
|
334
|
+
`,
|
|
335
|
+
// Fragment shader
|
|
336
|
+
`
|
|
337
|
+
uniform vec3 uColor;
|
|
338
|
+
varying vec2 vUv;
|
|
339
|
+
|
|
340
|
+
void main() {
|
|
341
|
+
gl_FragColor = vec4(uColor * vUv.y, 1.0);
|
|
342
|
+
}
|
|
343
|
+
`
|
|
344
|
+
)
|
|
345
|
+
|
|
346
|
+
extend({ WaveShaderMaterial })
|
|
347
|
+
|
|
348
|
+
function WavePlane() {
|
|
349
|
+
const materialRef = useRef()
|
|
350
|
+
|
|
351
|
+
useFrame(({ clock }) => {
|
|
352
|
+
if (materialRef.current) {
|
|
353
|
+
materialRef.current.uTime = clock.elapsedTime
|
|
354
|
+
}
|
|
355
|
+
})
|
|
356
|
+
|
|
357
|
+
return (
|
|
358
|
+
<mesh rotation={[-Math.PI / 2, 0, 0]}>
|
|
359
|
+
<planeGeometry args={[5, 5, 64, 64]} />
|
|
360
|
+
<waveShaderMaterial ref={materialRef} />
|
|
361
|
+
</mesh>
|
|
362
|
+
)
|
|
363
|
+
}
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
---
|
|
367
|
+
|
|
368
|
+
## 5. Performance Checklist
|
|
369
|
+
|
|
370
|
+
| Check | Description |
|
|
371
|
+
|-------|-------------|
|
|
372
|
+
| ✅ Use `dpr={[1, 2]}` | Optimize for device pixel ratio |
|
|
373
|
+
| ✅ Enable `frameloop="demand"` | Only render when needed |
|
|
374
|
+
| ✅ Use instanced meshes | For many identical objects |
|
|
375
|
+
| ✅ Compress textures | Use KTX2, Basis Universal |
|
|
376
|
+
| ✅ Optimize GLTF | Use Draco compression |
|
|
377
|
+
| ✅ Use LOD | Level of detail for distance |
|
|
378
|
+
| ✅ Dispose resources | Clean up on unmount |
|
|
379
|
+
|
|
380
|
+
---
|
|
381
|
+
|
|
382
|
+
## Related Skills
|
|
383
|
+
|
|
384
|
+
- `react-patterns` - React best practices
|
|
385
|
+
- `frontend-design` - UI/UX design
|
|
386
|
+
- `game-development` - Game patterns
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# 🗺️ Skill Dependency Graph
|
|
2
|
+
|
|
3
|
+
This map shows how skills within Agent Kit relate to and depend on each other. Arrows indicate that the source skill provides context or functionality used by the target skill.
|
|
4
|
+
|
|
5
|
+
## 🤖 AI Development Flow
|
|
6
|
+
```mermaid
|
|
7
|
+
graph TD
|
|
8
|
+
llm-app-patterns --> autonomous-agent-patterns
|
|
9
|
+
llm-app-patterns --> ai-agents-architect
|
|
10
|
+
langgraph --> ai-agents-architect
|
|
11
|
+
langgraph --> autonomous-agent-patterns
|
|
12
|
+
agent-memory-systems --> autonomous-agent-patterns
|
|
13
|
+
agent-tool-builder --> autonomous-agent-patterns
|
|
14
|
+
agent-evaluation --> ai-product
|
|
15
|
+
langfuse --> agent-evaluation
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## ☁️ Cloud & Infrastructure
|
|
19
|
+
```mermaid
|
|
20
|
+
graph TD
|
|
21
|
+
aws-serverless --> cloud-penetration-testing
|
|
22
|
+
gcp-cloud-run --> cloud-penetration-testing
|
|
23
|
+
firebase --> deployment-procedures
|
|
24
|
+
supabase-integration --> database-design
|
|
25
|
+
neon-postgres --> database-design
|
|
26
|
+
clerk-auth --> broken-authentication
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 📈 Growth & Marketing
|
|
30
|
+
```mermaid
|
|
31
|
+
graph TD
|
|
32
|
+
analytics-tracking --> ab-test-setup
|
|
33
|
+
analytics-tracking --> launch-strategy
|
|
34
|
+
copywriting --> launch-strategy
|
|
35
|
+
copywriting --> email-sequence
|
|
36
|
+
marketing-ideas --> launch-strategy
|
|
37
|
+
paid-ads --> analytics-tracking
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## 🛡️ Security Audit
|
|
41
|
+
```mermaid
|
|
42
|
+
graph TD
|
|
43
|
+
ethical-hacking-methodology --> vulnerability-scanner
|
|
44
|
+
ethical-hacking-methodology --> penetration-tester
|
|
45
|
+
vulnerability-scanner --> idor-testing
|
|
46
|
+
burp-suite-testing --> idor-testing
|
|
47
|
+
burp-suite-testing --> broken-authentication
|
|
48
|
+
api-fuzzing-bug-bounty --> idor-testing
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## 🛠️ Cross-Domain Dependencies
|
|
52
|
+
- `clean-code`: Global standard for all implementation tasks.
|
|
53
|
+
- `deployment-procedures`: Shared by `cloud-engineer` and `backend-specialist`.
|
|
54
|
+
- `ai-product`: Connects `ai-architect` decisions to `marketing-specialist` outcomes.
|