dipeo-frontend-dev

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.

Category: discovered
Tags: github, community
Version: 1.0.0
Author: walid
Downloads: 0
GitHub stars: 11
Updated: 2025-11-21

Source: sorryhyun/DiPeO

Download the latest version (v1.0.0) from this page.

SKILL.md

---
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**:
```bash
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