@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/skills/components/alert/SKILL.md

@@ -0,0 +1,126 @@
+---
+name: 'alert'
+description: 'Alert — 조건이 해결될 때까지 페이지에 남아 관련된 대상 옆에서 상태를 알리는 메시지입니다. `type`으로 정보, 성공, 경고, 오류 수준을 고르면 배경과 테두리 색, 기본 아이콘, 보조 기술에 알리는 역할이 함께 정해집니다. 다른 이름: alert, callout, banner, notice, inline message, message bar, 알림, 안내 문구, 경고 문구, 배너.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/alert.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/alert.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Alert
+
+> 조건이 해결될 때까지 페이지에 남아 관련된 대상 옆에서 상태를 알리는 메시지입니다. `type`으로 정보, 성공, 경고, 오류 수준을 고르면 배경과 테두리 색, 기본 아이콘, 보조 기술에 알리는 역할이 함께 정해집니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Alert`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 해결될 때까지 보여야 하는 상태를 그 상태가 걸린 대상 가까이에 알릴 때 쓰세요 — 저장 공간이 부족하다는 경고, 연결이 끊긴 데이터셋, 폼 위의 제출 실패 요약처럼. 수준은 `type` 하나로 고르며, 해결 동작이 있으면 Description 안에 Button을 두세요.
+
+## Don't
+
+> 스스로 사라지는 짧은 알림에는 쓰지 마세요 — 그것은 Toast나 Snackbar입니다. 입력 하나의 검증 오류는 Field.ErrorText가 그 입력에 연결해 알립니다. 사용자가 반드시 답해야 하는 확인에는 alertdialog 역할의 Dialog를 쓰세요. 닫기 버튼은 part로 제공하지 않으므로, 닫을 수 있어야 하면 사용처가 Button을 넣고 렌더링 여부를 직접 관리합니다.
+
+## Anti-patterns
+
+> 모든 안내에 `type="error"`를 주는 것. error는 role="alert"라서 하던 일을 끊고 즉시 읽히므로, 오류가 아닌 내용까지 그렇게 알리면 스크린 리더 사용자는 흐름을 계속 방해받습니다. 페이지를 여는 순간 이미 있던 안내는 status로도 충분합니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `Toast` (`toast`)
+- `Snackbar` (`snackbar`)
+- `Field` (`field`)
+- `Dialog` (`dialog`)
+
+## 가져오기
+
+```tsx
+import { Alert } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 4개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Alert.Root>
+  <Alert.Indicator />
+  <Alert.Title />
+  <Alert.Description />
+</Alert.Root>
+```
+
+- `Alert.Root` — 최상위에 놓입니다
+- `Alert.Indicator` — `Root` 안에 놓입니다
+- `Alert.Title` — `Root` 안에 놓입니다
+- `Alert.Description` — `Root` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 2개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `type` — `AlertType`, 선택. 알리는 조건의 수준. 색, 기본 아이콘, 역할을 함께 정합니다. `error`는 `alert` 역할로 즉시 알리고 나머지는 `status`로 조용히 알립니다. 기본값은 `info`입니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. 폼 전체의 오류를 요약해 알리는 데 쓸 수는 있지만 값을 갖지 않습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — Alert는 알릴 조건이 있을 때만 렌더링하는 메시지입니다. 알릴 것이 없으면 빈 Alert를 그리는 대신 Alert 자체를 렌더링하지 않습니다.
+- `loading-state` — Alert는 아무것도 불러오지 않습니다. 진행 중인 작업을 알려야 한다면 그 작업의 결과가 나왔을 때 해당 수준의 Alert를 렌더링하고, 기다리는 동안의 표시는 작업이 있는 자리의 몫입니다.
+- `error-state` — Alert 자신은 실패할 수 있는 동작이 없습니다. 오류는 Alert가 알리는 내용이지 Alert의 상태가 아니며, 그것은 `type="error"`로 표현합니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> live 영역이라 따로 이름을 두지 않습니다. 역할이 알리는 것은 Title과 Description의 텍스트입니다.
+
+### 포커스
+
+> 포커스를 받는 요소가 없고 나타나도 포커스를 옮기지 않습니다. 사용자가 반드시 결정해야 하는 내용이면 Alert가 아니라 alertdialog 역할의 Dialog를 쓰세요.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `inline-alert`, `severity-level`.
+- 다른 이름: `alert`, `callout`, `banner`, `notice`, `inline message`, `message bar`, `알림`, `안내 문구`, `경고 문구`, `배너`.
+- 어휘 상태: `controlled`.

package/skills/components/angle-slider/SKILL.md

@@ -0,0 +1,155 @@
+---
+name: 'angle-slider'
+description: 'AngleSlider — 다이얼: 0도에서 360도 사이의 한 각도를, 원 둘레를 따라 핸들을 드래그하거나 화살표 키로 한 단계씩 움직여 고릅니다. 다른 이름: angle slider, dial, knob, rotation control, compass, 각도 슬라이더, 다이얼, 회전 조절기, 각도 선택기.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/angle-slider.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/angle-slider.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# AngleSlider
+
+> 다이얼: 0도에서 360도 사이의 한 각도를, 원 둘레를 따라 핸들을 드래그하거나 화살표 키로 한 단계씩 움직여 고릅니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `AngleSlider`
+- 분류: `range-and-drawing`
+- 수명 주기: `active`
+
+## Do
+
+> 진정으로 순환하는 값 — 그라디언트나 그림자의 방향, 나침반 방위, 배치된 객체의 회전 — 처럼 359와 1이 이웃이고 직선 트랙이라면 둘을 양 끝에 놓게 되는 경우. 이것을 고르는 이유는 장식이 아니라 원형 기하 구조입니다.
+
+## Don't
+
+> 단지 범위가 있을 뿐인 값에는 다이얼을 쓰지 마세요. 볼륨이나 불투명도에는 가장 작은 끝과 가장 큰 끝이 있고, 이를 원으로 감싸면 그 양에 대해 사실이 아닌 것을 사용자에게 전달하게 됩니다. 그런 값에는 Slider가 맞는 컨트롤입니다. 정확한 각도가 중요하고 직접 입력해야 하는 곳에서는 쓰지 마세요 — NumberInput과 함께 쓰거나 대신 NumberInput을 쓰세요. 애초에 각도가 아닌 값을 위한 장식용 노브로 쓰지 마세요.
+
+## Anti-patterns
+
+> `min`과 `max`를 노출하는 것. 원의 경계는 원 자체이며, 이를 제공하면 machine에 없고 지킬 수도 없는 설정을 지어내게 됩니다. 또한 다이얼에 `dir` prop을 주는 것 — 방향은 모든 컴포넌트에서 SynapseProvider의 로케일로부터 오며, machine은 이미 오른쪽에서 왼쪽 방향에 맞춰 표시 각도를 반전합니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Slider` (`slider`)
+- `NumberInput` (`number-input`)
+- `ColorPicker` (`color-picker`)
+
+## 가져오기
+
+```tsx
+import { AngleSlider } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 7개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<AngleSlider.Root>
+  <AngleSlider.Label />
+  <AngleSlider.ValueText />
+  <AngleSlider.Control>
+    <AngleSlider.Thumb />
+  </AngleSlider.Control>
+  <AngleSlider.MarkerGroup>
+    <AngleSlider.Marker />
+  </AngleSlider.MarkerGroup>
+</AngleSlider.Root>
+```
+
+- `AngleSlider.Root` — 최상위에 놓입니다
+- `AngleSlider.Label` — `Root` 안에 놓입니다
+- `AngleSlider.Thumb` — `Control` 안에 놓입니다
+- `AngleSlider.ValueText` — `Root` 안에 놓입니다
+- `AngleSlider.Control` — `Root` 안에 놓입니다
+- `AngleSlider.MarkerGroup` — `Root` 안에 놓입니다
+- `AngleSlider.Marker` — `MarkerGroup` 안에 놓입니다
+
+### React 네임스페이스가 노출하지 않는 anatomy part
+
+- `Track`
+
+### part가 렌더링하고 소유하는 요소
+
+- `hiddenInput`, `AngleSlider.Root`가 렌더링합니다 — 각도를 폼 제출에 실어 보내는 숨겨진 필드. Root가 렌더링하며 의도적으로 part가 아닙니다. anatomy 키가 없는 part는 이 Registry 자체의 part 검사를 통과하지 못하며, 사용처가 폼이 의존하는 요소를 옮기거나 스타일을 바꾸거나 빠뜨릴 수 있게 되기 때문입니다.
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 12개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `value` — `number`, 선택. 제어되는 각도이며, 단위는 도입니다.
+- `defaultValue` — `number`, 선택. 비제어 초기 각도. `value`가 주어지면 무시됩니다.
+- `onValueChange` — `(details: AngleSliderValueChangeDetails) => void`, 선택. 드래그의 매 단계를 포함해, 값이 바뀔 때마다 알림을 받습니다.
+- `onValueChangeEnd` — `(details: AngleSliderValueChangeDetails) => void`, 선택. 드래그나 키 반복이 끝난 뒤 한 번 알림을 받습니다 — 저장할 때 쓸 콜백입니다.
+- `step` — `number`, 선택. 화살표 키의 이동 단위이며, 단위는 도입니다. 기본값은 1입니다.
+- `name` — `string`, 선택. 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다.
+- `disabled` — `boolean`, 선택. 비활성화된 AngleSlider는 반응하지 않고 탭 순서에도 들어가지 않습니다.
+- `readOnly` — `boolean`, 선택. 읽기 전용 AngleSlider는 포커스하고 읽을 수 있지만 바꿀 수는 없습니다.
+- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알려집니다.
+- `translations` — `TranslationOverrides`, 선택. 이 AngleSlider에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 예.
+
+- `input[type=hidden]`으로 제출합니다.
+- 항목은 제출 값을 담는 prop을 기록하지 않습니다.
+- 아무것도 설정하지 않으면 `현재 각도(도 단위)`를 제출합니다.
+
+> machine의 숨겨진 input은 getter 인자를 받지 않고 정확히 하나만 존재하며, 이는 Synapse의 rootOwnedGetters 이음매가 표현할 수 있는 형태입니다 — 그래서 Slider와 달리 여기서는 폼 참여가 수정 없이 동작합니다. 폼 하네스와 SSR 하네스가 이를 찾을 수 있도록 `data-synapse-form-field` 표식을 붙입니다. `disabled`이면 제출되지 않습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 컬렉션이 아니라 하나의 각도를 보관하므로 비어 있을 수 있는 집합이 없습니다. 원 위의 모든 점이 값이며, '아무것도 선택되지 않음'을 뜻하는 위치는 없습니다.
+- `loading-state` — 값이 아직 도착하지 않은 다이얼은 비활성화된 다이얼에 사용처 자신의 스켈레톤을 더한 것입니다. 로딩 part는 비활성 상태를 중복하여 같은 말을 두 번 하게 됩니다.
+- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 보고되고 aria-invalid로 알려집니다. 그 이유를 설명하는 메시지는 다이얼이 아니라 이를 둘러싼 필드에 속합니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 썸에 걸린 aria-labelledby를 통해 Label part에서 가져옵니다. Label이 없으면 다이얼에는 이름이 없으며, 이는 조용히 채워지는 대신 접근성 감사에서 드러납니다.
+
+### 포커스
+
+> 포커스를 받는 요소는 썸이며, 썸이 다이얼 전체에 걸쳐 있어 포인터 대상이 곧 다이얼 자체가 됩니다 — 반지름을 따로 적지 않고도 척도의 가장 작은 크기에서 최소 대상 크기를 충족하는 방식이 바로 이것입니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `angle-selection`, `bounded-value`, `stepped-value`, `form-value`, `readonly-display`.
+- 다른 이름: `angle slider`, `dial`, `knob`, `rotation control`, `compass`, `각도 슬라이더`, `다이얼`, `회전 조절기`, `각도 선택기`.
+- 어휘 상태: `controlled`.

package/skills/components/avatar/SKILL.md

@@ -0,0 +1,123 @@
+---
+name: 'avatar'
+description: 'Avatar — 사람이나 사물의 사진과, 사진이 없을 때 쓰는 알아볼 수 있는 대체 표시. 둘 사이의 전환은 추측이 아니라 이미지 자체의 load와 error 이벤트에 따라 이루어집니다. 다른 이름: avatar, profile picture, user image, gravatar, monogram, 아바타, 프로필 사진, 사용자 이미지, 프로필 이미지.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/avatar.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/avatar.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Avatar
+
+> 사람이나 사물의 사진과, 사진이 없을 때 쓰는 알아볼 수 있는 대체 표시. 둘 사이의 전환은 추측이 아니라 이미지 자체의 load와 error 이벤트에 따라 이루어집니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Avatar`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 사람이나 계정이 자기 콘텐츠 옆에 표시되고 사진이 없을 수도 있는 곳이라면 어디든 — 댓글 작성자 표시, 멤버 목록, 담당자 필드. `img`에 비해 더해지는 가치는 전환입니다. 로드된 사진 아래로 fallback이 잠깐 비치는 일도, 로드되지 않은 사진 아래에 fallback이 영영 가려지는 일도 없습니다.
+
+## Don't
+
+> 뒤에 정체성이 없는 장식용 이미지에는 쓰지 마세요. `img`가 같은 것을 말하면서 사람을 암시하지 않습니다. 버튼으로 쓰지 마세요. 메뉴를 여는 아바타는 trigger에 아바타를 담은 Menu이며, 클릭 핸들러를 사진에 달면 trigger가 갖춘 키보드 계약을 건너뛰게 됩니다. 접속 상태나 상태 정보를 아바타만으로 보여주지 마세요 — 사진 위의 색깔 점은 아무것으로도 알려지지 않으며, 그 상태는 스크린 리더가 닿는 어딘가에 텍스트로 있어야 합니다.
+
+## Anti-patterns
+
+> 이미지 요소를 팩토리의 파생에 맡겨두는 것. machine은 `src`, `onLoad`, `onError`만 내보내고 요소에 대해서는 아무 말도 하지 않으므로, 파생된 기본값은 `div`가 됩니다 — 렌더링은 되고, 비어 보이며, machine이 기다리는 이벤트를 결코 발생시키지 않습니다. 그러면 아바타는 아무도 알아채지 못한 채 영원히 fallback 상태에 머무릅니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `Progress` (`progress`)
+- `Clipboard` (`clipboard`)
+
+## 가져오기
+
+```tsx
+import { Avatar } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 3개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Avatar.Root>
+  <Avatar.Image />
+  <Avatar.Fallback />
+</Avatar.Root>
+```
+
+- `Avatar.Root` — 최상위에 놓입니다
+- `Avatar.Image` — `Root` 안에 놓입니다
+- `Avatar.Fallback` — `Root` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 3개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `onStatusChange` — `(details: AvatarStatusChangeDetails) => void`, 선택. 이미지가 로드되거나 실패할 때 알림을 받습니다.
+- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — fallback이 곧 빈 상태이며, 이는 모드가 아니라 part입니다. 이미지가 없는 아바타는 아무것도 보여주지 않는 것이 아니라 이니셜이나 glyph를 보여주는 것이고, 이는 사용처가 제공하는 별개의 것입니다.
+- `loading-state` — 이미지가 전송되는 동안의 세 번째 시각 상태는 없습니다. 이미지가 성공을 보고할 때까지 fallback이 표시되므로, 느린 이미지는 채워질 때 레이아웃을 밀어내는 빈 공간이 아니라 대체 표시로 저하됩니다.
+- `error-state` — 로드에 실패한 이미지는 사용자가 대응할 수 있는 오류가 아니므로 오류 상태가 아니라 fallback으로 귀결됩니다. 이를 알고 싶은 제품에는 `onStatusChange`가 알려줍니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 이미지의 `alt`는 사용처가 정합니다. 누구의 얼굴인지는 사용처만 알고, Synapse 기본값은 제품 안의 모든 아바타에 똑같은 이름을 붙이게 되기 때문입니다. 순전히 장식용인 아바타는 `alt=""`를 받습니다. `alt`가 전혀 없이 렌더링된 Image는 개발 경고를 남깁니다. 이미지가 없거나 실패하면 기본 Fallback 콘텐츠가 아이콘에 `avatar.fallback.label`("User")의 시각적으로 숨긴 텍스트를 짝지어, 아바타가 이름 없는 그래픽이 되지 않게 합니다. 사용처가 이니셜을 주면 둘 다 대체됩니다.
+
+### 포커스
+
+> 여기에는 포커스를 받는 것이 없습니다. 최소 대상 크기는 part가 아니라 ROOT에 걸려 있는데, 제품이 아바타를 컨트롤로 감쌀 때 아바타 자신의 상자가 그 대상 전체가 되기 때문입니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 방향이 part에 전달되므로, 오른쪽에서 왼쪽으로 쓰는 로케일에서 텍스트 옆에 놓인 아바타는 prop 없이도 텍스트의 올바른 쪽에 자리합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `profile-picture`, `image-fallback`, `initials`.
+- 다른 이름: `avatar`, `profile picture`, `user image`, `gravatar`, `monogram`, `아바타`, `프로필 사진`, `사용자 이미지`, `프로필 이미지`.
+- 어휘 상태: `controlled`.

package/skills/components/badge/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: 'badge'
+description: 'Badge — 항목의 상태나 분류를 짧은 글자와 색으로 붙여 보여 주는 작은 표식입니다. 색은 `type`(neutral, info, success, warning, error)에서만 오므로 같은 뜻의 배지는 어디서나 같은 색입니다. 다른 이름: badge, tag, chip, label, pill, status, 배지, 태그, 라벨, 상태 표시.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/badge.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/badge.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Badge
+
+> 항목의 상태나 분류를 짧은 글자와 색으로 붙여 보여 주는 작은 표식입니다. 색은 `type`(neutral, info, success, warning, error)에서만 오므로 같은 뜻의 배지는 어디서나 같은 색입니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Badge`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 목록의 행이나 카드 제목 옆에 상태나 분류를 짧게 붙일 때 쓰세요 — '배포됨', '초안', '실패'처럼. 상태의 성격에 맞는 `type`을 고르면 색이 따라오며, 같은 상태에는 언제나 같은 `type`을 쓰세요.
+
+## Don't
+
+> 사용자가 누르거나 지울 수 있는 태그에는 쓰지 마세요 — 값을 편집하는 태그 목록은 TagsInput입니다. 문장으로 설명해야 하는 상태는 배지가 아니라 인라인 알림(Alert)으로 알리세요. 강조를 위해 아무 글자에나 색 배지를 붙이지 마세요.
+
+## Anti-patterns
+
+> 색만으로 상태를 구분하는 것. 빨간 배지와 초록 배지의 글자가 같으면 색을 구별하지 못하는 사용자에게는 같은 배지입니다 — 글자 자체가 상태를 말해야 합니다. 한 화면에서 같은 상태에 서로 다른 `type`을 쓰는 것도 같은 부류입니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `TagsInput` (`tags-input`)
+- `Avatar` (`avatar`)
+
+## 가져오기
+
+```tsx
+import { Badge } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 1개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Badge.Root />
+```
+
+- `Badge.Root` — 최상위에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 2개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `type` — `BadgeType`, 선택. 배지가 전하는 상태. 색은 이 값에서만 오며, 같은 뜻의 배지는 화면 어디서나 같은 색입니다. 기본값은 `neutral`입니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. 폼 안에 놓여도 내용을 보여 주는 요소일 뿐입니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 배지는 짧은 글자 하나를 담는 표식이라 비어 있을 수 있는 집합이 없습니다. 보여 줄 상태가 없으면 배지를 렌더링하지 않습니다.
+- `loading-state` — 배지는 아무것도 불러오지 않습니다. 상태를 아직 모르면 그 사실 자체가 neutral 배지의 글자입니다(예: '확인 중').
+- `error-state` — 배지는 실패할 수 있는 동작이 없습니다. 오류라는 상태를 알리는 것은 `type="error"`인 배지의 몫이며 그것은 배지 자신의 오류가 아닙니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 이름이 따로 없습니다. 배지의 글자가 주변 문장의 일부로 읽힙니다.
+
+### 포커스
+
+> 포커스를 받지 않습니다. 누를 수 있는 배지가 필요하면 Button이나 링크 안에 넣고, 배지 자체를 컨트롤로 만들지 마세요.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `status-badge`, `item-label`.
+- 다른 이름: `badge`, `tag`, `chip`, `label`, `pill`, `status`, `배지`, `태그`, `라벨`, `상태 표시`.
+- 어휘 상태: `controlled`.

package/skills/components/breadcrumb/SKILL.md

@@ -0,0 +1,128 @@
+---
+name: 'breadcrumb'
+description: 'Breadcrumb — 현재 페이지에 이르는 상위 경로를 링크의 목록으로 보여 주는 내비게이션입니다. `nav` 랜드마크 안의 순서 있는 목록으로 그려지며, 마지막 항목은 `aria-current="page"`로 현재 위치를 알립니다. 다른 이름: breadcrumb, breadcrumbs, 경로, 이동 경로, 빵부스러기 내비게이션, 위치 표시.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/breadcrumb.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/breadcrumb.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Breadcrumb
+
+> 현재 페이지에 이르는 상위 경로를 링크의 목록으로 보여 주는 내비게이션입니다. `nav` 랜드마크 안의 순서 있는 목록으로 그려지며, 마지막 항목은 `aria-current="page"`로 현재 위치를 알립니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Breadcrumb`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 사용자가 계층 구조 깊이 들어와 있을 때 지금 어디에 있는지와 상위로 돌아가는 길을 보여 줄 때 쓰세요 — 워크스페이스 › 프로젝트 › 모델처럼. 상위 항목은 `href`가 있는 링크로, 마지막 현재 항목은 `current`를 준 링크로 두세요.
+
+## Don't
+
+> 계층이 한 단계뿐이면 쓰지 마세요 — 돌아갈 곳이 하나면 뒤로 가기 링크 하나로 충분합니다. 애플리케이션의 주 메뉴는 NavigationMenu, 같은 페이지 안의 위치 이동은 Toc가 맡습니다. 방문 순서(브라우저 기록)를 보여 주는 용도가 아닙니다 — Breadcrumb은 계층을 보여 줍니다.
+
+## Anti-patterns
+
+> 현재 페이지를 `current` 없이 `href`만 있는 링크로 두는 것. 스스로를 가리키는 링크는 눌러도 아무 일이 없고, 보조기술 사용자는 현재 위치가 어디인지 aria-current로만 알 수 있습니다 — 현재 항목에는 반드시 `current`를 주세요. 구분자를 텍스트("/" 등)로 링크 사이에 직접 써 넣는 것도 같은 부류입니다. 스크린 리더가 구분자를 항목마다 읽게 됩니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `NavigationMenu` (`navigation-menu`)
+- `Toc` (`toc`)
+- `Pagination` (`pagination`)
+
+## 가져오기
+
+```tsx
+import { Breadcrumb } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 5개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link />
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+  </Breadcrumb.List>
+</Breadcrumb.Root>
+```
+
+- `Breadcrumb.Root` — 최상위에 놓입니다
+- `Breadcrumb.List` — `Root` 안에 놓입니다
+- `Breadcrumb.Item` — `List` 안에 놓입니다
+- `Breadcrumb.Link` — `Item` 안에 놓입니다
+- `Breadcrumb.Separator` — `List` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 1개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. 링크의 목록일 뿐입니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 경로는 적어도 현재 페이지 하나로 이루어지므로 비어 있는 경로가 없습니다. 상위가 없는 최상위 페이지라면 Breadcrumb 자체를 렌더링하지 않습니다.
+- `loading-state` — 경로의 항목은 사용처가 이미 아는 라우팅 정보에서 오므로 불러오는 중인 구간이 없습니다. 이름을 비동기로 가져와야 하는 항목은 그 항목의 텍스트 자리에서 Skeleton으로 표현합니다.
+- `error-state` — Breadcrumb은 값도 입력도 없어 실패할 수 있는 것이 없습니다. 이동한 페이지를 찾지 못한 오류는 그 페이지가 알립니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 랜드마크의 이름은 번역 키에서 오고, 각 링크의 이름은 링크 텍스트입니다.
+
+### 포커스
+
+> 컴포넌트가 포커스를 옮기지 않습니다. 각 링크가 브라우저의 기본 포커스 순서를 따릅니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 랜드마크의 이름이 번역 키 `breadcrumb.root.label`에서 오고, 구분자 아이콘은 오른쪽에서 왼쪽으로 쓰는 로케일에서 좌우가 뒤집힙니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `breadcrumb`, `current-page`, `translatable-strings`.
+- 다른 이름: `breadcrumb`, `breadcrumbs`, `경로`, `이동 경로`, `빵부스러기 내비게이션`, `위치 표시`.
+- 어휘 상태: `controlled`.