skills.rest
sorryhyun
sorryhyunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dipeo-frontend-dev

Route frontend tasks in DiPeO React projects to specialized agents.

12|2|Updated May 29, 2025
Search Tags:#automation#typescript#development#frontend#react#ui/ux#graphql
One-click install
npx skills add https://github.com/sorryhyun/DiPeO --skill dipeo-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dipeo-frontend-dev
Source: https://github.com/sorryhyun/DiPeO/tree/main/.claude/skills/dipeo-frontend-dev
Command: npx skills add https://github.com/sorryhyun/DiPeO --skill dipeo-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development in a complex React/TypeScript environment with GraphQL integration can be challenging, especially when dealing with type errors, component hierarchies, and state management. This skill streamlines common tasks, provides on-demand documentation, and guides escalation for complex issues, ensuring efficient and accurate development.

Core Features & Use Cases

  • Intelligent Task Routing: Quickly determines if a frontend task (e.g., simple styling, quick type fix) can be handled directly by the skill or requires escalation to a specialized agent for complex implementation.
  • On-Demand Documentation: Retrieves precise documentation sections for core responsibilities, tech stack, code quality standards, and common patterns using the doc-lookup skill, providing context without overwhelming the agent.
  • Pattern Reference: Accesses examples for GraphQL hook usage, component patterns, and error boundaries, ensuring consistent and correct implementation.
  • Use Case: When asked to "fix a TypeScript error in a React component," this skill can quickly retrieve relevant documentation on GraphQL usage or component patterns, allowing for a swift resolution without deep diving into the entire frontend codebase.

Quick Start

Example doc-lookup call for GraphQL usage

python .claude/skills/doc-lookup/scripts/section_search.py
--query "graphql-usage"
--paths docs/agents/frontend-development.md
--top 1

Frequently Asked Questions about dipeo-frontend-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix TypeScript type errors in a React component?▼

TypeScript type errors in React components can be resolved by reviewing type definitions and GraphQL hook patterns. This skill retrieves relevant documentation on type usage and component patterns to guide swift fixes for simple errors within single files, without requiring deep codebase analysis.

When should I escalate a frontend task to a specialized agent?▼

Escalate frontend tasks when they involve complex features, refactors spanning multiple files, or deep architectural changes. This skill handles simple fixes under 20 lines, quick type tweaks, and styling adjustments—escalation ensures complex work gets specialized expertise.

How do I use GraphQL hooks consistently in a React project?▼

GraphQL hook usage follows established patterns to ensure consistency across React components. This skill provides on-demand documentation and pattern examples for correct hook implementation within the /apps/web/src directory and XYFlow diagram editor integration.

Can I use this skill for documentation lookups on frontend code standards?▼

Yes, this skill retrieves precise documentation sections on tech stack, code quality standards, and common patterns via doc-lookup. On-demand documentation access provides context for frontend development without requiring manual codebase review.

What frontend tasks can be handled directly without escalation?▼

Direct handling covers simple styling adjustments, quick TypeScript type fixes in single files, documentation lookups, and GraphQL hook usage patterns. Tasks typically under 20 lines across 1–2 files stay within scope; anything larger or more complex routes to specialized agents.

Related Skills

Explore More Software Engineering Skills→
tonyoconnelltonyoconnell

reactflow

Creates interactive React+TypeScript node-edge visualizations and editors for envelope graphs using @xyclow/react library with dark theme customization.

Community
Intermediate
jrmatherlyjrmatherly
1

precheck

Run backend tests, lint, and frontend type checks before commits.

Community
Intermediate
RepairYourTechRepairYourTech
6

react-flow

Create interactive node-based graph visualizations with React Flow.

Community
Intermediate
sorryhyunsorryhyun
12

dipeo-backend

Route CLI commands, server endpoints, database queries, and MCP tool requests within the DiPeO backend.

Community
Intermediate