skills.rest
iredrion-img
iredrion-imgCOMMUNITY
Explore all skills by this author →
GitHub

wms-component-generator

Create and modify React UI components with Tailwind CSS and Recharts.

Updated Jan 19, 2026
Search Tags:#frontend#react#dashboard#tailwind#ui-components#style-guides#component-generator
One-click install
npx skills add https://github.com/iredrion-img/kh-rnd-wms --skill wms-component-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wms-component-generator
Source: https://github.com/iredrion-img/kh-rnd-wms/tree/main/.agents/skills/wms-component-generator
Command: npx skills add https://github.com/iredrion-img/kh-rnd-wms --skill wms-component-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

KH_RnD WMS 프론트엔드 UI 컴포넌트나 대시보드 차트를 새로 만들거나 수정할 때의 표준화된 가이드와 재사용 가능한 패턴이 부족한 문제를 해결합니다.

Core Features & Use Cases

  • 컴포넌트 규칙 준수: 함수형 컴포넌트 작성 규칙, 모듈 내보내기, 파일 구조 준수.
  • 차트 및 재사용성: 차트 컴포넌트의 구성, Tailwind 스타일 가이드, Recharts 호환성 확보.
  • Use Case: KH_RnD WMS 프런트엔드에서 표준에 맞춰 새 UI 컴포넌트를 생성하거나 수정하는 상황에 적용.

Quick Start

KH_RnD WMS 표준에 맞춰 새 컴포넌트를 생성하려면 이 스킬의 규칙을 적용하여 필요한 도메인의 컴포넌트를 추가합니다.

Frequently Asked Questions about wms-component-generator

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

FAQPage Schema
How do I generate React UI components for a WMS dashboard using Tailwind CSS?▼

You generate React UI components by applying built-in rules for functional component scaffolding, module exports, and file structure, ensuring standard React patterns for your WMS dashboard project.

How do I standardize file structure and exports when creating reusable React components?▼

To standardize reusable React components, this Skill enforces rules for functional component creation, module exports, and file structure, ensuring consistent architecture across your frontend project.

Does this component generator support Recharts and lucide-react for dashboard visualizations?▼

Yes, this component generator supports Recharts and lucide-react. It ensures chart components are configured for Recharts compatibility and integrates lucide-react icons for frontend dashboard modules.

Can I use Tailwind CSS style guides for modifying existing dashboard UI modules?▼

Yes, you can use Tailwind CSS style guides to modify existing dashboard UI modules. The Skill automates the creation and modification of components while maintaining Tailwind styling standards.

What is the best way to scaffold a React functional component for a WMS frontend?▼

The best way to scaffold a React functional component for a WMS frontend is using this Skill, which applies standardized rules for component creation, styling, and chart integration scenarios.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate
fefogarciafefogarcia
1

tremor-design-system

Build dashboards and data-rich UIs with Tremor React components and Tailwind CSS.

Community
Intermediate
inkeepinkeep
1.4k

vercel-composition-patterns

Refactor React component libraries to replace boolean props with compound components and explicit variants.

Official
Intermediate