AgentSkillsCN

dipeo-frontend-dev

DiPeO前端的路由技能（React、可视化编辑器、GraphQL集成、TypeScript类型）。当任务提及React组件、图表编辑器、GraphQL钩子或类型错误时使用。对于简单任务，直接处理；对于复杂工作，升级至dipeo-frontend-dev智能体。

SKILL.md
--- frontmatter
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