dipeo-frontend-dev

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