skills.rest
chaingraphlabs
chaingraphlabsOFFICIAL
Explore all skills by this author →
Website𝕏@graphchainGitHub

frontend-architecture

Document frontend architecture guidance for ChainGraph's visual flow editor package.

15|3|Updated Apr 29, 2025
Search Tags:#architecture#React#frontend#UI patterns#XYFlow#Effector#frontend guidelines
One-click install
npx skills add https://github.com/chaingraphlabs/chaingraph --skill frontend-architecture-chaingraphlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-architecture
Source: https://github.com/chaingraphlabs/chaingraph/tree/main/.claude/skills/frontend-architecture
Command: npx skills add https://github.com/chaingraphlabs/chaingraph --skill frontend-architecture-chaingraphlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides architectural guidance for ChainGraph's frontend package, offering a structured blueprint for building the visual flow editor, UI components, and platform integrations.

Core Features & Use Cases

  • Clear directory structure and provider hierarchy for apps/chaingraph-frontend.
  • Patterns for React components, Effector stores, XYFlow integration, and UI components.
  • Guidance for performance, state management, and scalable frontend patterns suitable for onboarding and refactors.

Quick Start

Review the frontend-architecture skill when starting work on apps/chaingraph-frontend. Align new components, stores, and providers with the documented structure and patterns.

Frequently Asked Questions about frontend-architecture

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

FAQPage Schema
How do I structure React components and Effector stores for a visual flow editor?▼

To structure a visual flow editor, document a clear directory hierarchy for React components and Effector stores. This enforces consistent UI patterns and scalable state management for platform integrations.

What are the best practices for XYFlow integration in a frontend architecture?▼

XYFlow integration best practices involve defining specific UI patterns and provider hierarchies within your frontend package. This ensures performance and scalable component architecture for visual flow editors.

How do I document frontend guidelines for onboarding and refactoring?▼

Document frontend guidelines by creating a Markdown body with YAML frontmatter detailing name and description. Include optional scripts, references, and assets to guide implementation and architectural review.

Does this frontend architecture guidance support Effector for state management?▼

Yes, the frontend architecture guidance supports Effector for state management by providing specific patterns for Effector stores. This ensures scalable state handling within the React component hierarchy.

When do I need to review frontend architecture patterns for a visual flow editor?▼

Review frontend architecture patterns when starting work on the visual flow editor package or refactoring existing UI components. Aligning new components and providers with documented structures ensures scalable performance.

Related Skills

Explore More Software Engineering Skills→
Eng0AIEng0AI
15

chrome-extension-boilerplate-react-vite

Scaffold Chrome extensions with React, Vite, and TypeScript.

Official
Intermediate
chaingraphlabschaingraphlabs
15

xyflow-patterns

Integrate XYFlow patterns into the ChainGraph visual flow editor.

Official
Advanced
javierhbrjavierhbr

react-flow-implementation

Implement node-based React interfaces with @xyflow/react for flowcharts and diagrams.

Community
Intermediate
williamzujkowskiwilliamzujkowski
6

Frontend Framework Advisor

Designs frontend architecture plans covering state management, performance patterns, and testing strategy for React, Vue, iOS, Android, and React Native projects.

Community
Advanced