How do I install the Create Component With Popup skill?

Run npx skillmds add majiayu000/create-component-with-popup in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Create Component With Popup skill do?

Shadow DOM 팝업을 가진 컴포넌트를 생성합니다. 컴포넌트가 직접 데이터를 fetch하고 팝업으로 표시합니다. 3D 씬, 독립 위젯 등에 사용합니다. It is listed under Web & Frontend on SkillMD.

Is Create Component With Popup safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Create Component With Popup?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Create Component With Popup free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Create Component With Popup?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Create Component With Popup by majiayu000

Name: Create Component With Popup
Rating: 4.5 (4 reviews)
Author: majiayu000

Create Component With Popup

Shadow DOM 팝업을 가진 컴포넌트를 생성합니다. 컴포넌트가 직접 데이터를 fetch하고 팝업으로 표시합니다. 3D 씬, 독립 위젯 등에 사용합니다.

majiayu000 8da56ab 2 files · 3.5 KB Updated Sep 9, 2026 567 repo stars

File contents

팝업 컴포넌트 생성

컴포넌트가 직접 데이터를 fetch하고 Shadow DOM 팝업으로 표시합니다.

기본 원칙은 create-standard-component 참조

⚠️ 작업 전 필수 확인

코드 작성 전 반드시 다음 파일들을 Read 도구로 읽으세요. 이전에 읽었더라도 매번 다시 읽어야 합니다 - 캐싱하거나 생략하지 마세요.

/RNBT_architecture/README.md - 아키텍처 이해
/.claude/guides/CODING_STYLE.md - 코딩 스타일
/RNBT_architecture/Utils/PopupMixin.js - PopupMixin API

일반 vs 팝업 컴포넌트

구분	일반 컴포넌트	팝업 컴포넌트
데이터	GlobalDataPublisher	Wkit.fetchData
구독	`subscriptions`	`datasetInfo`
팝업	선택적	필수

핵심 원칙

데이터 흐름

페이지 → @assetClicked 이벤트 수신 → source.showDetail() 호출
컴포넌트 → showPopup() → fetchData() → render functions

팝업이 있을 때만 컴포넌트의 직접 fetch 허용

필수 구성

구성	설명
`applyShadowPopupMixin`	Shadow DOM 팝업
`datasetInfo`	fetch할 데이터 정의
`applyEChartsMixin`	차트 시 (옵션)
`applyTabulatorMixin`	테이블 시 (옵션)

출력 구조

components/[ComponentName]/
├── views/component.html       # 팝업 템플릿 (<template id="popup-xxx">)
├── styles/component.css
├── scripts/
│   ├── register.js
│   └── beforeDestroy.js       # destroyPopup() 호출
├── preview.html
└── README.md

관련 자료

beforeDestroy에서 destroyPopup() 필수

참조	위치
UPS (기본)	/RNBT_architecture/Projects/ECO/page/components/UPS/
PDU (탭 UI + 테이블)	/RNBT_architecture/Projects/ECO/page/components/PDU/
CRAC (듀얼 Y축 차트)	/RNBT_architecture/Projects/ECO/page/components/CRAC/

---name: create-component-with-popupdescription: Shadow DOM 팝업을 가진 컴포넌트를 생성합니다. 컴포넌트가 직접 데이터를 fetch하고 팝업으로 표시합니다. 3D 씬, 독립 위젯 등에 사용합니다.--- # 팝업 컴포넌트 생성 컴포넌트가 직접 데이터를 fetch하고 Shadow DOM 팝업으로 표시합니다. > 기본 원칙은 [create-standard-component](/.claude/skills/2-component/create-standard-component/SKILL.md) 참조 --- ## ⚠️ 작업 전 필수 확인 **코드 작성 전 반드시 다음 파일들을 Read 도구로 읽으세요.** **이전에 읽었더라도 매번 다시 읽어야 합니다 - 캐싱하거나 생략하지 마세요.** 1. [/RNBT_architecture/README.md](/RNBT_architecture/README.md) - 아키텍처 이해 2. [/.claude/guides/CODING_STYLE.md](/.claude/guides/CODING_STYLE.md) - 코딩 스타일 3. [/RNBT_architecture/Utils/PopupMixin.js](/RNBT_architecture/Utils/PopupMixin.js) - PopupMixin API --- ## 일반 vs 팝업 컴포넌트 | 구분 | 일반 컴포넌트 | 팝업 컴포넌트 | |------|--------------|--------------| | 데이터 | GlobalDataPublisher | Wkit.fetchData | | 구독 | `subscriptions` | `datasetInfo` | | 팝업 | 선택적 | **필수** | --- ## 핵심 원칙 ### 데이터 흐름 ``` 페이지 → @assetClicked 이벤트 수신 → source.showDetail() 호출 컴포넌트 → showPopup() → fetchData() → render functions ``` - **팝업이 있을 때만** 컴포넌트의 직접 fetch 허용 --- ## 필수 구성 | 구성 | 설명 | |------|------| | `applyShadowPopupMixin` | Shadow DOM 팝업 | | `datasetInfo` | fetch할 데이터 정의 | | `applyEChartsMixin` | 차트 시 (옵션) | | `applyTabulatorMixin` | 테이블 시 (옵션) | --- ## 출력 구조 ``` components/[ComponentName]/ ├── views/component.html # 팝업 템플릿 (<template id="popup-xxx">) ├── styles/component.css ├── scripts/ │ ├── register.js │ └── beforeDestroy.js # destroyPopup() 호출 ├── preview.html └── README.md ``` --- ## 관련 자료 > beforeDestroy에서 `destroyPopup()` 필수 | 참조 | 위치 | |------|------| | UPS (기본) | [/RNBT_architecture/Projects/ECO/page/components/UPS/](/RNBT_architecture/Projects/ECO/page/components/UPS/) | | PDU (탭 UI + 테이블) | [/RNBT_architecture/Projects/ECO/page/components/PDU/](/RNBT_architecture/Projects/ECO/page/components/PDU/) | | CRAC (듀얼 Y축 차트) | [/RNBT_architecture/Projects/ECO/page/components/CRAC/](/RNBT_architecture/Projects/ECO/page/components/CRAC/) |

Frequently asked questions