wireframe: Paperclip Agent Skill

assets/template-mobile.svgBrowse 7 files

316 tokens

925 bytes
Token encoding: o200k_base
Snapshot 5b913e7

1<svg xmlns="http://www.w3.org/2000/svg" width="375" height="812" viewBox="0 0 375 812"2     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">3  <!-- canvas -->4  <rect x="0" y="0" width="375" height="812" />5 6  <!-- 8px grid guides -->7  <g data-region="grid" stroke="#e6e6e6" stroke-width="0.5" fill="none">8    <path d="M 16 0 V 812" stroke="#d33" stroke-dasharray="2 4" />9    <path d="M 359 0 V 812" stroke="#d33" stroke-dasharray="2 4" />10    <!-- safe-area top (status bar 44px) and bottom (home indicator 34px) -->11    <line x1="0" y1="44" x2="375" y2="44" />12    <line x1="0" y1="778" x2="375" y2="778" />13  </g>14 15  <!-- replace this comment with your mobile wireframe primitives.16       Mobile defaults:17         - 16px outer margin (content width 343)18         - 48px tap target minimum19         - status-bar reserve 0-44, home-indicator reserve 778-81220   -->21</svg>22

Referenced from SKILL.md

SKILL.mdView in source ↗

191- `assets/template.svg` — blank desktop canvas with hidden 8px-grid guides; copy as a starting point.192- `assets/template-mobile.svg` — same for 375×812 mobile.193- `assets/site-template.html` — minimal review-viewer page (sticky TOC + responsive collapse + lightbox). Copy to `design/<task-slug>/index.html` and fill in the sections when the user requests a website.