# choosing-charcoal-tokens

> Use before choosing any color, text style, spacing, radius or border value in code that uses @charcoal-ui, and whenever…

Use before choosing any color, text style, spacing, radius or border value in code that uses @charcoal-ui, and whenever a literal is about to be written where a token exists — a hex color, a px padding or gap, a font-size, a border-radius or border-width. Charcoal has one correct token for each of these and the choice is prescribed, not a matter of taste. Also use when reviewing such code, or when deciding how dense, how loud or how bordered a screen should be.

- Type: Skill
- Made by: pixiv
- Category: Design
- Formats: Skills
- Version: c96d41d
- Source: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens
- Page: https://pluginboard.ai/skills/choosing-charcoal-tokens

## Works with

- ChatGPT
- Claude
- Gemini
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT: Download the choosing-charcoal-tokens folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Claude

In Claude (web or desktop): Download the choosing-charcoal-tokens folder and zip the folder itself, then upload it in Customize → Skills.

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Gemini

In Gemini: Download the choosing-charcoal-tokens folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it).

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.copilot/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Cursor

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.cursor/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Claude Code

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.claude/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

Or all of pixiv Charcoal, in Claude Code:

```text
/plugin marketplace add pixiv/charcoal
/plugin install charcoal@charcoal
```

### Codex

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.agents/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Antigravity

In Antigravity: Copy the choosing-charcoal-tokens folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI).

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Gemini CLI

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.gemini/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Replit

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens .agents/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### OpenClaw

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.openclaw/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### OpenCode

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.config/opencode/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

### Hermes Agent

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.hermes/skills/choosing-charcoal-tokens
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/choosing-charcoal-tokens

---
From Pluginboard (https://pluginboard.ai).