@conscience-technology/ctds 0.1.8 → 0.1.10

package/assets/prompts/components/sidebar.md

@@ -1,25 +1,44 @@
 # Sidebar
 
 ### 원칙
-좌측 세로 nav. **라우팅 전용** — Tabs/필터는 쓸 곳이 아님. Brand(home 링크) + Section(그룹 라벨) + Item(라우트 링크) + Profile(사용자) + Footer가 compound 조합. `collapsed`로 icon-only 축소. Item은 [[components/menu-item]]을 그대로 어댑트 — 시각·상태 규칙 공유.
+좌측 세로 nav. **라우팅 전용** — Tabs/필터는 쓸 곳이 아님. Header(고정) + Body(스크롤) + Footer(고정) 3영역 세로 쉘에, Brand + Section + Item + Separator + Profile을 compound로 조합. `collapsed`로 icon-only 축소. Item은 [[components/menu-item]]을 그대로 어댑트 — 시각·상태 규칙 공유.
+
+### 3영역 구조 (중요)
+Sidebar는 **Header / Body / Footer 세 영역으로 강제 분리**된다. 역할 혼동이 레이아웃 사고의 1순위 원인.
+
+| 영역 | 스크롤 | 레이아웃 | 담는 것 |
+|---|---|---|---|
+| `Sidebar.Header` | ❌ 고정 | **가로 flex 행** (brand symbol + wordmark 나란히) | `Sidebar.Brand` 전용 |
+| `Sidebar.Body` | ✅ 세로 스크롤 | 세로 flex 열 | `Sidebar.Section` · `Sidebar.Separator` 전부 여기 |
+| `Sidebar.Footer` | ❌ 고정 | 가로 flex 행 | `Sidebar.Profile` 또는 보조 액션 |
+
+Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가로 1줄로 눌려 겹친다. Section·Item·Separator는 반드시 `Sidebar.Body` 안에.
 
 ### Do
-- 라우트 이동은 Item에 `asChild` + Next `<Link>`.
+- **Header/Footer의 워크스페이스·프로필·조직 트리거는 반드시 [[components/identity-button]]** — Select·Input Dropdown·수제 Button+span 조합 전부 금지. Avatar + 2줄 라벨 + trailing 뼈대가 고정이라 전용 컴포넌트가 담당. 사이드바에서 "현재 X 선택 상태 + 전환 가능" 모양이 보이면 100% IdentityButton.
+- Section·Separator는 반드시 **`Sidebar.Body` 안에** 둔다 — Body만 스크롤되는 영역.
+- 라우트 이동은 Item에 `asChild` + Next `<Link>`. 단, `asChild`일 땐 라벨 truncation이 `<Link>` 쪽 책임이 된다 ([[components/menu-item]] Slot 동작) — 긴 라벨이면 Link에 `truncate` 유틸 또는 `title` 속성을 걸 것.
 - 현재 라우트는 `active`로 명시 (MenuItem의 active 시각 그대로).
 - Brand는 Home 링크 자리로. `symbol`(항상 노출) + `wordmark`(expanded만).
 - Section 묶음은 `title`로 그룹. collapsed일 땐 title 자동 숨김.
 - `collapsed` 상태에서는 `aria-label`과 `title`을 자동으로 걸어 접근성 유지.
+- 콘텐츠 영역과의 **경계선은 [[components/app-frame]] `variant="outlined"`** 가 그린다 — Sidebar 자체는 border를 그리지 않음. 사이드바가 녹아 보이면 AppFrame variant부터 확인.
 
 ### Don't
+- **워크스페이스/프로필 트리거에 Select·Input Dropdown 금지** — 폼 값 선택과 네비게이션 액션은 다른 역할. [[components/identity-button]] + DropdownMenu 조합이 유일한 표준 ([[antipattern_workspace_switcher]]).
+- **수제 Button + span 조립 금지** — 매번 레이아웃·폰트·collapsed 전환이 어긋나서 일관성이 깨짐. IdentityButton 하나로 끝.
+- **Header에 Section·Item·nav를 넣지 않는다** — Header는 가로 flex 행이라 세로 nav가 깔리면 전부 눌려 겹친다. Brand 전용.
 - 페이지 안 뷰 전환에 쓰지 않는다 — 그건 [[components/tabs]].
 - Item 안에 variant로 다른 톤을 쓰지 않는다. active 외의 강조 금지.
 - Sidebar 자체에 padding/width를 CSS로 덮지 않는다. `--sidebar-w*` 토큰 경유.
+- `.root`에 padding을 꽂지 않는다 — Body가 스크롤 컨테이너라 스크롤바가 안쪽으로 밀려 가장자리에 안 붙는다. 좌우 여백은 Header/Section/Footer가 각자 담당([[project_scroll_rule]]).
 - Brand symbol·wordmark 크기 override 금지. `--sidebar-brand-symbol-max`·`--sidebar-brand-wordmark-max` 상한 안에서만.
 
 ### Fallback
-collapsed 결정 애매하면 `false`. Section title 애매하면 생략.
+collapsed 결정 애매하면 `false`. Section title 애매하면 생략. 경계선 애매하면 AppFrame `variant="outlined"`.
 
 ### 관련
+- [[components/identity-button]] — Header/Footer 워크스페이스·프로필·조직 트리거. Sidebar.Profile은 이 컴포넌트의 preset 래퍼.
 - [[components/menu-item]] — Item 시각·상태 전부 재사용
 - [[components/avatar]] — Profile 왼쪽 아바타
 - [[components/app-frame]] — Sidebar를 담는 grid 쉘
@@ -29,26 +48,31 @@ collapsed 결정 애매하면 `false`. Section title 애매하면 생략.
 ### Props 시그니처
 ```tsx
 <Sidebar collapsed={boolean}>                 // default: false
+  {/* Header — 고정, 가로 행. Brand 전용. */}
   <Sidebar.Header>
     <Sidebar.Brand symbol={<Icon />} wordmark={<Logo /> | "CTDS"} />
   </Sidebar.Header>
 
-  <Sidebar.Section title="워크스페이스">
-    <Sidebar.Item
-      icon={<Icon name="house" />}
-      label="대시보드"
-      active={boolean}
-      trailing={ReactNode}                    // 배지·카운트
-      shortcut="⌘1"
-      hasSubmenu={boolean}
-      disabled={boolean}
-      asChild={boolean}
-      onClick={(e) => void}
-    />
-  </Sidebar.Section>
-
-  <Sidebar.Separator />
-
+  {/* Body — 세로 스크롤 트랙. Section·Separator 전부 여기. 여러 개 두면 각자 독립 스크롤. */}
+  <Sidebar.Body>
+    <Sidebar.Section title="워크스페이스">
+      <Sidebar.Item
+        icon={<Icon name="house" />}
+        label="대시보드"
+        active={boolean}
+        trailing={ReactNode}                  // 배지·카운트
+        shortcut="⌘1"
+        hasSubmenu={boolean}
+        disabled={boolean}
+        asChild={boolean}
+        onClick={(e) => void}
+      />
+    </Sidebar.Section>
+
+    <Sidebar.Separator />
+  </Sidebar.Body>
+
+  {/* Footer — 고정, 하단. Profile 또는 보조 액션. */}
   <Sidebar.Footer>
     <Sidebar.Profile
       name="희영"
@@ -69,39 +93,84 @@ collapsed 결정 애매하면 `false`. Section title 애매하면 생략.
 
 ### 조합 예시
 ```tsx
-// 기본 — 섹션 2개 + Profile
+// 1. 워크스페이스 트리거 Header + Section 2개 + Footer Profile (가장 흔한 구성)
 <Sidebar>
   <Sidebar.Header>
-    <Sidebar.Brand symbol={<Icon name="rocket-launch" />} wordmark="CTDS" />
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IdentityButton
+          size="lg"
+          avatar={{ initials: "T", shape: "rounded" }}
+          name="Taskify PM"
+          sub="Project Workspace"
+          trailing={<Icon name="caret-down" size={14} />}
+          aria-haspopup="menu"
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {/* 워크스페이스 리스트 + Separator + "+ 새 워크스페이스" */}
+      </DropdownMenu.Content>
+    </DropdownMenu>
   </Sidebar.Header>
 
-  <Sidebar.Section title="워크스페이스">
-    <Sidebar.Item asChild icon={<Icon name="house" />} label="대시보드" active>
-      <Link href="/">대시보드</Link>
-    </Sidebar.Item>
-    <Sidebar.Item asChild icon={<Icon name="chart-line" />} label="분석">
-      <Link href="/analytics">분석</Link>
-    </Sidebar.Item>
-  </Sidebar.Section>
+  <Sidebar.Body>
+    <Sidebar.Section title="워크스페이스">
+      <Sidebar.Item asChild icon={<Icon name="house" />} label="대시보드" active>
+        <Link href="/">대시보드</Link>
+      </Sidebar.Item>
+      <Sidebar.Item asChild icon={<Icon name="chart-line" />} label="분석">
+        <Link href="/analytics">분석</Link>
+      </Sidebar.Item>
+    </Sidebar.Section>
 
-  <Sidebar.Separator />
+    <Sidebar.Separator />
 
-  <Sidebar.Section title="설정">
-    <Sidebar.Item icon={<Icon name="gear" />} label="환경설정" shortcut="⌘," />
-  </Sidebar.Section>
+    <Sidebar.Section title="설정">
+      <Sidebar.Item icon={<Icon name="gear" />} label="환경설정" shortcut="⌘," />
+    </Sidebar.Section>
+  </Sidebar.Body>
 
   <Sidebar.Footer>
+    {/* Sidebar.Profile은 IdentityButton의 preset 래퍼 — 커스텀하려면 IdentityButton 직접 사용. */}
     <Sidebar.Profile name="희영" sub="admin@ctds.dev" avatar={{ status: "online" }} />
   </Sidebar.Footer>
 </Sidebar>
 
-// Collapsed — icon-only
+// 2. Brand 로고 전용 Header (워크스페이스 전환이 필요 없는 단일 제품)
+<Sidebar>
+  <Sidebar.Header>
+    <Sidebar.Brand symbol={<Icon name="rocket-launch" />} wordmark="CTDS" />
+  </Sidebar.Header>
+  {/* ... Body / Footer */}
+</Sidebar>
+
+// 3. Footer 프로필 + 위로 열리는 메뉴 (caret-up)
+<Sidebar.Footer>
+  <DropdownMenu>
+    <DropdownMenu.Trigger asChild>
+      <IdentityButton
+        avatar={{ src: user.avatar, status: "online" }}
+        name="희영"
+        sub="admin@ctds.dev"
+        trailing={<Icon name="caret-up" size={14} />}
+        aria-haspopup="menu"
+      />
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content side="top" align="start">
+      {/* 계정 전환 · 설정 · 로그아웃 */}
+    </DropdownMenu.Content>
+  </DropdownMenu>
+</Sidebar.Footer>
+
+// 4. Collapsed — icon-only (IdentityButton·Profile 모두 자동으로 아바타만 남음)
 <Sidebar collapsed>
   <Sidebar.Header>
     <Sidebar.Brand symbol={<Icon name="rocket-launch" />} />
   </Sidebar.Header>
-  <Sidebar.Section>
-    <Sidebar.Item icon={<Icon name="house" />} label="대시보드" active />
-  </Sidebar.Section>
+  <Sidebar.Body>
+    <Sidebar.Section>
+      <Sidebar.Item icon={<Icon name="house" />} label="대시보드" active />
+    </Sidebar.Section>
+  </Sidebar.Body>
 </Sidebar>
 ```

package/assets/prompts/components/spinner.md

@@ -0,0 +1,109 @@
+# Spinner
+
+### 원칙
+짧은 비동기 작업의 **로딩 신호**. 색은 currentColor로 묶여 부모 톤을 그대로 승계. **variant 미지정이 기본** — [[axes/motion]] 축의 `--loader-style`을 따라가서 bouncy=dots-bounce / standard=ring / calm=dots-fade로 자동 스왑. "버튼 안 로딩이 테마 바꾸면 같이 바뀌는" 축 추종 구조가 설계의 핵심이다. 긴 작업(파일 업로드 등 진행률이 있는 것)은 [[components/progress-bar]].
+
+### Do
+- Button `loading` prop이 자동으로 Spinner를 중앙에 overlay — 소비자가 직접 Spinner 꽂을 필요 없음.
+- 색이 필요하면 부모 요소에 `color: var(--accent)` 식으로 지정 — Spinner는 그대로 승계.
+- 페이지 로딩이면 중앙에 size=`lg` 하나로 충분. 과한 fullscreen overlay는 피한다.
+- variant 미지정이 default — Motion 축 바꾸면 모든 로더가 함께 바뀌는 게 설계 의도.
+
+### Don't
+- 진행률(퍼센트) 로딩에 쓰지 않는다 — [[components/progress-bar]].
+- 스켈레톤 자리에 Spinner 쓰지 않는다 — 레이아웃이 이미 그려지는 자리면 shimmer skeleton이 맞음.
+- 색을 하드코딩하지 않는다. currentColor가 부모 색을 승계하도록 두거나, 부모에 토큰 색을 걸 것.
+- `size="xs"`는 아이콘 크기 로더 전용(Button xs 안쪽). 독립적으로 쓸 땐 sm 이상.
+- variant를 소비 측에서 자꾸 override하지 않는다 — 축 추종이 "브랜드 톤 일관성"의 유일한 보장.
+
+### Fallback
+`size="sm"`, variant 미지정(= Motion 축 따라감), `label="Loading"`.
+
+### 관련
+- [[axes/motion]] — `--loader-style` 토큰을 축이 스왑
+- [[components/button]] — `loading` prop이 Spinner를 자동 overlay
+- [[components/progress-bar]] — 진행률 표시용 (Spinner와 역할 분리)
+
+### Props 시그니처
+```tsx
+<Spinner
+  size="xs | sm | md | lg"                                        // default: sm
+  variant="ring | dots-bounce | dots-fade | pulse | lottie-<name>" // default: Motion 축 따름
+  label={string}                                                  // SR 라벨. default: "Loading"
+/>
+```
+
+### Variant 매트릭스
+| variant | 시각 | 쓰임 |
+|---|---|---|
+| ring | 회전 반원 테두리 | 표준·중립. standard motion 자동 매핑 |
+| dots-bounce | 3 dot 순차 bounce | 표현력. bouncy motion 자동 매핑 |
+| dots-fade | 3 dot 순차 fade (위치 고정) | 미니멀. calm motion 자동 매핑 |
+| pulse | 단일 원 scale pulse | 특수(온보딩·대기 신호). 자동 매핑 없음 — 명시 지정만 |
+| `lottie-<name>` | 번들된 Lottie 로티 | 성격 있는 자리(AI 생성·온보딩·브랜드) |
+
+### Lottie 로티 (10종 번들)
+`lottie-react` 플레이어가 `/public/lottie/<name>.json`을 로드. 단색 로티는 `currentColor` 추종, 다색 로티는 원본 색 유지.
+
+| name | 성격 | colorBind |
+|---|---|---|
+| `lottie-rabbit` | 뛰어가는 토끼. 긴 작업·AI 생성 대기 | ✓ |
+| `lottie-infiniti` | 무한 루프 선. 네트워크·동기화 | ✓ |
+| `lottie-dots` | 그라데이션 dot 흐름. 포인트 로더 | — |
+| `lottie-spinner` | 표준 라인 스피너 | ✓ |
+| `lottie-clock` | 회전 시계 바늘. 처리 대기·타임아웃 | ✓ |
+| `lottie-cosmos` | 그라데이션 궤도. 몽환적·온보딩 | ✓ |
+| `lottie-diamond-star` | 다이아몬드 바운스. 성공·축하 | — |
+| `lottie-image-gen` | 이미지 생성 대기. AI 이미지 | ✓ |
+| `lottie-loading-square` | 회전하는 사각형. 미니멀 처리 | ✓ |
+
+**colorBind=✓** 로티는 Palette/Hue 축 바꾸면 로더 색도 자동 추종. **✗** 로티는 작가 의도된 다색이 그대로 유지됨.
+
+**사이즈 주의**: Lottie는 vectorized라 size가 작으면 디테일 뭉개짐. `size="md"` 이상 권장. Button loading 안에 Lottie 쓰는 건 비권장 — 기본 variant(dots/ring)가 적합.
+
+### Size 매트릭스
+IconButton 체계와 1:1 매칭. 로더는 캔버스를 다 채우지 않는 특성상 아이콘보다 한 단계 큰 bounds가 체감에 맞음.
+
+| size | 실제 크기 | 쓰임 |
+|---|---|---|
+| xs | 16px | Button xs 내부, 조밀한 인라인 |
+| sm | 20px | **기본**. 인라인 라벨 옆, 리스트 아이템, AIMessage generating |
+| md | 24px | 섹션 로딩, 카드 중앙 |
+| lg | 32px | 페이지 중앙 로딩, 모달 바디 로딩 |
+
+Lottie 로더는 캔버스 충전율이 다르므로 `visualScale`로 bounds를 꽉 채우도록 보정됨 — size만 고르면 체감이 일관되게 맞아야 함. 특정 Lottie가 작아 보이면 `lottieManifest.ts`의 `visualScale`을 올려 글로벌 보정, 사용처에서 size를 올리지 말 것.
+
+### 축 추종 매핑 (variant 미지정 시)
+| Motion | Spinner 자동 variant |
+|---|---|
+| bouncy | dots-bounce |
+| standard | ring |
+| calm | dots-fade |
+| none | ring (접근성 예외: 로딩 신호는 유지. `prefers-reduced-motion`은 상위 CSS가 처리) |
+
+### 색 바인딩
+Spinner는 `currentColor` 바인딩. 즉:
+- Button primary 안에서는 Button의 fg 색(흰색 등)
+- Button outline 안에서는 fg 기본색
+- 커스텀 자리에 색이 필요하면 부모에 `color: var(--accent)` 식으로 걸 것
+
+Palette·Hue 축이 바뀌어도 Spinner는 자동 추종 — 별도 색 지정 금지.
+
+### 조합 예시
+```tsx
+// Button loading — 소비자가 신경쓸 거 없음 (Button이 자동 처리)
+<Button loading>저장</Button>
+
+// 페이지 중앙 로딩
+<div style={{ display: "grid", placeItems: "center", minHeight: 240 }}>
+  <Spinner size="lg" />
+</div>
+
+// 리스트 아이템 inline 로딩
+<li>
+  <Spinner size="xs" /> 불러오는 중
+</li>
+
+// 축 추종 끄고 명시 variant
+<Spinner variant="pulse" size="md" />
+```

package/assets/prompts/components/user-message.md

@@ -0,0 +1,45 @@
+# User Message
+
+### 원칙
+사용자가 보낸 채팅 메시지. [[components/bubble]] + [[components/message-actions]] 조합. **오른쪽 정렬** 고정. 액션은 기본 호버 시만 노출 — 메시지 리스트가 액션 아이콘으로 어수선해지지 않게.
+
+### Do
+- 기본 구성: `shape=circular-drop, fill=translucent, tail=end` — 레퍼런스 톤.
+- 액션은 `[copy, edit]` 기본. `actionsVisibility="show" | "hover"`로 상시/호버.
+- 첨부 있으면 `before` slot에 [[components/attachment-thumb]] / [[components/attachment-chip]] 자유 조합. 상위에서 레이아웃 책임.
+- 매우 긴 글은 bubble이 max-width 안에서 wrap, 그보다 넘으면 자연스레 아래로.
+
+### Don't
+- 왼쪽 정렬하지 않는다 — user는 **항상 오른쪽**. 왼쪽은 AI/시스템.
+- 액션 라벨을 아이콘 옆에 노출하지 않는다 — title/aria-label만 (MessageActions 규약).
+- bubble 안에 복잡한 레이아웃(table·code block) 넣지 않는다 — 그건 AIMessage 영역.
+- 아바타·이름 넣지 않는다 — user 메시지는 암묵적으로 "나".
+
+### Fallback
+shape 애매하면 `circular-drop`, fill 애매하면 `translucent`, visibility 애매하면 `hover`.
+
+### 관련
+- [[components/bubble]] — 담는 그릇
+- [[components/message-actions]] — 액션 바
+- [[components/ai-message]] — 짝 컴포넌트
+- [[components/attachment-thumb]] / [[components/attachment-chip]] — before slot 조합
+
+### Props 시그니처
+```tsx
+<UserMessage
+  shape="rounded | circular-drop | circular | square"  // default: circular-drop
+  fill="none | solid | translucent | outline"          // default: translucent
+  size="md | lg"                                        // default: md
+  actionsVisibility="show | hover"                     // default: hover
+  actions={[{ kind: "copy" }, { kind: "edit" }]}       // 비우려면 []
+  before={ReactNode}                                   // 첨부·인용 등 bubble 위
+>
+  메시지 본문
+</UserMessage>
+```
+
+### 레이아웃
+- root: `flex-direction: column; align-items: flex-end; gap: space-1; width: 100%`
+- 메시지 리스트 안에서 각 UserMessage가 오른쪽에 자동 정렬됨.
+- Bubble `tail="end"` 고정 — 오른쪽 상단 각짐.
+- MessageActions `align="end"`.

package/assets/prompts/primitives/scroll.md

@@ -99,14 +99,20 @@
 
 ### 정답 패턴 (ChatInput이 쓰는 구조)
 
+핵심 결정: **wrapper에 padding 0, textarea에 상·하·좌·우 padding 전부**. 왜냐하면
+`overflow: auto` 요소에 padding을 두면 그 padding은 **scroll 시 고정** — 스크롤해도
+빈 띠가 상·하에 남아 "글이 padding에서 미리 잘린다"는 느낌을 줌. 반면 textarea의
+padding은 **자신의 content box 일부**로 취급돼, textarea 전체가 wrapper 안에서 scroll
+되면 padding도 함께 올라감.
+
 1. **root는 `padding: 0; overflow: hidden`** — scroll clip이 root border에서 생기도록.
-2. **별도 wrapper div(`.scroll`)에 overflow-y: auto + padding-top만**.
-3. **textarea는 flat, `padding-bottom`만** — 이게 scroll content의 일부가 됨.
+2. **wrapper div(`.scroll`)는 `overflow-y: auto; padding: 0`** — padding 두면 "빈 띠" 생김.
+3. **textarea는 상·하·좌·우 padding 전부 + `overflow: hidden`** — 자체 scroll 금지.
 
 ```css
 .root {
   padding: 0;
-  overflow: hidden;             /* radius 안쪽에서 scroll clip */
+  overflow: hidden;
   border-radius: var(--radius-sm);
   border: var(--hairline) solid var(--border);
 }
@@ -114,28 +120,33 @@
 .scroll {
   overflow-y: auto;
   max-height: calc(var(--text-base) * 1.5 * 8);
-  padding: var(--space-3) var(--space-3) 0;   /* top만 */
+  padding: 0;                                       /* 반드시 0 */
 }
 
 .textarea {
   display: block;
   width: 100%;
-  padding: 0 0 var(--space-3);                /* bottom만 */
+  box-sizing: border-box;
+  padding: var(--space-3) var(--space-4);           /* 상·하·좌·우 모두 */
   background: transparent;
   border: 0;
   outline: none;
   resize: none;
-  overflow: hidden;                           /* 자체 스크롤 금지 */
+  overflow: hidden;                                 /* textarea 자체 scroll 금지 */
   font: inherit;
   line-height: 1.5;
 }
 ```
 
-이 구조에서 짧은 글은 wrapper 안에 스크롤 없음, padding이 "숨 공간"처럼 보임.
-긴 글은:
-- wrapper max-height 초과 → wrapper 스크롤
-- 아래로 스크롤 시 글이 wrapper padding-top을 통과해 **root 상단 border에서 자연스레 clip**
-- 끝까지 스크롤 시 글이 textarea padding-bottom을 통과해 **root 하단 border에서 자연스레 clip**
+이 구조에서:
+- **짧은 글**: textarea가 자신의 padding 포함 높이 → wrapper 안에 스크롤 없음.
+- **긴 글**: textarea height > wrapper max-height → wrapper 스크롤 시 textarea 전체가 올라감.
+  - 상단에서 textarea padding-top을 지나며 글이 **root 상단 border에서 자연스레 clip**.
+  - 하단에서 textarea padding-bottom을 지나며 글이 **root 하단 border에서 자연스레 clip**.
+
+### 금지 패턴 추가 (이번 삽질로 확인)
+
+❌ **"wrapper에 padding-top, textarea에 padding-bottom"** — 전에 썼던 패턴. wrapper의 padding-top이 scroll 시 "빈 띠"로 남아 글이 그 아래에서 clip돼 어색함.
 
 ### 함께 적용되는 레이아웃 룰
 

package/assets/skill/SKILL.md

@@ -29,6 +29,7 @@ Layer 1(shadcn 방식 컴포넌트 코드) + Layer 2(AI 프롬프트 컨텍스
 |---|---|
 | 컴포넌트 신규 제작·variant/prop 수정 (`web/components/<Name>/` 또는 `prompts/components/<name>.md`) | `ctds-component` |
 | 페이지·대시보드·레이아웃 조합 (`web/app/**/page.tsx`) | `ctds-page` |
+| **와이어프레임/기존 페이지를 CTDS로 번역·교체** (사용자가 "CTDS로 바꿔줘/교체해줘/일괄 변경" 요청, 또는 와이어프레임 코드·이미지를 입력) | `ctds-wireframe` |
 | 테마 프리셋 생성·수정 (`prompts/themes/*` 또는 `web/app/theme-demo/*`) | `ctds-theme` |
 | 코드 검증 (하드코딩·유령 토큰·메모리 규칙·문서-코드 동기화) | `ctds-validate` |
 | 3D 아이콘 일러스트 자산 생성 | `ctds-illust` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI",
   "type": "module",
   "bin": {