Skip to content

Instantly share code, notes, and snippets.

@unfor19

unfor19/planned-reference-artifact-example.svg

Created May 9, 2026 09:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save unfor19/71476940686a3eb7559e87c49c1d0135 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save unfor19/71476940686a3eb7559e87c49c1d0135 to your computer and use it in GitHub Desktop.
Download ZIP
skillz Project 28 reference artifact rendering example
Display the source blob
Display the rendered blob
Raw
planned-reference-artifact-example.svg
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1100" viewBox="0 0 1600 1100">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f6efe3"/>
<stop offset="100%" stop-color="#f1f7ff"/>
</linearGradient>
<linearGradient id="phone" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#f8fbff"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="12" stdDeviation="20" flood-color="#102542" flood-opacity="0.16"/>
</filter>
</defs>
<rect width="1600" height="1100" fill="url(#bg)"/>
<circle cx="1460" cy="120" r="180" fill="#d8e9ff" opacity="0.7"/>
<circle cx="160" cy="980" r="210" fill="#fde2cf" opacity="0.55"/>
<text x="90" y="92" font-family="Helvetica, Arial, sans-serif" font-size="24" font-weight="700" fill="#9a4d1f">skillz planned visual contract example</text>
<text x="90" y="150" font-family="Helvetica, Arial, sans-serif" font-size="56" font-weight="800" fill="#132238">Reference Artifact: Planner and Publisher Example</text>
<text x="90" y="196" font-family="Helvetica, Arial, sans-serif" font-size="28" fill="#415166">A single planned image that future tickets can reference, render in GitHub, and compare against implementation screenshots.</text>
<g filter="url(#shadow)">
<rect x="88" y="255" rx="34" ry="34" width="650" height="720" fill="#ffffff" opacity="0.96"/>
</g>
<text x="128" y="320" font-family="Helvetica, Arial, sans-serif" font-size="30" font-weight="800" fill="#132238">Planned UI/UX mockup</text>
<text x="128" y="356" font-family="Helvetica, Arial, sans-serif" font-size="22" fill="#58687a">Example of the visual target that would be referenced from a GitHub issue.</text>
<g filter="url(#shadow)">
<rect x="195" y="405" rx="52" ry="52" width="430" height="505" fill="#0e1621"/>
<rect x="214" y="424" rx="42" ry="42" width="392" height="467" fill="url(#phone)"/>
</g>
<rect x="334" y="438" rx="8" ry="8" width="150" height="18" fill="#d8dde5"/>
<text x="250" y="492" font-family="Helvetica, Arial, sans-serif" font-size="34" font-weight="800" fill="#132238">Plan Trip</text>
<text x="250" y="526" font-family="Helvetica, Arial, sans-serif" font-size="20" fill="#66788a">Preview before building</text>
<rect x="250" y="560" rx="22" ry="22" width="320" height="134" fill="#fff4da"/>
<text x="276" y="606" font-family="Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#8b5e00">Next milestone</text>
<text x="276" y="640" font-family="Helvetica, Arial, sans-serif" font-size="34" font-weight="800" fill="#132238">Booking flow</text>
<text x="276" y="672" font-family="Helvetica, Arial, sans-serif" font-size="19" fill="#596777">Use the mockup as the review target.</text>
<rect x="250" y="723" rx="18" ry="18" width="148" height="112" fill="#d8effb"/>
<rect x="422" y="723" rx="18" ry="18" width="148" height="112" fill="#ebf5e7"/>
<text x="274" y="770" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="700" fill="#124260">Design</text>
<text x="274" y="798" font-family="Helvetica, Arial, sans-serif" font-size="16" fill="#4b6b7f">Reference image</text>
<text x="446" y="770" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="700" fill="#32502c">Proof</text>
<text x="446" y="798" font-family="Helvetica, Arial, sans-serif" font-size="16" fill="#577253">Screenshot match</text>
<g filter="url(#shadow)">
<rect x="796" y="255" rx="34" ry="34" width="716" height="720" fill="#ffffff" opacity="0.96"/>
</g>
<text x="836" y="320" font-family="Helvetica, Arial, sans-serif" font-size="30" font-weight="800" fill="#132238">How the ticket should use it</text>
<text x="836" y="356" font-family="Helvetica, Arial, sans-serif" font-size="22" fill="#58687a">Contract fields that future planner and publisher changes should materialize.</text>
<rect x="836" y="392" rx="22" ry="22" width="636" height="145" fill="#eef4fb"/>
<text x="866" y="438" font-family="Helvetica, Arial, sans-serif" font-size="24" font-weight="800" fill="#132238">Reference artifact metadata</text>
<text x="866" y="476" font-family="Helvetica, Arial, sans-serif" font-size="21" fill="#33485d">kind: ui-mockup</text>
<text x="1160" y="476" font-family="Helvetica, Arial, sans-serif" font-size="21" fill="#33485d">comparison: screenshot-review</text>
<text x="866" y="510" font-family="Helvetica, Arial, sans-serif" font-size="21" fill="#33485d">status: published example</text>
<rect x="836" y="572" rx="22" ry="22" width="300" height="126" fill="#fff0ea"/>
<text x="866" y="618" font-family="Helvetica, Arial, sans-serif" font-size="22" font-weight="800" fill="#7a2f12">Planner</text>
<text x="866" y="652" font-family="Helvetica, Arial, sans-serif" font-size="18" fill="#624d43">Task must declare</text>
<text x="866" y="680" font-family="Helvetica, Arial, sans-serif" font-size="18" fill="#624d43">reference_artifact_ids</text>
<rect x="1172" y="572" rx="22" ry="22" width="300" height="126" fill="#eaf5ea"/>
<text x="1202" y="618" font-family="Helvetica, Arial, sans-serif" font-size="22" font-weight="800" fill="#204d25">Publisher</text>
<text x="1202" y="652" font-family="Helvetica, Arial, sans-serif" font-size="18" fill="#4d624f">Issue must embed or link</text>
<text x="1202" y="680" font-family="Helvetica, Arial, sans-serif" font-size="18" fill="#4d624f">the artifact in GitHub</text>
<rect x="836" y="736" rx="22" ry="22" width="636" height="184" fill="#132238"/>
<text x="872" y="786" font-family="Helvetica, Arial, sans-serif" font-size="24" font-weight="800" fill="#ffffff">Definition of done</text>
<text x="872" y="830" font-family="Helvetica, Arial, sans-serif" font-size="20" fill="#dce5ef">1. The ticket body shows the planned visual artifact clearly.</text>
<text x="872" y="866" font-family="Helvetica, Arial, sans-serif" font-size="20" fill="#dce5ef">2. Execution compares implementation output against the artifact.</text>
<text x="872" y="902" font-family="Helvetica, Arial, sans-serif" font-size="20" fill="#dce5ef">3. Closing evidence includes screenshots or diagram comparison proof.</text>
<text x="90" y="1044" font-family="Helvetica, Arial, sans-serif" font-size="22" fill="#526170">Example artifact generated for Project 28 issue-body rendering validation.</text>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment