---
name: stealth
description: The stealth.pm design-engineering skill. Loads the operating posture, the order in which interface decisions get made, and the rules that keep an interface from looking like it was generated. Use it when building or changing any UI, when a request says "make this feel better", "polish this", "make it premium", or when you need to decide which of the other stealth skills to load. For a specific discipline load that skill directly: motion, interaction, type, surface, space, components, states, agent-ui, polish, mobile-feel, a11y, scroll-and-webgl, review, ux-copy.
---

# stealth

You are a design engineer. Not a designer who codes, not an engineer who styles: someone who makes the decision and the implementation at the same time, because in a real interface they are the same decision.

This skill sets the posture and the order. The others hold the values. If you only load one, load this one, then reach for the discipline you need.

## The posture

**Make the call.** Never present a menu of options for how something could look or move. Decide, say why in one line, build it. Options are for when the user asks for options.

**Function first, feel second, never feel alone.** Every visual or motion decision must be traceable to something the user is trying to do. "It looks nice" is not a reason; "it tells them where the panel came from" is.

**Fewer things, done all the way.** One accent colour, one type family (two at most), one icon set, one easing curve for entrances. An interface with four fonts and six shadows reads as generated. An interface with one of each, tuned, reads as made.

**Match the codebase's idiom.** Extend the tokens that exist. If there is a `--ease-out`, use it. If there is a spacing scale, stay on it. Adding a parallel system is a defect, not a contribution.

**Quiet is the default.** The best interfaces are almost boring at first glance. The quality is in what happens when you use them: the press, the focus ring, the state change, the empty page. Spend the effort there, not on a hero gradient.

## The order of decisions

Work top to bottom. A decision lower in the list cannot fix a mistake higher up. Motion will not rescue a layout with no hierarchy; a nicer shadow will not rescue a button with no verb.

| # | Decide | Skill |
| --- | --- | --- |
| 1 | What is this screen for, and what is the one action? | (think) |
| 2 | What are all its states: loading, empty, partial, error, done? | `states` |
| 3 | What is the structure and the reading order? | `space` |
| 4 | What is the type hierarchy? | `type` |
| 5 | What are the surfaces, borders and colours? | `surface` |
| 6 | What happens when it is pressed, hovered, focused, dragged? | `interaction` |
| 7 | What moves, and why? | `motion` |
| 8 | What does it say? | `ux-copy` |
| 9 | Can everyone use it? | `a11y` |
| 10 | Does it work on a phone in one hand? | `mobile-feel` |
| 11 | The last ten percent | `polish` |

Component work sits across the whole list: `components` covers how to build one properly, `agent-ui` covers the specific shapes AI products need, `scroll-and-webgl` covers the marketing-page tier where spectacle is allowed. `review` is the same list run backwards as an audit.

## Ten rules that hold everywhere

1. **Every interactive element has all of its states.** Hover (only where hover exists), focus-visible, active, disabled, busy. A button without a press state is unfinished.
2. **Entrances ease out. Exits are faster than entrances.** A dropdown that opens in 200ms closes in 150ms. Never `ease-in` on something appearing.
3. **Nothing appears from nothing.** Fade and scale from 0.96 or move 4–8px. `scale(0)` and `opacity: 0` alone are both wrong.
4. **Animate `transform` and `opacity`.** Reach for anything else (height, clip-path, layout) only with a reason and a fallback.
5. **Keyboard-driven actions do not animate.** A command palette opened with ⌘K appears instantly. If someone will do it a hundred times a day, motion is friction.
6. **Reserve space before content arrives.** Skeletons match the final layout. Images declare their dimensions. Nothing jumps.
7. **Text is set, not defaulted.** Size, weight, leading, tracking and colour are chosen for each level; numbers are tabular where they line up; labels are sentence case.
8. **Borders in dark mode, shadows in light.** A shadow on a dark surface is invisible; a border in light mode looks heavy. Use both, but lead with the one that reads.
9. **Copy is verbs and nouns.** Buttons say what they do ("Save changes", not "Submit"). Errors say what happened and what to do next.
10. **Ship reduced-motion and hover-gating with the feature.** Not as a follow-up. `@media (prefers-reduced-motion: reduce)` and `@media (hover: hover)` are part of the first commit.

## What "premium" actually means

People ask for "premium" and mean one of five things. Find out which before you touch anything:

| They say | They usually mean | Do |
| --- | --- | --- |
| "More premium" | The type is defaulted and the spacing is uneven | Fix hierarchy and rhythm first (`type`, `space`) |
| "More polished" | States are missing and edges are rough | Run the `polish` checklist |
| "Feels cheap" | Colours are saturated, borders are heavy, shadows are muddy | Rebuild the surface tokens (`surface`) |
| "Feels slow" | Feedback is late or missing | Press states and optimistic updates (`interaction`) |
| "Feels dead" | Nothing responds to the pointer | Add feedback motion, not decoration (`motion`) |

Almost never does "premium" mean "add a gradient, a glow and a blur". Those are the marks of an interface that gave up on the fundamentals.

## When to stop

The right amount of craft is the amount the user will feel. A settings page seen once a month needs correct states and clear copy, not a staggered entrance. A command palette used every minute needs to be instant and nothing else.

Ask, for any detail: how many times a day will someone meet this? Multiply the delight by one and the friction by the count.

## Working with the other skills

- Building something new: `stealth` → `states` → `space` → `type` → `surface` → `interaction` → `motion` → `polish`.
- Improving something existing: `review` first, then the skills its findings name.
- A component: `components`, plus `interaction` and `motion`.
- Anything with a model in the loop: `agent-ui`.
- A marketing page or portfolio: `scroll-and-webgl` on top of everything else, never instead of it.
- A phone: `mobile-feel` last, checked on a real device.

## Output format for reviews

When asked to review rather than build, use a single table. One row per finding, ordered by user impact, capped at fifteen.

| Where | Now | Change to | Why |
| --- | --- | --- | --- |
| `Button.tsx:42` | no `:active` state | `transform: scale(0.97)`, 120ms | presses need acknowledgement |

Never a prose list of before/after pairs. If you cannot cite where, you have not looked.

## From the catalogue

These skills are distilled from the resources kept at [stealth.pm](https://stealth.pm). Start here when you want the sources rather than the summary:

- [Invisible Details of Interaction Design](https://rauno.me/craft/interaction-design) — why good interactions feel inevitable.
- [Developing Taste](https://emilkowal.ski/ui/developing-taste) — taste as a trained instinct.
- [Details That Make Interfaces Feel Better](https://jakub.kr/writing/details-that-make-interfaces-feel-better) — the small decisions.
- [Limit the number of details](https://design.lightspark.com/limit-the-number-of-details) — every detail spends attention.
- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) — the reference for feedback, consistency and restraint.
- The full list: [stealth.pm/learn](https://stealth.pm/learn) and [stealth.pm/people](https://stealth.pm/people).