git:20261013.bc9e437 to git:20261013.8f735ab

2 added, 1 removed. Audit A to A.

---

name: design-within-what-exists

description: "Change a screen with the patterns it already has, not new ones. Use when the user says \"redesign this\", \"restyle this page\", \"add a new state\" or \"make it match the rest\"."

license: MIT

metadata:

author: Tony Gorb

source: https://github.com/tonygorb/skills

category: design

cover: "reuse"

---

# Design within what exists

Read what's already there, reuse it, and only then design what's missing.

## Steps

1. Open the live screen first, at the size where it's used most.

2. List what it already uses: buttons, spacing, type, colours, empty and error states.

3. Reuse before you invent. If something new is needed, name it and say why.

- 4. Show one or two options and let the user pick before building.

+ 4. Show one or two options and let the user pick before building. If the structure itself needs

+ rethinking, run `concept-lab` instead.

5. Build only the option that was picked.

## Before it's done

- Compare the new screen side by side with its neighbours.

- Remove every option and leftover you made along the way.

## Never

- Never change a shared colour or size for one screen.

- Never hide anything important behind hover only.

## What to hand back

The finished screen, what you reused, and anything new with the reason for it.