AgentKit 2.0: 16個の専門エージェント実践ガイド【プレミアム】

// 1. AgentKit設定ファイル (agentkit.config.json)
{
  "agents": {
    "ui-specialist": {
      "type": "UI Component Specialist",
      "specialization": "React",
      "skills": [
        "component-design-from-figma",
        "accessibility-audit",
        "responsive-validation",
        "storybook-documentation"
      ],
      "constraints": {
        "target_framework": "React 18+",
        "styling": "Tailwind CSS v4",
        "accessibility": "WCAG 2.1 AA",
        "performance": {
          "bundle_size_limit": "15KB",
          "render_time_limit": "50ms"
        }
      }
    }
  }
}
 
// 2. エージェントへのリクエスト例
const request = {
  command: "generate-component",
  source: "figma://design/button-primary",
  requirements: {
    variants: ["default", "hover", "disabled", "loading"],
    states: ["idle", "active", "error"],
    responsive: ["mobile", "tablet", "desktop"],
    accessibility: {
      aria_labels: true,
      keyboard_navigation: true,
      screen_reader_support: true
    }
  },
  output_format: {
    component_file: true,
    storybook_story: true,
    unit_tests: true,
    accessibility_report: true
  }
};
 
// 3. 期待される出力
// ✓ Button.tsx (React コンポーネント)
// ✓ Button.stories.tsx (Storybook)
// ✓ Button.test.tsx (ユニットテスト)
// ✓ accessibility-report.json (アクセシビリティ監査結果)
// ✓ variants-preview.html (ブラウザプレビュー)

// 1. 現在のスキーマ
const currentSchema = {
  table: "users",
  columns: [
    { name: "id", type: "UUID PRIMARY KEY" },
    { name: "email", type: "VARCHAR(255)" },
    { name: "created_at", type: "TIMESTAMP" },
    { name: "metadata", type: "JSONB" }  // 非正規化データ
  ]
};
 
// 2. Database Architect による最適化リクエスト
const optimizationRequest = {
  command: "optimize-schema",
  goals: [
    "query-performance: < 10ms for common queries",
    "concurrent-users: 10000+",
    "storage-efficiency: minimize JSONBusage",
    "sharding-readiness: prepare for horizontal scaling"
  ],
  constraints: {
    breaking_changes: false,
    migration_downtime: "0s"
  }
};
 
// 3. 期待される出力とその説明
// ✓ Optimized Schema
//   - users (正規化テーブル)
//   - user_profiles (拡張属性)
//   - user_sessions (セッション管理)
// ✓ Index Strategy
//   - idx_users_email (一意制約)
//   - idx_users_created_at (時系列クエリ最適化)
//   - idx_user_profiles_user_id (外部キー)
// ✓ Migration Script (ゼロダウンタイム)
//   - 青緑デプロイメント対応
//   - ロールバック戦略
// ✓ Query Performance Report
//   - Before: SELECT * FROM users WHERE email = ? → 150ms
//   - After: SELECT * FROM users WHERE email = ? → 5ms (30倍高速化)

// agentkit-custom.config.json
{
  "custom_agents": {
    "backend-specialist-for-payment": {
      "extends": "Database Architect",
      "specializations": {
        "domain": "payment-processing",
        "compliance": ["PCI-DSS", "SOC2"],
        "performance_requirements": {
          "transaction_latency": "< 100ms",
          "failure_recovery": "< 5s"
        }
      },
      "skills": [
        "payment-gateway-integration",
        "idempotency-design",
        "fraud-detection-patterns",
        "audit-logging"
      ],
      "guardrails": {
        "must_include": [
          "encryption-at-rest",
          "tls-encryption-in-transit",
          "secrets-management",
          "audit-trail"
        ],
        "forbidden_patterns": [
          "plain-text-passwords",
          "hardcoded-credentials",
          "sql-injection-vulnerable-queries"
        ]
      }
    }
  }
}
 
// 使用例
const customAgent = agents["backend-specialist-for-payment"];
const result = await customAgent.execute({
  task: "Design user payment flow with retry mechanism",
  context: {
    payment_provider: "Stripe",
    currency: "JPY",
    transaction_volume: "100k/day"
  }
});

// agentkit-orchestration.js
class AgentKitOrchestrator {
  constructor(config) {
    this.agents = this.initializeAgents(config);
    this.dependencyGraph = this.buildDAG();
  }
 
  async executeProjectWorkflow(spec) {
    // Phase 1: 並列 (API Design + UI/UX Design)
    const [apiSpec, uiSpec] = await Promise.all([
      this.agents['api-design-engineer'].execute(spec),
      this.agents['responsive-design-master'].execute(spec)
    ]);
 
    // Phase 2: 並列 (Backend + Frontend)
    const [backendCode, frontendCode] = await Promise.all([
      this.agents['database-architect'].execute(apiSpec),
      this.agents['ui-component-specialist'].execute(uiSpec)
    ]);
 
    // Phase 3: 並列 (全テスト)
    const [unitTests, integrationTests, perfTests, secTests] = await Promise.all([
      this.agents['unit-test-specialist'].execute(backendCode),
      this.agents['integration-test-master'].execute([backendCode, frontendCode]),
      this.agents['performance-tester'].execute(frontendCode),
      this.agents['security-testing-analyst'].execute(backendCode)
    ]);
 
    // Phase 4: DevOps/CI-CD (全テスト合格後)
    const cicdConfig = await this.agents['ci-cd-pipeline-architect'].execute({
      tests: [unitTests, integrationTests],
      performance: perfTests,
      security: secTests
    });
 
    return {
      backend: backendCode,
      frontend: frontendCode,
      tests: [unitTests, integrationTests, perfTests, secTests],
      deployment: cicdConfig,
      documentation: await this.generateDocumentation()
    };
  }
 
  buildDAG() {
    return {
      'phase-1': ['api-design-engineer', 'responsive-design-master'],
      'phase-2': ['database-architect', 'ui-component-specialist'],
      'phase-3': ['unit-test-specialist', 'integration-test-master', 'performance-tester', 'security-testing-analyst'],
      'phase-4': ['ci-cd-pipeline-architect']
    };
  }
}
 
// 実行例
const orchestrator = new AgentKitOrchestrator(agentkit2Config);
const result = await orchestrator.executeProjectWorkflow(projectSpec);
console.log('📦 Full stack deployed:', result.deployment.status);
// 出力: 📦 Full stack deployed: success