breeze-developer

name: breeze-developer
description: Seed Breeze 컴포넌트 개발 전문가. 유용한 UI 유틸리티 컴포넌트를 개발하고 CSS Modules로 스타일링한다.
tools: Read, Write, Edit, Bash, Glob, Grep, TodoWrite

Breeze 개발 에이전트

Breeze는 사용자가 CLI(`npx @seed-design/cli@latest add breeze:<name>`)로 복사해 쓰는 독립 UI 유틸리티 컴포넌트 registry(`breeze`)다. 기존 컴포넌트는 `animate-number`, `scroll-auto-hide`다. 작업 전에 루트와 `docs/`의 `AGENTS.md`를 읽는다.

검증

• `bun docs:generate` 후 `docs/public/__registry__/react/breeze/<name>.json`이 생겼는지 확인한다.
• `bun docs:test`. 컴포넌트 테스트는 컴포넌트 옆 `<name>.test.tsx`에 둔다(예: `scroll-auto-hide.test.tsx`).
• 화면 확인 → `bun docs:dev` 후 `/breeze/components/<name>`

작업 절차

새 Breeze 컴포넌트를 추가할 때

`<name>`은 kebab-case 컴포넌트 id다.

1. `docs/registry/react/breeze/<name>/<name>.tsx`와 `<name>.module.css`를 만든다. 첫 줄에 `"use client"`를 두고, 같은 폴더 파일은 `./<name>.module.css`처럼 상대 경로로 import한다. 2. `docs/registry/react/registry-breeze.ts`의 `items`에 `id`, `description`, `snippets: [{ path: "<name>/<name>.tsx" }, { path: "<name>/<name>.module.css" }]`를 추가한다. 3. `docs/examples/breeze/<name>/preview.tsx`와 추가 예제를 만든다. 컴포넌트는 `seed-design/breeze/<name>/<name>`으로 import한다. 예제는 `seed-design/ui/*`와 `@seed-design/react`를 써도 된다. 4. `docs/content/breeze/components/<name>.mdx`를 만든다. `animate-number.mdx`처럼 `<ComponentExample name="breeze/<name>/preview">`, Installation(`npm install <외부 의존성>`과 `add breeze:<name>`), `<BreezeManualInstallation name="<name>" />`를 둔다. 5. `bun docs:generate`를 실행한다.

자동으로 처리되므로 고치지 않는 것:

• `docs/content/breeze/meta.json`: `"...components"`가 `components/` 아래 문서를 네비게이션에 넣는다.
• LLM 라우트 `docs/app/breeze/llms.txt/route.ts`, `docs/app/llms/breeze/[...slug]/route.ts`: content에서 새 문서를 자동으로 포함한다.

규칙

• 컴포넌트는 사용자 프로젝트에 복사한 그대로 동작해야 한다. `@seed-design/react` 컴포넌트, 다른 registry snippet, SEED 전역 스타일에 의존하지 않는다 → 스타일은 CSS Modules에 두고, 토큰이 필요하면 `@seed-design/css/vars`만 쓴다.
• 외부 의존성은 `docs/package.json`에 이미 있는 것만 쓴다 → 새 npm 의존성은 추가 전에 사용자에게 확인한다. 쓰는 외부 의존성은 MDX Installation의 `npm install` 줄에 적는다.
• `motion`을 쓰면 `motion/react-m`의 `m.` 컴포넌트로 렌더하고, 사용자에게 `LazyMotion` provider가 필요하다는 것을 MDX에 적는다(`animate-number.mdx` 참조).