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
1---2name: dipeo-frontend-dev3description: 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.4---5
6# DiPeO Frontend Dev Router
7
8**Domain**: React components, visual diagram editor (XYFlow), GraphQL integration, TypeScript types in `/apps/web/src/`.
9
10## Quick Decision: Skill or Agent?
11
12### ✅ Handle Directly (This Skill)
13- **Simple fixes**: <20 lines, 1-2 files
14- **Quick type fixes**: Single TypeScript error in one file
15- **Documentation lookups**: "Where is X?", "What hooks are available?"
16- **Small styling changes**: Update component layout, add simple UI element
17- **Pattern reference**: GraphQL hook usage examples
18
19### ❌ Escalate to Agent
20- **TypeScript type fixing**: Multiple related errors, GraphQL schema mismatches, complex generics
21- **Feature implementation**: New diagram editor features, multi-step UI workflows
22- **Refactoring**: Component hierarchy changes, extracting shared logic
23- **Complex debugging**: Runtime errors across components, state synchronization issues
24
25**Agent**: `Task(dipeo-frontend-dev, "your detailed task description")`
26
27## Documentation Sections (Load On-Demand)
28
29Use `Skill(doc-lookup)` with these anchors when you need detailed context:
30
31**Core Responsibilities & Tech Stack**:
32- `docs/agents/frontend-development.md#your-core-responsibilities` - React, diagram editor, GraphQL, TypeScript
33- `docs/agents/frontend-development.md#technical-context` - Tech stack and project structure
34
35**Code Quality & Patterns**:
36- `docs/agents/frontend-development.md#code-quality-standards` - Component patterns, GraphQL, state management
37- `docs/agents/frontend-development.md#common-patterns` - Hooks, factory functions, error boundaries
38
39**Constraints & Escalation**:
40- `docs/agents/frontend-development.md#important-constraints` - What not to modify
41- `docs/agents/frontend-development.md#when-to-escalate` - When to escalate to other agents
42
43**Example doc-lookup call**:
44```bash
45python .claude/skills/doc-lookup/scripts/section_search.py \
46 --query "graphql-usage" \
47 --paths docs/agents/frontend-development.md \
48 --top 1
49```
50
51## Escalation to Other Agents
52
53**To dipeo-backend**: GraphQL schema modifications, server API changes
54**To dipeo-codegen-pipeline**: TypeScript model definitions, generated type issues
55**To dipeo-package-maintainer**: New node type backend handlers
56
57## Typical Workflow
58
591. **Assess complexity**: Simple fix vs. complex implementation
602. **If simple**: Load relevant section via `Skill(doc-lookup)`, make change directly
613. **If complex**: Escalate with `Task(dipeo-frontend-dev, "task details")`
624. **Always verify**: Run `pnpm typecheck` before finalizing
majiayu000