Provide React components for editing warehouse maps with interactive layers.
npx skills add https://github.com/Rytass/Utils --skill wms-react-components
Please help me install this Agent Skill. Skill: wms-react-components Source: https://github.com/Rytass/Utils/tree/main/.claude/skills/wms-react-components Command: npx skills add https://github.com/Rytass/Utils --skill wms-react-components
This Skill provides a modular React component library to design and edit warehouse maps, enabling interactive floor plans, location visualization, and spatial management without building the UI from scratch.
Install the library in a React project using npm or yarn, then import and render the WMSMapModal component. Provide initial map data or load from an API, and optionally wire up onUpload handlers for asset management. Example steps: npm install @rytass/wms-map-react-components @xyflow/react, import { WMSMapModal } from '@rytass/wms-map-react-components', render with required props like open and onClose.
High-intent search queries and answers about installing and using this skill.
Build an interactive warehouse map in React by rendering the WMSMapModal component with initial map data, leveraging its TypeScript-friendly API to manage layers, backgrounds, and draggable spatial regions.
Visualize warehouse locations and floor plans by rendering map components that support multi-layer management and direct manipulation of spatial elements using structured data types for rectangles and polygons.
Yes, it supports multi-layer floor-plan editing by providing interactive layers, background management, and internal history hooks that enable undo and redo operations during direct map element manipulation.
Yes, you need to install @xyflow/react because it provides the underlying rendering engine required for the warehouse map components to handle direct node manipulation and interactive spatial elements.
Yes, you can use TypeScript to model warehouse layouts. The library exposes TypeScript-friendly data structures including Map, MapBackground, MapRectangleRange, and MapPolygonRange to define spatial regions and zones.
Handle asset uploads during warehouse floor-plan editing by wiring up optional onUpload handlers in the WMSMapModal component, enabling direct asset management and reference loading within the map interface.
javierhbrImplement node-based React interfaces with @xyflow/react for flowcharts and diagrams.
tusososConvert structured architectural data into 3D building models in Three.js, Pascal Editor JSON, or plain JSON.
ZzulinTrack Unity Editor operations with persistent snapshots, history, and undo/redo.
tonyoconnellCreates interactive React+TypeScript node-edge visualizations and editors for envelope graphs using @xyclow/react library with dark theme customization.
