# craft-design-engineering

A skill that hands your agent design engineering rules: type, colour, spacing, motion and numbers. Useful when a UI needs to look finished.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 479 installs · ★ 351
- Author: gustavo-fior
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/gustavo-fior/craft/tree/HEAD/skills/craft-design-engineering/SKILL.md
- Updated: 2026-10-15
- HTML: https://affpapa.org/en/nevibecode/skills/craft-design-engineering

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add gustavo-fior/craft --skill craft-design-engineering -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/craft-design-engineering/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/craft-design-engineering/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add gustavo-fior/craft --skill craft-design-engineering -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/craft-design-engineering/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add gustavo-fior/craft --skill craft-design-engineering -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/craft-design-engineering/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install gustavo-fior/craft craft-design-engineering
```

2. **Manually: put the files in place**
- File: `.github/skills/craft-design-engineering/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add gustavo-fior/craft --skill craft-design-engineering -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/gustavo-fior/craft --path skills/craft-design-engineering
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/craft-design-engineering/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add gustavo-fior/craft --skill craft-design-engineering -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/gustavo-fior/craft/tree/HEAD/skills/craft-design-engineering/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md