Frontend mockups

This page orients. The canonical contract agents load is skills/shape-work/references/mockups.md.

Use a mockup when seeing the behavior improves a product decision.

Inspect the project's tokens, components, and nearby views first. Reuse established patterns and label genuinely new proposals as new.

Choose the smallest useful fidelity:

• a sketch or wireframe for structure, states, or flow;
• a renderable proposal when visual hierarchy or interaction cannot be judged from a sketch.

Show only the states, viewport sizes, keyboard behavior, or failure paths relevant to the decision. Keep the artifact inspectable and capture the developer's decision and rationale.

A later implementation request grants product mutation authority; the mockup does not need its own approval state.