# UI/UX Pro Max와 Frontend-Design 병합 시 트리거 충돌 분석

**분석자**: 아테나 (개발1팀 UX/UI 디자이너)
**분석일**: 2026-03-20
**목표**: frontend-design 스킬에 ui-ux-pro-max를 병합할 때의 트리거 충돌 위험 분석

---

## 1. 스킬 기본 정보

### 1.1 Frontend-Design
- **위치**: `/home/jay/.agents/skills/frontend-design/`
- **현재 상태**: 설치됨 (25개 기존 스킬 중 1개)
- **파일 크기**: 136.6K
- **주요 트리거 키워드**:
  - "build web components, pages, artifacts, posters, or applications"
  - "websites, landing pages, dashboards, React components, HTML/CSS layouts"
  - "styling/beautifying any web UI"
- **주요 기능**:
  - 디자인 씽킹 기반 (Purpose, Tone, Constraints, Differentiation)
  - 미학적 방향 설정 (brutalism, maximalism, minimalism 등 12가지)
  - 타이포그래피, 색상, 모션, 공간 구성 가이드라인
  - "AI slop" 방지에 중점

### 1.2 UI/UX Pro Max
- **출처**: nextlevelbuilder/ui-ux-pro-max-skill (GitHub)
- **파일 크기**: 52.5K
- **설치 위치**: `/tmp/ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max/SKILL.md`
- **주요 트리거 키워드**:
  - "UI/UX design intelligence for web and mobile"
  - Actions: "plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check"
  - Projects: "website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app"
  - Elements: "button, modal, navbar, sidebar, card, table, form, chart"
  - Styles: "glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design"
- **주요 기능**:
  - 50+ 디자인 스타일
  - 161 컬러 팔레트
  - 57 폰트 페어링
  - 161 프로덕트 타입
  - 99 UX 가이드라인 (10가지 우선순위)
  - 25 차트 타입
  - 10개 기술 스택 지원 (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS)
  - 우선순위 기반 추천 (Accessibility, Touch & Interaction, Performance, Style Selection, Layout, Typography, Animation, Forms, Navigation, Charts)

---

## 2. 트리거 키워드 충돌 분석

### 2.1 공통 트리거 키워드
다음 키워드가 **두 스킬에서 모두 감지될 가능성이 높음**:

| 키워드 | Frontend-Design | UI/UX Pro Max | 충돌 위험도 |
|--------|---|---|---|
| **build** | "build web components, pages" | "build" (action) | 🔴 높음 |
| **create** | "create...interfaces" | "create, create UI components" | 🔴 높음 |
| **design** | 핵심 (Design Thinking) | "design" (action) | 🔴 높음 |
| **website/landing page** | 명시적 | 명시적 | 🔴 높음 |
| **dashboard** | 명시적 | "dashboard, admin panel" | 🔴 높음 |
| **button, form, modal** | 일반적 | 명시적 | 🟠 중간 |
| **styling/beautifying** | 명시적 | 포함됨 | 🟠 중간 |
| **responsive** | 암시적 | 명시적 | 🟠 중간 |
| **animation, motion** | 명시적 | 명시적 | 🟠 중간 |
| **color/typography** | 가이드라인 | 명시적 | 🟠 중간 |
| **minimalism, brutalism** | 미학적 방향 | 스타일 선택 | 🟠 중간 |
| **dark mode** | 포함됨 | 명시적 | 🟡 낮음 |

**결론**: 현재 두 스킬의 트리거 범위가 **매우 광범위하게 겹침**. Claude가 사용자의 요청을 받으면 **둘 중 어느 스킬이 활성화될지 불확실함**.

---

## 3. 기존 스킬과의 충돌 위험 분석

### 3.1 Canvas-Design과의 충돌
**Canvas-Design 트리거**: "create a poster, piece of art, design, or other static piece"

| 충돌 지점 | 심각도 | 설명 |
|---|---|---|
| **"poster" 키워드** | 🔴 높음 | frontend-design의 설명에 "posters" 명시 vs canvas-design의 "poster" 명시 |
| **"design" 키워드** | 🔴 높음 | 두 스킬 모두 핵심 액션 |
| **"visual design"** | 🟠 중간 | canvas-design은 PNG/PDF 시각 디자인, frontend-design은 웹 UI 전담 |
| **구분 기준** | 안전함 | Frontend: 웹/앱 인터랙티브, Canvas: 정적 시각물 (포스터/카드/아트) |

**교차 트리거 위험**:
- 사용자: "design a poster for my website"
- 결과: frontend-design과 canvas-design 중 어디서 처리할지 불명확
- UI/UX Pro Max 병합 후: 상황 더 악화 가능

### 3.2 Copywriting과의 충돌
**Copywriting 트리거**: "write copy for, improve this copy, rewrite this page"

| 충돌 지점 | 심각도 | 설명 |
|---|---|---|
| **"landing page"** | 🟠 중간 | frontend-design: 구축, copywriting: 텍스트 작성 |
| **"homepage"** | 🟠 중간 | 함께 필요한 경우 많음 |
| **구분 기준** | 안전함 | Frontend: "build/design", Copywriting: "write/rewrite copy" |

**교차 트리거 위험**: 낮음 (액션 동사가 다름: "build/design" vs "write/rewrite")

### 3.3 Canvas-Design + UI/UX Pro Max 충돌
UI/UX Pro Max 추가 시 새로운 위험:

| 항목 | 문제 |
|---|---|
| **"banner design"** | UI/UX Pro Max에 별도 스킬 포함 (`.claude/skills/ui-ux-pro-max/SKILL.md` 외 7개 스킬) |
| **"design system"** | UI/UX Pro Max 내 "design-system" 스킬 존재 |
| **"styling"** | UI/UX Pro Max 내 "ui-styling" 스킬 존재 |

⚠️ **주의**: UI/UX Pro Max 리포지토리는 단일 SKILL.md가 아닌 **다중 스킬 패키지**로 구성됨:
- ui-ux-pro-max (메인)
- design
- slides
- design-system
- brand
- banner-design
- ui-styling

---

## 4. 병합 전략 분석

### 4.1 병합 가능성 평가

| 측면 | 평가 | 이유 |
|---|---|---|
| **기능 보완성** | ✅ 높음 | Frontend-Design (미학) + UI/UX Pro Max (구체적 자산, 스택) |
| **트리거 중복** | ❌ 높음 | 두 스킬의 트리거 범위가 90% 이상 겹침 |
| **사용자 의도 구분** | ❌ 낮음 | "Design a dashboard"라는 요청이 어느 스킬인지 불명확 |
| **통합 난이도** | 🟠 중간 | 두 SKILL.md 병합 가능하지만 트리거 충돌 해결 필수 |

### 4.2 권장 병합 방식: 계층형 트리거 분리

**안티패턴** (현재):
```
Frontend-Design: build web components, pages, artifacts, posters...
UI/UX Pro Max: UI/UX design for web and mobile...
→ 80% 겹침, 의도 파악 불가
```

**권장 패턴** (병합 후):
```
1단계 (우선 트리거):
- UI/UX Pro Max 활성화: "design system", "color palette", "font pairing", "99 UX guideline", "chart", "accessibility review"
- Frontend-Design 활성화: "build from scratch", "design philosophy", "aesthetic direction", "aesthetic theme", "create artifact"

2단계 (공유 트리거, 의도 기반):
- "build dashboard" → UI/UX Pro Max (구체적 컴포넌트 + 팔레트)
- "design a beautiful homepage" → Frontend-Design (미학적 방향 + 디자인 씽킹)

3단계 (상호 참조):
- UI/UX Pro Max 내에 frontend-design의 "디자인 씽킹" 링크
- Frontend-Design 내에 ui-ux-pro-max의 "팔레트, 폰트, 가이드라인" 링크
```

---

## 5. 검증 체크리스트

### 5.1 병합 전 확인사항

| 항목 | 확인 | 상태 |
|---|---|---|
| **SKILL.md 문법** | YAML 헤더 유효성 | ❌ 미실행 |
| **트리거 키워드 목록** | 겹치는 키워드 목록화 | ✅ 완료 |
| **기술 스택 호환성** | React, Next.js, Vue 등 10개 스택 모두 지원 | ✅ 호환 |
| **UI/UX Pro Max 다중 스킬** | 7개 서브 스킬 통합 여부 | ⚠️ 미결정 |
| **기존 스킬과 충돌** | canvas-design, copywriting 등 | 🟠 일부 충돌 |
| **InsuRo/InsuWiki 최적화** | 프로젝트별 커스터마이징 필요 | ❌ 미실행 |

### 5.2 병합 후 테스트 케이스

```
테스트 1: 기본 병합 동작
Query: "build a landing page"
Expected: 통합된 frontend-design/ui-ux-pro-max 활성화
Verify: 디자인 씽킹 + 팔레트 + 폰트 추천 동시 제공

테스트 2: Canvas-Design 구분
Query: "design a poster for my website"
Expected: canvas-design 활성화 (정적 시각물)
Verify: PNG/PDF 생성, 포스터 포맷

테스트 3: UI/UX Pro Max 특화
Query: "choose a color system for React dashboard"
Expected: ui-ux-pro-max 활성화
Verify: 161 팔레트 중 추천, React 스택 최적화

테스트 4: Frontend-Design 특화
Query: "I want a brutalist aesthetic for my homepage"
Expected: frontend-design 활성화
Verify: 디자인 씽킹, 미학적 방향, "AI slop" 방지

테스트 5: 상호 참조
Query: "build a dashboard with good UX"
Expected: 통합 스킬이 둘 다 제공 (디자인 + 자산)
Verify: 접근성, 터치 상호작용, 성능, 스타일, 레이아웃 모두 언급
```

---

## 6. 충돌 위험 스킬 목록 (47개 기존 스킬)

### 높음 위험도 (🔴)

1. **canvas-design** (16.2K)
   - 충돌: "poster" 키워드, "design" 액션
   - 분리 방법: 웹/앱 vs 정적 시각물로 분류

2. **frontend-design** (136.6K) - 자기 자신
   - ui-ux-pro-max와 100% 함수형 겹침
   - 병합 필수 결정 필요

### 중간 위험도 (🟠)

3. **copywriting** (30.5K)
   - 충돌: "landing page", "homepage" (텍스트 작성 vs 디자인)
   - 심각도: 낮음 (액션 동사 다름)

4. **content-strategy** (19.9K)
   - 충돌: "website" 계획 vs 디자인
   - 심각도: 낮음 (전략 vs 구현)

5. **vercel-react-best-practices** (189.7K)
   - 충돌: "React component" 최적화
   - 심각도: 낮음 (성능 vs 디자인)

6. **webapp-testing** (20.7K)
   - 충돌: UI 테스트 (디자인 vs 기능 테스트)
   - 심각도: 낮음 (테스트 vs 디자인)

### 낮음 위험도 (🟡)

7. **seo-audit** (37.5K)
   - 충돌: "homepage", "landing page" SEO vs 디자인
   - 심각도: 매우 낮음

8. **programming-seo** (20.1K)
   - 충돌: "template pages" 생성
   - 심각도: 매우 낮음

### 충돌 없음 (✅)

- book-writer, claude-api, docx, find-skills, marketing-psychology, mcp-builder, pdf,
- playwright-generate-test, pricing-strategy, skill-creator, subagent-driven-development,
- supabase-postgres-best-practices, swing-clarify, swing-mortem, swing-options, swing-trace,
- systematic-debugging, (그 외 약 20개)

---

## 7. 최종 권장 방안

### Option A: 병합 (권장)
```
장점:
+ 두 스킬의 장점을 극대화 (미학 + 자산)
+ 단일 스킬로 사용자 관리 단순화
+ InsuRo/InsuWiki 최적화 용이
+ 중복 제거

단점:
- 트리거 로직 복잡화 (의도 기반 분기 필요)
- SKILL.md 파일 크기 증가 (136.6K + 52.5K = ~180K)
- 테스트 케이스 추가 필요

비용: 중간 (하루 작업)
```

### Option B: 분리 유지
```
장점:
+ 트리거 로직 단순
+ 스킬 재사용성 유지
+ 변경 영향도 최소화

단점:
- 기존 canvas-design과 더 많은 충돌 발생
- 사용자가 어느 스킬을 쓸지 헷갈림
- "design dashboard"에서 둘 다 활성화될 수 있음

비용: 낮음 (작업 없음)
```

### Option C: 하이브리드 (대안)
```
프론트엔드-디자인-Pro (통합 메타 스킬):
1. frontend-design 유지 (미학)
2. ui-ux-pro-max-assets 별도 스킬 (자산, 참조용)
3. 둘 사이에 명확한 트리거 분리

비용: 높음 (하루 이상)
```

---

## 8. 구체적 트리거 분리 제안 (Option A 기반)

### Frontend-Design 트리거 (디자인 씽킹, 미학)
```
주요:
- "design thinking", "aesthetic direction", "design philosophy"
- "create artifact from scratch", "build from concept"
- "make beautiful", "stunning design", "memorable interface"
- "brutal minimalist", "maximalist chaos", "retro-futuristic", "organic natural"
- "creative concept", "distinctive direction"

Action 버사:
- create (fresh), build (from concept), design (philosophy)
```

### UI/UX Pro Max 트리거 (구체적 컴포넌트, 자산)
```
주요:
- "design system", "color palette", "font pairing", "typography system"
- "accessibility review", "UX guideline", "responsive design"
- "component library", "button styles", "modal patterns"
- "React component", "Next.js layout", "Vue template"
- "dark mode", "chart type", "shadow scale"

Action 버사:
- review (UX), optimize (accessibility), choose (palette/font)
```

### 공유 영역 (맥락 기반 선택)
```
"build dashboard"
→ 용도/요구사항 확인
  - "beautiful, unique design" → Frontend-Design 우선
  - "accessible, good UX" → UI/UX Pro Max 우선
  - "both" → 통합 활성화

"design landing page"
→ 구체 정도 확인
  - "from scratch, aesthetic concept" → Frontend-Design
  - "with Tailwind, responsive" → UI/UX Pro Max
```

---

## 9. 기술 적 구현 노트

### 9.1 UI/UX Pro Max 다중 스킬 처리

현재 리포지토리 구조:
```
.claude/skills/
├── ui-ux-pro-max/SKILL.md (메인)
├── design/SKILL.md
├── slides/SKILL.md
├── design-system/SKILL.md
├── brand/SKILL.md
├── banner-design/SKILL.md
└── ui-styling/SKILL.md
```

**선택 1**: 모두 병합 (권장)
→ frontend-design에 7개 스킬 통합, 트리거 계층화

**선택 2**: 메인만 병합
→ ui-ux-pro-max만 frontend-design과 병합, 나머지 별도

**선택 3**: 개별 병합
→ 각 스킬을 canvas-design 등과 전략적으로 병합

### 9.2 권장: 선택 1 (모두 병합)
- frontend-design-pro (통합 이름 고려)
- 트리거: 10가지 우선순위 기반
- 섹션: 미학 (frontend) + 자산 (ui-ux) + 구체 (design-system, banner 등)

---

## 10. 결론 및 다음 단계

### 결론
1. **병합 필수**: 트리거 겹침이 너무 커서 분리 불가
2. **Canvas-Design 주의**: "poster" 키워드 충돌 해결 필수
3. **단계적 도입**: 통합 후 InsuRo/InsuWiki 별도 테스트

### 다음 단계
1. ✅ 트리거 분석 (본 문서)
2. ⏳ SKILL.md 병합 작성 (24시간)
3. ⏳ 로컬 테스트 (12시간)
4. ⏳ Canvas-Design 트리거 검증 (4시간)
5. ⏳ InsuRo 프로젝트 최적화 커스터마이징 (24시간)
6. ⏳ 팀 내 리뷰 및 배포 (4시간)

**전체 예상 일정**: 2-3일

---

## 부록: 트리거 키워드 전체 맵

### 기존 25개 스킬의 주요 액션 동사 분포

| 액션 | 스킬 개수 | 관련 스킬 |
|---|---|---|
| **build/create** | 12 | frontend-design, canvas-design, docx, mcp-builder, pdf, 등 |
| **write** | 8 | copywriting, content-strategy, book-writer, 등 |
| **review** | 7 | copywriting, skill-creator, systematic-debugging, 등 |
| **design** | 6 | frontend-design, canvas-design, copywriting, 등 |
| **optimize/improve** | 9 | pricing-strategy, skill-creator, vercel-react, 등 |
| **test** | 5 | systematic-debugging, playwright, webapp-testing, 등 |
| **plan/analyze** | 8 | content-strategy, pricing-strategy, swing-* 등 |

### UI/UX Pro Max 특화 액션 (신규)
- **plan**: "Designing new pages, Creating or refactoring UI components"
- **review**: "Reviewing UI code for user experience"
- **fix**: "Improving perceived quality"
- **enhance**: "Pre-launch UI quality optimization"
- **optimize**: "Accessibility, performance, clarity optimization"

⚠️ 이 중 일부 ("plan", "review", "optimize")는 이미 다른 스킬과 겹침.

---

**작성**: 아테나 (UX/UI 디자이너)
**검토 예정**: 팀장 승인 필요
**최종 업데이트**: 2026-03-20