Showcase three features
Let the working product do the talking.
Annotate the three most important features of this screen for a product demo.
Name a release, choose its audience, then publish a local preview. The annotations explain value while the application stays usable.
Inspect plan, source & verification
Actual schema-valid React plan. Targets refer to source refs; this JSON is never executed by the drawing runtime. After installing @funsaized/stet, copy to annotation-plan.json and run ./node_modules/.bin/stet validate annotation-plan.json --json.
{
"version": 1,
"framework": "react",
"intent": "Show the three features of the release form in a restrained product demonstration.",
"annotations": [
{
"id": "name",
"primitive": "underline",
"targets": [
{
"strategy": "ref",
"file": "website/src/showcase/Release.tsx",
"locator": "titleLabel",
"description": "Release name label"
}
],
"options": {
"seed": 71,
"description": "Name the release so your team can recognize it.",
"stroke": "#416ba0"
}
},
{
"id": "audience",
"primitive": "highlight",
"targets": [
{
"strategy": "ref",
"file": "website/src/showcase/Release.tsx",
"locator": "audienceLabel",
"description": "Private preview label"
}
],
"options": {
"seed": 72,
"description": "Choose a private preview before a public launch.",
"fill": "#e3b937"
}
},
{
"id": "publish",
"primitive": "circle",
"targets": [
{
"strategy": "ref",
"file": "website/src/showcase/Release.tsx",
"locator": "submit",
"description": "Publish preview button"
}
],
"options": {
"seed": 73,
"description": "Publish updates the local preview status.",
"stroke": "#b33e2b"
}
}
]
}