Find the concepts that match the work in the index below. A button needs the hover, press, and hit-area concepts; a table or timer needs tabular numbers; anything with an image needs image outlines.
Read the matching file in references/ before writing code. Each concept there contains the full reasoning, the rule, and the code snippets. Do not apply a concept from the one-line summary alone.
Apply the rule, and prefer the site's exact values (durations, easings, radii, opacities) over inventing your own.
When reviewing existing UI, report each change as a row in a table with the columns Before, After, and Concept, linking the concept URL so the user can read and try the demo.
Only cite a concept that is in the index. If the question is outside the index, say so and fall back to general judgement.

Principles

Details that nobody notices still compound. Correct defaults on radius, spacing, easing, and contrast are what make an interface feel finished.
Consistency beats novelty. Reuse the same two or three easings, the same radius ratios, and the same shadow recipe across the product.
Motion has to earn its place. Frequent, intentional interactions should be instant; rare or spatial ones can animate.
Respect physical intuition. Nothing appears from nothing, nested corners share a center, and light comes from above.

Concept index

Typography

Tabular Numbers: Steady digits for values that change. (reference, demo)
Optical Alignment: Center for the eye, not the math. (reference, demo)
Font Smoothing: Light text on dark renders heavier. (reference, demo)

Color

Noise: Grain hides banding and adds texture. (reference, demo)
Image Outlines: A faint inner edge that frames images. (reference, demo)

Layout

Nested Border Radius: Inner radius is outer minus padding. (reference, demo)
HTML Background: Paint the canvas behind your page. (reference, demo)
Scroll Fades: Fade the edge that has more to scroll. (reference, demo)

Motion

Button Press: Scale down on press so it feels real. (reference, demo)
Interruptibility: Let people change their mind mid-motion. (reference, demo)
Hover Restraint: Frequent interactions should be instant. (reference, demo)

Keeping this skill current

This file and references/ are generated from the site's content with bun run build:skill in the Craft repository. Edit the articles, not the references.

craft-design-engineering

Craft

How to use this skill