@neurocle/synapse-react 0.0.0-bootstrap

package/skills/components/skeleton/SKILL.md

@@ -0,0 +1,114 @@
+---
+name: 'skeleton'
+description: 'Skeleton — 불러오는 중인 콘텐츠의 자리를 그 콘텐츠의 모양 그대로 잡아 두는 자리표시입니다. 실제 콘텐츠를 감싸 크기와 배치는 그대로 두고 내용만 가린 채 은은하게 반짝이며, `loading`이 끝나면 감싼 콘텐츠를 그대로 드러냅니다. 다른 이름: skeleton, skeleton loader, placeholder, shimmer, content placeholder, 스켈레톤, 자리표시, 로딩 자리.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/skeleton.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/skeleton.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Skeleton
+
+> 불러오는 중인 콘텐츠의 자리를 그 콘텐츠의 모양 그대로 잡아 두는 자리표시입니다. 실제 콘텐츠를 감싸 크기와 배치는 그대로 두고 내용만 가린 채 은은하게 반짝이며, `loading`이 끝나면 감싼 콘텐츠를 그대로 드러냅니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Skeleton`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 불러올 콘텐츠의 모양을 이미 알 때 그 자리를 미리 잡아 두는 데 쓰세요 — 목록의 행, 카드의 제목과 본문, 아바타처럼 말입니다. 실제 콘텐츠(또는 같은 크기의 자리 채움 콘텐츠)를 Skeleton.Root로 감싸면 그 크기와 배치가 그대로 자리표시가 되고, 불러오기가 끝나면 `loading={false}`로 드러냅니다. 원형 아바타처럼 모서리가 다른 모양은 사용처가 Skeleton의 모서리를 맞추세요.
+
+## Don't
+
+> 모양을 알 수 없거나 짧게 끝나는 작업에는 Spinner를 쓰세요. 진행률이 있으면 Progress를 쓰세요. 불러오기가 끝났는데 결과가 없음을 알리는 데 쓰지 마세요 — 그것은 EmptyState입니다.
+
+## Anti-patterns
+
+> 실제 콘텐츠와 다른 크기의 빈 상자를 Skeleton으로 그려 두는 것. 불러오기가 끝나는 순간 레이아웃이 밀려 사용자가 누르려던 것을 놓칩니다 — Skeleton은 실제 모양을 감싸 쓰는 것이 원칙입니다. 화면 전체를 Skeleton으로 덮고 진행 중이라는 사실을 어디에서도 알리지 않는 것도 같은 부류입니다. 감싸는 영역에 aria-busy를 주거나 Spinner로 알리세요.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `Spinner` (`spinner`)
+- `Progress` (`progress`)
+- `Avatar` (`avatar`)
+
+## 가져오기
+
+```tsx
+import { Skeleton } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 1개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Skeleton.Root />
+```
+
+- `Skeleton.Root` — 최상위에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 1개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `loading` — `boolean`, 선택. 사용처가 소유한 불러오기가 진행 중인지. `true`(기본값)인 동안 자식은 자리와 크기만 남긴 채 가려지고 보조기술과 포인터에서 빠지며, 그 자리에 자리표시 모양이 그려집니다. `false`가 되면 자식이 그대로 나타나고 Skeleton은 레이아웃에 아무 상자도 남기지 않습니다.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다. 불러오는 동안 감싼 폼 컨트롤은 inert라 조작도 제출 준비도 되지 않습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `size-axis` — 자리표시의 크기와 모양은 감싼 콘텐츠가 정합니다. Skeleton이 크기 척도를 가지면 실제 콘텐츠와 다른 크기로 자리를 잡아, 불러오기가 끝나는 순간 레이아웃이 튑니다.
+- `empty-state` — Skeleton은 곧 채워질 자리를 표시하는 것이지 비어 있음을 알리지 않습니다. 불러온 결과가 비었다면 Skeleton을 치우고 EmptyState를 보여 주세요.
+- `loading-state` — Skeleton 자체가 로딩 상태의 표현입니다. `loading` prop이 그 상태를 켜고 끄므로 별도의 로딩 part가 없습니다.
+- `error-state` — 불러오기가 실패했는지는 사용처만 압니다. 실패하면 `loading`을 끄고 콘텐츠 대신 실패를 알리는 요소를 렌더링하세요.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 이름이 없습니다. 불러오는 동안 접근성 트리에서 빠집니다.
+
+### 포커스
+
+> 불러오는 동안 안쪽은 포커스를 받을 수 없습니다. Skeleton은 포커스를 옮기지 않으므로, 끝났을 때 포커스를 둘 곳은 사용처가 정합니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `skeleton-placeholder`, `indeterminate-progress`.
+- 다른 이름: `skeleton`, `skeleton loader`, `placeholder`, `shimmer`, `content placeholder`, `스켈레톤`, `자리표시`, `로딩 자리`.
+- 어휘 상태: `controlled`.

package/skills/components/slider/SKILL.md

@@ -0,0 +1,178 @@
+---
+name: 'slider'
+description: 'Slider — 트랙 위의 위치로 고르는 값으로, 정확한 자릿수보다 대략적인 크기가 더 중요한 양에 씁니다. 두 번째 썸을 더하면 두 값 사이의 범위를 고릅니다. 다른 이름: slider, range, range slider, track, volume control, 슬라이더, 범위 슬라이더, 레인지 슬라이더, 음량 조절.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/slider.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/slider.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Slider
+
+> 트랙 위의 위치로 고르는 값으로, 정확한 자릿수보다 대략적인 크기가 더 중요한 양에 씁니다. 두 번째 썸을 더하면 두 값 사이의 범위를 고릅니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Slider`
+- 분류: `range-and-drawing`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### HTML 폼 제출 — 알려진 결함
+
+- 충족하지 못하는 것: `name`도 `form`도 없어 폼에 아무것도 제출하지 않습니다. machine은 렌더링되지 않는 입력을 가리키는 label `htmlFor`를 여전히 내보냅니다.
+- 의도한 이유: 썸마다 숨겨진 입력을 렌더링하는 machine의 getter를 기반 계층이 표현하지 못합니다. 아무것도 제출하지 않는 `name`은 없는 것보다 나쁘므로 노출하지 않습니다.
+- 사용 시 유의점: `onValueChange`로 값을 받아 제품의 필드에 넣어 제출하세요.
+
+## Do
+
+> 사용자가 판단하는 것이 대략적인 크기인 경계 있는 양에 쓰세요. 음량, 불투명도, 확대/축소, 예산 상한이 그런 예이며, 값을 입력하는 것보다 한계 대비 값의 위치를 보는 것이 더 가치 있을 때입니다. 가격 필터나 날짜 구간처럼 양 끝을 모두 사용자가 정해야 할 때는 범위 패턴을 쓰세요.
+
+## Don't
+
+> 정확한 숫자가 중요하고 범위가 넓을 때는 Slider를 쓰지 마세요. NumberInput은 1,247을 찾아 헤맬 필요 없이 바로 입력하게 해 주지만, 단위당 1픽셀인 슬라이더는 포인터로 정밀하게 조작할 수가 없습니다. 이름이 붙은 몇 개의 선택지 중에서 고를 때도 쓰지 마세요. 그것은 RadioGroup이나 Select이며, 사용자가 드래그해서 선택지를 찾아내게 하지 않고 선택지를 직접 알립니다. 진행 표시로도 쓰지 마세요. Progress는 조작할 수 없으며 그 사실을 알립니다.
+
+## Anti-patterns
+
+> 범위 패턴을 위해 두 번째 컴포넌트를 내보내는 것. machine도, anatomy도, prop 집합도 하나이며, 이를 쪼개면 사용처가 배워야 할 API가 두 배가 되고 같은 커버리지를 두 번 세게 됩니다. 또한 `value`를 맨 숫자로 바인딩하는 것도 피하세요. 두 번째 썸이 나타날 때 타입이 바뀌지 않도록, `value`는 두 패턴 모두에서 배열입니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
+
+## 관련 컴포넌트
+
+- `AngleSlider` (`angle-slider`)
+- `NumberInput` (`number-input`)
+- `Progress` (`progress`)
+- `RatingGroup` (`rating-group`)
+
+## 가져오기
+
+```tsx
+import { Slider } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 10개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Slider.Root>
+  <Slider.Label />
+  <Slider.ValueText />
+  <Slider.Control>
+    <Slider.Thumb />
+    <Slider.Track>
+      <Slider.Range />
+    </Slider.Track>
+    <Slider.DraggingIndicator />
+  </Slider.Control>
+  <Slider.MarkerGroup>
+    <Slider.Marker />
+  </Slider.MarkerGroup>
+</Slider.Root>
+```
+
+- `Slider.Root` — 최상위에 놓입니다
+- `Slider.Label` — `Root` 안에 놓입니다
+- `Slider.Thumb` — `Control` 안에 놓입니다
+- `Slider.ValueText` — `Root` 안에 놓입니다
+- `Slider.Track` — `Control` 안에 놓입니다
+- `Slider.Range` — `Track` 안에 놓입니다
+- `Slider.Control` — `Root` 안에 놓입니다
+- `Slider.MarkerGroup` — `Root` 안에 놓입니다
+- `Slider.Marker` — `MarkerGroup` 안에 놓입니다
+- `Slider.DraggingIndicator` — `Control` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 20개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `value` — `readonly number[]`, 선택. 제어되는 값이며, 언제나 배열입니다. 범위 패턴은 별도 컴포넌트가 아니라 같은 Slider의 variant라서 값의 형태도 하나입니다. 항목이 하나면 단일 값 패턴이고, 둘이면 범위 패턴이며, machine은 그보다 많은 경우도 지원합니다.
+- `defaultValue` — `readonly number[]`, 선택. 비제어 모드의 초기 값. `value`를 주면 무시됩니다.
+- `onValueChange` — `(details: SliderValueChangeDetails) => void`, 선택. 값이 바뀔 때마다 호출됩니다. 드래그 도중의 각 단계도 포함합니다.
+- `onValueChangeEnd` — `(details: SliderValueChangeDetails) => void`, 선택. 드래그나 키 반복이 가라앉은 뒤 호출됩니다. 값을 저장할 시점은 이쪽입니다.
+- `onFocusChange` — `(details: SliderFocusChangeDetails) => void`, 선택. 범위 Slider에서 키보드가 썸 사이를 오갈 때 호출됩니다.
+- `min` — `number`, 선택. 가장 낮은 값. 기본값은 0입니다.
+- `max` — `number`, 선택. 가장 높은 값. 기본값은 100입니다.
+- `step` — `number`, 선택. 화살표 키와 드래그의 단위. 기본값은 1입니다.
+- `largeStep` — `number`, 선택. PageUp/PageDown과 Shift+화살표의 단위. 기본값은 열 스텝입니다.
+- `minStepsBetweenThumbs` — `number`, 선택. 범위 패턴의 두 썸이 지켜야 하는 간격이며, 스텝 수로 세요. 썸이 하나면 아무 효과가 없습니다.
+- `thumbCollisionBehavior` — `SliderThumbCollisionBehavior`, 선택. 범위 패턴의 두 썸이 서로에게 끌려 들어갔을 때 보이는 동작.
+- `origin` — `SliderOrigin`, 선택. 채워진 범위가 시작되는 지점. 기본값은 `start`입니다.
+- `orientation` — `Orientation`, 선택. Slider가 배치되는 축. 기본값은 `horizontal`입니다.
+- `thumbAlignment` — `SliderThumbAlignment`, 선택. 썸을 트랙 경계 안에 붙잡아 둘지 여부. 기본값은 `center`입니다.
+- `getAriaValueText` — `(details: SliderValueTextDetails) => string`, 선택. 보조 기술에 값의 이름을 지어 줍니다 — `"42"`가 아니라 `"42 percent"`처럼. machine은 그 결과를 `aria-valuetext`에 넣고, 스크린 리더는 숫자 대신 그것을 읽습니다. 이것이 없으면 통화나 평점이 맨 정수로 읽힙니다.
+- `disabled` — `boolean`, 선택. 비활성화된 Slider는 반응하지 않고 탭 순서에도 들어가지 않습니다.
+- `readOnly` — `boolean`, 선택. 읽기 전용 Slider는 포커스하고 읽을 수는 있지만 바꿀 수는 없습니다.
+- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알립니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 슬라이더에 대한 결정이 아니라 기반 계층의 결함 때문에 막혀 있습니다. machine의 `getHiddenInputProps({ index })`는 썸마다 숨겨진 입력을 하나씩 렌더링하며 인자를 구조 분해합니다. 반면 기반 계층의 `rootOwnedGetters` 이음매는 getter를 인자 없이 호출하고 요소를 정확히 하나만 렌더링하므로, 둘 중 어느 쪽도 표현할 수 없습니다. 이는 tools/vocabulary-check/src/exceptions.ts에 기록되어 있으며 중앙에서 고칠 예정입니다. 그때까지 컴포넌트는 `name`도 `form` prop도 선언하지 않습니다. 타입 검사는 통과하지만 아무것도 제출하지 않는 name은 없는 것보다 나쁘기 때문입니다. 사용처는 `onValueChange`를 자신의 필드에 연결해 값을 제출합니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 컬렉션이 아니라 숫자 하나 또는 둘을 가지므로 비어 있을 수 있는 집합이 없습니다. 값이 없는 슬라이더도 min과 max가 늘 범위를 정하므로 여전히 위치를 가집니다.
+- `loading-state` — 값이 아직 도착 중인 슬라이더는 비활성화된 슬라이더에 사용처의 스켈레톤을 더한 것입니다. 로딩 part를 두면 비활성화 상태와 중복되어 같은 정보를 두 번 주게 됩니다.
+- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 전달되고 썸에 aria-invalid로 알려집니다. 이를 설명하는 메시지는 슬라이더가 아니라 주변 필드의 몫입니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 각 썸의 aria-labelledby를 통해 Label part에서 가져옵니다. Label이 없는 슬라이더는 이름이 없으며, 이는 조용히 채워지지 않고 감사에서 드러납니다.
+
+### 포커스
+
+> 각 썸이 저마다 포커스를 받으므로, 범위 슬라이더에는 탭 정지 지점이 둘 있고 키보드 사용자는 어느 끝이든 다룰 수 있습니다. 포커스 링은 썸에 그려집니다.
+
+### 값 텍스트
+
+> `getAriaValueText`는 aria-valuetext를 통해 안내되는 숫자를 "42 percent", "14 US dollars" 같은 구절로 바꿉니다. 이것이 없으면 통화나 평점이 맨 정수로 안내됩니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 이 컴포넌트가 이미 다루는 패턴
+
+- **single** — 선택하는 방법: value에 값이 하나만 들어 있을 때 선택됩니다. 썸이 하나인 평범한 슬라이더입니다. 음량, 확대 수준, 백분율이 그런 예입니다.
+- **range** — 선택하는 방법: value에 값이 둘 이상 들어 있을 때 선택됩니다. 썸 두 개와 그 사이를 채운 띠로 이루어집니다. 가격 범위, 날짜 구간, 허용 오차가 그런 예입니다. 다른 모든 라이브러리는 이를 두 번째 컴포넌트로 내보내지만, Synapse는 `value`의 길이로 선택되는 이 컴포넌트의 한 형태로 내보냅니다. machine이 하나이므로 두 번 세면 커버리지를 부풀리게 되기 때문입니다. `minStepsBetweenThumbs`와 `thumbCollisionBehavior`가 이 형태를 설정하지만, 둘 중 어느 것도 이 형태를 선언하지는 않습니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `bounded-value`, `two-ended-range`, `stepped-value`, `axis-orientation`, `readonly-display`.
+- 다른 이름: `slider`, `range`, `range slider`, `track`, `volume control`, `슬라이더`, `범위 슬라이더`, `레인지 슬라이더`, `음량 조절`.
+- 어휘 상태: `controlled`.

package/skills/components/snackbar/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: 'snackbar'
+description: 'Snackbar — 사용자가 확인해야 하는 결과를 알리는 밝은 카드입니다. 상태 막대와 아이콘, 문구, 동작 하나, 닫기 버튼을 담고, 여러 개가 겹쳐 쌓이며, 닫을 때까지 남습니다. 다른 이름: snackbar, notification, action notification, alert card, 스낵바, 스낵바 알림, 동작 알림.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/snackbar.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/snackbar.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Snackbar
+
+> 사용자가 확인해야 하는 결과를 알리는 밝은 카드입니다. 상태 막대와 아이콘, 문구, 동작 하나, 닫기 버튼을 담고, 여러 개가 겹쳐 쌓이며, 닫을 때까지 남습니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Snackbar`
+- 분류: `floating-and-overlay`
+- 수명 주기: `active`
+
+## 알려진 예외 — 사용 전에 확인
+
+이 컴포넌트는 아래 기준 3개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
+
+### WCAG 2.2 SC 1.4.11 비텍스트 대비 (AA)
+
+- 대상 part: `root`
+- 충족하지 못하는 것: 상태 막대와 상태 아이콘은 croissant의 상태 색(`*.onSurface`, 밝은 테마의 400 단계)으로 그려지며, 흰 카드 위에서 성공 색은 약 2.45:1로 3:1에 못 미칩니다.
+- 의도한 이유: croissant 스낵바의 모양을 그대로 따릅니다. 상태는 색뿐 아니라 아이콘 모양(체크, 삼각형)과 문구 자체로도 전달되므로 색은 중복 신호입니다. `contrast-pairs.json`에 `status-mark` 용도로 기록되어 있습니다.
+- 사용 시 유의점: 상태를 색에만 맡기지 마세요. 문구가 성공인지 실패인지 스스로 말하게 쓰고, 타입(`success`, `error`)을 반드시 넘겨 아이콘이 함께 그려지게 하세요.
+
+### WCAG 2.2 SC 1.4.3 대비(최소) (AA)
+
+- 대상 part: `actionTrigger`
+- 충족하지 못하는 것: 동작 버튼의 글자는 상태 색 바탕(`*.subtle`) 위에 상태 색(`*.onSurface`)으로 쓰이며, 성공 타입에서 약 2.2:1로 4.5:1에 크게 못 미칩니다.
+- 의도한 이유: croissant 스낵바의 물든 동작 버튼을 그대로 따릅니다. `contrast-pairs.json`에 `tinted-label` 용도로 기록된 의도적 예외입니다.
+- 사용 시 유의점: 동작 레이블은 `View`, `Show`, `Retry`처럼 한 단어로 짧게 쓰세요. 같은 동작에 닿는 다른 경로(해당 화면의 링크나 메뉴)를 제품에 두세요.
+
+### Synapse 스낵바 쌓임 — croissant와 다름
+
+- 대상 part: `group`
+- 충족하지 못하는 것: croissant는 스낵바를 겹치지 않은 목록으로 늘어놓고 가장 최근 것을 맨 위에 두지만, Synapse는 가장 최근 스낵바를 맨 앞에 두고 이전 것을 뒤로 겹쳐 쌓으며, 가리키거나 포커스하면 펼칩니다. 펼친 상태에서 가장 최근 것은 맨 아래(화면 가장자리 쪽)입니다.
+- 의도한 이유: 여러 알림이 화면을 가리지 않도록 겹쳐 쌓는 구조를 택했습니다. 펼친 순서는 `@zag-js/toast` machine이 새 알림부터 높이를 누적해 계산하며, 이를 뒤집는 설정이 machine에 없습니다.
+- 사용 시 유의점: 겹친 상태에서는 가장 최근 스낵바만 읽힙니다. 이전 스낵바의 내용이 중요하면 같은 정보를 화면의 다른 곳에도 남기세요.
+
+## Do
+
+> 사용자가 확인해야 하는 결과를 알릴 때 쓰세요 — 백그라운드 작업의 완료나 실패처럼, 사용자가 다른 일을 합니다 돌아와서도 볼 수 있어야 하는 결과입니다. 결과에 대해 곧바로 할 수 있는 한 가지(보통 `View`나 `Retry`)가 있으면 동작 버튼으로 주세요. croissant 스낵바를 따라 왼쪽 가장자리의 상태 막대, 상태 아이콘, 굵은 문구, 물든 동작 버튼, 구분선 뒤의 닫기 버튼을 담습니다. 여러 개가 겹쳐 쌓였다가 가리키거나 포커스하면 펼쳐지고, 기본 위치는 오른쪽 아래입니다.
+
+## Don't
+
+> 사용자가 따로 할 일이 없는 한 줄 상태에는 쓰지 마세요 — 그것은 스스로 사라지는 Toast입니다. 사용자가 반드시 대응해야 하는 결정에도 쓰지 마세요. 그것은 Dialog입니다. 하나의 작업에 대해 여러 개를 한꺼번에 쌓지 마세요.
+
+## Anti-patterns
+
+> 알림을 보내는 트리 부분 안에 영역을 렌더링하는 것. 스낵바는 애플리케이션 곳곳에서 만들어지므로, 큐는 `createSnackbar`로 한 번 만들어 `SnackbarProvider`로 트리에 전달하고 `Snackbar.Root`는 가장자리에 한 번만 마운트하세요.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `Dialog` (`dialog`)
+- `Drawer` (`drawer`)
+- `Toast` (`toast`)
+- `Tooltip` (`tooltip`)
+
+## 가져오기
+
+```tsx
+import { Snackbar } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 1개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Snackbar.Root />
+```
+
+- `Snackbar.Root` — `Group` 안에 놓입니다
+
+### React 네임스페이스가 노출하지 않는 anatomy part
+
+- `Group`
+- `Title`
+- `Description`
+- `ActionTrigger`
+- `CloseTrigger`
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 4개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `queue` — `SnackbarQueue`, 선택. 이 영역이 렌더하는 스낵바 큐입니다. 선택 사항인 이유는 보통 `SnackbarProvider`로 들어오기 때문입니다. 트리를 감싼 제품은 어느 큐인지 이미 말한 셈이고, 영역에서 그것을 되풀이하면 둘이 어긋날 수 있는 자리가 하나 더 생깁니다.
+- `translations` — `TranslationOverrides`, 선택. 이 영역에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. 크기 축은 알림 하나의 크기 — 패딩, 액션 버튼, 닫기 대상 — 를 정합니다. 영역 자체의 범위는 뷰포트의 범위입니다. 알림 스택은 페이지 안에 배치되는 것이 아니라 화면을 기준으로 위치가 정해지기 때문입니다.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — 큐가 비어 있으면 빈 영역이 아니라 영역 자체를 렌더링하지 않습니다. 아무것도 담지 않은 채 보이는 알림 영역은 제품 레이아웃에 뚫린 영구적인 구멍이고, 그 안에 들어갈 메시지도 없습니다.
+- `loading-state` — 무언가를 로딩 중이라는 알림 자체가 스낵바이며, `loading` 타입으로 만들고 작업이 끝나면 갱신합니다. 로딩 part는 machine이 이미 가진 상태보다 한 단계 위에서 같은 말을 하는 두 번째 방식이 될 뿐입니다.
+- `error-state` — 실패는 영역의 상태가 아니라 `error` 타입의 스낵바입니다. 영역에는 실패할 수 있는 자체 작업이 없습니다 — 저장소가 가진 것을 렌더링할 뿐입니다.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 영역은 provider의 `snackbar.group.label`에서 이름을 가져오고, 각 스낵바는 제품이 `create`로 제공한 문구로 이름이 붙습니다.
+
+### 포커스
+
+> 알림은 나타날 때 결코 포커스를 가져가지 않습니다 — 이것이 스낵바와 대화상자를 구분하는 속성이며, 포커스를 빼앗는다면 사용자가 하던 일을 방해하면서까지 사용자가 요청하지도 않은 것을 알리게 됩니다. 포커스는 machine의 단축키를 통해서만 영역에 들어가며, 각 알림 양쪽의 고스트 요소가 들어간 뒤의 순서를 예측 가능하게 만듭니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 닫기 버튼과 상태 단어는 provider의 번역에서 오고, 영역은 텍스트 방향을 provider에서 가져오므로 오른쪽에서 왼쪽으로 쓰는 제품은 그에 맞게 알림을 쌓고 정렬합니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `notification-queue`, `undo-action`, `translatable-strings`.
+- 다른 이름: `snackbar`, `notification`, `action notification`, `alert card`, `스낵바`, `스낵바 알림`, `동작 알림`.
+- 어휘 상태: `controlled`.

package/skills/components/spinner/SKILL.md

@@ -0,0 +1,122 @@
+---
+name: 'spinner'
+description: 'Spinner — 끝을 알 수 없는 작업이 진행 중임을 도는 고리로 보여 주는 상태 표시입니다. `role="status"`이며, 시각적으로 숨긴 번역된 문구("Loading")로 보조기술에 진행 중임을 알립니다. 다른 이름: spinner, loading spinner, loader, activity indicator, throbber, 로딩, 스피너, 로딩 표시.'
+metadata:
+  package: '@neurocle/synapse-react'
+  packageVersion: '0.3.0'
+  registryEntry: 'packages/registry/data/components/spinner.json'
+  registryStructuralVersion: '0.3.0'
+  lifecycle: 'active'
+  generator: 'packages/react/src/skills/generate.ts'
+---
+
+<!--
+생성된 파일 — 손으로 고치지 않습니다.
+
+Source:     packages/registry/data/components/spinner.json (항목 구조 0.3.0)
+Generator:  packages/react/src/skills/generate.ts
+Regenerate: npx nx run react:skills:generate
+
+아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
+재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
+대신 항목을 고칩니다.
+-->
+
+# Spinner
+
+> 끝을 알 수 없는 작업이 진행 중임을 도는 고리로 보여 주는 상태 표시입니다. `role="status"`이며, 시각적으로 숨긴 번역된 문구("Loading")로 보조기술에 진행 중임을 알립니다.
+
+`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
+
+- 패키지: `@neurocle/synapse-react`
+- 내보내기: `Spinner`
+- 분류: `disclosure-layout-display`
+- 수명 주기: `active`
+
+## Do
+
+> 얼마나 걸릴지 모르는 짧은 작업이 진행 중임을 알릴 때 쓰세요 — 저장 중인 버튼 옆, 다시 불러오는 패널 한가운데처럼 말입니다. 무엇을 기다리는지 문맥이 부족하면 `Spinner.Label`에 "모델 목록을 불러오는 중"처럼 적으세요.
+
+## Don't
+
+> 진행률을 알 수 있으면 Progress를 쓰세요 — 비율이 보이는 편이 기다림을 견디게 합니다. 불러올 콘텐츠의 모양을 미리 알면 Skeleton으로 자리를 잡아 레이아웃이 튀지 않게 하세요. 한 화면에 여러 Spinner를 두지 마세요 — 영역마다 돌면 무엇이 끝났는지 알 수 없습니다.
+
+## Anti-patterns
+
+> Spinner를 aria-hidden으로 감추거나 status 영역 밖에 숨긴 문구 없이 두는 것. 시각적으로만 진행을 알리면 스크린 리더 사용자는 화면이 멈췄다고 생각합니다. 작업이 끝났는데 Spinner를 남겨 두는 것도 같은 부류입니다.
+
+Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
+
+## 관련 컴포넌트
+
+- `Progress` (`progress`)
+- `Skeleton` (`skeleton`)
+- `Button` (`button`)
+
+## 가져오기
+
+```tsx
+import { Spinner } from '@neurocle/synapse-react'
+```
+
+## Anatomy
+
+React 네임스페이스가 노출하는 part 3개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
+
+```tsx
+<Spinner.Root>
+  <Spinner.Indicator />
+  <Spinner.Label />
+</Spinner.Root>
+```
+
+- `Spinner.Root` — 최상위에 놓입니다
+- `Spinner.Indicator` — `Root` 안에 놓입니다
+- `Spinner.Label` — `Root` 안에 놓입니다
+
+## Props
+
+빌드가 방출하는 선언에서 도출한 prop 1개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
+
+모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
+
+### 선택
+
+- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
+
+## Variants
+
+- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
+
+## 폼
+
+폼 참여: 아니요.
+
+> 폼에 제출하는 값이 없습니다.
+
+## 이 컴포넌트에 일부러 없는 것
+
+- `empty-state` — Spinner는 담는 콘텐츠가 없는 표시 하나라 비어 있을 수 있는 집합이 없습니다.
+- `loading-state` — Spinner 자체가 다른 것의 로딩 표시입니다. 스스로 불러오는 것이 없어 별도의 로딩 part를 두지 않습니다.
+- `error-state` — 진행 중이라는 사실만 알리며 작업의 결과를 모릅니다. 작업이 실패하면 사용처가 Spinner를 치우고 그 자리에서 실패를 알리세요.
+
+## 접근성
+
+### 접근 가능한 이름
+
+> 상태 영역의 내용인 숨긴 레이블이 읽힙니다. `aria-label`은 라이브 영역의 알림으로 읽히지 않을 수 있으므로 문구를 바꾸려면 `Spinner.Label`을 쓰세요.
+
+### 포커스
+
+> 포커스를 받지 않습니다. 진행 중인 영역의 포커스는 사용처가 관리합니다.
+
+## 로케일과 컬렉션
+
+- 로케일 의존: 예. 보조기술에 읽히는 문구가 번역 키 `spinner.label.text`에서 옵니다.
+- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
+
+## 기능 용어와 다른 이름
+
+- 다루는 기능: `indeterminate-progress`, `circular-progress`, `translatable-strings`.
+- 다른 이름: `spinner`, `loading spinner`, `loader`, `activity indicator`, `throbber`, `로딩`, `스피너`, `로딩 표시`.
+- 어휘 상태: `controlled`.