dagre-react-flowAutomatic graph layout using dagre with React Flow (@xyflow/react). Use when implementing auto-layout, hierarchical layouts, tree structures, or arranging no...
Install via ClawdBot CLI:
clawdbot install anderskev/dagre-react-flowGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Apr 20, 2026
Automatically arrange employees and departments in a hierarchical structure for HR dashboards or company directories. The skill enables top-to-bottom layouts with clear reporting lines, improving readability and management oversight.
Programmatically layout process flows, such as software development pipelines or business process models, using horizontal or vertical directions. This reduces manual node positioning effort and ensures consistent spacing for better visual communication.
Create interactive decision trees for educational tools, financial planning, or diagnostic systems. The skill supports automatic node arrangement to illustrate branching paths clearly, enhancing user understanding and engagement.
Visualize dependencies in project management or system architecture, such as task dependencies or software component relationships. Using bottom-to-top layouts can highlight foundational elements, aiding in risk assessment and planning.
Generate horizontal timelines for historical events or process flows in manufacturing. The skill automates node placement to align with chronological or sequential order, saving time in design and updates.
Offer a cloud-based diagramming tool with auto-layout features as a subscription service. Integrate this skill to provide advanced graph visualization for teams, charging per user or tiered plans based on usage and features.
Provide bespoke software development services incorporating automatic graph layouts for clients in industries like finance or healthcare. Use this skill to build tailored solutions, billing on a project or hourly basis for integration and maintenance.
Distribute the skill as part of an open-source React Flow library, monetizing through premium support, training, or advanced features. Offer paid add-ons like custom layout algorithms or priority bug fixes to generate revenue.
💬 Integration Tip
Ensure node dimensions are accurately set in dagre to avoid misalignment; use the coordinate conversion for React Flow's top-left system to center nodes properly.
Scored Jun 29, 2026
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...