Claude Code Plugins

Community-maintained marketplace

Feedback

dipeo-frontend-dev

@sorryhyun/DiPeO
11
0

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 Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

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:

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