見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
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
- 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
<!-- concepts:start -->
Typography
- Tabular Numbers: Steady digits for values that change. (reference, demo)
- Optical Alignment: Center for the eye, not the math. (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)
Motion
<!-- concepts:end -->
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.