smithery.ai

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.

First seen Mar 20, 2026

Installation

$ npx skills add https://smithery.ai

View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics

vercel-labs/agent-skills 697.8K installs

azure-hosted-copilot-sdk Shared topics

microsoft/azure-skills 440.4K installs

vercel-composition-patterns Shared topics

vercel-labs/agent-skills 326.5K installs

supabase Shared topics

supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs

vercel-react-native-skills Shared topics

vercel-labs/agent-skills 205.5K installs

frontend-design Similar name

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai

smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Allowed toolsRead, Grep, Glob, Bash, Skill

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 2,896 B
docs SUMMARY.md 299 B

History

Mar 20, 2026 First seen on skills.sh
Sep 9, 2026 First recorded snapshot · 1 installs

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

npx skills add https://smithery.ai