Agent skill

Kumo Design

Cloudflare product design guidance. An agent skill from elliothux/open-compute.

Apache-2.0Auto-check passedFrontend & Design

Install Kumo Design

skills CLI

$ npx skills add elliothux/open-compute --skill kumo-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install elliothux/open-compute kumo-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/elliothux/open-compute.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/kumo-design .claude/skills/kumo-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "kumo-design" agent skill from https://github.com/elliothux/open-compute/tree/main/.agents/skills/kumo-design into .claude/skills/kumo-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kumo-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/elliothux/open-compute/tree/main/.agents/skills/kumo-design

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add elliothux/open-compute --skill kumo-design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install elliothux/open-compute kumo-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/elliothux/open-compute.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/kumo-design .agents/skills/kumo-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "kumo-design" agent skill from https://github.com/elliothux/open-compute/tree/main/.agents/skills/kumo-design into .agents/skills/kumo-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kumo-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add elliothux/open-compute --skill kumo-design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install elliothux/open-compute kumo-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/elliothux/open-compute.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/kumo-design .cursor/skills/kumo-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "kumo-design" agent skill from https://github.com/elliothux/open-compute/tree/main/.agents/skills/kumo-design into .cursor/skills/kumo-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kumo-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/elliothux/open-compute.git --path .agents/skills/kumo-design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add elliothux/open-compute --skill kumo-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install elliothux/open-compute kumo-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/elliothux/open-compute.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/kumo-design .gemini/skills/kumo-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "kumo-design" agent skill from https://github.com/elliothux/open-compute/tree/main/.agents/skills/kumo-design into .gemini/skills/kumo-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kumo-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install elliothux/open-compute kumo-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add elliothux/open-compute --skill kumo-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/elliothux/open-compute.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/kumo-design .github/skills/kumo-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "kumo-design" agent skill from https://github.com/elliothux/open-compute/tree/main/.agents/skills/kumo-design into .github/skills/kumo-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kumo-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add elliothux/open-compute --skill kumo-design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install elliothux/open-compute kumo-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/elliothux/open-compute.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/kumo-design .opencode/skills/kumo-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "kumo-design" agent skill from https://github.com/elliothux/open-compute/tree/main/.agents/skills/kumo-design into .opencode/skills/kumo-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kumo-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: kumo-design
GitHub stars: 1.8k
Token cost: ~1.6k tokens
SKILL.md length: 365 words
Files: 1
Skills in repo: 7
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Cloudflare product design guidance. An agent skill from elliothux/open-compute.

Reviewing Cloudflare dashboard interfaces
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Responsive styling

What it does

Kumo Design is an agent skill from elliothux/open-compute. Cloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Cloudflare and Cloudflare Workers. The repository describes itself as: Self-hosted Cloudflare Workers-compatible platform with Workers、KV、D1、R2、DO、Queues、Workflows、Cron、Cache、Images、Vectorize、AI Search、Artifacts、Static Assets、Service… The licence is Apache-2.0.

When your agent uses it

Reviewing Cloudflare dashboard interfaces
Responsive styling

Example prompts

“/kumo-design”

What it can do on your machine

Read from SKILL.md and the folder at commit 6ebd701. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Kumo Design loads about 1.6k tokens when it runs. Until then it costs about 46 tokens; SKILL.md has 365 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~46
When it runs · the whole SKILL.md, loaded when a task matches: ~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from elliothux/open-compute at commit 6ebd701, republished under its Apache-2.0 licence (© elliothux). 365 words, ~1,602 tokens.

Download SKILL.mdSave it as .claude/skills/kumo-design/SKILL.md (or your agent's skills folder).

name: kumo-design
description: Cloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests.

Cloudflare Design

Apply these rules when designing, implementing, or reviewing Cloudflare product interfaces. Follow recommended examples and avoid patterns marked as examples to avoid.

Rules

`content-text-size` Use 14px for content text

All content text—body, buttons, data, other interactables—must be 14px in size. 16px and above are restricted to headings and subheadings.

Good

tsx

<Text>Content text</Text>

Avoid

tsx

<Text size="lg">Content text</Text>

`heading-case` Always sentence case headings

Never capitalize or uppercase headings. Product names must be title-cased.

Good

tsx

<Text as="h2">Recent requests</Text>

Avoid

tsx

<Text as="h2">Recent Requests</Text>

tsx

<Text as="h2" DANGEROUS_className="uppercase">
  Recent requests
</Text>

`font-tracking` Never change the font's tracking

Do not use the tracking-* classes to change the spacing between characters.

Good

tsx

<span className="text-lg">Worker Metrics</span>

Avoid

tsx

<span className="text-lg tracking-tight">Worker Metrics</span>

`font-weight` Never use `font-bold`

Use font-semibold for headings and font-medium for bold inline text.

Good

tsx

<Text as="h3" variant="heading3">Account settings</Text>
<Text as="strong" bold>required</Text>

Avoid

tsx

<Text as="h3" DANGEROUS_className="font-bold">Account settings</Text>
<Text as="strong" DANGEROUS_className="font-bold">required</Text>

`related-text-spacing` Put related text closer together

Related text should have smaller spacing around it than the content it belongs to.

Good

tsx

<div className="grid gap-6">
  <div className="grid gap-1.5">
    <Text as="h3">Web Analytics</Text>
    <Text>Measure site traffic without changing your code.</Text>
  </div>
  <Button>Configure</Button>
</div>

Avoid

tsx

<div className="grid gap-4">
  <Text as="h3">Web Analytics</Text>
  <Text>Measure site traffic without changing your code.</Text>
  <Button>Configure</Button>
</div>

`text-spacing` Optically align spacing around text

Spacing around text should take into account its line height. Typically this means vertical spacing should be slightly smaller than horizontal.

Good

tsx

<LayerCard className="px-5 py-4">...</LayerCard>

Avoid

tsx

<LayerCard className="p-5">...</LayerCard>

`hover-color-transitions` Never transition colors for hover states

Color changes on hover must be immediate. Transitions on fast interactions make the UI feel sluggish.

Good

tsx

<button className="hover:bg-kumo-tint">...</button>

Avoid

tsx

<button className="transition-colors duration-300 hover:bg-kumo-tint">
  ...
</button>

`shadow-borders` Never use borders with drop shadows

Use ring ring-kumo-line to create a transparent border that maintains sharp edges.

Good

tsx

<LayerCard className="shadow-md ring ring-kumo-line">...</LayerCard>

Avoid

tsx

<LayerCard className="border border-kumo-line shadow-md">...</LayerCard>

`concentric-border-radius` Use concentric border radii

When borders or rings are 8px or less apart, their corner radii must be mathematically concentric: outer radius = inner radius + padding.

Good

tsx

<div className="rounded-xl p-1">
  <div className="rounded-lg">...</div>
</div>

Avoid

tsx

<div className="rounded-xl p-1">
  <div className="rounded-xl">...</div>
</div>

Show full SKILL.md (134 more words)Show less

`icon-alignment` Align icons with the first line of text

Inline icons must be optically the same size as and be center-aligned with text. Use h-lh flex items-center for multi-line alignment.

Good

tsx

<div className="flex items-start gap-2">
  <span className="h-lh flex items-center">
    <Icon />
  </span>
  <Text>Text that may wrap onto multiple lines</Text>
</div>

Avoid

tsx

<div className="flex items-start gap-2">
  <span className="flex items-center">
    <Icon />
  </span>
  <Text>Text that may wrap onto multiple lines</Text>
</div>

tsx

<div className="flex items-center gap-2">
  <Icon />
  <Text>Text that may wrap onto multiple lines</Text>
</div>

`inline-monospace-size` Reduce the font size of inline monospaced text

Monospaced text should have a slightly smaller font size (~0.9em) when mixed with regular text.

Good

tsx

<Text size="lg">
  Edit <span className="font-mono text-[0.9em]">wrangler.toml</span> to
  continue.
</Text>

Avoid

tsx

<Text size="lg">
  Edit <span className="font-mono">wrangler.toml</span> to continue.
</Text>

`sticky-borders` Use `border` to separate sticky elements from the content

Good

tsx

<div className="sticky top-0 border-b border-kumo-line">...</div>

Avoid

tsx

<div className="sticky top-0">...</div>

`collapse-content-size` Maintain content size during collapse animations

Collapsible content must maintain its content size while closing to avoid its content shifting during animations.

Good

tsx

<motion.div animate={{ width: open ? 256 : 0 }}>
  <div className="w-64">...</div>
</motion.div>

Avoid

tsx

<motion.div animate={{ width: open ? 256 : 0 }}>
  <div className="w-full min-w-0">...</div>
</motion.div>

`layer-card-nesting` Never stack `LayerCard` on top of one another

Good

tsx

<div>
  <Text as="h3">Recent requests</Text>
  <LayerCard>...</LayerCard>
</div>

Avoid

tsx

<LayerCard>
  <Text as="h3">Recent requests</Text>
  <LayerCard>...</LayerCard>
</LayerCard>

`dialog-rendering` Never conditionally render dialogs

Conditionally rendering dialogs disables their open/close animation. Use the open prop to determine if a dialog should be visible or not.

Good

tsx

<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog>
    <Dialog.Title>Edit Worker</Dialog.Title>
    <Dialog.Description>Update this Worker's settings.</Dialog.Description>
  </Dialog>
</Dialog.Root>

Avoid

tsx

{
  open && (
    <Dialog.Root open>
      <Dialog>
        <Dialog.Title>Edit Worker</Dialog.Title>
      </Dialog>
    </Dialog.Root>
  );
}

Files

Just SKILL.md in .agents/skills/kumo-design of elliothux/open-compute.

Open the folder on GitHubat commit 6ebd701

Compare with similar skills

Kumo Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Kumo Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Kumo Design this skillelliothux/open-compute	1.8k	—	~1.6k	Automated safety check: Pass	Apache-2.0	today
Turnstile Spintry-works/role-model	118	—	~3.8k	Automated safety check: Pass	Custom licence	2 days ago
Test Fumadocs Wranglerclabernetes/clabernetes	143	—	~569	Automated safety check: Pass	BSD-3-Clause	4 days ago
Cloudflare Pagessickn33/agentic-awesome-skills	47k	2 repos	~2.4k	Automated safety check: Pass	MIT	today
Tanstack Tablesecondsky/claude-skills	227	—	~5.6k	Automated safety check: Notes	MIT	11 days ago
Cloudflare Browser Renderingcloudflare/moltworker	10k	—	~742	Automated safety check: Pass	Apache-2.0	5 mo ago

Similar skills

Turnstile Spin
try-works/role-model
Set up Cloudflare Turnstile end-to-end in a project — scan the codebase, create the widget via the Cloudflare API, deploy the managed siteverify Worker, write the frontend snippets, validate, and…
118 GitHub stars~3.8k tokensUpdated 2 days ago
Frontend & DesignAuto-check passed
Test Fumadocs Wrangler
clabernetes/clabernetes
Builds and validates the Fumadocs React Router static site through Wrangler with headless browser checks.
143 GitHub stars~569 tokensUpdated 4 days ago
Productivity & AutomationAuto-check passed
Cloudflare Pages
sickn33/agentic-awesome-skills
Deploy static sites and full-stack apps on Cloudflare Pages with previews, functions, and custom domains.
47k GitHub starsUsed in 2 repos~2.4k tokens
DevOps & CloudAuto-check passed
Tanstack Table
secondsky/claude-skills
TanStack Table v8 headless data tables with server-side features for Cloudflare Workers + D1.
227 GitHub stars~5.6k tokensUpdated 11 days ago
Backend & APIsAuto-check: notes
Cloudflare Browser Rendering
cloudflare/moltworker
Official
Drives headless Chrome through Cloudflare Browser Rendering over a CDP WebSocket to take screenshots, navigate and scrape pages, and record multi-page videos.
10k GitHub stars~742 tokensUpdated 5 mo ago
Productivity & AutomationAuto-check passed
Turnstile Spin
cloudflare/skills
Official
Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.
3k GitHub starsUsed in 4 repos~7.2k tokens
Frontend & DesignAuto-check: notes

Questions about Kumo Design

What does Kumo Design do?

Cloudflare product design guidance. An agent skill from elliothux/open-compute. Kumo Design is an agent skill from elliothux/open-compute. Cloudflare product design guidance.

When should I use Kumo Design?

Kumo Design fits situations like: reviewing Cloudflare dashboard interfaces; responsive styling.

How do I install Kumo Design in Claude Code?

Run `npx skills add elliothux/open-compute --skill kumo-design -a claude-code`. Or copy the skill folder (.agents/skills/kumo-design in elliothux/open-compute) into .claude/skills/kumo-design in your project. Claude Code loads it when a task matches its description.

How do I install Kumo Design in Codex?

Run `npx skills add elliothux/open-compute --skill kumo-design -a codex`. Or copy the skill folder (.agents/skills/kumo-design in elliothux/open-compute) into .agents/skills/kumo-design in your project. Codex loads it when a task matches its description.

Can I use Kumo Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add elliothux/open-compute --skill kumo-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/kumo-design, .gemini/skills/kumo-design, .github/skills/kumo-design and .opencode/skills/kumo-design in your project.

What does Kumo Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Kumo Design is instructions for the agent only.

Does Kumo Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Kumo Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Kumo Design use?

Kumo Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Kumo Design use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Kumo Design?

Skills that share tags, products or a category with Kumo Design: Turnstile Spin (try-works/role-model, 118 stars), Test Fumadocs Wrangler (clabernetes/clabernetes, 143 stars), Cloudflare Pages (sickn33/agentic-awesome-skills, 47k stars) and Tanstack Table (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Kumo Design?

elliothux (a GitHub user) maintains it in elliothux/open-compute, which has 1,824 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 8, 2026.

Source: elliothux/open-compute on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Kumo Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Cloudflare Design

Rules

content-text-size Use 14px for content text

heading-case Always sentence case headings

font-tracking Never change the font's tracking

font-weight Never use font-bold

related-text-spacing Put related text closer together

text-spacing Optically align spacing around text

hover-color-transitions Never transition colors for hover states

shadow-borders Never use borders with drop shadows

concentric-border-radius Use concentric border radii

icon-alignment Align icons with the first line of text

inline-monospace-size Reduce the font size of inline monospaced text

sticky-borders Use border to separate sticky elements from the content

collapse-content-size Maintain content size during collapse animations

layer-card-nesting Never stack LayerCard on top of one another

dialog-rendering Never conditionally render dialogs

Files

Compare with similar skills

Similar skills

More from elliothux/open-compute

Related

Questions about Kumo Design

`content-text-size` Use 14px for content text

`heading-case` Always sentence case headings

`font-tracking` Never change the font's tracking

`font-weight` Never use `font-bold`

`related-text-spacing` Put related text closer together

`text-spacing` Optically align spacing around text

`hover-color-transitions` Never transition colors for hover states

`shadow-borders` Never use borders with drop shadows

`concentric-border-radius` Use concentric border radii

`icon-alignment` Align icons with the first line of text

`inline-monospace-size` Reduce the font size of inline monospaced text

`sticky-borders` Use `border` to separate sticky elements from the content

`collapse-content-size` Maintain content size during collapse animations

`layer-card-nesting` Never stack `LayerCard` on top of one another

`dialog-rendering` Never conditionally render dialogs