@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/skills/components/checkbox/SKILL.md

@@ -0,0 +1,149 @@
+---
+name: 'checkbox'
+description: 'Checkbox — 폼과 함께 제출되는 하나의 이진 선택이며, 일부만 이루어진 선택을 위한 세 번째 상태인 indeterminate를 가집니다. 다른 이름: checkbox, tick box, check box, agree, consent, 체크박스, 확인란, 체크 상자, 동의 체크.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/checkbox.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/checkbox.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Checkbox
+
+> 폼과 함께 제출되는 하나의 이진 선택이며, 일부만 이루어진 선택을 위한 세 번째 상태인 indeterminate를 가집니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Checkbox`
+- 분류: `form-controls`
+- 수명 주기: `active`
+
+## Do
+
+> 그 자체로 성립하며 다른 모든 선택과 독립적으로 참이나 거짓이 될 수 있는 선택 — 약관 동의, 필터 켜기, 한 행 선택. 부모-자식 선택에도 맞는 컨트롤이며, 이때 indeterminate는 부모가 어느 한쪽인 척하지 않으면서 자식이 일부만 선택되었음을 말해줍니다.
+
+## Don't
+
+> 여러 개 중 정확히 하나를 고르는 선택에 Checkbox 묶음을 쓰지 마세요 — 그것은 RadioGroup이며, Checkbox로는 사용자가 직접 시도해 보기 전까지 선택지가 배타적이라는 것을 알 방법이 없습니다. 제출 단계 없이 즉시 효과가 나타나는 것에는 Checkbox를 쓰지 마세요. 그것은 설정으로 읽히며, 그렇다고 말해주는 컨트롤은 Switch입니다. indeterminate를 사용자가 선택할 수 있는 세 번째 값으로 모델링하지 마세요. 그것은 컴포넌트가 도출하는 상태이지, 클릭으로 만들어지는 상태가 결코 아닙니다.
+
+## Anti-patterns
+
+> 체크 상태를 `checked`라는 prop에 바인딩하는 것. Synapse의 표준 어휘는 상태를 `value`/`defaultValue`/`onValueChange`에, 제출되는 문자열을 `formValue`에 둡니다. HTML에서 "value"가 갖는 두 가지 의미가 모두 그 이름을 유지할 수는 없기 때문입니다(`packages/react/src/system/vocabulary.ts`). 시스템의 모든 토글이 이를 따르므로, 한 번 익히면 된다는 것이 요점입니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Switch` (`switch`)
+- `RadioGroup` (`radio-group`)
+- `Toggle` (`toggle`)
+- `ToggleGroup` (`toggle-group`)
+
+## 가져오기
+
+```tsx
+import { Checkbox } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 4개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Checkbox.Root>
+  <Checkbox.Label />
+  <Checkbox.Control>
+    <Checkbox.Indicator />
+  </Checkbox.Control>
+</Checkbox.Root>
+```
+
+- `Checkbox.Root` — 최상위에 놓입니다
+- `Checkbox.Label` — `Root` 안에 놓입니다
+- `Checkbox.Control` — `Root` 안에 놓입니다
+- `Checkbox.Indicator` — `Control` 안에 놓입니다
+
+### part가 렌더링하고 소유하는 요소
+
+- `hiddenInput`, `Checkbox.Root`가 렌더링합니다 — 포커스, 키보드 조작, 폼 제출을 담당하는 네이티브 체크박스. Root가 렌더링하며 의도적으로 part가 아닙니다. anatomy 키가 없는 part는 이 Registry 자체의 part 검사를 통과하지 못하며, 사용처가 폼과 접근성 트리가 의존하는 요소를 옮기거나 스타일을 바꾸거나 빠뜨릴 수 있게 되기 때문입니다.
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 12개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `value` — `CheckedValue`, 선택. 제어되는 체크 상태.
+- `defaultValue` — `CheckedValue`, 선택. 비제어 초기 체크 상태. `value`가 주어지면 무시됩니다.
+- `onValueChange` — `(details: ValueChangeDetails<CheckedValue>) => void`, 선택. 제어 여부와 무관하게 체크 상태가 바뀔 때마다 알림을 받습니다.
+- `formValue` — `string`, 선택. 체크되었을 때 `name` 아래로 제출되는 문자열. 네이티브 체크박스와 마찬가지로 기본값은 `"on"`입니다. 상태를 나타내는 `value`와는 별개입니다.
+- `name` — `string`, 선택. 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다.
+- `form` — `string`, 선택. 폼 바깥에 렌더된 체크박스를 id로 폼과 연결합니다.
+- `disabled` — `boolean`, 선택. 비활성화된 체크박스는 제출되지 않고 반응하지도 않습니다.
+- `readOnly` — `boolean`, 선택. 읽기 전용 체크박스는 값을 제출하지만 바꿀 수는 없습니다.
+- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알려집니다.
+- `required` — `boolean`, 선택. 제약 검증: 폼이 제출되려면 체크박스가 체크되어 있어야 합니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 예.
+
+- `input[type=checkbox]`로 제출합니다.
+- 제출 값은 `formValue`에서 옵니다.
+- 아무것도 설정하지 않으면 `on`을 제출합니다.
+
+> 숨겨진 input이 접근 가능하고 포커스를 받는 컨트롤이며 — 눈에 보이는 `control` part가 aria-hidden인 쪽입니다. `disabled`이면 제출되지 않고, `required`는 상자가 반드시 체크되어야 함을 뜻합니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 컬렉션이 아니라 하나의 이진 값을 보관하므로 비어 있을 수 있는 집합이 없습니다. 체크할 대상이 없는 Checkbox는 애초에 렌더링되지 말았어야 할 Checkbox입니다.
+- `loading-state` — 값이 아직 로드 중인 체크박스는 비활성화된 체크박스에 사용처 자신의 스켈레톤을 더한 것입니다. 로딩 part는 비활성 상태를 중복할 뿐입니다.
+- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 보고되고 aria-invalid로 알려집니다. 그 이유를 설명하는 메시지는 체크박스가 아니라 이를 둘러싼 필드에 속합니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> aria-labelledby를 통해 Label part에서 가져옵니다. Label 없이 렌더링된 Checkbox에는 이름이 없으며, 이는 조용히 채워지는 대신 접근성 감사에서 드러납니다.
+
+### 포커스
+
+> 포커스는 숨겨진 네이티브 input에 있습니다. 이 input은 시각적으로만 숨겨져 있을 뿐 보조 기술로부터 숨겨지지도, 탭 순서에서 빠지지도 않습니다. 포커스 링은 눈에 보이는 control에 그려집니다.
+
+### 불확정 상태
+
+> mixed로 알려집니다. 스타일만 다른 unchecked 상태가 아니라 독립된 세 번째 상태입니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `binary-choice`, `multi-select`, `tri-state-checkbox`, `form-value`, `readonly-display`.
+- 다른 이름: `checkbox`, `tick box`, `check box`, `agree`, `consent`, `체크박스`, `확인란`, `체크 상자`, `동의 체크`.
+- 어휘 상태: `controlled`.

package/skills/components/clipboard/SKILL.md

@@ -0,0 +1,139 @@
+---
+name: 'clipboard'
+description: 'Clipboard — 문자열을 복사하고 복사했다고 알린 뒤 타임아웃이 지나면 기본 상태로 돌아갑니다. 브라우저가 쓰기를 거부하는 사용자를 위해 trigger 옆에 실제 읽기 전용 필드를 둡니다. 다른 이름: clipboard, copy button, copy to clipboard, share link, copy field, 클립보드, 복사 버튼, 클립보드에 복사, 링크 복사.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/clipboard.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/clipboard.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Clipboard
+
+> 문자열을 복사하고 복사했다고 알린 뒤 타임아웃이 지나면 기본 상태로 돌아갑니다. 브라우저가 쓰기를 거부하는 사용자를 위해 trigger 옆에 실제 읽기 전용 필드를 둡니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Clipboard`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 사용자가 다른 곳에 붙여넣을 것으로 예상되는 모든 값 — API 키, 초대 링크, 명령어, 참조 번호. 두 인디케이터는 건너뛰지 말고 구성할 가치가 있는 part입니다. 상태마다 요소를 하나씩 두면 machine이 해당하지 않는 쪽을 숨길 수 있고, 스크린 리더는 버튼의 이름이 바뀌었다는 것을 듣게 됩니다.
+
+## Don't
+
+> 문단처럼 사용자가 어차피 직접 선택할 콘텐츠에는 쓰지 마세요. 산문에 붙은 복사 버튼은 아무도 누르지 않는 컨트롤입니다. 값을 얻는 유일한 방법으로 쓰지 마세요 — 브라우저는 사용자 제스처 밖에서, 그리고 일부 임베드된 환경에서 클립보드 쓰기를 거부하며, 그래서 필드가 선택 사항이 아니라 컴포넌트의 일부입니다. 긴 타임아웃을 쓰지 마세요. 사용자의 주의보다 오래 남는 확인 표시는 더 이상 '방금'을 뜻하지 않습니다.
+
+## Anti-patterns
+
+> 상태마다 요소를 하나씩 렌더링하는 대신 인디케이터 하나의 children을 바꿔 끼우는 것. children이 교체되는 라이브 영역은 여러 스크린 리더에서 아무것도 알리지 않으므로, 컴포넌트 전체가 존재하는 이유인 확인 알림이 정확히 사라지게 됩니다 — 그래서 getter가 `copied`를 받고 제품이 두 요소를 모두 작성합니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `QrCode` (`qr-code`)
+- `Avatar` (`avatar`)
+
+## 가져오기
+
+```tsx
+import { Clipboard } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 6개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Clipboard.Root>
+  <Clipboard.Control>
+    <Clipboard.Trigger>
+      <Clipboard.Indicator />
+    </Clipboard.Trigger>
+    <Clipboard.Input />
+  </Clipboard.Control>
+  <Clipboard.Label />
+</Clipboard.Root>
+```
+
+- `Clipboard.Root` — 최상위에 놓입니다
+- `Clipboard.Control` — `Root` 안에 놓입니다
+- `Clipboard.Trigger` — `Control` 안, 또는 `Root` 안에 놓입니다
+- `Clipboard.Indicator` — `Trigger` 안에 놓입니다
+- `Clipboard.Input` — `Control` 안, 또는 `Root` 안에 놓입니다
+- `Clipboard.Label` — `Root` 안에 놓입니다
+
+### part가 렌더링하고 소유하는 요소
+
+- `status`, `Clipboard.Root`가 렌더링합니다 — 복사 성공을 알리는, 시각적으로 숨긴 `role="status"` 라이브 영역. 의도적으로 part가 아닙니다. 라이브 영역은 이미 담고 있는 텍스트의 변화만 알리므로, 첫 렌더링부터 존재하며 절대 옮겨지거나 다시 마운트되지 않는 하나의 요소여야 합니다. 사용처가 이를 빠뜨리거나 옮기거나 조건부로 렌더링할 수 있다면 알림이 조용히 사라집니다. machine에는 이를 위한 자체 getter가 없으므로, Root가 indicator getter의 copied 상태로부터 이를 렌더링하고 확인 표시가 보이는 동안 `clipboard.trigger.copiedLabel`을 기록합니다.
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 7개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `value` — `string`, 선택. 복사되는 문자열이며, 제어됩니다.
+- `defaultValue` — `string`, 선택. 비제어 초기 문자열. `value`가 주어지면 무시됩니다.
+- `onValueChange` — `(details: ValueChangeDetails<string>) => void`, 선택. 제어 여부와 무관하게 문자열이 바뀔 때마다 알림을 받습니다.
+- `onStatusChange` — `(details: ClipboardStatusChangeDetails) => void`, 선택. 복사가 성공할 때, 그리고 확인 표시가 사라질 때 다시 알림을 받습니다.
+- `timeout` — `number`, 선택. 확인 표시가 유지되는 시간이며, 밀리초 단위입니다. 기본값은 3000입니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 값이 비어 있는 클립보드는 빈 문자열을 복사하며, 이는 누락된 결과가 아니라 유효한 결과입니다. 복사할 것이 없는 제품은 클립보드를 렌더링하지 않으며, 이는 이 컴포넌트 이전에 내려지는 결정입니다.
+- `loading-state` — 쓰기는 마이크로태스크 안에서 완료되고, 그 뒤를 확인 표시가 잇습니다. 클릭과 체크 표시 사이의 스피너는 읽을 수 있는 시간보다 짧게 보일 것이며, 정작 중요한 유일한 피드백을 대체해 버립니다.
+- `error-state` — 거부된 쓰기는 컴포넌트를 기본 상태에 그대로 둡니다 — 확인 표시가 나타나지 않는 것이 정직한 신호입니다 — 그리고 읽고 선택할 수 있는 input이 해결책입니다. 필드가 스타일만 입힌 텍스트가 아니라 실제 input인 이유가 이것입니다. 그것은 장식이 아니라 대비책입니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> trigger는 `clipboard.trigger.label`("Copy")로, 확인 표시가 보이는 동안에는 `clipboard.trigger.copiedLabel`("Copied")로 이름이 붙으며, 이는 machine의 `translations.triggerLabel`을 거쳐 전달됩니다. Root는 또한 시각적으로 숨긴 영구적인 role="status" 영역 하나를 렌더링합니다. 이 영역은 복사가 성공할 때까지 비어 있다가 성공하면 `clipboard.trigger.copiedLabel`을 읽어주므로, 포커스를 옮기지 않고도 확인이 알려집니다.
+
+### 포커스
+
+> 복사 후에도 포커스는 trigger에 머무릅니다. 아무것도 포커스를 필드로 옮기지 않는데, 복사를 누른 사용자는 할 일을 마쳤고 포커스가 튀면 요청하지 않은 필드를 알리게 되기 때문입니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 이 machine은 방향을 받지 않습니다. 컨트롤은 레시피를 통해 논리적 인라인 방향으로 배치되며, 동작 중 텍스트 방향을 읽는 부분은 없습니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `copy-to-clipboard`, `copy-confirmation`, `readonly-fallback`, `share-link`.
+- 다른 이름: `clipboard`, `copy button`, `copy to clipboard`, `share link`, `copy field`, `클립보드`, `복사 버튼`, `클립보드에 복사`, `링크 복사`.
+- 어휘 상태: `controlled`.

package/skills/components/collapsible/SKILL.md

@@ -0,0 +1,130 @@
+---
+name: 'collapsible'
+description: 'Collapsible — trigger가 제자리에서 보이고 숨기는 하나의 콘텐츠 영역으로, 떠 있는 레이어 없이 문서 흐름을 벗어나지 않습니다. 다른 이름: disclosure, expander, show more, read more, toggle section, 콜랩서블, 접기 펼치기, 더보기, 토글 섹션.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/collapsible.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/collapsible.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Collapsible
+
+> trigger가 제자리에서 보이고 숨기는 하나의 콘텐츠 영역으로, 떠 있는 레이어 없이 문서 흐름을 벗어나지 않습니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Collapsible`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 페이지의 다른 모든 영역과 무관하게 보임 여부가 정해지는 하나의 영역. 콘텐츠가 사용자에게 필요 없을 수도 있는 부차적인 세부 정보이고, 이를 숨겨도 페이지의 나머지가 뜻하는 바가 바뀌지 않을 때 쓰세요.
+
+## Don't
+
+> 한 번에 하나만 열려야 하는 곳에 여러 개의 Collapsible을 쓰지 마세요 — 그것은 상호 배타성과 공유된 키보드 모델을 소유하는 Accordion이며, Collapsible을 손으로 조율하면 둘 다 조악하게 재현하게 됩니다. 사용자가 눈앞의 작업을 완료하는 데 필요한 콘텐츠를 숨기는 데 쓰지 마세요. 숨겨진 콘텐츠는 모든 브라우저의 페이지 내 검색에서 찾히지는 않으며, 닫힌 영역 안의 폼 필드는 고칠 대상이 화면에 보이지 않는 채로 유효성 검사에 실패할 수 있습니다.
+
+## Anti-patterns
+
+> 컴포넌트마다 높이를 애니메이션하는 것. 진입/퇴장 생명주기는 Synapse에서 뒤로 미뤄둔 작업이며, 컴포넌트별 애니메이션은 나중에 그 생명주기가 도입될 때 채택된 모든 곳에서 걷어내야 할 대상이 됩니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Accordion` (`accordion`)
+- `Tabs` (`tabs`)
+- `Popover` (`popover`)
+
+## 가져오기
+
+```tsx
+import { Collapsible } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 4개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Collapsible.Root>
+  <Collapsible.Trigger>
+    <Collapsible.Indicator />
+  </Collapsible.Trigger>
+  <Collapsible.Content />
+</Collapsible.Root>
+```
+
+- `Collapsible.Root` — 최상위에 놓입니다
+- `Collapsible.Trigger` — `Root` 안에 놓입니다
+- `Collapsible.Content` — `Root` 안에 놓입니다
+- `Collapsible.Indicator` — `Trigger` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 6개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `open` — `boolean`, 선택. 제어되는 열림 상태.
+- `defaultOpen` — `boolean`, 선택. 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다.
+- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 제어 여부와 무관하게 공개 영역이 열리거나 닫힐 때마다 알림을 받습니다.
+- `disabled` — `boolean`, 선택. 비활성화된 Collapsible은 자신의 trigger에 반응하지 않습니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 보관하는 값이 없습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — Collapsible은 주어진 콘텐츠를 무엇이든 렌더링합니다. 컬렉션이 없으므로 보여줄 것이 없는 상태도 존재하지 않습니다.
+- `loading-state` — 디스클로저는 동기적으로 결정됩니다. 로드되는 콘텐츠는 사용처의 것이며, content part 안에 속합니다.
+- `error-state` — 컴포넌트가 실패할 일이 없습니다. 펼쳐진 콘텐츠 안의 오류는 컴포넌트가 아니라 그 콘텐츠의 것입니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> trigger의 이름은 사용처의 콘텐츠입니다. 여기서는 기본값을 제공하지 않으므로, 이름 없는 trigger는 Synapse가 조용히 이름을 채우는 대신 이름이 없다는 사실이 그대로 드러납니다.
+
+### 포커스
+
+> 영역이 열려도 포커스는 trigger에 머무릅니다. 디스클로저는 대화상자처럼 페이지를 장악하지 않으므로, 컴포넌트는 결코 포커스를 옮기지 않습니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `expand-collapse`, `progressive-disclosure`.
+- 다른 이름: `disclosure`, `expander`, `show more`, `read more`, `toggle section`, `콜랩서블`, `접기 펼치기`, `더보기`, `토글 섹션`.
+- 어휘 상태: `controlled`.

package/skills/components/color-picker/SKILL.md

@@ -0,0 +1,216 @@
+---
+name: 'color-picker'
+description: 'ColorPicker — 눈으로 고르는 색상: 2차원 채도·밝기 영역, 채널별 슬라이더, 숫자 입력, 스와치 팔레트, 스포이드로 이루어지며, 모두 CSS 색상 문자열로 표현되는 하나의 값을 다룹니다. 다른 이름: color picker, colour picker, swatch, palette, eyedropper, 색상 선택기, 컬러 피커, 색상 팔레트, 스포이드.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/color-picker.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/color-picker.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# ColorPicker
+
+> 눈으로 고르는 색상: 2차원 채도·밝기 영역, 채널별 슬라이더, 숫자 입력, 스와치 팔레트, 스포이드로 이루어지며, 모두 CSS 색상 문자열로 표현되는 하나의 값을 다룹니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `ColorPicker`
+- 분류: `range-and-drawing`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### 국제화 — machine 번역 미지원
+
+- 충족하지 못하는 것: machine이 `translations`를 받지 않아, 영어 문자열을 part별로 덮어써서 대체합니다. 잘못된 값 상태는 trigger·썸·채널 입력의 `aria-invalid`로만 보조 기술에 전달됩니다.
+- 의도한 이유: 업스트림 machine의 한계를 part별 보정으로 메운 결과입니다.
+- 사용 시 유의점: 잘못된 값의 이유는 보이는 오류 문구로 따로 제공하세요. `aria-invalid`만으로는 무엇이 잘못됐는지 알 수 없습니다.
+
+## Do
+
+> 임의의 색상을 눈으로 고르는 경우 — 테마 강조색, 레이블 색상, 그리기 도구의 잉크 — 처럼 사용자가 고르는 동안 색상을 봐야 하고 고정된 목록으로는 충분하지 않은 곳. 또한 화면에 이미 있는 무언가에 색상을 맞춰야 하는 곳이며, 스포이드가 바로 그 용도입니다.
+
+## Don't
+
+> 디자인된 팔레트에서 고르는 경우에는 ColorPicker를 쓰지 마세요. 스와치 그룹이나 이름 붙은 색상의 RadioGroup은 제품의 색상을 일관되게 유지하며, 자유로운 피커는 언젠가 누군가 대비 기준에 못 미치는 색상을 배포하게 만듭니다. 값이 색상이 아니라 토큰인 곳에서는 쓰지 마세요 — 토큰의 현재 hex가 아니라 토큰 자체를 바인딩하세요. 고른 색상이 칠하는 대상에서 의미 전달을 색상에만 의존하지 마세요.
+
+## Anti-patterns
+
+> machine의 Color 객체를 공개 값으로 노출하는 것. 그러면 색상을 바인딩하는 모든 제품이 업스트림 패키지를 가져와 업스트림 클래스에 맞춰 타입을 지정해야 하고, 업스트림 리팩터링이 Synapse 계약의 파괴적 변경이 됩니다. 공개 값은 CSS 색상 문자열이며, 경계에서 해석됩니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Select` (`select`)
+- `Popover` (`popover`)
+- `AngleSlider` (`angle-slider`)
+- `Slider` (`slider`)
+
+## 가져오기
+
+```tsx
+import { ColorPicker } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 24개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<ColorPicker.Root>
+  <ColorPicker.Label />
+  <ColorPicker.Control>
+    <ColorPicker.Trigger>
+      <ColorPicker.TransparencyGrid />
+    </ColorPicker.Trigger>
+  </ColorPicker.Control>
+  <ColorPicker.Positioner>
+    <ColorPicker.Content>
+      <ColorPicker.Area>
+        <ColorPicker.AreaThumb />
+        <ColorPicker.AreaBackground />
+      </ColorPicker.Area>
+      <ColorPicker.ValueText />
+      <ColorPicker.ChannelSlider>
+        <ColorPicker.ChannelSliderTrack />
+        <ColorPicker.ChannelSliderThumb />
+      </ColorPicker.ChannelSlider>
+      <ColorPicker.ChannelSliderLabel />
+      <ColorPicker.ChannelSliderValueText />
+      <ColorPicker.ChannelInput />
+      <ColorPicker.SwatchGroup>
+        <ColorPicker.SwatchTrigger>
+          <ColorPicker.SwatchIndicator />
+          <ColorPicker.Swatch />
+        </ColorPicker.SwatchTrigger>
+      </ColorPicker.SwatchGroup>
+      <ColorPicker.EyeDropperTrigger />
+      <ColorPicker.FormatTrigger />
+      <ColorPicker.FormatSelect />
+    </ColorPicker.Content>
+  </ColorPicker.Positioner>
+</ColorPicker.Root>
+```
+
+- `ColorPicker.Root` — 최상위에 놓입니다
+- `ColorPicker.Label` — `Root` 안에 놓입니다
+- `ColorPicker.Control` — `Root` 안에 놓입니다
+- `ColorPicker.Trigger` — `Control` 안에 놓입니다
+- `ColorPicker.Positioner` — `Root` 안에 놓입니다
+- `ColorPicker.Content` — `Positioner` 안에 놓입니다
+- `ColorPicker.Area` — `Content` 안에 놓입니다
+- `ColorPicker.AreaThumb` — `Area` 안에 놓입니다
+- `ColorPicker.ValueText` — `Content` 안에 놓입니다
+- `ColorPicker.AreaBackground` — `Area` 안에 놓입니다
+- `ColorPicker.ChannelSlider` — `Content` 안에 놓입니다
+- `ColorPicker.ChannelSliderLabel` — `Content` 안에 놓입니다
+- `ColorPicker.ChannelSliderTrack` — `ChannelSlider` 안에 놓입니다
+- `ColorPicker.ChannelSliderThumb` — `ChannelSlider` 안에 놓입니다
+- `ColorPicker.ChannelSliderValueText` — `Content` 안에 놓입니다
+- `ColorPicker.ChannelInput` — `Content` 안, 또는 `Control` 안에 놓입니다
+- `ColorPicker.TransparencyGrid` — `Trigger` 안에 놓입니다
+- `ColorPicker.SwatchGroup` — `Content` 안에 놓입니다
+- `ColorPicker.SwatchTrigger` — `SwatchGroup` 안에 놓입니다
+- `ColorPicker.SwatchIndicator` — `SwatchTrigger` 안에 놓입니다
+- `ColorPicker.Swatch` — `SwatchTrigger` 안, 또는 `Trigger` 안에 놓입니다
+- `ColorPicker.EyeDropperTrigger` — `Content` 안에 놓입니다
+- `ColorPicker.FormatTrigger` — `Content` 안에 놓입니다
+- `ColorPicker.FormatSelect` — `Content` 안에 놓입니다
+
+### part가 렌더링하고 소유하는 요소
+
+- `hiddenInput`, `ColorPicker.Root`가 렌더링합니다 — 선택된 색상을 폼 제출에 실어 보내는 숨겨진 필드. Root가 렌더링하며 의도적으로 part가 아닙니다. anatomy 키가 없는 part는 이 Registry 자체의 part 검사를 통과하지 못하며, 사용처가 폼이 의존하는 요소를 옮기거나 스타일을 바꾸거나 빠뜨릴 수 있게 되기 때문입니다.
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 22개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `value` — `string`, 선택. 제어되는 색이며, 어떤 CSS 색 문자열이든 됩니다.
+- `defaultValue` — `string`, 선택. 비제어 초기 색. `value`가 주어지면 무시됩니다.
+- `onValueChange` — `(details: ColorPickerValueChangeDetails) => void`, 선택. 드래그의 매 단계를 포함해, 값이 바뀔 때마다 알림을 받습니다.
+- `onValueChangeEnd` — `(details: ColorPickerValueChangeDetails) => void`, 선택. 드래그가 끝난 뒤 한 번 알림을 받습니다 — 저장할 때 쓸 콜백입니다.
+- `open` — `boolean`, 선택. 제어되는 떠 있는 레이어의 열림 상태.
+- `defaultOpen` — `boolean`, 선택. 비제어 초기 열림 상태.
+- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 피커가 열리거나 닫힐 때마다 알림을 받습니다.
+- `format` — `ColorPickerFormat`, 선택. 숫자 입력과 슬라이더가 다루는, 제어되는 채널 형식.
+- `defaultFormat` — `ColorPickerFormat`, 선택. 비제어 초기 형식. 기본값은 `rgba`입니다.
+- `onFormatChange` — `(details: ColorPickerFormatChangeDetails) => void`, 선택. 형식이 바뀔 때마다 알림을 받습니다.
+- `inline` — `boolean`, 선택. 피커를 떠 있는 레이어가 아니라 제자리에 렌더링합니다.
+- `closeOnSelect` — `boolean`, 선택. 색 견본을 고르면 떠 있는 레이어를 닫습니다. 기본값은 false입니다.
+- `openAutoFocus` — `boolean`, 선택. 열릴 때 포커스를 콘텐츠 안으로 옮깁니다. 기본값은 true입니다.
+- `positioning` — `ColorPickerPositioning`, 선택. 떠 있는 레이어가 놓이는 위치.
+- `name` — `string`, 선택. 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다.
+- `disabled` — `boolean`, 선택. 비활성화된 ColorPicker는 제출되지 않고 반응하지도 않습니다.
+- `readOnly` — `boolean`, 선택. 읽기 전용 ColorPicker는 값을 제출하지만 바꿀 수는 없습니다.
+- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알려집니다.
+- `required` — `boolean`, 선택. 제약 검증: 폼이 제출되려면 색이 골라져 있어야 합니다.
+- `translations` — `TranslationOverrides`, 선택. 이 ColorPicker에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 예.
+
+- `input[type=text][hidden]`으로 제출합니다.
+- 항목은 제출 값을 담는 prop을 기록하지 않습니다.
+- 아무것도 설정하지 않으면 `현재 형식의 CSS 문자열로 나타낸 색`을 제출합니다.
+
+> machine의 숨겨진 input은 getter 인자를 받지 않고 정확히 하나만 존재하며, 이는 Synapse의 rootOwnedGetters 이음매가 표현할 수 있는 형태입니다. `disabled`이면 제출되지 않고, `required`는 색상을 반드시 골라야 함을 뜻합니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 정확히 하나의 색상을 보관하고 기본값이 검정이므로 비어 있을 수 있는 집합이 없습니다. 스와치 팔레트는 사용처가 제공하는 콘텐츠이며, 스와치가 없는 팔레트는 이 컨트롤의 상태가 아니라 사용처가 통제하는 구성입니다.
+- `loading-state` — 저장된 색상이 아직 도착하지 않은 피커는 비활성화된 피커에 사용처 자신의 스켈레톤을 더한 것입니다. 스포이드는 비동기이지만, 컴포넌트가 표시하는 상태가 아니라 값으로 귀결됩니다.
+- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 보고되고 aria-invalid로 알려집니다. 해석할 수 없는 채널 입력은 드러내지 않고 machine이 바로잡으며, 거부된 색상을 설명하는 메시지는 이를 둘러싼 필드에 속합니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> Label part에서 가져옵니다. machine이 하드코딩한 모든 aria-label — trigger, 영역 썸, 채널 슬라이더 썸, 채널 입력, 스포이드, 스와치 trigger, 두 형식 컨트롤 — 은 amendBehaviorProps를 통해 provider의 `colorPicker.*` 키로 대체되며, 컴포넌트는 인스턴스별 `translations` prop을 받습니다.
+
+### 포커스
+
+> 피커가 열리면 포커스가 콘텐츠 안으로 옮겨가고, 닫히면 trigger로 돌아갑니다. 각 썸이 독립된 탭 정지 지점이므로, 포인터 없이도 채널별로 색상을 조정할 수 있습니다.
+
+### 알려진 한계
+
+> machine이 translations prop을 받지 않으므로, machine의 영어는 machine으로 전달되는 대신 amendBehaviorProps에서 part별로 대체됩니다. 영역 썸의 값 텍스트는 machine 자신의 숫자로 다시 구성되며, 채널 슬라이더 썸은 machine의 `"hue 240"` 값 텍스트를 버려 스크린 리더가 숫자만 읽게 합니다. machine은 data-invalid만 내보내므로, `invalid`는 trigger, 썸, 채널 입력의 aria-invalid로 보조 기술에 전달됩니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `color-selection`, `swatch-palette`, `eyedropper`, `alpha-channel`, `form-value`, `floating-layer`, `readonly-display`.
+- 다른 이름: `color picker`, `colour picker`, `swatch`, `palette`, `eyedropper`, `색상 선택기`, `컬러 피커`, `색상 팔레트`, `스포이드`.
+- 어휘 상태: `controlled`.