Expert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2.2 Level AA/AAA compliance / Panduan ahli pengujian aksesibilitas web.
日本語の概要は準備中です。原文の説明を表示しています。
Expert guide for designing and orchestrating multi-agent systems, agent swarms, 2026 Anthropic agentic design patterns, graph-based workflows (LangGraph, OpenAI Agents SDK, Google ADK, Mastra.ai), shared state memory, and human-in-the-loop guardrails in English and Indonesian.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
<a name="english"></a>
Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, ai-llm-integration-expert, mcp-server-architect, and session-memory-manager to ensure cohesive execution.
Expert guide for designing, building, and deploying production-grade multi-agent AI systems. Covers core agentic design patterns (Prompt Chaining, Routing, Parallelization, Orchestrator-Workers, Evaluator-Optimizer), stateful graph engines (LangGraph, OpenAI Agents SDK, Google ADK, Mastra.ai), shared episodic/semantic memory, tool execution sandboxes, and human-in-the-loop (HITL) guardrails.
Swarm Synergy: This skill acts as a master orchestrator when combined with mcp-server-architect (for external tool integration) and ai-llm-integration-expert (for foundation model setup). Together, they form a complete, end-to-end AI Engineering Swarm.
Production systems should favor explicit Workflows over unbounded autonomous loops where predictability and reliability are required:
1. PROMPT CHAINING
[Input] ---> [LLM Step 1] ---> [Gate/Validator] ---> [LLM Step 2] ---> [Output]
2. ROUTING
[Input] ---> [Classifier/Router] ──┬──> [Specialist Agent A]
├──> [Specialist Agent B]
└──> [Specialist Agent C]
3. PARALLELIZATION (Sectioning & Voting)
[Input] ──┬──> [Task 1 (Subagent)] ──┐
├──> [Task 2 (Subagent)] ──┼──> [Aggregator / Synthesizer]
└──> [Task 3 (Subagent)] ──┘
4. ORCHESTRATOR-WORKERS (Dynamic Decomposition)
[Input] ---> [Orchestrator] ──┬──> [Worker 1 (Focused Context)] ──┐
├──> [Worker 2 (Focused Context)] ──┼──> [Orchestrator Synthesis]
└──> [Worker 3 (Focused Context)] ──┘
5. EVALUATOR-OPTIMIZER LOOP (Zero-Tolerance Quality Gate)
[Input] ---> [Generator Agent] <─────┐ (Feedback Loop)
│ │
▼ │
[Evaluator / Auditor] ────┘ (Reject / Needs Revision)
│
▼ (Approved)
[Output]
vibes-plug's internal Swarm Director patterns (from AGENTS.md) map directly to these external frameworks:
| Framework | Language | Best For | Key Differentiator |
|---|---|---|---|
| LangGraph (v0.3+) | Python / TypeScript | Complex stateful workflows & graphs | Graph-based, persistent checkpointers, time-travel debugging |
| OpenAI Agents SDK | Python | GPT-4.5 / o4-series native agents | Built-in agent handoffs, tracing, and tripwire guardrails |
| Google ADK | Python | Gemini-powered swarms | Native Vertex AI, multi-agent streaming, search grounding |
| Mastra.ai | TypeScript | TS-first web apps & microservices | Built-in memory, evals, RAG, and native MCP support |
| CrewAI | Python | Role-playing business teams | Fast initial prototyping for business analyst teams |
LangGraph models agent workflows as directed acyclic or cyclic graphs with persistent state:
from langgraph.graph import StateGraph, END
from langgraph.checkpoint.memory import MemorySaver
from typing import TypedDict, Annotated
import operator
class AgentState(TypedDict):
messages: Annotated[list, operator.add]
task: str
code_artifact: str
audit_feedback: str
approved: bool
def generator_node(state: AgentState):
# Generates or refactors code based on previous feedback
code = coder_agent.invoke(state["task"], feedback=state.get("audit_feedback"))
return {"code_artifact": code}
def evaluator_node(state: AgentState):
# Runs automated linter/tests & security review
audit = auditor_agent.invoke(state["code_artifact"])
return {
"audit_feedback": audit.critique,
"approved": audit.is_passing
}
def route_next(state: AgentState) -> str:
return END if state["approved"] else "generator"
builder = StateGraph(AgentState)
builder.add_node("generator", generator_node)
builder.add_node("evaluator", evaluator_node)
builder.set_entry_point("generator")
builder.add_edge("generator", "evaluator")
builder.add_conditional_edges("evaluator", route_next, {"generator": "generator", END: END})
# Persist state with checkpointer for HITL interruption before destructive actions
checkpointer = MemorySaver()
graph = builder.compile(checkpointer=checkpointer, interrupt_before=["generator"])
TypeScript LangGraph Implementation:
import { StateGraph, MemorySaver, END } from "@langchain/langgraph";
const graphState = {
messages: { value: (x, y) => x.concat(y), default: () => [] },
approved: { value: (x, y) => y, default: () => false }
};
const builder = new StateGraph({ channels: graphState })
.addNode("generator", async (state) => ({ messages: [await coder.invoke(state)] }))
.addNode("evaluator", async (state) => {
const res = await auditor.invoke(state);
return { messages: [res.critique], approved: res.isPassing };
})
.addEdge("__start__", "generator")
.addEdge("generator", "evaluator")
.addConditionalEdges("evaluator", (state) => state.approved ? END : "generator");
const checkpointer = new MemorySaver();
const graph = builder.compile({ checkpointer, interruptBefore: ["generator"] });
Implement native agent handoffs where specialized agents transition control cleanly:
from agents import Agent, Runner, handoff, input_guardrail, GuardrailFunctionOutput
researcher = Agent(
name="Researcher",
instructions="Research libraries, security advisories, and system specs.",
tools=[web_search, doc_retrieval],
)
architect = Agent(
name="Architect",
instructions="Synthesize technical architecture and delegate research when needed.",
handoffs=[handoff(researcher, tool_name_override="delegate_research")],
)
@input_guardrail
async def safety_guardrail(ctx, agent, input_data) -> GuardrailFunctionOutput:
if contains_destructive_commands(input_data):
return GuardrailFunctionOutput(output_info="Blocked destructive payload", tripwire_triggered=True)
return GuardrailFunctionOutput(output_info="Safe", tripwire_triggered=False)
result = await Runner.run(architect, "Design high-throughput ingestion pipeline", guardrails=[safety_guardrail])
Orchestrate Gemini 3.x agents with streaming subagent calls and Vertex AI tooling:
from google.adk.agents import Agent
from google.adk.tools import google_search, code_execution
director = Agent(
model="gemini-3.1-pro",
name="director",
instruction="Coordinate domain specialists and synthesize final deliverables.",
sub_agents=[frontend_agent, backend_agent, security_agent],
tools=[google_search, code_execution],
)
For modern Next.js / Node.js / Bun environments:
import { Agent, MastraMemory } from '@mastra/core';
import { createTool } from '@mastra/core/tools';
import { z } from 'zod';
const researcher = new Agent({
name: 'researcher',
instructions: 'Find and summarize accurate technical documentation.',
model: { provider: 'ANTHROPIC', name: 'claude-3-7-sonnet-20250219' },
memory: new MastraMemory({ storage: supabaseStorage }),
});
Mandatory safeguards before executing irreversible operations:
fullstack-expert or requests human guidance.PROGRESS.md or BLUEPRINT.md so sessions can resume without losing context.Multi-agent autonomous story world simulation architecture where agents act as characters.
import { StateGraph, END } from "@langchain/langgraph";
import { BaseMessage, SystemMessage } from "@langchain/core/messages";
interface WorldState {
messages: BaseMessage[];
events: string[];
}
const romeoAgent = async (state: WorldState) => {
// Encoded with High Openness, High Neuroticism, emotional vectors
const response = await llm.invoke([
new SystemMessage("You are Romeo. You are feeling [Joy: 0.8, Sadness: 0.2]. Respond to the world state."),
...state.messages
]);
return { messages: [response] };
};
const directorAgent = async (state: WorldState) => {
// Ensures narrative arc consistency
const evaluation = await evaluatorLLM.invoke(state.messages);
return { events: [evaluation.content] };
};
import { CUARunner, CUAWorker } from "cua-orchestration-sdk";
const orchestrator = new CUARunner();
const worker1 = new CUAWorker({ id: "tab-1", objective: "Scrape pricing page" });
const worker2 = new CUAWorker({ id: "tab-2", objective: "Monitor system health" });
orchestrator.registerWorkers([worker1, worker2]);
orchestrator.on("worker_stuck", async (worker, screenshot) => {
await orchestrator.recoverWorker(worker, screenshot);
});
await orchestrator.executeParallel();
import { MultimodalLiveClient } from "gemini-live-sdk";
import { TriageSwarm } from "./swarm";
const client = new MultimodalLiveClient({ apiKey: process.env.GEMINI_API_KEY });
const swarm = new TriageSwarm();
client.on("video_frame", async (frame) => {
const classification = await swarm.intake(frame);
if (classification.isCritical) {
swarm.wakeupSpecialists(classification.type);
await swarm.route(frame, classification.type);
}
});
client.connect();
For next-gen models like Gemini 4 Pro:
<a name="bahasa-indonesia"></a>
Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, ai-llm-integration-expert, mcp-server-architect, dan session-memory-manager untuk memastikan eksekusi yang kohesif.
Panduan ahli untuk merancang, membangun, dan men-deploy sistem multi-agen AI tingkat produksi. Mencakup pola desain agentik inti (Prompt Chaining, Routing, Parallelization, Orchestrator-Workers, Evaluator-Optimizer), engine graph stateful (LangGraph, OpenAI Agents SDK, Google ADK, Mastra.ai), memori bersama episodik/semantik, sandbox eksekusi tool, dan guardrail human-in-the-loop (HITL).
Sinergi Swarm: Skill ini bertindak sebagai orkestrator utama jika dipadukan dengan mcp-server-architect (untuk integrasi tool eksternal) dan ai-llm-integration-expert (untuk konfigurasi foundation model). Bersama-sama, ketiganya membentuk AI Engineering Swarm yang tangguh dari awal hingga rilis produksi.
Untuk sistem produksi yang handal, utamakan arsitektur Workflows terstruktur daripada loop otonom tanpa batas:
| Framework | Bahasa | Terbaik Untuk | Keunggulan Utama |
|---|---|---|---|
| LangGraph (v0.3+) | Python / TypeScript | Alur kerja graf stateful kompleks | Berbasis graf, checkpointer persisten, time-travel debugging |
| OpenAI Agents SDK | Python | Agen native GPT-4.5 / o4-series | Handoff antar agen bawaan, tracing, dan guardrail otomatis |
| Google ADK | Python | Swarm agen bertenaga Gemini | Integrasi Vertex AI native, streaming multi-agen, search grounding |
| Mastra.ai | TypeScript | Web apps & microservice TS-first | Memori bawaan, evaluasi otomatis, RAG, dan dukungan MCP native |
| CrewAI | Python | Tim simulasi peran | Cepat untuk membuat prototipe kolaborasi tim bisnis |
Memodelkan alur agen sebagai graf terarah dengan state bersama dan penyimpanan checkpoint:
interrupt_before sebelum node yang menjalankan perintah destruktif untuk meminta persetujuan manusia (Human-in-the-loop).Terapkan transisi kendali yang mulus antar agen dengan fungsi handoff bawaan serta pasang filter guardrail pada input dan output untuk mencegah eksekusi instruksi berbahaya.
Bangun hierarki agen dengan model Gemini 3.x, di mana root agent mengoordinasikan sub-agents untuk riset, eksekusi kode, dan pembuatan dokumen.
Gunakan Mastra untuk ekosistem Next.js dan Node.js: sediakan memori persisten ke Supabase/PostgreSQL, integrasikan tool MCP secara langsung, dan manfaatkan framework evaluasi bawaan.
Pengamanan wajib sebelum melakukan tindakan yang tidak dapat dibatalkan:
fullstack-expert atau meminta masukan pengguna.PROGRESS.md atau BLUEPRINT.md agar alur kerja dapat dilanjutkan secara efisien tanpa token berlebih.Arsitektur simulasi dunia cerita otonom multi-agen di mana agen bertindak sebagai karakter.
Untuk model generasi berikutnya seperti Gemini 4 Pro:
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Expert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2.2 Level AA/AAA compliance / Panduan ahli pengujian aksesibilitas web.
日本語の概要は準備中です。原文の説明を表示しています。
Expert guide for intelligent model cascading and routing — complexity-scored task routing from Flash/Haiku to Sonnet/Opus/Astra, dynamic escalation with quality gates, 40-60% token cost reduction while maintaining output quality / Panduan ahli untuk kaskade dan routing model cerdas — routing tugas berbasis skor kompleksitas dari Flash/Haiku ke Sonnet/Opus/Astra, eskalasi dinamis dengan gerbang kualitas, pengurangan biaya token 40-60% dengan kualitas output terjaga.
日本語の概要は準備中です。原文の説明を表示しています。
Expert guide for Affective Computing, emotional AI, and real-time sentiment analysis through native multimodal tokens (voice intonation and facial micro-expressions) / Panduan ahli komputasi afektif, AI emosional, dan analisis sentimen real-time melalui token multimodal native.
日本語の概要は準備中です。原文の説明を表示しています。
Expert guide for AI-assisted coding workflows — agentic code generation, multi-agent code swarms, self-healing CI/CD, automated PR review, spec-to-code pipelines, codebase knowledge graphs, and human-in-the-loop approval gates / Panduan ahli untuk workflow pengkodean berbasis AI — generasi kode agentic, code swarm multi-agen, CI/CD self-healing, review PR otomatis, pipeline spec-to-code, knowledge graph codebase, dan gate persetujuan human-in-the-loop.
日本語の概要は準備中です。原文の説明を表示しています。
Expert guide for long-term episodic memory integration (Mem0 v2, Letta/MemGPT, Zep v2), memory tier architecture, pgvector HNSW storage, and unified context management for autonomous AI agents / Panduan ahli untuk integrasi memori episodik jangka panjang (Mem0 v2, Letta/MemGPT, Zep v2), arsitektur tier memori, penyimpanan pgvector HNSW, dan manajemen konteks terpadu untuk agen AI otonom.
日本語の概要は準備中です。原文の説明を表示しています。
Expert guide for designing Machine-to-Machine (M2M) micro-economies, autonomous agent wallets, and swarm budget allocation / Panduan ahli merancang ekonomi mikro antar-agen (M2M), dompet agen otonom, dan alokasi anggaran swarm.
日本語の概要は準備中です。原文の説明を表示しています。