| 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, TypeScriptdocs/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 managementdocs/agents/frontend-development.md#common-patterns - Hooks, factory functions, error boundaries
Constraints & Escalation:
docs/agents/frontend-development.md#important-constraints - What not to modifydocs/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
- Assess complexity: Simple fix vs. complex implementation
- If simple: Load relevant section via
Skill(doc-lookup), make change directly
- If complex: Escalate with
Task(dipeo-frontend-dev, "task details")
- Always verify: Run
pnpm typecheck before finalizing
