How do I install the Dipeo Frontend Dev skill?

Run npx skillmds@latest add tomevault-io/dipeo-frontend-dev in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Dipeo Frontend Dev safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Dipeo Frontend Dev?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Dipeo Frontend Dev free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Dipeo Frontend Dev?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Dipeo Frontend Dev by tomevault-io — Agent Skill

Name: Dipeo Frontend Dev
Author: tomevault-io

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. Use when this capability is needed.

tomevault-io 19264dc 2 files · 3.6 KB Updated Sep 17, 2026

File contents

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: dipeo-frontend-devdescription: 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. Use when this capability is needed.---# 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**:```bashpython .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 Workflow1. **Assess complexity**: Simple fix vs. complex implementation2. **If simple**: Load relevant section via `Skill(doc-lookup)`, make change directly3. **If complex**: Escalate with `Task(dipeo-frontend-dev, "task details")`4. **Always verify**: Run `pnpm typecheck` before finalizing---> Converted and distributed by [TomeVault](https://tomevault.io/claim/sorryhyun) — claim your Tome and manage your conversions.

Frequently asked questions