Claude-skill-registry 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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/dipeo-frontend-dev" ~/.claude/skills/majiayu000-claude-skill-registry-dipeo-frontend-dev && rm -rf "$T"

manifest: skills/data/dipeo-frontend-dev/SKILL.md

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

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