What problem does it solve? Finished mockups show only one frame of an interactive system, leaving states, edge cases, and behavior decisions to be silently made by engineers mid-build. This Skill turns wireframes into a complete behavioral contract so engineering builds what design intended, eliminating the daily stream of mid-build "what happens when" questions. ## Core Features & Use Cases - State Matrix per Component: Documents empty, loading, error, partial, and ideal states plus interactive states like disabled-with-reason for every data-bound element. - Data Rules and Stress Cases: Specifies truncation, formatting, cardinalities, and long-value cases that mocks silently assume, such as a 60-character name in a 20-character slot. - Behavior Contracts: Writes event-to-outcome chains covering double-submits, mid-save navigation, and concurrent edits as explicit product decisions. - Use Case: A designer hands off a team-management screen mock. Use this Skill to annotate states, catch the missing "invite pending" state, specify truncation rules for 90-character emails, and record decisions for self-removal and concurrent role edits before engineering starts. ## Quick Start Annotate these wireframes into a buildable spec covering all component states, data rules, and behavior contracts for engineering handoff.
