craft-design-engineering

Craft

A collection of design engineering concepts by Gustavo Fior. Each concept is a short explainer with a rule you can apply directly, plus the CSS, Tailwind, or React to do it. The live site pairs every concept with an interactive demo.

How to use this skill

1. 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.
2. 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.
3. Apply the rule, and prefer the site's exact values (durations, easings, radii, opacities) over inventing your own.
4. 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.
5. 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.