UI Spec

Skill Name: view-spec

Background & Use Cases

Before handing user stories to UI designers for prototyping or to frontend developers for implementation, you need to clarify the interaction rules: "what elements are on this page, what happens when you click, where does the data come from." Otherwise, designers and developers will each make their own assumptions, leading to pages that don't match requirements expectations. This skill produces view operation specifications that both UI designers and frontend developers can read and follow.

Input & Output

You need to provide: Confirmed user story collection and requirements specification.

You will receive: UI view operation specification tables, including: component mapping per page (what input boxes/buttons/lists), data transformation rules (how displayed values are calculated), valve conditions (when a button is enabled), and operation chains (what gets triggered when clicked).

Process Overview

The Agent defines per scenario, per page: what UI components are on this page (input boxes, buttons, lists), how displayed data is transformed and calculated, under what conditions operations are available, and what operation chains are triggered when a user clicks a button. The output is a view operation specification table that UI designers and frontend developers can use directly.

flowchart TD s0["View Spec Preparation"] s1["Single Scenario Page-by-Page Progression"] s2["Single Scenario Page Consistency Check & Close-Out"] s3["Validation & Confirmation"] s4["Document Integration: Metadata + View Spec Preparation"] s5["Document Integration: All Scenario Page Specs"] s6["Document Integration: Validation Checklist + Pending Clarifications + Finalization Statement"] s0 --> s1 s1 --> s2 s2 --> s3 s3 --> s4 s4 --> s5 s5 --> s6