craft-design-engineering — design eng skill
A skill that hands your agent design engineering rules: type, colour, spacing, motion and numbers. Useful when a UI needs to look finished.
npx skills add gustavo-fior/craft --skill craft-design-engineering -a claude-codeWhat craft-design-engineering does
The skill packages Gustavo Fior's short concepts from craft.gustavofior.com. Every entry states a rule and ships working code in CSS, Tailwind or React. Material sits in topic files under references/: typography, colour, layout, motion. Nine entries in total, from tabular digits and optical alignment to nested corner radii and scroll fades.
SKILL.md sets the workflow. Look up matching concepts in the index first, then open the file and read it through. A one-line summary is not enough to change code with. Apply the rule and reuse the site's values for duration, easing, radius and opacity. For reviews the skill wants each change reported as a table row with Before, After and Concept, linking the demo. Questions outside the index get flagged, with general judgement as the fallback.
The point is small details nobody notices on their own. Two or three shared easings and one ratio for corners matter more than a fresh idea per screen. Motion belongs on rare or spatial interactions; frequent ones should respond instantly. Code lives in the repo, so reread it before starting instead of working from memory.
What it helps with
- keep digits from jittering in a live table
- give a button a press state that feels physical
- match an inner corner radius to the outer one
- break up banding in a gradient with grain
- frame an image that sits on a dark background
Example prompts for the agent
- Run the submit button past the Craft concepts for hover, press and hit area
- Build the orders table with tabular figures and optical alignment
- Review the settings screen and give me a Before/After table with concept links
How to install craft-design-engineering
1Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a claude-code2Manually: put the files in place
~/.claude/skills/craft-design-engineering/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/craft-design-engineering/
1Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a codex2Manually: put the files in place
.agents/skills/craft-design-engineering/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a cursor2Manually: put the files in place
.cursor/skills/craft-design-engineering/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install gustavo-fior/craft craft-design-engineering2Manually: put the files in place
.github/skills/craft-design-engineering/SKILL.md1Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a gemini-cli2Platform CLI
gemini skills install https://github.com/gustavo-fior/craft --path skills/craft-design-engineeringManually: put the files in place
.devin/skills/craft-design-engineering/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about craft-design-engineering
How to install craft-design-engineering in Claude Code?
Run npx skills add gustavo-fior/craft --skill craft-design-engineering -a claude-code. You get the skill at ~/.claude/skills/craft-design-engineering/SKILL.md.
What does craft-design-engineering do?
It gives the agent a set of design engineering rules across typography, colour, layout and motion, each with CSS, Tailwind or React code.
Why read the reference file instead of the index line?
The index holds a title and one sentence. Reasoning, the rule itself and code samples live in the matching references/ file, which the skill tells you to open first.
