wms-react-components
OfficialBuild interactive warehouse maps with React.
System Documentation
What problem does it solve?
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.
Core Features & Use Cases
- WMSMapModal for map editing and viewing; supports multiple layers, backgrounds, and draggable regions.
- Data structures and types for Map, MapBackground, MapRectangleRange, and MapPolygonRange to model warehouse layouts; compatible with React and TypeScript.
- Use cases include warehouse floor-plan editing, asset placement visualization, and multi-level zoning with undo/redo support via the internal history hooks.
Quick Start
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: wms-react-components Download link: https://github.com/Rytass/Utils/archive/main.zip#wms-react-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.