How do I install charcoal?

Run these in Claude Code: /plugin marketplace add pixiv/charcoal then /plugin install charcoal@charcoal. Then prompt normally.

Does charcoal auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin.

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Which coding agents can use charcoal's skills?

charcoal installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.

Design

Plugin

charcoal

This is the monorepo for the @charcoal-ui packages by pixiv.

BOOST

pixiv@pixiv

GitHub

Plugin Signal75/100Solid

maintained100

capable43

documented94

adopted55

Claude Code

> /plugin marketplace add pixiv/charcoal
> /plugin install charcoal@charcoal

Codex

$ npx skills add pixiv/charcoal -a codex

More skills for Codex

Cursor

$ npx skills add pixiv/charcoal -a cursor

More skills for Cursor

Gemini CLI

$ npx skills add pixiv/charcoal -a gemini-cli

More skills for Gemini CLI

GitHub Copilot

$ copilot plugin marketplace add pixiv/charcoal
$ copilot plugin install charcoal@charcoal

OpenCode

$ npx skills add pixiv/charcoal -a opencode

More skills for OpenCode

Windsurf

$ npx skills add pixiv/charcoal -a windsurf

More skills for Windsurf

Stats

TypeScript Node React Tailwind CSS GitHub Figma

378

Stars

Forks

Active

Maintenance

TypeScript

Language

Apache-2.0

License

5d ago

Last commit

5y ago

Created

10h ago

Added

Repo: pixiv/charcoal

In this plugin

7 skills

See everything inside

What's inside

7 Skills

/choosing-charcoal-stylingUse before writing or editing any code that imports @charcoal-ui, and whenever a project's charcoal setup is unverified or incomplete. Decides between the CSS variables, Tailwind and styled-components routes, and names the setup steps that are silently missing in most projects./choosing-charcoal-tokensUse 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 /implement-figma-designUse when building a screen from a prepared Figma design pack — a design.md, a spec.json and an assets/ directory produced by prepare-figma-design — and when checking that what you built matches it. Needs no Figma access, no token and no Dev Mode seat. If there is no pack yet,/prepare-figma-designUse when you have a figma.com link or a local .fig export, and someone needs to build that design — including when you will build it yourself. One command turns it into the design's structure, its materials named as your own design tokens, the text of every node and the bitmaps /setting-up-charcoal-css-variablesUse 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 /setting-up-charcoal-styledUse before writing or editing code that uses @charcoal-ui with styled-components, TokenInjector, createTheme or addThemeUtils, and whenever such a project's charcoal setup is unverified or incomplete./setting-up-charcoal-tailwindUse before writing or editing code that uses @charcoal-ui with Tailwind, and whenever such a project's charcoal setup is unverified or incomplete. The v2 token route still needs the theme CSS and the .ch-token-v2 opt-in, which the preset does not supply.

Badges

README

Read on GitHub

@charcoal-ui ― PIXIV Design System monorepo

This is the monorepo for the @charcoal-ui packages by pixiv.

How to use

See our documentation, or README of each package in /packages.

NPM Packages

package	version
@charcoal-ui/foundation
@charcoal-ui/icons
@charcoal-ui/icons-cli
@charcoal-ui/react
@charcoal-ui/react-sandbox
@charcoal-ui/styled
@charcoal-ui/tailwind-config
@charcoal-ui/tailwind-diff
@charcoal-ui/theme
@charcoal-ui/utils

Contribution

Setup

Requires pnpm.

pnpm env use --global `cat .node-version`
# or prefer nodenv if you don't want modify global node version
# nodenv install `cat .node-version`

pnpm install

Development

Start the development server on http://localhost:6006

pnpm build
pnpm storybook

# clean up artifacts for rebuilding
pnpm clean

Commit

@charcoal-ui is using commitlint and following the Conventional Commits rules.

Stars on GitHub

Momentum

stars in total: 378

Star history of pixiv/charcoal on GitHub, a chart by star-history.com

See what's trending this week

File tree

Similar plugins.

ui-ux-pro-max

A design toolkit for Claude Code covering UI styling, design tokens and component specs, brand identity and voice, banners, logos, and HTML slide presentations with charts.

7 skills+3149k

@nextlevelbuilder

impeccable

Design guidance for AI coding agents that helps shape, critique, polish, and improve frontend interfaces such as websites, landing pages, and dashboards. It includes live browser iteration and rules that catch common issues in AI-generated frontend design.

1 skill5 agents110k

@pbakaus

open-design

Turns a brief into a design prototype, website, app, deck, or video that follows your design system, then lets your team share it and refine it with an AI agent in the same project.

170 skills+2108k

@nexu-io

diagram-design

Creates branded editorial diagrams such as architecture charts, flowcharts, sequence diagrams, ER models, timelines and swimlanes as self-contained HTML and SVG files. Suited to writers and designers who want polished visuals for Claude Code.

1 skill+167k

@cathrynlavery

Questions about charcoal.

This is the monorepo for the @charcoal-ui packages by pixiv. Install it with the command on its page. It includes choosing-charcoal-styling, choosing-charcoal-tokens, implement-figma-design. Its skills do not fire on their own yet. Free and open source.

What is charcoal?: This is the monorepo for the @charcoal-ui packages by pixiv.
How do I install charcoal?: Run these in Claude Code: /plugin marketplace add pixiv/charcoal then /plugin install charcoal@charcoal. Then prompt normally.
Does charcoal auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin.
Is charcoal free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Which coding agents can use charcoal's skills?: charcoal installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.

Is this plugin yours?

Claim it with GitHub Submit a plugin Promote it

Design

Plugin

charcoal

This is the monorepo for the @charcoal-ui packages by pixiv.

BOOST

pixiv@pixiv

GitHub

Plugin Signal75/100Solid

maintained100

capable43

documented94

adopted55

Claude Code

> /plugin marketplace add pixiv/charcoal
> /plugin install charcoal@charcoal

Codex

$ npx skills add pixiv/charcoal -a codex

More skills for Codex

Cursor

$ npx skills add pixiv/charcoal -a cursor

More skills for Cursor

Gemini CLI

$ npx skills add pixiv/charcoal -a gemini-cli

More skills for Gemini CLI

GitHub Copilot

$ copilot plugin marketplace add pixiv/charcoal
$ copilot plugin install charcoal@charcoal

OpenCode

$ npx skills add pixiv/charcoal -a opencode

More skills for OpenCode

Windsurf

$ npx skills add pixiv/charcoal -a windsurf

More skills for Windsurf

Stats

TypeScript Node React Tailwind CSS GitHub Figma

378

Stars

Forks

Active

Maintenance

TypeScript

Language

Apache-2.0

License

5d ago

Last commit

5y ago

Created

10h ago

Added

Repo: pixiv/charcoal

In this plugin

7 skills

See everything inside

What's inside

7 Skills

Badges

README

Read on GitHub

@charcoal-ui ― PIXIV Design System monorepo

This is the monorepo for the @charcoal-ui packages by pixiv.

How to use

See our documentation, or README of each package in /packages.

NPM Packages

package	version
@charcoal-ui/foundation
@charcoal-ui/icons
@charcoal-ui/icons-cli
@charcoal-ui/react
@charcoal-ui/react-sandbox
@charcoal-ui/styled
@charcoal-ui/tailwind-config
@charcoal-ui/tailwind-diff
@charcoal-ui/theme
@charcoal-ui/utils

Contribution

Setup

Requires pnpm.

pnpm env use --global `cat .node-version`
# or prefer nodenv if you don't want modify global node version
# nodenv install `cat .node-version`

pnpm install

Development

Start the development server on http://localhost:6006

pnpm build
pnpm storybook

# clean up artifacts for rebuilding
pnpm clean

Commit

@charcoal-ui is using commitlint and following the Conventional Commits rules.

Stars on GitHub

Momentum

stars in total: 378

See what's trending this week

File tree

Similar plugins.

ui-ux-pro-max

A design toolkit for Claude Code covering UI styling, design tokens and component specs, brand identity and voice, banners, logos, and HTML slide presentations with charts.

7 skills+3149k

@nextlevelbuilder

impeccable

1 skill5 agents110k

@pbakaus

open-design

Turns a brief into a design prototype, website, app, deck, or video that follows your design system, then lets your team share it and refine it with an AI agent in the same project.

170 skills+2108k

@nexu-io

diagram-design

1 skill+167k

@cathrynlavery

Questions about charcoal.

What is charcoal?: This is the monorepo for the @charcoal-ui packages by pixiv.
How do I install charcoal?: Run these in Claude Code: /plugin marketplace add pixiv/charcoal then /plugin install charcoal@charcoal. Then prompt normally.
Does charcoal auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin.
Is charcoal free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Which coding agents can use charcoal's skills?: charcoal installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.

Is this plugin yours?

Claim it with GitHub Submit a plugin Promote it

charcoal

What's inside

7 Skills

Links

Badges

README

@charcoal-ui ― PIXIV Design System monorepo

How to use

NPM Packages

Contribution

Setup

Development

Commit

Momentum

File tree

Similar plugins.

ui-ux-pro-max

impeccable

open-design

diagram-design

Questions about charcoal.

charcoal

What's inside

7 Skills

Links

Badges

README

@charcoal-ui ― PIXIV Design System monorepo

How to use

NPM Packages

Contribution

Setup

Development

Commit

Momentum

File tree

Similar plugins.

ui-ux-pro-max

impeccable

open-design

diagram-design

Questions about charcoal.