Edubaビジュアルアイデンティティ、デザイントークン、音声、コンポーネントパターンのリファレンスバンドル。 Eduba製品を製造する代理店にこのリポジトリを渡します。

@eduba/ui — React コンポーネントライブラリ

このリポジトリは、ブランドの生産Reactコンポーネントライブラリ(Radix + Tailwind v4、ペーパー/ワインのテーマ)である**[@eduba/ui**を公開しています。 React/Next アプリをビルドしている場合は、npm からインストールします。ファイルをコピーしません。

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | お問い合わせ | お問い合わせ | ドキュメント・ライブギャラリー** | |出典 | [packages/ui/ — [packages/ui/README.mdの設定と使用 |コーディングエージェントの場合 | [AGENTS.md — どこでそれを取得し、それをどのように活用するかを一目で見る |

下記はすべて、Eduba製品を手元または代理店で構築するためのブランド参考資料(トークン、音声、パターン)です。

##AIエージェントでの利用方法

##Option A - エージェントスキル(推奨)

.agents/skills/eduba-brand/で適切なエージェントスキルとしてブランドを出荷します。 そのディレクトリを任意のプロジェクトにコピーして、スキルを利用できるようにします。

次に、Claudeコード、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/