Kumo Design Agent Skill
Cloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/cloudflare/kumo --skill kumo-designThe instruction itself
17 sections, as written by the authorCloudflare 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
<Text>Content text</Text>
Avoid
<Text size="lg">Content text</Text>
heading-case Always sentence case headings
Never capitalize or uppercase headings. Product names must be title-cased.
Good
<Text as="h2">Recent requests</Text>
Avoid
<Text as="h2">Recent Requests</Text>
<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
<span className="text-lg">Worker Metrics</span>
Avoid
<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
<Text as="h3" variant="heading3">Account settings</Text>
<Text as="strong" bold>required</Text>
Avoid
<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
<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
<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
<LayerCard className="px-5 py-4">...</LayerCard>
Avoid
<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
<button className="hover:bg-kumo-tint">...</button>
Avoid
<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
<LayerCard className="shadow-md ring ring-kumo-line">...</LayerCard>
Avoid
<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
<div className="rounded-xl p-1">
<div className="rounded-lg">...</div>
</div>
Avoid
<div className="rounded-xl p-1">
<div className="rounded-xl">...</div>
</div>
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
<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
<div className="flex items-start gap-2">
<span className="flex items-center">
<Icon />
</span>
<Text>Text that may wrap onto multiple lines</Text>
</div>
<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
<Text size="lg">
Edit <span className="font-mono text-[0.9em]">wrangler.toml</span> to
continue.
</Text>
Avoid
<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
<div className="sticky top-0 border-b border-kumo-line">...</div>
Avoid
<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
<motion.div animate={{ width: open ? 256 : 0 }}>
<div className="w-64">...</div>
</motion.div>
Avoid
<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
<div>
<Text as="h3">Recent requests</Text>
<LayerCard>...</LayerCard>
</div>
Avoid
<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
<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
{
open && (
<Dialog.Root open>
<Dialog>
<Dialog.Title>Edit Worker</Dialog.Title>
</Dialog>
</Dialog.Root>
);
}
Other skills for the same job
different authors, same section of the catalogue
Query the OFR (Office of Financial Research) Hedge Fund Monitor API for hedge fund data including SEC Form PF aggregated statistics, CFTC Traders in Financial Futures, FICC Sponsored Repo volumes, and FRB SCOOS dealer financing terms. Access time series data on hedge fund size, leverage, counterparties, liquidity, complexity, and risk management. No API key or registration required. Use when working with hedge fund data, systemic risk monitoring, financial stability research, hedge fund leverage or leverage ratios, counterparty concentration, Form PF statistics, repo market data, or OFR financial research data.
Design and automate Extract, Transform, Load data pipelines for data integration and analytics
Track and analyze US government shutdown liquidity impacts by monitoring TGA (Treasury General Account), bank reserves, EFFR, and SOFR data from FRED API. Use when user wants to (1) analyze current or past government shutdown effects on financial markets, (2) track liquidity conditions during fiscal policy disruptions, (3) assess "stealth tightening" effects, (4) compare shutdown episodes across different monetary policy regimes (QE vs QT), or (5) generate liquidity stress reports with historical context. Recommended usage frequency is weekly on Wednesdays after TGA/reserve data releases.
Auto-instrument Node.js applications with distributed tracing, metrics, and logs.
Azure Monitor Query SDK for Java. Execute Kusto queries against Log Analytics workspaces and query metrics from Azure resources.
Azure Monitor Query SDK for Python. Use for querying Log Analytics workspaces and Azure Monitor metrics.
Use this skill when you need to search Datadog logs, query metrics, tail logs in real-time, trace distributed requests, investigate errors, compare time periods, find log patterns, check service health, or export observability data.
Write comprehensive clinical reports including case reports (CARE guidelines), diagnostic reports (radiology/pathology/lab), clinical trial reports (ICH-E3, SAE, CSR), and patient documentation (SOAP, H&P, discharge summaries). Full support with templates, regulatory compliance (HIPAA, FDA, ICH-GCP), and validation tools.
How to use it
Take cloudflare/kumo-design from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.