v1.0.0 — initial release
design-engineering — an agent skill that encodes the invisible details that make UI feel right.
Distills Emil Kowalski (animation), Benji Taylor (delight), Jakub Antalik (transitions), James Frewin (guidelines), lucide-animated (icon animation), and DiceBear (avatars) into one navigable skill graph.
Install
```bash
npx skills add HKTITAN/design-engineering
```
Works with Claude Code, Cursor, Windsurf, Codex, Gemini, Cline, Aider, and 18+ other agents.
What's inside
8 themed clusters, 53 atomic nodes + 8 MOCs + 1 SKILL.md, plus Perplexity Step-0 evals, full OSS scaffolding (CoC, SECURITY, CI), Anthropic-style `spec/` and `template/` folders, and a Claude Code marketplace manifest.
| Theme | What it covers |
|---|---|
| `philosophy` | taste, delight, beauty, feeling-right, when polish matters |
| `motion` | animation, easing, springs, gestures, transitions, debugging (largest cluster) |
| `typography` | humanizing text, line length, tracking |
| `surface` | color, shadow, radius, dark mode, imperfection |
| `components` | hovers, empty/loading states, icons, cards, forms, avatars (DiceBear x 31 styles) |
| `layout` | viewport-custom design, sticky chrome, scroll discipline |
| `anti-patterns` | AI-default tells, content-authenticity audits |
| `meta` | review-format (required for UI critiques), review-checklist, gotchas, pov, cross-model testing |
Structure
The skill is a graph, not a single file. `SKILL.md` is a thin Map of Content (~90 lines); real content lives in `references//.md` atomic nodes connected by `[[wikilinks]]` (per Akshay Pachaar's "Skill Graphs > SKILL.md" and Perplexity's progressive-disclosure guide).
See CHANGELOG.md for the full inventory.