Kumo skill
Cloudflare's interface rules in the kumo-design skill: 15 items with TSX examples for dashboards and Kumo apps
- 4,214 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill is text rules and code examples that run nothing and make no network calls.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/kumoDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill is text rules and code examples that run nothing and make no network calls.
This is third-party code. Review the repository files before installing.
What it does
The `kumo-design` skill gathers 15 design rules for Cloudflare product interfaces in one `SKILL.md`. Each rule has an identifier such as `heading-case` or `dialog-rendering` and a pair of TSX examples: what to do and what to avoid. The rules include 14 pixel content text, headings capitalised only at the start, no `font-bold` and no animated colour change on hover, concentric corner radii, icons aligned with the first line of text, no nested `LayerCard` and no conditional dialog rendering through `open &&`. An agent loads the skill when it designs or reviews Cloudflare dashboards and interfaces built on Kumo, Cloudflare's component library on Base UI. Documentation for the components themselves comes from the library's CLI: `npx @cloudflare/kumo doc Button` prints a component's description.
Who it is for. Cloudflare interface engineers and authors of Kumo apps who review agent code against design rules.
Good fit when
- An agent lays out a dashboard page with Kumo components.
- A pull request with interface changes is reviewed against Cloudflare's design rules.
- Dialogs, cards and sticky headers in an app look off-system and you are hunting for the broken rule.
- Icons, headings and spacing are adjusted to the agreed density with 14 pixel text.
- A dialog loses its close animation and you suspect conditional rendering.
Not a fit when
- The interface has nothing to do with Cloudflare or Kumo: the rules are tied to the company's design system.
- The project follows another system, such as Material or shadcn/ui, and the skill would impose foreign rules.
- The question is about a component's properties: the `npx @cloudflare/kumo doc` CLI gives those, and the skill holds only design rules.
Example request
Review the settings component against the kumo-design rules and fix violations: heading case, nested LayerCard and conditional dialog rendering.Limitations
The README has no ready install command for the skill and does not mention it: copy the `skills/kumo-design` folder into the agent's skills directory by hand. The rules are built for Cloudflare's product interface and the Kumo library, so in other projects some of them, such as 14 pixels for all content, will not fit. The skill does not describe component properties, which the agent takes from the CLI or the documentation. The examples are written in React and TSX.
How to disable. Delete the `kumo-design` folder from the agent's skills directory. The `@cloudflare/kumo` library stays as it was in your project.
FAQ
How do I install the kumo-design skill?
The README has no ready command. Copy the `skills/kumo-design` folder from the repository into the agent's skills directory, for example `.claude/skills/` for Claude Code.
What do the skill's rules check?
Text size and case, font weight, hover transitions, corner radii, shadows with borders, icon alignment, `LayerCard` nesting and dialog rendering. Fifteen rules in total.
Why must dialogs not be rendered conditionally?
Conditional rendering turns off the open and close animation. The `dialog-rendering` rule says to keep the dialog in the tree and control visibility with the `open` prop.
How do I get documentation for Kumo components?
Through the library's CLI: `npx @cloudflare/kumo ls` lists components, `npx @cloudflare/kumo doc Button` prints one description and `npx @cloudflare/kumo docs` prints them all.
Can the rules be applied outside Cloudflare?
Technically yes, but some rules are tied to the company's design system. The skill frames itself as Cloudflare product guidance, so in a third-party project follow that project's own system.
Discussion
No questions or reviews yet.
Related
SkillsThe Ludi Design System skill teaches an agent to choose components and build B2B interface pages by rules, with TSX templates
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Kumo (this card) | yes | 4,214 | |
| Material Design 3 Skill | no | 1,571 | a Material Design 3 skill with tokens and components for Jetpack Compose; these are Cloudflare's design rules for React |
| shadcn/ui | no | 128,022 | the shadcn/ui skill and MCP server that installs components into a project; this holds only interface design rules and examples |
README in short
The README describes Kumo as a library of accessible components on Base UI that handles keyboard, focus and ARIA. For agents it points to a CLI with ls and doc commands and an AGENTS.md file with development rules, while the skill in the `skills/` folder goes unmentioned.
README badge
Original SKILL.md
--- 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">