dipeo-frontend-dev

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