// Router skill for DiPeO frontend (React, visual editor, GraphQL integration, TypeScript types). Use when task mentions React components, diagram editor, GraphQL hooks, or type errors. For simple tasks, handle directly; for complex work, escalate to dipeo-frontend-dev agent.
| name | dipeo-frontend-dev |
| description | Router skill for DiPeO frontend (React, visual editor, GraphQL integration, TypeScript types). Use when task mentions React components, diagram editor, GraphQL hooks, or type errors. For simple tasks, handle directly; for complex work, escalate to dipeo-frontend-dev agent. |
| allowed-tools | Read, Grep, Glob, Bash, Skill |
Domain: React components, visual diagram editor (XYFlow), GraphQL integration, TypeScript types in /apps/web/src/.
Agent: Task(dipeo-frontend-dev, "your detailed task description")
Use Skill(doc-lookup) with these anchors when you need detailed context:
Core Responsibilities & Tech Stack:
docs/agents/frontend-development.md#your-core-responsibilities - React, diagram editor, GraphQL, TypeScriptdocs/agents/frontend-development.md#technical-context - Tech stack and project structureCode Quality & Patterns:
docs/agents/frontend-development.md#code-quality-standards - Component patterns, GraphQL, state managementdocs/agents/frontend-development.md#common-patterns - Hooks, factory functions, error boundariesConstraints & Escalation:
docs/agents/frontend-development.md#important-constraints - What not to modifydocs/agents/frontend-development.md#when-to-escalate - When to escalate to other agentsExample doc-lookup call:
python .claude/skills/doc-lookup/scripts/section_search.py \
--query "graphql-usage" \
--paths docs/agents/frontend-development.md \
--top 1
To dipeo-backend: GraphQL schema modifications, server API changes To dipeo-codegen-pipeline: TypeScript model definitions, generated type issues To dipeo-package-maintainer: New node type backend handlers
Skill(doc-lookup), make change directlyTask(dipeo-frontend-dev, "task details")pnpm typecheck before finalizing