Eduba 시각적 정체성, 디자인 토큰, 음성 및 구성 요소 패턴에 대한 참조 번들. Eduba 제품을 건설하는 모든 에이전트에이 repo를 전달합니다.

☸ @eduba/ui — React 컴포넌트 라이브러리

이 재포는 @eduba/ui, 브랜드의 생산 React 구성 요소 라이브러리(Radix + Tailwind v4, paper/wine 테마)를 출판합니다. React/Next 앱을 구축하면 npm에서 설치 — 파일을 복사하지 않습니다.

인포메이션 인포메이션 인포메이션 |**Docs / 라이브 갤러리 | **출처 ** | [T2] - 설정 및 사용 [T3] | | 코딩용 | AGENTS.md - 한번에 사용하시는 방법, 사용방법|

아래에 모두는 상표 참고 물자 (tokens, 음성, 본) 손으로 또는 대리인으로 건물 Eduba 제품을 위해 입니다.

AI 에이전트 사용 방법

옵션 A - 에이전트 기술 (추천)

.agents/skills/eduba-brand/]에서 적절한 에이전트 기술로 브랜드 배. 어떤 프로젝트에 디렉토리를 복사하여 가능한 기술을 만들기:

그런 다음 Claude Code, GitHub Copilot Agent 또는 OpenAI Codex에서 호출하십시오.

기술은 “eduba 브랜드”, “eduba 디자인 시스템”, 또는 Eduba 브랜드를 구축 할 때 자동으로 활성화합니다. 그것은 `SKILL을로드합니다.

eduba-brand

Reference bundle for the Eduba visual identity, design tokens, voice, and component patterns. Pass this repo to any agent building an Eduba product.

📦 @eduba/ui — the React component library

This repo publishes @eduba/ui, the brand’s production React component library (Radix + Tailwind v4, paper/wine themes). If you’re building a React/Next app, install it from npm — don’t copy files.

pnpm add @eduba/ui      # or: npm i @eduba/ui · yarn add @eduba/ui

Everything below is brand reference material (tokens, voice, patterns) for building Eduba products by hand or with an agent.

How to use with an AI agent

Option A — Agent Skill (recommended)

The brand ships as a proper Agent Skill at .agents/skills/eduba-brand/. Copy that directory into any project to make the skill available:

cp -r path/to/eduba-brand/.agents/skills/eduba-brand /your-project/.agents/skills/

Then invoke it in Claude Code, GitHub Copilot Agent, or OpenAI Codex with:

/eduba-brand

The skill activates automatically when you mention “eduba brand”, “eduba design system”, or ask to build anything Eduba-branded. It loads SKILL.md plus on-demand reference files for tokens, recipes, and voice.

Option B — Manual context

Point the agent at AGENT_BRIEF.md first. It is the fastest reliable entry point.

Read AGENT_BRIEF.md before writing any code for this project.
If needed, also read AGENT_SKILLS.md for copy-paste recipes,
PRODUCT_UI.md for layout patterns, and voice/PRODUCT_VOICE.md
for in-app copy. Use BRAND.md as deep reference only.

Precedence

If files disagree, use this order:

1. tokens/*.json, tokens/tokens.css, and animations/animations.ts
2. AGENT_BRIEF.md
3. PRODUCT_UI.md
4. voice/PRODUCT_VOICE.md
5. voice/VOICE.md
6. BRAND.md

---

Structure

eduba-brand/
├── packages/ui/              ← @eduba/ui — published React component library (npm)
├── apps/docs/                ← Next.js docs site → https://ui.eduba.io
├── AGENTS.md                 ← Agent entry point: fetch @eduba/ui + how to use it
├── AGENT_BRIEF.md            ← Start here. Fast agent-safe brief.
├── AGENT_SKILLS.md           ← Per-skill recipes (folder tabs, shell, grain, etc.)
├── BRAND.md                  ← Deep reference and rationale.
├── PRODUCT_UI.md             ← UI patterns, motifs, layout guidance.
├── colors_and_type.css       ← CSS custom properties + utility classes (framework-agnostic)
├── tokens/