Agent skill
create-component-with-popup
Shadow DOM 팝업을 가진 컴포넌트를 생성합니다. 컴포넌트가 직접 데이터를 fetch하고 팝업으로 표시합니다. 3D 씬, 독립 위젯 등에 사용합니다.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/create-component-with-popup-jskim-90-web-builder-toolkit
SKILL.md
팝업 컴포넌트 생성
컴포넌트가 직접 데이터를 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/ |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?