/crisp-design-eng
Get the motion and details right.
(What it does)
The craft layer of CRISP. /crisp-design-eng closes the gap between an interface that works and one that feels right. It covers motion, micro-interactions (small responses to a single action, like a button press), colour, typography, and the small details that quietly erode trust when they are wrong, even though users cannot say why.
It does not add animation for decoration. It names specific craft problems, such as delayed feedback, easing that makes things feel slow, or motion that is too heavy for how often users trigger it. Then it specifies the exact fix, in code, and the CRISP dimension it repairs.
(When to use it)
Use it when the feature works but does not feel right yet:
- A modal, dropdown, or transition feels janky and you need the problem named and fixed
- You are adding motion to a component and want it to have a purpose, not just decorate
- A final polish pass on a screen that works but does not feel finished
- Running the Mechanical Pre-Flight Checks that
/crisp-redesignand/crisp-funnelrequire before delivery
(What you get)
- Before-and-after table of craft problems
- Motion decisions (duration and easing)
- Performance and reduced-motion flags
- Every fix linked to a CRISP dimension
(Example output)
Illustrative example only. This is 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 question has specific, testable answers, and this skill makes them explicit. Many small details, each done correctly, add up to something that feels right, even when users cannot say why.
(Common questions)
Will it add animations to my UI?
Only where motion serves a purpose. Its default is restraint: it is as likely to remove an unjustified transition as to add one, and every motion decision records the duration, the easing, and the dimension it serves.
What are the Mechanical Pre-Flight Checks?
A set of objective, countable checks run on a screen before it ships, such as button contrast and text wrapping, locked colour and corner-radius rules, and telltale layout patterns. /crisp-redesign and /crisp-funnel both run them as a final quality check before delivery.
Why OKLCH for colours?
OKLCH is a colour format that is perceptually uniform: equal steps in lightness actually look equal. That makes palettes predictable and accessible contrast easier to reason about. New colour tokens are written in OKLCH, never raw hex.
What is the font doctrine about?
Avoiding the fonts AI tools reach for by default. A reject list covers fonts AI systems choose so often that they have become a giveaway. The selection process then ties the choice to a physical reference, such as the typeface on a museum caption card, rather than "something modern".
(Install)
Installs all fourteen CRISP skills and detects which AI coding tool you use. Run /crisp-teach once per project, before the other skills.
(Related skills)