design system token v0.5.1

This commit is contained in:
Juan
2026-04-16 11:10:06 -05:00
parent b8168261a1
commit 64d7df1439
4 changed files with 107 additions and 87 deletions

View File

@@ -60,7 +60,7 @@ The design system provides three things for AI agents:
| 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` |
| **AGENTS.md** | Short project instructions telling the AI *how* to use the design system (follows the [agents.md](https://agents.md) convention) | Project root — copy as `AGENTS.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 are auto-generated from the same sources (`tokens/*.json` and `lib/catalog.ts`).
@@ -71,11 +71,14 @@ All are auto-generated from the same sources (`tokens/*.json` and `lib/catalog.t
./skill/install.sh /path/to/your/project
```
This will:
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
This **copies** (not symlinks) the following into your project:
1. `SKILL.md` `.claude/skills/greyhaven-design-system.md` (full reference)
2. `AGENTS.md` project root (project-level instructions)
3. Aspekta font files `public/fonts/`
The script also prints the CSS `@font-face` block and MCP server config to add next.
**Re-run the script after design system updates** to refresh your copies.
### SKILL.md (full reference)
@@ -84,43 +87,37 @@ The skill file gives any AI agent full design system context — every token, ev
**It's a global standard** — works with Claude Code, Cursor, OpenCode, Anigravity, and any tool that reads skill files.
```bash
# Via install script
# Via install script (recommended — also handles fonts + AGENTS.md)
./skill/install.sh /path/to/your/project
# Or manually
# Or copy 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-design-system.md
cp /path/to/greyhaven-design-system/skill/SKILL.md \
/path/to/your/project/.claude/skills/greyhaven-design-system.md
```
### AGENT.md (project instructions)
### AGENTS.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.
Short, directive instructions that tell the AI agent *how* to work in the project — use TypeScript, use semantic tokens, reference the MCP tools, etc. Follows the [agents.md](https://agents.md) convention so it works with most AI coding tools out of the box.
**Copy it to your project root** under whichever name your tool reads:
```bash
# Claude Code
cp /path/to/greyhaven-design-system/skill/AGENT.md /path/to/your/project/CLAUDE.md
# Standard (agents.md convention — Cursor, OpenCode, Windsurf, Aider, etc.)
cp /path/to/greyhaven-design-system/skill/AGENTS.md /path/to/your/project/AGENTS.md
# Cursor
cp /path/to/greyhaven-design-system/skill/AGENT.md /path/to/your/project/.cursorrules
# Claude Code
cp /path/to/greyhaven-design-system/skill/AGENTS.md /path/to/your/project/CLAUDE.md
# Cursor (legacy)
cp /path/to/greyhaven-design-system/skill/AGENTS.md /path/to/your/project/.cursorrules
# 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
# Or just use the install script which symlinks AGENT.md to the root
./skill/install.sh /path/to/your/project
# Or manually
ln -sf /absolute/path/to/greyhaven-design-system/skill/AGENT.md \
/path/to/your/project/AGENT.md
cp /path/to/greyhaven-design-system/skill/AGENTS.md /path/to/your/project/.github/copilot-instructions.md
```
Some tools use different file names. You can also symlink as:
- `.cursorrules` (Cursor)
- `.github/copilot-instructions.md` (GitHub Copilot)
Or use the install script, which copies `AGENTS.md` to the project root automatically.
### Option C: MCP Server