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.
Best use case
dipeo-frontend-dev is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using dipeo-frontend-dev should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/dipeo-frontend-dev/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How dipeo-frontend-dev Compares
| Feature / Agent | dipeo-frontend-dev | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# 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
Related Skills
dipeo-package-maintainer
Router skill for DiPeO runtime Python code (execution handlers, service architecture, domain models, LLM infrastructure). Use when task mentions node handlers, EventBus, ServiceRegistry, Envelope pattern, or domain logic. For simple tasks, handle directly; for complex work, escalate to dipeo-package-maintainer agent.
dipeo-codegen-pipeline
Router skill for DiPeO code generation pipeline (TypeScript specs → IR → Python/GraphQL). Use when task mentions TypeScript models, IR builders, generated code diagnosis, or codegen workflow. For simple tasks, handle directly; for complex work, escalate to dipeo-codegen-pipeline agent.
dipeo-backend
Router skill for DiPeO backend ecosystem (server/ and cli/): FastAPI server, CLI tools, database, MCP integration. Use when task mentions CLI commands, server endpoints, database queries, or MCP tools. For simple tasks, handle directly; for complex work, escalate to dipeo-backend agent.
todo-manage
Manage and organize TODO.md at project root - plan features, track progress, mark tasks complete, and clean up completed items. Use when planning tasks, organizing work, reviewing priorities, or managing the project TODO list. Access via /dipeotodos command.
test-backend-router
Test implementation of thin router skill for DiPeO backend. Provides decision criteria and documentation anchors for FastAPI server, CLI (dipeo run/results/metrics/compile/export), SQLite schema, and MCP integration in apps/server/. Use when task mentions CLI commands, server endpoints, database queries, or MCP tools.
separate-monolithic-python
Break large Python files (>500 LOC) into smaller, well-organized modules with proper package structure. Use when a Python file is too large, monolithic, or needs refactoring. Triggered by requests mentioning "too large", "separate", "split", "break up", or "refactor" for Python files.
maintain-docs
Update and maintain documentation to reflect current implementation after code changes, refactoring, or new features. Remove temporal language, verify accuracy against code, and keep docs current. Use when updating docs, syncing documentation, removing outdated info, or after implementing features.
import-refactor
Update all import statements, module references, string paths, and config references after moving or renaming files and modules. Handles Python, TypeScript, and JavaScript imports. Use when moving files, renaming modules, restructuring directories, or consolidating code.
skill-generator
Create new Claude Code skills with proper structure and best practices. Use when the user wants to create a new skill, extend Claude's capabilities, or needs help structuring a SKILL.md file.
doc-lookup
Locate and retrieve specific documentation sections from DiPeO's docs/ by heading anchors or keywords. Returns minimal, targeted excerpts instead of full files. Use when you need precise documentation context without loading entire guides.
clean-comments
Remove unnecessary, redundant, or obvious code comments while preserving valuable explanations. Use when cleaning up comments, removing verbose documentation, simplifying inline comments, or preparing code for review.
frontend-design
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...