monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

design system token v0.3

Browse Source
This commit is contained in:
Juan
2026-04-13 17:03:28 -05:00
parent 1d80882647
commit f7acb63782
4 changed files with 127 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
README.md
View File

@@ -55,61 +55,62 @@ greyhaven-design-system/
## Using the Design System with AI
The design system provides three complementary ways for AI agents to consume it:
The design system provides three things for AI agents:
| | Claude Skill (SKILL.md) | AGENT.md | MCP Server |
|---|---|---|---|
| **What it is** | Claude Code skill file | Generic AI agent instructions | Running process with tools |
| **Stays in sync** | Yes -- auto-generated | Yes -- auto-generated | Yes -- reads source at runtime |
| **Setup** | Symlink to `.claude/skills/` | Symlink to project root | Configure in settings |
| **Best for** | Claude Code | Cursor, Copilot, Windsurf, Codeium | Programmatic access, validation |
| File | What it is | Where it goes |
|------|-----------|---------------|
| **SKILL.md** | Full design system reference (tokens, all components, composition rules, extension protocol) | `.claude/skills/` — works in Claude Code, Cursor, OpenCode, Anigravity, etc. |
| **AGENT.md** | Short project instructions telling the AI *how* to use the design system (like CLAUDE.md but portable) | Project root — copy as `AGENT.md`, `CLAUDE.md`, `.cursorrules`, or `.github/copilot-instructions.md` |
| **MCP Server** | Runtime tools for looking up components, validating colors, suggesting components | Configured in `.mcp.json` |
All three read from the same sources (`tokens/*.json` and `lib/catalog.ts`), so they always agree.
All are auto-generated from the same sources (`tokens/*.json` and `lib/catalog.ts`).
### Quick Install (all at once)
The install script sets up everything -- Claude Skill, AGENT.md, and fonts:
```bash
./skill/install.sh /path/to/your/project
```
This will:
1. Symlink `SKILL.md` into `.claude/skills/` (for Claude Code)
2. Symlink `AGENT.md` into the project root (for Cursor, Copilot, etc.)
1. Symlink `SKILL.md` into `.claude/skills/` (full reference for any AI agent)
2. Copy `AGENT.md` into the project root (project-level instructions)
3. Copy Aspekta font files into `public/fonts/`
4. Print CSS import instructions
### Option A: Claude Skill (SKILL.md)
### SKILL.md (full reference)
The skill file gives any Claude Code session full design system context -- tokens, all components with props/examples, composition rules, font setup, and the extension protocol.
The skill file gives any AI agent full design system context — every token, every component with props/variants/examples, composition rules, font setup, and the extension protocol.
**Install into a consuming project:**
**It's a global standard** — works with Claude Code, Cursor, OpenCode, Anigravity, and any tool that reads skill files.
```bash
# From the design system repo
# Via install script
./skill/install.sh /path/to/your/project
# Or manually
mkdir -p /path/to/your/project/.claude/skills
ln -sf /absolute/path/to/greyhaven-design-system/skill/SKILL.md \
/path/to/your/project/.claude/skills/greyhaven.md
/path/to/your/project/.claude/skills/greyhaven-design-system.md
```
**Regenerate after changes:**
### AGENT.md (project instructions)
Short, directive instructions that tell the AI agent *how* to work in the project — use TypeScript, use semantic tokens, reference the MCP tools, etc. This is the equivalent of `CLAUDE.md` but portable across tools.
**Copy it to your project root** under whichever name your tool reads:
```bash
pnpm skill:build
```
# Claude Code
cp /path/to/greyhaven-design-system/skill/AGENT.md /path/to/your/project/CLAUDE.md
This is run automatically as part of `pnpm build`. If you add a component, add it to `lib/catalog.ts` and regenerate.
# Cursor
cp /path/to/greyhaven-design-system/skill/AGENT.md /path/to/your/project/.cursorrules
### Option B: AGENT.md (non-Claude AI agents)
# GitHub Copilot
mkdir -p /path/to/your/project/.github
cp /path/to/greyhaven-design-system/skill/AGENT.md /path/to/your/project/.github/copilot-instructions.md
For Cursor, GitHub Copilot, Windsurf, Codeium, and other AI coding assistants that read project-root markdown files:
```bash
# Via install script (also sets up fonts + Claude Skill)
# Or just use the install script which symlinks AGENT.md to the root
./skill/install.sh /path/to/your/project
# Or manually