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 Apr 19, 2026
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Curated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme, brand colors.
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.