Clock design skill
@comhora/clock

Clock design skill

Design guidance from ComHora for building and reviewing interfaces with @comhora/clock.

Clock is a fork of audt.ai Judit, itself a fork of Cloudflare Kumo. This guidance is adapted for Clock with attribution; Cloudflare does not sponsor or endorse Clock. Inherited Kumo* APIs and kumo-* semantic tokens remain compatibility names.

Installation

Add the ComHora-maintained clock-design skill from the Clock repository:

npx skills add comhora/comhora@clock-design

Install Clock's component package separately in the project where you will use the guidance:

pnpm add @comhora/clock

Read the complete documentation atclock.comhora.dev. Build it locally with pnpm dev from the repository root.

Upstream Kumo option. To use Cloudflare's separately maintained source skill instead, install it explicitly:

npx skills add cloudflare/kumo@kumo-design

Rules

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.
Recommended example

API tokens

Production token expires in 30 days.

Example to avoid

API tokens

Production token expires in 30 days.

Always sentence case headings

Never capitalize or uppercase headings. Product names must be title-cased.
Recommended example
Recent requests
Example to avoid
Recent Requests
Example to avoid
Recent Requests

Never change the font's tracking

Do not use the tracking-* classes to change the spacing between characters.
Recommended example
Project metrics
Example to avoid
Project metrics

Never use font-bold

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

Account settings

This action is required.

Example to avoid

Account settings

This action is required.

Put related text closer together

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

Web Analytics

Measure site traffic without changing your code.

Example to avoid

Web Analytics

Measure site traffic without changing your code.

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.
Recommended example

Production

Example to avoid

Production

Never transition colors for hover states

Color changes on hover must be immediate. Transitions on fast interactions make the UI feel sluggish.
Recommended example
Example to avoid

Never use borders with drop shadows

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

Deployment API

Last deployed 4 minutes ago

Example to avoid

Deployment API

Last deployed 4 minutes ago

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.
Recommended example
Example to avoid

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.
Recommended example

API token permissions cannot be changed after creation.

Example to avoid

API token permissions cannot be changed after creation.

Example to avoid

API token permissions cannot be changed after creation.

Reduce the font size of inline monospaced text

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

Edit config.toml to continue.

Example to avoid

Edit config.toml to continue.

Use border to separate sticky elements from the content

Recommended example

API tokens

Production token

Preview token

Staging token

Development token

Testing token

Production token

Preview token

Staging token

Development token

Testing token

Example to avoid

API tokens

Production token

Preview token

Staging token

Development token

Testing token

Production token

Preview token

Staging token

Development token

Testing token

Maintain content size during collapse animations

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

Web Analytics

Measure traffic without changing your code.

Example to avoid

Web Analytics

Measure traffic without changing your code.

Never stack LayerCard on top of one another

Recommended example

Recent Requests

Time

Status

Query

00:50 UTC

Error

Clock

Example to avoid

Recent Requests

Time

Status

Query

00:50 UTC

Error

Clock

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.
Recommended example
<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog>
    <Dialog.Title>Edit project</Dialog.Title>
    <Dialog.Description>Update this project's settings.</Dialog.Description>
  </Dialog>
</Dialog.Root>
Example to avoid
{open && (
  <Dialog.Root open>
    <Dialog>
      <Dialog.Title>Edit project</Dialog.Title>
    </Dialog>
  </Dialog.Root>
)}