# setting-up-charcoal-css-variables

> Use before writing or editing any code that imports @charcoal-ui/react, and whenever a project's charcoal setup is unve…

Use before writing or editing any code that imports @charcoal-ui/react, and whenever a project's charcoal setup is unverified, incomplete or being finished. Charcoal components render completely unstyled unless BOTH @charcoal-ui/theme/css/v2/light.css is imported AND the .ch-token-v2 class is on <html>; importing dist/index.css alone, or adding the stylesheet without the class, silently produces correct geometry with no colors at all.

- Type: Skill
- Made by: pixiv
- Formats: Skills
- Version: af7585e
- Source: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables
- Page: https://pluginboard.ai/skills/setting-up-charcoal-css-variables

## 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 setting-up-charcoal-css-variables 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/setting-up-charcoal-css-variables

### Claude

In Claude (web or desktop): Download the setting-up-charcoal-css-variables 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/setting-up-charcoal-css-variables

### Gemini

In Gemini: Download the setting-up-charcoal-css-variables 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/setting-up-charcoal-css-variables

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.copilot/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

### Cursor

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.cursor/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

### Claude Code

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.claude/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

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/setting-up-charcoal-css-variables ~/.agents/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

### Antigravity

In Antigravity: Copy the setting-up-charcoal-css-variables 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/setting-up-charcoal-css-variables

### Gemini CLI

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.gemini/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

### Replit

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables .agents/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

### OpenClaw

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.openclaw/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

### OpenCode

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.config/opencode/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

### Hermes Agent

Run in your terminal:

```shell
npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.hermes/skills/setting-up-charcoal-css-variables
```

View the folder on GitHub: https://github.com/pixiv/charcoal/tree/HEAD/skills/setting-up-charcoal-css-variables

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