使い方
- インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
- 必要なツール、認証情報、対応環境を原文で確認します。
- 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/gustavo-fior/craft --skill craft-design-engineering開始前の確認
- 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
- スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
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)
- 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)
<!-- 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.
