---

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

DiPeO Frontend Dev Router

Domain: React components, visual diagram editor (XYFlow), GraphQL integration, TypeScript types in /apps/web/src/.

Quick Decision: Skill or Agent?

✅ Handle Directly (This Skill)

• Simple fixes: <20 lines, 1-2 files
• Quick type fixes: Single TypeScript error in one file
• Documentation lookups: "Where is X?", "What hooks are available?"
• Small styling changes: Update component layout, add simple UI element
• Pattern reference: GraphQL hook usage examples

❌ Escalate to Agent

• TypeScript type fixing: Multiple related errors, GraphQL schema mismatches, complex generics
• Feature implementation: New diagram editor features, multi-step UI workflows
• Refactoring: Component hierarchy changes, extracting shared logic
• Complex debugging: Runtime errors across components, state synchronization issues

Agent: Task(dipeo-frontend-dev, "your detailed task description")

Documentation Sections (Load On-Demand)

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, TypeScript
• docs/agents/frontend-development.md#technical-context - Tech stack and project structure

Code Quality & Patterns:

• docs/agents/frontend-development.md#code-quality-standards - Component patterns, GraphQL, state management
• docs/agents/frontend-development.md#common-patterns - Hooks, factory functions, error boundaries

Constraints & Escalation:

• docs/agents/frontend-development.md#important-constraints - What not to modify
• docs/agents/frontend-development.md#when-to-escalate - When to escalate to other agents

Example doc-lookup call:

python .claude/skills/doc-lookup/scripts/section_search.py \
  --query "graphql-usage" \
  --paths docs/agents/frontend-development.md \
  --top 1

Escalation to Other Agents

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

Typical Workflow

1. Assess complexity: Simple fix vs. complex implementation
2. If simple: Load relevant section via Skill(doc-lookup), make change directly
3. If complex: Escalate with Task(dipeo-frontend-dev, "task details")
4. Always verify: Run pnpm typecheck before finalizing