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

design system token v0.2

Browse Source
This commit is contained in:
Juan
2026-04-13 15:46:38 -05:00
parent c3215945f2
commit c9209a6271
30 changed files with 1190 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
README.md
View File

@@ -55,20 +55,34 @@ greyhaven-design-system/
## Using the Design System with AI
The design system provides two complementary ways for AI agents to consume it:
The design system provides three complementary ways for AI agents to consume it:
| | Claude Skill (SKILL.md) | MCP Server |
|---|---|---|
| **What it is** | A single markdown file with all tokens, components, and rules | A running process that reads source files in real-time |
| **Stays in sync** | Yes -- auto-generated from the same token files and component catalog | Yes -- reads source at runtime |
| **Setup** | Copy/symlink one file | Start a server process |
| **Best for** | Claude Code sessions, quick context | Programmatic access, validation, any MCP-compatible agent |
| | 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 |
Both read from the same sources (`tokens/*.json` and `lib/catalog.ts`), so they always agree.
All three read from the same sources (`tokens/*.json` and `lib/catalog.ts`), so they always agree.
### 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.)
3. Copy Aspekta font files into `public/fonts/`
4. Print CSS import instructions
### Option A: Claude Skill (SKILL.md)
The skill file gives any Claude Code session full design system context -- tokens, all components with props/examples, composition rules, and the extension protocol.
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.
**Install into a consuming project:**
@@ -90,7 +104,24 @@ pnpm skill:build
This is run automatically as part of `pnpm build`. If you add a component, add it to `lib/catalog.ts` and regenerate.
### Option B: MCP Server
### Option B: AGENT.md (non-Claude AI agents)
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)
./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
```
Some tools use different file names. You can also symlink as:
- `.cursorrules` (Cursor)
- `.github/copilot-instructions.md` (GitHub Copilot)
### Option C: MCP Server
The MCP server provides 5 tools for programmatic access: