ui-require-wireframe

name	ui-require-wireframe
description	Forces wireframe and specification to exist and be current before any UI implementation work begins. Use this skill at the start of every UI-related task.

Require Wireframe First

When to Activate

Activate this skill whenever the user asks to:

• Build, redesign, or significantly change a UI screen or component
• Add a new panel, dialog, sidebar, or interactive surface
• Change layout, navigation, or primary user flows

Do not require a full wireframe for trivial one-line style tweaks or pure copy changes, but still prefer a short note in an existing wireframe.

Required Behavior

Before writing any implementation code for a UI change:

1. Locate existing wireframes

   • Look under wireframes/
   • Also check docs/wireframes/, docs/specs/, and any *.wire.md files

2. If no suitable wireframe exists

   • Create one using the skeleton from the ui-standards skill
   • Place it under wireframes/<feature-or-screen>/
   • Tell the user you created it and ask them to review the acceptance criteria

3. If a wireframe exists but is outdated

   • Update the wireframe and acceptance criteria to match the new intent
   • Call out the changes you made

4. Only after the wireframe + acceptance criteria are current

   • Proceed to implementation
   • Reference the wireframe file(s) in your plan and in commit messages

Enforcement Phrases (use these)

When the user tries to skip ahead:

I need to update (or create) the wireframe and acceptance criteria first.
Once those are solid, I'll implement and then run the adversarial review.

When starting work:

Starting with the wireframe for [screen].
After that I'll implement, then hand off to the adversarial reviewer.

Output Checklist

Before you consider the "wireframe step" complete, confirm:

• Wireframe file exists at a clear path
• Goal, layout regions, key elements, and acceptance criteria are present
• Spec notes (or a short spec.md) exist if the change is non-trivial
• User has had a chance to adjust the acceptance criteria

Only then move to implementation and adversarial review.