/crisp-design-eng
The craft layer.
What it does
The craft layer of CRISP. /crisp-design-eng closes the gap between an interface that works and one that feels right — motion decisions, micro-interaction quality, colour strategy, typography doctrine, and the invisible details that erode trust when they are wrong, even though no user can say why.
It does not add animation for visual interest. It identifies named craft violations — delayed feedback, easing that reads as slowness, motion at the wrong frequency for how often users trigger it — and specifies the exact fix, in code, with the CRISP dimension it repairs.
When to reach for it
Reach for it when function is done and feel is not:
- A modal, dropdown, or transition feels janky and you need it named and fixed
- Adding motion to a component and wanting it justified, not decorative
- A pre-ship polish pass on a surface that works but does not feel finished
- Running the Mechanical Pre-Flight Checks that
/crisp-redesignand/crisp-funnelrequire before delivery
What it produces
- Before → After craft violations table
- Motion decisions (duration · easing)
- Performance + reduced-motion flags
- Every fix mapped to a CRISP dimension
In the terminal
Illustrative example output — not a real audit.
The sixth question
The CRISP framework scores whether a design is good across five dimensions. Design engineering asks the question the framework deliberately does not score: does it feel the way it should? That is not a soft question — it has specific, testable answers, and this skill exists to make them explicit. A thousand invisible details, each correct, produce something that feels right without the user being able to say why.
Common questions
Will it add animations to my UI?
Only where motion has a function. Its default position is restraint: it is as likely to remove an unjustified transition as to add one, and every motion decision it makes documents duration, easing, and the dimension it serves.
What are the Mechanical Pre-Flight Checks?
A set of objective, countable checks on a surface before it ships — CTA contrast and wrap, palette and radius locks, layout tells. /crisp-redesign and /crisp-funnel both invoke them as a quality gate before delivery.
Why OKLCH for colours?
It is perceptually uniform — equal steps in lightness actually look equal — which makes palettes predictable and accessible contrast easier to reason about. New colour tokens are specified in OKLCH, never raw hex.
What is the font doctrine about?
Avoiding training-data defaults. A reflex-reject list covers fonts so often chosen by AI systems that they read as a signal, and the selection procedure forces a choice through physical reference — the typeface of a museum caption card, not "something modern".
Install
Installs all fourteen CRISP skills and auto-detects your AI harness. Run /crisp-teach once per project first.
Related skills